最為常見的信息收集表單，卻最容易忽視它的體驗。

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

對於設計師而言，如何設計出一個體驗優秀的表單？我總結了這 5 大策略：

填寫流程與問題設計

1. 足夠精簡的填寫流程

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

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

2. 多頁填寫要有進程提示

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

3. 問題設計的4個方法

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

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

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

4. 用戶不關心冒號

不要糾結冒號，用戶不關心冒號，他們只關心自己要填寫什麼信息。

5. 主動作與次動作

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

次動作主要有取消、重製、返回、預覽、導出、導入等，這類操作屬於次要層級，主要屬性是打斷當前流程或者對當前信息的操作，視覺層級也處於次要。

選擇合適的輸入框

1. 輸入框的類型

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

輸入框主要有複選框、單選鈕、下拉菜單、文本框、列表框（極少使用）；輸入框組類型有複合輸入框、關聯輸入框、父子輸入框等。

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

2. 標籤、輸入框的對齊

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

慎用框內提示，當輸入內容過多時，可能會忘記這個提示，適用於簡單的輸入框，如註冊、登錄界面的表單。

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

3. 選填與必填

經過無數產品長時間的教育，用戶已經知道帶星號*（或是紅點 · ）的必填項，當必填項多於選填項時，可以標記清楚選填項，而不是所有必填項加星號，這樣可以減輕視覺負擔。

合理使用幫助提示

1. 盡可能減少幫助提示

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

2. 幫助提示的5種樣式

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

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

3. 自動即時幫助

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

4. 成功提示

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

信息驗證

1. 錯誤提示的驗證

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

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

錯誤提示需要和輸入位置緊密相關，以便用戶可以清晰看到是什麼位置出現了什麼錯誤。

2. 即時驗證的時機

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

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

3. 輸入限制需實時提示

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

其他輸入

1. 默認狀態

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

2. 層疊樣式

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

總結

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

如需深入研究表單設計，可以翻看一下這本書。

你還可以了解一下目前市場上主流的組件庫，對於表單設計也會有很大幫助：

• ant design：ant.design
• element：https://element.eleme.cn
• material design: https://www.material.io

閱讀文章 >>

歡迎關注作者微信公眾號：「自言自君」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊平台_5大策略，幫你設計一個體驗優秀的Web端表單