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

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

1烈掠、梳理邏輯，保留必需

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

讓問題保持直觀的順序矫限。你應(yīng)當(dāng)站在用戶的角度按照邏輯提問題，而非按照程序或者數(shù)據(jù)庫的邏輯。如果問題之間沒有邏輯存在叼风，那么可以按照字母順序來排布取董。

以直覺的順序組織選項。比如選項為日期的時候无宿，按照周一周二周三這樣的順序來排布茵汰，而非亂序。

時刻反思從用戶那里獲得的信息是否必要孽鸡，如何使用经窖。這樣做是為了消除不必要的選項，提升完成率梭灿。

2画侣、使用單列列表布局

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

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

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

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

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

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

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

5帝璧、標(biāo)簽置于相應(yīng)輸入框的上方

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

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

6震叮、支持靈活多樣的格式

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

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

7画切、不要混用占位符和字段標(biāo)簽

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

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

一旦用戶點擊輸入框侠坎，標(biāo)簽會消失，用戶容易忘記談需要輸入的內(nèi)容以及形式

當(dāng)用戶看到輸入框中有內(nèi)容填充的時候裙盾，會誤解為這個字段已經(jīng)被填寫而無需輸入了

如果你仍然需要在你的表單中使用占位符实胸，不妨讓占位符以浮動標(biāo)簽的形式而存在。默認(rèn)顯示占位符闷煤，當(dāng)用戶輸入的時候童芹，向上浮動作為標(biāo)簽提醒用戶。

8鲤拿、混淆可選和必填字段

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

9饱须、別用“重置”按鈕

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

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

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

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

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

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

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

結(jié)語

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