摳細(xì)節(jié)！設(shè)計(jì)高效好用表單的10個(gè)技巧

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

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

1、梳理邏輯，保留必需

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

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

2、使用單列列表布局

待填寫(xiě)的多列表單容易讓用戶漏填，并且打斷填寫(xiě)體驗(yàn)。用戶需要按照Z(yǔ)字形的軌跡來(lái)完成整個(gè)表單的填寫(xiě)，這樣不僅影響整個(gè)書(shū)寫(xiě)路徑，降低效率，而且具備一定的干擾性。但如果是使用單列的表單的話，這種填寫(xiě)路徑是單一、直接而更為直覺(jué)高效的。

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

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

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

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

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

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

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

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

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

6、支持靈活多樣的格式

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

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

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

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

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

·一旦用戶點(diǎn)擊輸入框，標(biāo)簽會(huì)消失，用戶容易忘記談需要輸入的內(nèi)容以及形式
·當(dāng)用戶看到輸入框中有內(nèi)容填充的時(shí)候，會(huì)誤解為這個(gè)字段已經(jīng)被填寫(xiě)而無(wú)需輸入了

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

8、混淆可選和必填字段

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

9、別用“重置”按鈕

“重置”很容易讓用戶刪除表單上所有內(nèi)容并且從頭開(kāi)始，這樣的風(fēng)險(xiǎn)太大了，在現(xiàn)實(shí)生活中這個(gè)按鈕實(shí)際從來(lái)沒(méi)有給用戶以幫助，相反因?yàn)檎`觸帶來(lái)的傷害更多一些。

10、提供高可見(jiàn)度和特定的報(bào)錯(cuò)信息

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

·當(dāng)用戶輸入字段之后，應(yīng)該實(shí)時(shí)告知用戶他們填寫(xiě)的信息是對(duì)的還是錯(cuò)的，而不是等他們完成全部信息填寫(xiě)之后再告訴他們出錯(cuò)了。

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

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

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

結(jié)語(yǔ)

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

【技多不壓身的設(shè)計(jì)師才有高薪資！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開(kāi)發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(fā)？》
5. 摳圖技巧：《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門(mén)！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

推薦一個(gè)實(shí)用的微信公眾號(hào)，值得關(guān)注：

原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com