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