表單（不是表格），作為最為常見的頁面模塊，是不是都快忽略它的存在了？回想一下你登陸網(wǎng)站填寫信息、購物填寫地址、填寫調(diào)查問卷、修改個人中心信息時……都是在和表單發(fā)生互動。

01 填寫流程與問題設(shè)計

1.1 足夠精簡的填寫流程

想讓用戶不設(shè)防、還不被打斷填寫完信息，填寫流程就需要足夠精簡，才能讓用戶順暢的完成信息采集，同時需要確保產(chǎn)品所有表單頁面操作的一致性。

你可能遇到過這樣的場景，用社交賬號登陸一個產(chǎn)品，登陸后不是進入首頁，而是繼續(xù)讓你輸入手機號碼后才能使用，這就打斷了用戶填寫信息的流程，失去了好的體驗，甚至可能造成用戶流失。

1.2 多頁填寫要有進程提示

如果填寫信息分為多頁，需要有進程提示，以便用戶知道自己填寫信息的位置、剩余步驟，使用Tab鍵需要能跳轉(zhuǎn)到下一個輸入框。

1.3 問題設(shè)計的4個方法

每一個問題該 保留 還是 刪減 ，是一個值得思考的事情。用戶希望填寫的信息越少越好，可以快點使用產(chǎn)品。所以去掉那些可有可無的問題，保留有價值的問題。

延遲 指的是一些特殊問題后置，讓用戶輸入信息時、不會覺得突兀、門檻太高，比如要收集銀行卡這樣比較重要的信息，不要讓用戶第一個填寫，而是將問題后置。

對于 解釋 ，依舊以收集銀行卡信息為例，需要說明為何收集這條信息，比如用于支付，或者是綁定后支付可以獲得優(yōu)惠等。

1.4 用戶不關(guān)心冒號

不要糾結(jié)冒號，用戶不關(guān)心冒號，他們只關(guān)心自己要填寫什么信息。

1.5 主動作與次動作

表單中的主動作包括提交、保存、繼續(xù)等，它們都帶有繼續(xù)操作下去或者完成操作的屬性，在表單中的視覺效果應(yīng)更突出。

次動作主要有取消、重制、返回、預(yù)覽、導(dǎo)出、導(dǎo)入等，這類操作屬于次要層級，主要屬性是打斷當(dāng)前流程或者對當(dāng)前信息的操作，視覺層級也處于次要。

02 選擇合適的輸入框

2.1 輸入框的類型

輸入框是提供回答問題的方式，有輸入框和輸入框組之分。

輸入框主要有復(fù)選框、單選鈕、下拉菜單、文本框、列表框（極少使用）；輸入框組類型有復(fù)合輸入框、關(guān)聯(lián)輸入框、父子輸入框等。

完整類型的輸入框可以參考ant design組件，它包含了幾乎會使用到的所有類型。

2.2 標(biāo)簽、輸入框的對齊

標(biāo)簽對齊的方式有四種，左對齊、右對齊、頂對齊和輸入框內(nèi)標(biāo)簽。其中頂對齊方式會加快用戶處理速度，因為視線只需要在中間一塊兒移動，但會增加頁面的垂直空間。

慎用框內(nèi)提示，當(dāng)輸入內(nèi)容過多時，可能會忘記這個提示，適用于簡單的輸入框，如注冊、登陸界面的表單。

輸入框的長度會暗示填寫信息的長度，預(yù)先需做好表單中輸入框長度歸類。如果不用暗示信息長度，需要統(tǒng)一輸入框長度。

2.3 選填與必填

經(jīng)過無數(shù)產(chǎn)品長時間的教育，用戶已經(jīng)知道帶星號*（或是紅點 · ）的必填項，當(dāng)必填項多于選填項時，可以標(biāo)記清楚選填項，而不是所有必填項加星號，這樣可以減輕視覺負(fù)擔(dān)。

03 合理使用幫助提示

3.1 盡可能減少幫助提示

不要依賴文字的幫助來彌補表單設(shè)計本身的不足，幫助文字能不用就別使用，如需要使用，要盡可能的簡潔明了，并選擇好提供幫助的時機。

3.2 幫助提示的5種樣式

常見的幫助提示有彈窗、toast（常見于移動端）、snackbar、氣泡和行內(nèi)提示5種樣式，每一種提示的使用場景不同，對用戶當(dāng)前操作影響也不同。

彈窗提示是直接打斷當(dāng)前的操作；行內(nèi)提示可清晰定位提示位置；氣泡提示多用于指示性、信息提示等場景；snackbar類似于toast，都是在頂層出現(xiàn)短時間的操作提示，但snackbar可以附帶操作屬性，如帶有撤銷的按鈕。

3.3 自動即時幫助

即時幫助需要在合適的時間和位置。新浪網(wǎng)注冊頁面，當(dāng)開始填寫手機號碼時，會提示國內(nèi)和海外填寫區(qū)別，如果直接跳轉(zhuǎn)到第二個輸入框，會立刻給出錯誤提示，來引起你的注意。

3.4 成功提示

成功提示屬于整個輸入信息的額外信息，是對用戶完成信息輸入的提示和感謝，所以如果要增加成功提示需要簡短打動人，能夠喚起用戶正向的情緒即可，否則寧可不要成功提示。

04 信息驗證

4.1 錯誤提示的驗證

錯誤提示適用于錯誤率較高，有特定格式要求的問題。

QQ和蝦米音樂的注冊頁面，手機號填寫位數(shù)不對時，跳轉(zhuǎn)到下一個輸入框依舊能通過驗證，到用戶少輸入一位獲取不到驗證碼時，就很難發(fā)現(xiàn)錯誤所在。36kr的注冊界面中，跳轉(zhuǎn)后會給出提示。

錯誤提示需要和輸入位置緊密相關(guān)，以便用戶可以清晰看到是什么位置出現(xiàn)了什么錯誤。

4.2 即時驗證的時機

即使驗證要在輸入之后，而不是輸入過程中。

你可能遇到過，輸入郵箱時，剛開始輸入第一個數(shù)字或者是字母，輸入框后面就提示錯誤，但當(dāng)你輸入完整個郵箱地址后，錯誤提示變成正確提示，這種情況下，你會想是不是哪里出錯了，怎么一直有錯誤提示，這就造成了不必要的困擾。

4.3 輸入限制需實時提示

限制輸入常見于固定信息輸入、或者是輸入較長的文本信息，這樣的提示需要實時提醒用戶。

05 其他輸入

5.1 默認(rèn)狀態(tài)

如果可以，單選按鈕有必要給出默認(rèn)狀態(tài)，提示用戶作出選擇，例如性別的選擇，有的產(chǎn)品除了男、女選項外，會增加一個不想透露（或者保密）作為默認(rèn)選擇。

5.2 層疊樣式

當(dāng)需要顯示很多輸入信息時，或者選項需要單獨考慮時，都可以考慮使用層疊樣式，最常見的層疊樣式就是下拉選擇框、時間日期選擇等。層疊不應(yīng)遮擋住底部信息（尤其選擇信息比較復(fù)雜時可能會忘記底部信息），這樣可能會造成選擇困擾。

總結(jié)

以上內(nèi)容主要來自Luke Wroblewski的《Web表單設(shè)計》這本書，書雖然是2010年出版的，但其中的很多基礎(chǔ)的知識點到現(xiàn)在依舊通用，同時也適用于移動端產(chǎn)品設(shè)計。

如需深入研究表單設(shè)計，可以翻看一下這本書，想要電子書的可以找我。（來源：人人都是產(chǎn)品經(jīng)理）