起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識5大策略，幫你設計一個體驗優(yōu)秀的Web端表單
在web端上，表單是一種非常常見的存在。那么對設計師來說，如何設計出優(yōu)秀的表單呢？什么樣的表單會帶來良好的用戶體驗呢？筆者將為大家介紹幾個設計策略，希望對你有所幫助。
表單（不是表格），作為最為常見的頁面模塊，是不是都快忽略它的存在了？回想一下你登陸網(wǎng)站填寫信息、購物填寫地址、填寫調查問卷、修改個人中心信息時……都是在和表單發(fā)生互動。
對于設計師而言，如何設計出一個體驗優(yōu)秀的表單？我總結了這 5大 策略：
01 填寫流程與問題設計
1.1 足夠精簡的填寫流程
想讓用戶不設防、還不被打斷填寫完信息，填寫流程就需要足夠精簡，才能讓用戶順暢的完成信息采集，同時需要確保產(chǎn)品所有表單頁面操作的一致性。
你可能遇到過這樣的場景，用社交賬號登陸一個產(chǎn)品，登陸后不是進入首頁，而是繼續(xù)讓你輸入手機號碼后才能使用，這就打斷了用戶填寫信息的流程，失去了好的體驗，甚至可能造成用戶流失。
1.2 多頁填寫要有進程提示
如果填寫信息分為多頁，需要有進程提示，以便用戶知道自己填寫信息的位置、剩余步驟，使用Tab鍵需要能跳轉到下一個輸入框。
1.3 問題設計的4個方法
每一個問題該?保留?還是?刪減?，是一個值得思考的事情。用戶希望填寫的信息越少越好，可以快點使用產(chǎn)品。所以去掉那些可有可無的問題，保留有價值的問題。
延遲?指的是一些特殊問題后置，讓用戶輸入信息時、不會覺得突兀、門檻太高，比如要收集銀行卡這樣比較重要的信息，不要讓用戶第一個填寫，而是將問題后置。
對于?解釋?，依舊以收集銀行卡信息為例，需要說明為何收集這條信息，比如用于支付，或者是綁定后支付可以獲得優(yōu)惠等。
1.4 用戶不關心冒號
不要糾結冒號，用戶不關心冒號，他們只關心自己要填寫什么信息。
1.5 主動作與次動作
表單中的主動作包括提交、保存、繼續(xù)等，它們都帶有繼續(xù)操作下去或者完成操作的屬性，在表單中的視覺效果應更突出。
次動作主要有取消、重制、返回、預覽、導出、導入等，這類操作屬于次要層級，主要屬性是打斷當前流程或者對當前信息的操作，視覺層級也處于次要。
02 選擇合適的輸入框
2.1 輸入框的類型
輸入框是提供回答問題的方式，有輸入框和輸入框組之分。
輸入框主要有復選框、單選鈕、下拉菜單、文本框、列表框（極少使用）；輸入框組類型有復合輸入框、關聯(lián)輸入框、父子輸入框等。
完整類型的輸入框可以參考ant design組件，它包含了幾乎會使用到的所有類型。
2.2 標簽、輸入框的對齊
標簽對齊的方式有四種，左對齊、右對齊、頂對齊和輸入框內標簽。其中頂對齊方式會加快用戶處理速度，因為視線只需要在中間一塊兒移動，但會增加頁面的垂直空間。
慎用框內提示，當輸入內容過多時，可能會忘記這個提示，適用于簡單的輸入框，如注冊、登陸界面的表單。
輸入框的長度會暗示填寫信息的長度，預先需做好表單中輸入框長度歸類。如果不用暗示信息長度，需要統(tǒng)一輸入框長度。
2.3 選填與必填
經(jīng)過無數(shù)產(chǎn)品長時間的教育，用戶已經(jīng)知道帶星號*（或是紅點 · ）的必填項，當必填項多于選填項時，可以標記清楚選填項，而不是所有必填項加星號，這樣可以減輕視覺負擔。
03 合理使用幫助提示
3.1 盡可能減少幫助提示
不要依賴文字的幫助來彌補表單設計本身的不足，幫助文字能不用就別使用，如需要使用，要盡可能的簡潔明了，并選擇好提供幫助的時機。
3.2 幫助提示的5種樣式
常見的幫助提示有彈窗、toast（常見于移動端）、snackbar、氣泡和行內提示5種樣式，每一種提示的使用場景不同，對用戶當前操作影響也不同。
彈窗提示是直接打斷當前的操作；行內提示可清晰定位提示位置；氣泡提示多用于指示性、信息提示等場景；snackbar類似于toast，都是在頂層出現(xiàn)短時間的操作提示，但snackbar可以附帶操作屬性，如帶有撤銷的按鈕。
3.3 自動即時幫助
即時幫助需要在合適的時間和位置。新浪網(wǎng)注冊頁面，當開始填寫手機號碼時，會提示國內和海外填寫區(qū)別，如果直接跳轉到第二個輸入框，會立刻給出錯誤提示，來引起你的注意。
3.4 成功提示
成功提示屬于整個輸入信息的額外信息，是對用戶完成信息輸入的提示和感謝，所以如果要增加成功提示需要簡短打動人，能夠喚起用戶正向的情緒即可，否則寧可不要成功提示。
04 信息驗證
4.1 錯誤提示的驗證
錯誤提示適用于錯誤率較高，有特定格式要求的問題。
QQ和蝦米音樂的注冊頁面，手機號填寫位數(shù)不對時，跳轉到下一個輸入框依舊能通過驗證，到用戶少輸入一位獲取不到驗證碼時，就很難發(fā)現(xiàn)錯誤所在。36kr的注冊界面中，跳轉后會給出提示。
錯誤提示需要和輸入位置緊密相關，以便用戶可以清晰看到是什么位置出現(xiàn)了什么錯誤。
4.2 即時驗證的時機
即使驗證要在輸入之后，而不是輸入過程中。
你可能遇到過，輸入郵箱時，剛開始輸入第一個數(shù)字或者是字母，輸入框后面就提示錯誤，但當你輸入完整個郵箱地址后，錯誤提示變成正確提示，這種情況下，你會想是不是哪里出錯了，怎么一直有錯誤提示，這就造成了不必要的困擾。
4.3 輸入限制需實時提示
限制輸入常見于固定信息輸入、或者是輸入較長的文本信息，這樣的提示需要實時提醒用戶。
05 其他輸入
5.1 默認狀態(tài)
如果可以，單選按鈕有必要給出默認狀態(tài)，提示用戶作出選擇，例如性別的選擇，有的產(chǎn)品除了男、女選項外，會增加一個不想透露（或者保密）作為默認選擇。
5.2 層疊樣式
當需要顯示很多輸入信息時，或者選項需要單獨考慮時，都可以考慮使用層疊樣式，最常見的層疊樣式就是下拉選擇框、時間日期選擇等。層疊不應遮擋住底部信息（尤其選擇信息比較復雜時可能會忘記底部信息），這樣可能會造成選擇困擾。
總結
以上內容主要來自Luke Wroblewski的《Web表單設計》這本書，書雖然是2010年出版的，但其中的很多基礎的知識點到現(xiàn)在依舊通用，同時也適用于移動端產(chǎn)品設計。
如需深入研究表單設計，可以翻看一下這本書，想要電子書的可以找我。
你還可以了解一下目前市場上主流的組件庫，對于表單設計也會有很大幫助：
- ant design：ant.design
- element：https://element.eleme.cn
- material design:?https://www.material.io
好，關于表單設計，就這么多了。。。
作者&公眾號：自言自君
本文由@自言自君?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
