不論WEB還是APP，表單是一個產(chǎn)品最基礎的模塊。只要你的用戶需要錄入信息，就必然會面對表單。表單設計是一個產(chǎn)品經(jīng)理的基本功，好的表單設計可以提升用戶效率，讓用戶愉悅；差的表單設計會讓用戶抓狂，甚至放棄。
本文從表單布局出發(fā)，延伸到表單中各個元素的設計經(jīng)驗，希望能給你在表單設計時帶來一些啟發(fā)。
本次分享的目錄
布局
打開一個表單，首先影響用戶的關鍵因素便是表單的布局，布局決定了整個表單的展示邏輯。布局需要考慮的因素：結構，分組聚合，排列順序。
結構
結構分為單列和多列。為了保持統(tǒng)一的用戶視覺信息線，在通常情況下應該使用單列的表單結構。在WEB項目中，單頁表單數(shù)量非常大的情況下，可以考慮使用多列表單結構。
單列的表單結構提供了自上而下清晰視覺線索，引導用戶按照產(chǎn)品設計的邏輯逐步填寫信息。
多列的表單結構讓用戶必須以Z模式進行表單掃描，會降低用戶的理解速度，可能會造成用戶偏離產(chǎn)品設計預期的信息線，造成填寫邏輯錯誤或漏填信息。
分組聚合
將相關字段分組集合。類似對話的方式，從一組問題到下一組問題。將相關的問題聚合在一起，能幫助用戶理解需要填寫的信息。
排列順序
無論是分組還是表單字段或是字段對應的選擇項，都需要按照邏輯嚴格排序。例如：注冊頁面，總是先填寫賬號信息分組再填寫個人信息分組；付款詳情頁面總是先填寫信用卡號再填寫驗證碼。
在表單架構的基礎上，表單由4個表單基本元素構成：
1.標簽
2.表單域
3.動作
4.提示信息
標簽
標簽是整個表單中用戶第一時間接觸的元素，用戶告知用戶表單需要填寫什么。優(yōu)秀的標簽設計可以讓用戶快速清晰地了解表單目的，高效完成填寫，避免產(chǎn)生歧義。
標簽在展示樣式上分為左標簽，頂部標簽，行內標簽。
左標簽
左標簽在web端是比較主流的設計，缺點是對橫向空間占用較大。在對齊方式上可以分為左對齊標簽和右對齊標簽
左對齊標簽
左對齊標簽，左側對齊有清晰的閱讀線，用戶可以快讀了解表單需要回答的問題，缺點是右側不對齊導致標簽和相關輸入框相鄰間距增大，增加了用戶填寫表單的難度。需要用戶謹慎填寫的情況下推薦使用左側對齊標簽。
右對齊標簽
右對齊標簽與右側相關輸入框緊密相鄰，填寫的難度降低，缺點是左側不對齊，沒有清晰的閱讀線，降低了可讀性。需要用戶快讀填寫的情況下推薦使用右對齊標簽。
頂部標簽
標簽位于輸入框的頂部，可以節(jié)約橫向空間，但會浪費縱向空間，橫向寬度有限的移動端推薦使用。根據(jù)標簽的展示方式，可以分為固定標簽和浮動標簽。
固定標簽
傳統(tǒng)的頂部固定標簽布局，設計時需要注意留出合理元素的行間距以驅動不同填寫元素。由于標簽與輸入框的上線排布方式，用戶填寫時需要上下調整視覺線來確認填表信息，存在一定的閱讀障礙。
行內標簽
即標簽位于輸入框內，擁有節(jié)約縱向和橫向空間的優(yōu)勢。
行內文本標簽，可以用文字清晰表明輸入框需要填寫的內容，但由于行內標簽的標簽文本在輸入框激活或已輸入狀態(tài)就消失了，會給用戶在填寫中或者填寫完成的檢查過程中帶來困難。產(chǎn)品設計應盡量避免使用此類標簽。
行內圖標標簽
行內圖標標簽，可以配合行內輸入提示，在最左側加入圖標標簽，以優(yōu)化行內標簽無法檢查的弊端。但是很多文字標簽是無法準確由圖標描述的，所以在不確定是否能準確用圖標表明標簽意圖的情況下，應謹慎使用行內圖標標簽。
浮動標簽
浮動標簽在未填寫或未激活的狀態(tài)為行內標簽樣式，在激活或已填寫的狀態(tài)下為頂部標簽。浮動標簽是行內標簽和頂部標簽的結合體，移動端推薦此設計；消除了頂部標簽的閱讀障礙，同時解決了行內標簽填寫后高效無法檢查的弊端。
表單域
表單域是用戶填寫錄入信息的區(qū)域。好的表單域設計應該盡可能簡化操作步驟，提升用戶的填寫效率。
表單域按照填寫方式分為：文本框，選擇框。
文本框
需要用戶手動填寫或通過其他方式錄入數(shù)據(jù)。文本框設計應該引導用戶進行正確快捷的填寫。
如單行文本框中若有固定輸入長度的可以通過文本框長度來提示用戶輸入，
如驗證碼文本框，有固定長度輸入信息，如驗證碼，銀行卡號，手機號，身份證號等，可以通過輸入框長度或輸入框數(shù)量來限制用戶輸入，減少不確定性。
多行文本框
若有輸入限制的，應當在輸入框內給出輸入限制提示。
選擇框
用戶需手動選擇的輸入項，從輸入形式上可以分為：單選框，多選框，滑塊選擇，下拉框，文件選擇。
單選框
即radiobox，英文意思比較直接，就是從收音機的單選按鈕衍生得來，即只能同時選中一個功能。
與收音機一樣，在網(wǎng)頁中兩個或以上的互斥選項被歸為一個單選按鈕組，用戶只能選中按鈕組中的一個選項，單選按鈕組能有效的防止用戶錄入錯誤的數(shù)據(jù)。
在使用單選按鈕時需要有幾點設計原則需要注意：
1.選中動作不能代替執(zhí)行命令
選項僅用來改變設置，不應該在用戶選中的時候執(zhí)行生效命令，執(zhí)行動作應該放在動作按鈕上（例如“確定”或“下一步”）,且提供次動作以便用戶返回或撤銷設置。
2.設置一個默認選項
不要讓用戶困惑，選項中，必然有個一選項是產(chǎn)品推薦的選項?？梢赃x擇頻次最高的選項，或是產(chǎn)品主推的選項；在一些業(yè)務場景中，入填寫地理位置，我們可以根據(jù)用戶的定位來設置默認選項。
3.避免使用下拉菜單
在選項少于7個的單選組中，應當使用平鋪的單選按鈕組。以避免下拉菜單帶來的選項無法全部預覽和操作效率不高的劣勢。
復選框
一組選項中，用戶可以選中一個或多個選項的，應當使用復選框。復選框的設計與單選框類似，但在界面上需要有明顯的區(qū)分，以告知用戶可以多選還是僅能單選。一般采用圓形選框來表示單選，使用方形選框來表示多選。不管是否使用通用標準，你的產(chǎn)品應該在所有頁面中表現(xiàn)一致，避免讓用戶感到頭疼。
在選項描述中，應當避免使用否定語言，即使是故意的引導性的產(chǎn)品小把戲也不應使用否定語言，對用戶非常不友好。
滑塊選擇
滑塊選擇適用于對精度要求不高的數(shù)據(jù)錄入，所以多用在篩選功能中，通過拖動設置篩選范圍的臨界值。在移動端是常見的交互方式。
滑塊選擇有兩點設計可以提高體驗：
1.預設上下臨界值
在篩選前，所篩選的數(shù)據(jù)范圍的上線臨界值應設置為滑塊的上下臨界值，以便用戶對篩選的數(shù)據(jù)有明確的預期，也可以使滑塊更為準確。
2.可以在滑動塊上加入對應數(shù)據(jù)量的體現(xiàn)
可以以直方圖的形式，例如Airbnb的滑塊篩選。價格上方的直方圖面積代表了該價格對應的房源結果數(shù)量，用戶可以很好的預期和調整搜索結果。
下拉框
選項較多的單選組，可以使用下拉框。由于選項較多，需要有直觀的選項排序，以便用戶快速找到需要的選項。國家，省份等標準的選擇項可以按照拼音或英文首字母的順序排列，業(yè)務上的非標準選項推薦按照使用頻次遞減進行排序。
動作
填寫完表單內容，接下來就是下一步操作。我們成為表單元素中的“動作”。動作范圍主要動作和次要動作，主要動作便是用戶的提交動作，通常為“提交”或“下一步”等，次動作為“返回”，“取消”等輔助操作。
動作按鈕中注意以下幾點可以提高用戶體驗：
1.表單填寫完成前禁用提交動作
完成填寫后及時改變狀態(tài)，給予反饋。及時告知用戶何時可以提交表單，防止錯誤。同時，在點擊完按鈕系統(tǒng)提交的過程中，應有反饋表明正在提交，以防止用戶重復點擊提交。
2.主次動作明顯視覺區(qū)分
主動作絕大部分用戶的使用路徑，產(chǎn)品設計應該在用戶不閱讀動作按鈕文字的情況下就能找到主動作按鈕，降低出錯率。
3.直觀的號召性的動作按鈕描述
可以考慮使用號召性的描述語言，來提升產(chǎn)品活力，提高轉化。例如，產(chǎn)品介紹頁中的“注冊“可以優(yōu)化為“立即免費注冊”。
表單域最后的元素便是提示信息
在用戶填寫前可能無法準確理解標簽的意圖；可能在填寫過程中會存在填寫錯誤；可能在提交時存在錯誤或漏填。對于上面的場景，在產(chǎn)品設計時都需要周全考慮，并設計準確，易懂，友好的提示信息。
填寫前-填寫中-填寫后是三個遞進的狀態(tài)，越早的防止用戶錯誤，也就會有越好的用戶體驗，所以產(chǎn)品設計應當考慮的是怎么防錯及容錯。
填寫前
對于邏輯復雜或專業(yè)度高的標簽信息，可以采用說明的形式來幫助用戶理解。
產(chǎn)品的大部分用戶均知道標簽的意義（換句話說，此時的提示是一個低頻需求）時可以考慮收起提示說明，采用激活的形式來被動提示（hover或是用戶點擊小問號），使頁面更簡潔易讀。
填寫中
在填寫中，對用用戶的錯誤輸入應該及時反饋，比較好的方式是輸入框變色并緊挨輸入框防止對應的錯誤提示信息。提示的時機建議在用戶輸入過程中產(chǎn)生了錯誤信息便開始提示；若用戶始終輸入正確便不必提示避免打擾用戶。
填寫后
有的信息需要后端驗證才能返回正確性，所以需要設計點擊主動作按鈕之后的提示信息。傳統(tǒng)的彈窗提示其實效率很低，首先用戶必須要關閉彈窗才能修改錯誤信息，其次關閉彈窗后用戶可能已經(jīng)無法準確回憶起錯誤提示內容，造成修改困難。所以建議同樣使用錯誤框變色并加上提示文字的方式進行。在較長的頁面可能會存在提交按鈕與錯誤信息不在同一屏的情況；所以對于長頁面需要使用變色框+toast提示窗的組合提示。
以上便是從布局到元素的表單設計建議。當然，不是絕對，不同場景需要根據(jù)自身情況作出取舍和創(chuàng)新。你在表單設計中有哪些提升效率和體驗的設計，歡迎在留言中交流。
來源：向陽三木 原創(chuàng)作品
文章推薦：
