無論你是做什么產品的印衔，我相信表單設計的需求都是非常常見的紊选，但是也是容易被忽略的轿腺。跟以往不同的是两嘴，寫這篇文章并不是我多有經(jīng)驗，而是我意識到自己的表單體驗很糟糕族壳，一直以來我覺得表單設計的需求簡單且索然無味憔辫，更愿意去把精力投入有挑戰(zhàn)性的需求上。后來發(fā)現(xiàn)往往是這些糟糕的表單把用戶與平臺溝通的入口堵死了仿荆，于是花了一段時間專門研究表單設計贰您，反省下自己。
寫完這篇估計可以集齊夏日繽紛全家桶了拢操。
數(shù)據(jù)表格設計：從功能锦亦、交互和UI進行全方位分析
圖表設計總結：數(shù)據(jù)可視化的精益之道
表單設計總結：構建有趣的界面“對話”······就是這篇
前言
定義：表單在網(wǎng)頁中主要負責數(shù)據(jù)采集功能。
原則
1.減少用戶操作令境。
繁瑣的表單一直被人們所詬病杠园，減少用戶的操作可以提高用戶的輸入效率，從而提高用戶的轉化率舔庶。比如表單中需要用戶提供地址信息抛蚁，點擊“我的位置”可以自動獲取地理信息，避免了用戶填寫長長的地址的煩惱惕橙，在移動場景下大大節(jié)省了用戶的操作時間瞧甩。
2.減少用戶思考。
凡是涉及數(shù)據(jù)的設計都有這個特點弥鹦，你需要很直觀的向用戶展示他最終所要付出的或他所能得到的肚逸。比如AA收款，用戶填寫總金額和總人數(shù)彬坏，這時候自動展現(xiàn)人均收款朦促，是不是更人性化了~
3.減少操作誤差。
給表單配上規(guī)則栓始，會使你的表單更加聰明思灰。比如需要用戶輸入銀行卡號，自動空格斷行可以避免填寫錯誤混滔。
內容
1.保留
保留必要信息的錄入框洒疚，比如用于找回密碼的聯(lián)系方式，手機號或郵箱坯屿。
2.刪減
要明確表單填寫的目的油湖，剔除掉其余非必要的信息。比如購物網(wǎng)站的注冊表單领跛，像學歷的錄入框乏德，不但增加了用戶的操作時間，而且毫無意義。
3.延遲
有些問題不需要馬上獲得答案喊括，可以在使用過程中引導用戶完善胧瓜，有效簡化了用戶的注冊流程。比如等到用戶進行結算時再請求輸入收貨地址郑什。
4.解釋
涉及到用戶隱私問題的選項府喳，給予解釋，降低了用戶的使用負擔蘑拯。比如要求用戶填寫手機號钝满，可以告訴用戶手機號是用于登錄和找回密碼。
功能
1.標簽
(1)必填項和選填項
只標注少數(shù)申窘，減少信息量弯蚜。大多數(shù)必填，標明“選填項”剃法。大多數(shù)選填碎捺，標明“必填項”。如果差不多贷洲，標注必填項即可收厨。
(2)標簽大小寫
建議句首字母大寫，更快地遵循語法恩脂。避免使用全大寫帽氓，不專業(yè)而且難讀趣斤。
2.輸入框
(1)選擇適當?shù)念愋?br>
合理選擇輸入框的類型可以引導用戶正確填寫表單俩块。比如時間選擇器限定了該輸入框的輸入內容為時間類型。
(2)默認內容
默認內容可以提示用戶需要輸入的內容浓领，避免用戶誤操作玉凯。也可以預填充輸入框內容，減少用戶操作联贩，但是預填充內容必須是用戶需要的漫仆，不然會達到適得其反的效果。
3.幫助信息
為用戶填寫答案提供有用的線索泪幌。
(1)不熟悉要求填入的數(shù)據(jù)盲厌。比如什么是PAC代碼？
(2)質疑為何要填入特定數(shù)據(jù)祸泪。比如為什么要填寫郵箱吗浩？
(3)關心數(shù)據(jù)安全或者隱私。比如填寫信用卡賬號没隘。
(4)系統(tǒng)推薦數(shù)據(jù)填寫方式懂扼。比如用逗號分開標簽。
4.反饋信息
(1)成功信息
用戶填寫成功，需要有清晰的成功反饋阀湿，給予用戶鼓勵赶熟。
(2)錯誤信息
明確每個輸入框產生錯誤的原因，并給出清晰的解決方法陷嘴。
(3)警告信息
格式正確映砖，但是有外部條件限制，比如用戶名已被占用罩旋。
(4)提示信息
給予用戶正確填寫表單的線索啊央，減少操作誤差。
5.操作按鈕
(1)主動作和次動作
主動作表示用戶填寫表單的主要操作方式涨醋。比如保存瓜饥、提交。主動作也可以包含兩個意思浴骂，比如同意并提交乓土。次動作表示用戶填寫表單的次要操作方式，大多數(shù)是用來撤銷內容溯警。比如取消趣苏、重置。
(2)按鈕反饋
用戶提交數(shù)據(jù)到服務器進行交互需要一定的時間梯轻。為了避免重復提交食磕，可以將按鈕置灰讓用戶無法點擊，并且加入進度條或加載樣式表示提交正在進行中喳挑。
6.步驟條
步驟條可以讓流程的所有步驟清晰可見彬伦。這里有四個原因可以解釋多步形式的有效性：
(1)表單各模塊性質不同，比如注冊微店設置賬號信息和設置店鋪信息是明顯不同的模塊伊诵。
(2)表單是基于不同時間點单绑。比如淘寶買家退款的流程進度條，分為退款申請曹宴，退款處理和退貨給賣家搂橙，十分清晰地告知用戶退款的每個進程變化，給予用戶安全感笛坦。
(3)通過在一個多步驟表單的最后一步請求敏感信息（電子郵件区转、電話），用戶更有可能填寫這些字段——否則它們會丟失填寫前一步所取得的進展（這是一種被證實的認知偏差版扩，被稱為“沉沒成本謬論”）废离。
(4)通過查看進度條，用戶更有動力完成表單资厉。這又是基于許多被證明的認知偏差厅缺，如被賦予的進步效應。
交互
1.邏輯排序
有邏輯性地組織標簽，使表單像對話一般自然流暢湘捎。比如通常情況下會要求提供用戶名才設置密碼诀豁，先設置密碼再要求填寫用戶名真的不要太奇怪！還要考慮使用頻率窥妇，按使用頻率由高到低排列舷胜。
2.清晰的瀏覽線
合理地組織標簽、操作按鈕和提示文字的排版活翩，引導用戶的視線在同一方向流動烹骨，降低用戶的視覺負擔。
3.即時校驗
(1)確認
適用于錯誤率高材泄、或者有特定格式要求的問題沮焕。比如確認用戶名是否被占用。
(2)建議
適用于有大量可選擇有效答案的情況拉宗。比如建議密碼的格式峦树，從而保證賬號安全性。
(3)限制
適用于有填寫限制的情況旦事。比如輸入框有字數(shù)限制時魁巩，顯示限制上限和當前的輸入字數(shù)，讓用戶把握輸入字數(shù)姐浮。
4.提供幫助
在標簽和輸入框旁邊增加幫助文字谷遂，告訴用戶應該如何回答問題。
(1)自動即時幫助
顯示在對應輸入框附近卖鲤，表示對應輸入框的提示肾扰。適用于幫助文字較少的局部說明。
(2)用戶激活的即時幫助
通常采用圖標扫尖、按鈕白对、圖片掠廓、文本鏈接提示人們有幫助可提供换怖，例如問號圖標。適用于幫助文字較少的全局說明蟀瞧。
(3)用戶激活的區(qū)域幫助
始終顯示在某個特定區(qū)域而不是輸入框附近沉颂。適用于幫助文字非常多的全局說明。
5.對齊方式
(1)標簽
根據(jù)馬泰奧·彭佐的2006年的標簽對齊眼動實驗結果表明悦污。標簽的對齊方式在理論效率上比較：頂對齊>右對齊>左對齊铸屉。
- 頂部對齊。適用于水平空間有限的情況切端。
優(yōu)點：和輸入框聯(lián)系非常緊密彻坛，從上至下的視覺路徑清晰流暢，填寫效率很高昌屉。
缺點：大量占用垂直空間钙蒙，不適用于輸入框較多的表單。 - 右對齊间驮。適用于垂直空間有限的情況并且需要用戶快速填寫的情況躬厌。
優(yōu)點：和輸入框聯(lián)系較為緊密，并且減少占用垂直空間竞帽。
缺點：標簽可讀性不強扛施，降低快速瀏覽完表單的效率。 - 左對齊屹篓。適用于垂直空間有限并且需要用戶謹慎填寫的情況疙渣。
優(yōu)點：標簽可讀性強，并且減少占用垂直空間堆巧。
缺點：和輸入框聯(lián)系不緊密昌阿，增加用戶填寫表單的時間。 - 輸入框內對齊恳邀。適用于水平和垂直空間有限的情況懦冰。
優(yōu)點：與輸入框聯(lián)系緊密，并且減少占用水平和垂直空間谣沸。
缺點：標簽隨輸入內容而消失刷钢，復核表單信息較困難。 - 懸浮標簽乳附。結合了頂部對齊和輸入框內對齊的情況内地。
優(yōu)點：和輸入框聯(lián)系最緊密，填寫效率最高赋除，并且減少占用水平和垂直空間阱缓。
缺點：稍微占用了垂直空間，標簽字號太小容易造成可讀性問題举农，不過缺點不是很明顯荆针。
(2)操作按鈕
為了評估哪一種主動作和次動作的效果最好，Luck(Web表單設計作者)和倫敦的可用性測試公司Etre使用眼動跟蹤和可用性指標對此進行了測試颁糟。
方案A航背、B和C完成任務更快、更有效棱貌。只有E方案表現(xiàn)很差玖媚，錯誤點擊了取消按鈕。使用F方案時婚脱，人們的眼球定位時間最長今魔。
根據(jù)收集的數(shù)據(jù)勺像，所有方案中最有效的設計都有共同特征：提交和關閉按鈕左對齊排列，與上方輸入框和標簽對齊错森。
UI
1.營造氛圍
(1)品牌基因
在表單也植入品牌的元素咏删，比如顏色，會使整體界面設計風格協(xié)調问词，使得品牌基因深入人心督函。
(2)場景氛圍
將線下的表單搬到線上，可以結合線下場景讓用戶身臨其境激挪，比如預定民宿辰狡。
2.緩解頁面壓力
(1)靜態(tài)：利用線條、空間間隔垄分、顏色宛篇。
對于較為復雜的表單，需要對信息進行整理歸納薄湿，否則雜糅的表單會讓用戶失去填寫的耐心叫倍。合理有層次的組織信息，按照不同信息的類別豺瘤、屬性和相關性進行區(qū)塊的劃分吆倦，利用線條、空間間隔坐求、顏色進行視覺表現(xiàn)蚕泽，給用戶喘息的機會。
(2)動態(tài)：漸進呈現(xiàn)桥嗤。
用戶只有完成當前操作须妻，頁面才漸進展現(xiàn)下一步操作，讓內容的增加順其自然泛领。比如Gogobot在邀請用戶進行評價時荒吏，巧妙地運用高斯模糊后續(xù)內容來緩解用戶的壓力。
3.視覺層級
(1)必填項和選填項
必填項為空渊鞋，則表單無法進行绰更，因此必填項要比選填項的視覺效果強。
(2)主按鈕和次按鈕
主動作的視覺效果要比次動作的視覺效果明顯篓像。
(3)錯誤信息和成功信息
錯誤信息的強調效果要比成功信息強动知，從而吸引用戶注意快速解決問題皿伺。
4.輸入框長度
輸入框的長度可以暗示用戶正確填寫結果的長度员辩。比如證件號的內容較多，所以輸入框要很長鸵鸥。驗證碼一般是四位數(shù)字奠滑，所以輸入框要短丹皱。
5.字體
通過字號來區(qū)分層次重點，強調文字的字號要比輔助的文字要大一點宋税。通過文字大小讓用戶分清重點摊崭。
總結
表單其實是連接系統(tǒng)和用戶的一個重要的橋梁。通過上述的整理杰赛，如何讓用戶在填寫表單時像對話般流暢自然呢簸，相信大家也有一些概念了。
1.溝通前：選取問題要精乏屯。
想想你跟朋友聊天根时，你在一旁講得天花亂墜，但跟主題毫無相關辰晕，那是果斷要被嫌棄的蛤迎。表單也是如此，你需要考慮“保留含友、刪減替裆、延遲、解釋”窘问。
2.溝通中：溝通效率要高辆童。
盡量避免用戶填寫后才告知錯誤，我們應該采取合理的方式規(guī)避根源惠赫。比如約朋友來家里吃飯胸遇，可以提前詢問你的朋友忌口的食物，不然就白費心血了汉形。表單也是如此纸镊，你需要適時提供幫助信息正確引導用戶。
3.溝通后：信息反饋要全概疆。
別人在講話時逗威，偶爾的點頭或者提問可以讓講話的人得到反饋，他會覺得自己是“聯(lián)網(wǎng)”了岔冀，而不是在玩“單機游戲”凯旭。表單也是如此，及時的反饋能讓用戶感覺到自己正在和系統(tǒng)交互中使套，而不是進入了死胡同罐呼。
參考資料
http://www.reibang.com/p/5bcf400b6a8a
http://www.reibang.com/p/af8addad08fd
https://isux.tencent.com/web-form-design.html
http://www.reibang.com/p/13d6b2c6691c
http://www.woshipm.com/pd/646301.html
其實我覺得還是刷《Web表單設計》比較系統(tǒng)，逃(￣▽￣)~*
PS：本文用到的繪圖工具是Balsamiq Mockups侦高，炒雞稀飯這種風格嫉柴，詳情介紹請戳鏈接PM工具盤點：那些鮮為人知卻好用到哭的效率神器
