對于我們設(shè)計(jì)師來說，尤其是現(xiàn)在 B 端設(shè)計(jì)如此流行的情況下，表單設(shè)計(jì)細(xì)節(jié)尤其需要各位設(shè)計(jì)師注意。今天會分享表單設(shè)計(jì)中那些你不注意的細(xì)節(jié)點(diǎn)，必須先點(diǎn)贊收藏了，這些干貨知識相信你一定用的上。

比如以登錄為例，當(dāng)你把密碼輸錯后，網(wǎng)站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數(shù)據(jù)對用戶來說很煩人，這會讓你必須重新輸入用戶名和密碼，即便只是拼錯了密碼而已。

因此，任何專業(yè)的用戶體驗(yàn)設(shè)計(jì)師不僅應(yīng)該考慮順利的流程情況，還應(yīng)該考慮失敗時應(yīng)該怎么辦。

錯誤提示

錯誤提示應(yīng)該讓用戶容易找到原因并方便理解。否則，他們可能沒辦法解決這些錯誤。所以對于設(shè)計(jì)師來說，一個非常重要的目標(biāo)是要設(shè)計(jì)出一個易于解決錯誤的流程。一個錯誤信息應(yīng)該能清晰的解釋到底發(fā)生了什么，如果可能的話，最好也提供解決方案。

左邊的錯誤信息很清晰的解釋了發(fā)生的問題，右邊的錯誤信息對用戶來說非常困惑。

1. 什么時候告知用戶發(fā)生了錯誤比較好？

當(dāng)用戶出錯后，首先要考慮的事情就是應(yīng)該在用戶填表時提醒還是最后通知用戶。錯誤預(yù)警中有三種常見模式：

內(nèi)聯(lián)/實(shí)時：在輸入時或移開焦點(diǎn)后立即提供反饋；

提交后/客戶端：當(dāng)用戶點(diǎn)擊提交按鈕之后；

服務(wù)器端：當(dāng)請求發(fā)送到服務(wù)器后再返回反饋給用戶。

這些方法中的每一種都有其優(yōu)點(diǎn)和缺點(diǎn)。

2. 內(nèi)聯(lián)驗(yàn)證

一般來說，當(dāng)表單非常短小時用內(nèi)聯(lián)驗(yàn)證，因?yàn)樗试S在內(nèi)存中的數(shù)據(jù)仍然最新時更正錯誤。

你可以用內(nèi)聯(lián)驗(yàn)證立即告訴用戶哪里錯了。

3. 提交后驗(yàn)證

另一方面，當(dāng)表單很大且需要保持關(guān)注時，你希望幫助用戶保持專注，而不是通過不斷顯示錯誤來打斷他們。

4. 服務(wù)器端驗(yàn)證

服務(wù)器端驗(yàn)證是最不友好的方式，但卻為網(wǎng)站提供了很高的穩(wěn)定性。當(dāng)需要二次檢查用戶的數(shù)據(jù)時，這種方法最有效。

5. 如何提示用戶錯誤？

錯誤提示告訴用戶他們做錯了，但是他們究竟做錯了什么，要如何修復(fù)它？很顯然，清楚地說明錯誤，而不僅僅是顯示 Error:90803，對用戶有很大幫助。

6. 使用積極語言而不是消極語言

錯誤提示措辭要使用積極語言而不是消極語言。例如，如果用戶遺漏了一個字段，與其說”該字段不應(yīng)該是空的“，不如說”請?zhí)顚懘俗侄巍?。?dāng)使用積極語言時，用戶不會因?yàn)橐粋€錯誤而受到責(zé)備，這能減少用戶的焦慮感，減少流失。

7. 必要時提供幫助

在某些情況下，用戶無法自己修復(fù)錯誤，他需要額外的幫助。例如，當(dāng)用戶無法登錄時，大多數(shù)應(yīng)用只提供找回密碼，而沒有找回用戶名。但事實(shí)上，用戶名和密碼都可能會忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來幫助用戶解決問題。

標(biāo)簽

標(biāo)簽是表單可用性最關(guān)鍵的組成部分。如果標(biāo)簽不清晰，那么其他元素就算把可用性做得再好也沒意義。所以，不要讓用戶來猜測這里面到底要填什么內(nèi)容。

用不要用一些模棱兩可的詞，比如‘?dāng)?shù)字’可能會讓人感到困惑，一定要明確意思。

1. 將標(biāo)簽放在輸入字段的頂部

許多研究表明，將標(biāo)簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因?yàn)樗试S用戶遵循一條垂直線而不是 Z 模式。但是，如果它占用太多的垂直空間，您也可以使用浮動標(biāo)簽。因此，如果你希望用戶更快地填充表單，請將他們放置在字段的頂部。

將標(biāo)簽放置在字段的頂部和使用浮動標(biāo)簽，這兩種方式都很有效

2. 將標(biāo)簽放在輸入字段的左側(cè)

另一方面，當(dāng)你詢問用戶比較復(fù)雜的問題，用戶需要更多時間思考問題答案的時候，研究表明將標(biāo)簽放在輸入框的左側(cè)會比較好。

3. 標(biāo)簽應(yīng)該是可見的，無論什么輸入狀態(tài)

無論你用什么方式，確保當(dāng)用戶填完內(nèi)容后，標(biāo)簽是可見的。因?yàn)?，?dāng)用戶需要再次確認(rèn)表單內(nèi)容的時候，他們不用刪除填好的數(shù)據(jù)來查看系統(tǒng)需要他們填什么。

4. 減少不必要的輸入項(xiàng)

要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項(xiàng)。如果實(shí)在做不到，可以將必填和非必填的字段區(qū)分開，減少用戶的負(fù)擔(dān)。

5. 可見性

不管狀態(tài)如何，字段都應(yīng)該是清晰可辨的。此外，活動字段和非活動字段之間的區(qū)別應(yīng)該要明顯。

用輸入字段應(yīng)該有高對比度，在所有狀態(tài)下都是可見的

6. 自動激活 PC 端表單的第一個字段

自動激活表單的第一個字段，這可以提高處理效率，避免用戶額外點(diǎn)擊。

7. 幫用戶預(yù)先填好

在某些情況下，你可以幫用戶預(yù)先填好字段。例如，可以很容易地檢測到郵政編碼，或者某些數(shù)值可能是頻繁的。在這些情況下，為用戶填充字段。

8. 格式

含有大量小數(shù)的數(shù)字很難讀懂。因此，當(dāng)要求較大的數(shù)字時，需要考慮添加格式以支持可讀性。例如，在詢問卡號時，使用自動格式化:讀取 5678-9876-9738-8394 比讀取 5678987697388394 容易得多。

此外，當(dāng)請求需要特定格式化數(shù)據(jù)時，要包含一個實(shí)例，讓用戶準(zhǔn)確理解要填什么。

輸入字段的大小應(yīng)該與他預(yù)期的數(shù)據(jù)大小相對應(yīng)

10. 為桌面系統(tǒng)設(shè)計(jì)靈活的表單

在鍵盤和鼠標(biāo)之間切換很煩人。在理想的情況下，用戶應(yīng)該只使用一種媒介來填寫表單，但有時，這是不可能實(shí)現(xiàn)的。因此，如果用戶需要多種媒介來填寫表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。

另外，當(dāng)創(chuàng)建一個網(wǎng)頁表單時，要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。

11. 為移動端系統(tǒng)設(shè)計(jì)靈活的表單

當(dāng)在移動設(shè)備上時，將你顯示的鍵盤與用戶必須輸入的數(shù)據(jù)相匹配。我們經(jīng)?？吹叫枰獢?shù)字鍵盤的輸入可以很好地實(shí)現(xiàn)這一點(diǎn)，但幾乎很少有 APP 顯示支持輸入電子郵件地址的鍵盤。

輸支持通過顯示正確的鍵盤輸入電子郵件

下拉菜單 vs 單選按鈕

下拉框的使用比單選按鈕更有挑戰(zhàn)性，因?yàn)樗枰~外的點(diǎn)擊來打開它們。此外，用戶無法提前看到選項(xiàng)，這可能會讓他們感到困惑。因此，如果你只有少量的選項(xiàng)，使用單選按鈕。如果選項(xiàng)的數(shù)量超過 4 個，下拉菜單的效果會更好。

1. 復(fù)選框

通過勾選復(fù)選框，用戶應(yīng)該是同意某些內(nèi)容。我的意思是，他們應(yīng)該說，“是的，我想要這個”，而不是，“是的，我不想要這個”。不幸的是，我經(jīng)?？吹接姓`導(dǎo)性的復(fù)選框試圖在創(chuàng)建賬戶時欺騙人們訂閱他們的產(chǎn)品。當(dāng)你不想訂閱他們的通訊時，你又必須勾選復(fù)選框，像這樣的伎倆對信譽(yù)是不合適的，所以不要動心使用它們。

通過勾選復(fù)選框，用戶應(yīng)該同意某些內(nèi)容，而不是確認(rèn)他們不同意。

結(jié)構(gòu)

一個結(jié)構(gòu)充分的表單就像一個與用戶的良好對話。所以記住這一點(diǎn)，仔細(xì)規(guī)劃結(jié)構(gòu)。

1. 從簡單的問題開始

從簡單的問題開始，從用戶已經(jīng)很清楚知道答案的問題開始，像名字、郵件這類。然后再循序漸進(jìn)問稍微復(fù)雜的問題，像賬戶信息之類的。

首先，一個很自然的順序，當(dāng)你第一次見某些人的時候，你會找一些比較好切入的問題，比如叫什么名字啊之類的。其次，當(dāng)用戶已經(jīng)填了一些字段之后，那么之后會增加他填完表單的機(jī)會。

2. 創(chuàng)建邏輯信息塊

將不相關(guān)的信息按邏輯分組。例如，你可以將結(jié)帳表單分為“個人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個主題。

通過對相關(guān)信息進(jìn)行分組，使表單可被快速掃描

3. 單步 VS 多步表單

當(dāng)你有很多問題要問的時候，你可能想知道哪一個最有效：單步流程還是多步流程。一般來說，單步表單的轉(zhuǎn)化率更高，因?yàn)樗雌饋砀?，而且不會勸退用戶。如果你詢問基本信息并希望用戶快速填寫表單，單步表單就非常不錯。

當(dāng)用戶被要求必須填寫更多復(fù)雜信息時，多步表單會更好。為了幫助用戶在進(jìn)行多步驟填寫時不至于失去耐心，可以給到進(jìn)度條，提示還剩多少步。

4. 單列 vs 多列布局

一般來說，用單列布局會更好，因?yàn)榭梢詭椭脩舾玫貟呙?，也可以盡量減少用戶遺漏填寫。

但當(dāng)用戶多次填寫同一個表單時，他們更喜歡多列表單，因?yàn)檫@樣不會浪費(fèi)時間滾動。一般來說，在 B 端應(yīng)用中這種多列表單會比較合適。

按鈕

設(shè)計(jì)可用的按鈕對提高轉(zhuǎn)化率至關(guān)重要。如果按鈕上的文字內(nèi)容比較模糊，會容易勸退新手用戶。

根據(jù)用戶按下按鈕會發(fā)生什么來命名按鈕

1. 提高用戶的容錯率

對于更復(fù)雜的表單來說，按鈕最重要的一點(diǎn)是，應(yīng)該有提交和取消表單的單一方法。用戶應(yīng)該至少有補(bǔ)救的機(jī)會。舉個例子，如果用戶點(diǎn)了在線幫助時，他已經(jīng)填好的數(shù)據(jù)不應(yīng)該被丟失?；蛘?，如果用戶由于意外點(diǎn)擊了按鈕，請求不應(yīng)該被提交。

2. 主要按鈕和次要按鈕應(yīng)該很容易區(qū)分

為了避免點(diǎn)擊錯誤的按鈕，用戶應(yīng)該能比較容易地區(qū)分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。

讓主要和次要的按鈕樣式上有比較大的區(qū)分度

3. 正確的標(biāo)簽按鈕

按功能明確地標(biāo)注按鈕。例如，如果按一個按鈕可以創(chuàng)建一個賬戶，在按鈕上的文案叫”創(chuàng)建賬戶”要好過“提交”。

總結(jié)

當(dāng)用戶打開表單時，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設(shè)計(jì)給他們設(shè)置障礙。

不幸的是，這里面提到的許多錯誤，并不需要多么高級的技巧，而是因?yàn)樵O(shè)計(jì)沒有同理心。仔細(xì)思考你的設(shè)計(jì)流程，檢查是否能讓所有內(nèi)容對不同背景和專業(yè)知識的人都是清晰的。

通常來說，一般要達(dá)到以下目的，大多數(shù)指導(dǎo)原則都來自這些規(guī)則：

用戶應(yīng)該只輸入一次數(shù)據(jù)

用戶應(yīng)該填盡可能少的信息

用戶應(yīng)該只需要記住少量的信息

用戶檢查和恢復(fù)錯誤內(nèi)容應(yīng)該要很容易

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系

作者：nanaOMO   來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司