如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

不論是網(wǎng)頁設(shè)計還是APP UI設(shè)計，表單都是界面中最常見、最重要的組件之一。它們的應(yīng)用范疇非常廣，用戶注冊、訂閱服務(wù)、用戶反饋、問卷表單、買賣交易等等等等，從數(shù)據(jù)輸入到信息搜索，幾乎無處不在。對于設(shè)計師、前端和開發(fā)者而言，應(yīng)當對于表單的設(shè)計盡量多上心，讓它們更加易用，細致的設(shè)計對于用戶的體驗、交互的效率有極大的加成。

在今天的文章中，你會看到許多關(guān)于表單設(shè)計的切實可行的建議，它們涉及到可用性測試、現(xiàn)場測試、眼動追蹤以及用戶反饋等多個不同的環(huán)節(jié)。

1、梳理邏輯，保留必需

表單是同用戶進行溝通的語言。和任何對話一樣，它應(yīng)當以符合邏輯的方式幫助雙方完成交流。所以，你需要這么做：

• 讓問題保持直觀的順序。你應(yīng)當站在用戶的角度按照邏輯提問題，而非按照程序或者數(shù)據(jù)庫的邏輯。如果問題之間沒有邏輯存在，那么可以按照字母順序來排布。
• 以直覺的順序組織選項。比如選項為日期的時候，按照周一周二周三這樣的順序來排布，而非亂序。
• 時刻反思從用戶那里獲得的信息是否必要，如何使用。這樣做是為了消除不必要的選項，提升完成率。

2、使用單列列表布局

待填寫的多列表單容易讓用戶漏填，并且打斷填寫體驗。用戶需要按照Z字形的軌跡來完成整個表單的填寫，這樣不僅影響整個書寫路徑，降低效率，而且具備一定的干擾性。但如果是使用單列的表單的話，這種填寫路徑是單一、直接而更為直覺的。

3、減少待輸入字段和工作量

減少待輸入的字段能夠讓你的表單更精悍，減少加載時間，對于信息量較大的表單尤其重要。

單純減少輸入的字段數(shù)當然是不夠的，你還要注意用戶填寫表單的方式、內(nèi)容和工作量。通過打字錄入內(nèi)容是一種高交互性的輸入方式，出錯率高，時間成本高，所以，應(yīng)當盡量減少用戶打字輸入的情況，多用復選框、單選按鈕、下拉菜單等選項來降低用戶犯錯的概率。

4、匹配輸入框和內(nèi)容的尺寸

Baymard 研究所通過研究發(fā)現(xiàn)，如果一個字段和輸入框相比太長或者太短，都會讓用戶懷疑他們輸入的內(nèi)容是否正確，而這種情況在CVV（信用卡驗證值）之類的字段輸入時，顯得尤其明顯。

為了保持良好的可用性，你應(yīng)當那個輸入框的寬度，讓它盡量和輸入內(nèi)容的長度保持匹配，適當?shù)谋Ａ艨臻g，能讓用戶更加安心。

5、標簽置于相應(yīng)輸入框的上方

用戶快速瀏覽表單是否足夠方便？如果表單很難為用戶快速掃視，那么填寫所需的時間就更長了。所以，好看好填才是好表單設(shè)計的準則。Matteo Penzo 的文章曾經(jīng)研究過表單中的表單和輸入框應(yīng)該如何布局才能讓用戶更好更快的瀏覽和填寫，結(jié)論是標簽應(yīng)該置于輸入框上方。

如果你想用戶盡快瀏覽，讓標簽和輸入框縱向排列，靠左對齊。請注意，這里說的是快速瀏覽。這樣的布局方式的優(yōu)勢在于，它們不需要太多的橫向的空間，用戶無需左右掃視而只需要向下瀏覽就好了，并且這樣的布局更容易構(gòu)成響應(yīng)式的UI，兼容不同的屏幕和不同的應(yīng)用場景。

6、支持靈活多樣的格式

有些字段的填寫需要用戶進行精準的填寫，但是要求用戶輸入特別精準或者特定格式的內(nèi)容可能會在易用性上存在那么一點問題。如果你要求用戶輸入數(shù)字內(nèi)容（比如電話號碼），那么最好是靈活多樣的，支持多種不同輸入方式和顯示方法，讓人更容易查看（而不是機器），防止出錯。

比如座機電話的格式常常為（777）666 – 5544，這樣的格式更易于用戶查看、記錄和記憶。

7、不要混用占位符和字段標簽

設(shè)計師通常會將文本占位符放到表單內(nèi)，作為額外的提醒，作為示例告知用戶如何填寫。當用戶開始在其中輸入的時候，占位符文本會消失。

有一些設(shè)計師會將出于降低表單長度、降低視覺混亂度的原因，將標簽直接作為占位符置于輸入框內(nèi)。對于簡單的表單設(shè)計，這種設(shè)計影響不大，當表單信息量大，內(nèi)容類型多變的時候，這種方式就不合適了。這種設(shè)計的缺陷在于：

• 一旦用戶點擊輸入框，標簽會消失，用戶容易忘記談需要輸入的內(nèi)容以及形式
• 當用戶看到輸入框中有內(nèi)容填充的時候，會誤解為這個字段已經(jīng)被填寫而無需輸入了

如果你仍然需要在你的表單中使用占位符，不妨讓占位符以浮動標簽的形式而存在。默認顯示占位符，當用戶輸入的時候，向上浮動作為標簽提醒用戶。

8、混淆可選和必填字段

正如同我在之前說過的，盡量避免在表單中加入可選填的字段。但是如果你非得加入，那么至少該明確哪些字段是可選，哪些是必填的。將選填字段控制在1~2個之內(nèi)，并明確告知用戶，這是可選的。

9、別用“重置”按鈕

“重置”很容易讓用戶刪除表單上所有內(nèi)容并且從頭開始，這樣的風險太大了，在現(xiàn)實生活中這個按鈕實際從來沒有給用戶以幫助，相反因為誤觸帶來的傷害更多一些。

10、提供高可見度和特定的報錯信息

理想狀況下，用戶完成表單的填寫，上傳就可以完成任務(wù)。但是實際的狀況下，錯誤不可避免。所以，當錯誤發(fā)生的時候，要以高度可用、可見的形式告知用戶，有問題發(fā)生了，所以，你所提供的報錯信息應(yīng)當符合下面的規(guī)則：

1）當用戶輸入字段之后，應(yīng)該實時告知用戶他們填寫的信息是對的還是錯的，而不是等他們完成全部信息填寫之后再告訴他們出錯了。

2）報錯信息應(yīng)當一目了然，從用色、圖標到文本都應(yīng)當起到高亮的效果，而且報錯信息應(yīng)當靠近輸入框，而非表單的底部或者頂部或者按鍵旁邊。

3）如果輸入格式特定，那么應(yīng)當事先聲明。

4）出現(xiàn)錯誤之后之后，不要將已經(jīng)填寫的表單清空。

結(jié)語

填寫表單的時候，用戶的猶豫是不可避免的，我們應(yīng)當盡量讓這個過程變的便捷而輕松。我們應(yīng)當讓表單設(shè)計成為優(yōu)勢，而非弱點。一個高度有針對性的表單設(shè)計，貼心細致的細節(jié)和體驗，堅持不懈的改良和調(diào)整，快速的提交，順暢的流程，這些才是優(yōu)秀表單應(yīng)有的樣子。

藍藍設(shè)計( yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)