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