無論你是做什么產品的，我相信表單設計的需求都是非常常見的，但是也是容易被忽略的。

跟以往不同的是，寫這篇文章并不是我多有經驗，而是我意識到自己的表單體驗很糟糕，一直以來我覺得表單設計的需求簡單且索然無味，更愿意去把精力投入有挑戰性的需求上。后來發現往往是這些糟糕的表單把用戶與平臺溝通的入口堵死了，于是花了一段時間專門研究表單設計，反省下自己。

寫完這篇估計可以集齊夏日繽紛全家桶了。

數據表格設計：從功能、交互和UI進行全方位分析

圖表設計總結：數據可視化的精益之道

表單設計總結：構建有趣的界面“對話”······就是這篇

前言

定義：表單在網頁中主要負責數據采集功能。

原則

1. 減少用戶操作

繁瑣的表單一直被人們所詬病，減少用戶的操作可以提高用戶的輸入效率，從而提高用戶的轉化率。比如表單中需要用戶提供地址信息，點擊“我的位置”可以自動獲取地理信息，避免了用戶填寫長長的地址的煩惱，在移動場景下大大節省了用戶的操作時間。

2. 減少用戶思考

凡是涉及數據的設計都有這個特點，你需要很直觀的向用戶展示他最終所要付出的或他所能得到的。比如AA收款，用戶填寫總金額和總人數，這時候自動展現人均收款，是不是更人性化了~

3. 減少操作誤差

給表單配上規則，會使你的表單更加聰明。比如需要用戶輸入銀行卡號，自動空格斷行可以避免填寫錯誤。

內容

1. 保留

保留必要信息的錄入框，比如用于找回密碼的聯系方式，手機號或郵箱。

2. 刪減

要明確表單填寫的目的，剔除掉其余非必要的信息。比如購物網站的注冊表單，像學歷的錄入框，不但增加了用戶的操作時間，而且毫無意義。

3. 延遲

有些問題不需要馬上獲得答案，可以在使用過程中引導用戶完善，有效簡化了用戶的注冊流程。比如等到用戶進行結算時再請求輸入收貨地址。

4. 解釋

涉及到用戶隱私問題的選項，給予解釋，降低了用戶的使用負擔。比如要求用戶填寫手機號，可以告訴用戶手機號是用于登錄和找回密碼。

功能

1. 標簽

（1）必填項和選填項

只標注少數，減少信息量。大多數必填，標明“選填項”。大多數選填，標明“必填項”。如果差不多，標注必填項即可。

（2）標簽大小寫

建議句首字母大寫，更快地遵循語法。避免使用全大寫，不專業而且難讀。

2. 輸入框

（1）選擇適當的類型

合理選擇輸入框的類型可以引導用戶正確填寫表單。比如時間選擇器限定了該輸入框的輸入內容為時間類型。

（2）默認內容

默認內容可以提示用戶需要輸入的內容，避免用戶誤操作。也可以預填充輸入框內容，減少用戶操作，但是預填充內容必須是用戶需要的，不然會達到適得其反的效果。

3. 幫助信息

為用戶填寫答案提供有用的線索。

（1）不熟悉要求填入的數據。比如什么是PAC代碼？

（2）質疑為何要填入特定數據。比如為什么要填寫郵箱？

（3）關心數據安全或者隱私。比如填寫信用卡賬號。

（4）系統推薦數據填寫方式。比如用逗號分開標簽。

4. 反饋信息

（1）成功信息

用戶填寫成功，需要有清晰的成功反饋，給予用戶鼓勵。

（2）錯誤信息

明確每個輸入框產生錯誤的原因，并給出清晰的解決方法。

（3）警告信息

格式正確，但是有外部條件限制，比如用戶名已被占用。

（4）提示信息

給予用戶正確填寫表單的線索，減少操作誤差。

5. 操作按鈕

（1）主動作和次動作

主動作表示用戶填寫表單的主要操作方式。比如保存、提交。主動作也可以包含兩個意思，比如同意并提交。次動作表示用戶填寫表單的次要操作方式，大多數是用來撤銷內容。比如取消、重置。

（2）按鈕反饋

用戶提交數據到服務器進行交互需要一定的時間。為了避免重復提交，可以將按鈕置灰讓用戶無法點擊，并且加入進度條或加載樣式表示提交正在進行中。

6. 步驟條

步驟條可以讓流程的所有步驟清晰可見。這里有四個原因可以解釋多步形式的有效性：

（1）表單各模塊性質不同，比如注冊微店設置賬號信息和設置店鋪信息是明顯不同的模塊。

（2）表單是基于不同時間點。比如淘寶買家退款的流程進度條，分為退款申請，退款處理和退貨給賣家，十分清晰地告知用戶退款的每個進程變化，給予用戶安全感。

（3）通過在一個多步驟表單的最后一步請求敏感信息（電子郵件、電話），用戶更有可能填寫這些字段——否則它們會丟失填寫前一步所取得的進展（這是一種被證實的認知偏差，被稱為“沉沒成本謬論”）。

（4）通過查看進度條，用戶更有動力完成表單。這又是基于許多被證明的認知偏差，如被賦予的進步效應。

交互

1. 邏輯排序

有邏輯性地組織標簽，使表單像對話一般自然流暢。比如通常情況下會要求提供用戶名才設置密碼，先設置密碼再要求填寫用戶名真的不要太奇怪！還要考慮使用頻率，按使用頻率由高到低排列。

2. 清晰的瀏覽線

合理地組織標簽、操作按鈕和提示文字的排版，引導用戶的視線在同一方向流動，降低用戶的視覺負擔。

3. 即時校驗

（1）確認

適用于錯誤率高、或者有特定格式要求的問題。比如確認用戶名是否被占用。

（2）建議

適用于有大量可選擇有效答案的情況。比如建議密碼的格式，從而保證賬號安全性。

（3）限制

適用于有填寫限制的情況。比如輸入框有字數限制時，顯示限制上限和當前的輸入字數，讓用戶把握輸入字數。

4. 提供幫助

在標簽和輸入框旁邊增加幫助文字，告訴用戶應該如何回答問題。

（1）自動即時幫助

顯示在對應輸入框附近，表示對應輸入框的提示。適用于幫助文字較少的局部說明。

（2）用戶激活的即時幫助

通常采用圖標、按鈕、圖片、文本鏈接提示人們有幫助可提供，例如問號圖標。適用于幫助文字較少的全局說明。

（3）用戶激活的區域幫助

始終顯示在某個特定區域而不是輸入框附近。適用于幫助文字非常多的全局說明。

5. 對齊方式

（1）標簽

根據馬泰奧·彭佐的2006年的標簽對齊眼動實驗結果表明。標簽的對齊方式在理論效率上比較：頂對齊>右對齊>左對齊。

① 頂部對齊。適用于水平空間有限的情況。

• 優點：和輸入框聯系非常緊密，從上至下的視覺路徑清晰流暢，填寫效率很高。
• 缺點：大量占用垂直空間，不適用于輸入框較多的表單。

② 右對齊。適用于垂直空間有限的情況并且需要用戶快速填寫的情況。

• 優點：和輸入框聯系較為緊密，并且減少占用垂直空間。
• 缺點：標簽可讀性不強，降低快速瀏覽完表單的效率。

③ 左對齊。適用于垂直空間有限并且需要用戶謹慎填寫的情況。

• 優點：標簽可讀性強，并且減少占用垂直空間。
• 缺點：和輸入框聯系不緊密，增加用戶填寫表單的時間。

④ 輸入框內對齊。適用于水平和垂直空間有限的情況。

• 優點：與輸入框聯系緊密，并且減少占用水平和垂直空間。
• 缺點：標簽隨輸入內容而消失，復核表單信息較困難。

⑤ 懸浮標簽。結合了頂部對齊和輸入框內對齊的情況。

• 優點：和輸入框聯系最緊密，填寫效率最高，并且減少占用水平和垂直空間。
• 缺點：稍微占用了垂直空間，標簽字號太小容易造成可讀性問題，不過缺點不是很明顯。

（2）操作按鈕

為了評估哪一種主動作和次動作的效果最好，Luck(Web表單設計作者)和倫敦的可用性測試公司Etre使用眼動跟蹤和可用性指標對此進行了測試。

方案A、B和C完成任務更快、更有效。只有E方案表現很差，錯誤點擊了取消按鈕。使用F方案時，人們的眼球定位時間最長。
根據收集的數據，所有方案中最有效的設計都有共同特征：提交和關閉按鈕左對齊排列，與上方輸入框和標簽對齊。

UI

1. 營造氛圍

（1）品牌基因

在表單也植入品牌的元素，比如顏色，會使整體界面設計風格協調，使得品牌基因深入人心。

（2）場景氛圍

將線下的表單搬到線上，可以結合線下場景讓用戶身臨其境，比如預定民宿。

2. 緩解頁面壓力

（1）靜態：利用線條、空間間隔、顏色。

對于較為復雜的表單，需要對信息進行整理歸納，否則雜糅的表單會讓用戶失去填寫的耐心。合理有層次的組織信息，按照不同信息的類別、屬性和相關性進行區塊的劃分，利用線條、空間間隔、顏色進行視覺表現，給用戶喘息的機會。

（2）動態：漸進呈現

用戶只有完成當前操作，頁面才漸進展現下一步操作，讓內容的增加順其自然。比如Gogobot在邀請用戶進行評價時，巧妙地運用高斯模糊后續內容來緩解用戶的壓力。

3. 視覺層級

（1）必填項和選填項

必填項為空，則表單無法進行，因此必填項要比選填項的視覺效果強。

（2）主按鈕和次按鈕

主動作的視覺效果要比次動作的視覺效果明顯。

（3）錯誤信息和成功信息

錯誤信息的強調效果要比成功信息強，從而吸引用戶注意快速解決問題。

4. 輸入框長度

輸入框的長度可以暗示用戶正確填寫結果的長度。比如證件號的內容較多，所以輸入框要很長。驗證碼一般是四位數字，所以輸入框要短。

5. 字體

通過字號來區分層次重點，強調文字的字號要比輔助的文字要大一點。通過文字大小讓用戶分清重點。

總結

表單其實是連接系統和用戶的一個重要的橋梁。通過上述的整理，如何讓用戶在填寫表單時像對話般流暢自然，相信大家也有一些概念了。

1. 溝通前：選取問題要精

想想你跟朋友聊天，你在一旁講得天花亂墜，但跟主題毫無相關，那是果斷要被嫌棄的。表單也是如此，你需要考慮“保留、刪減、延遲、解釋”。

2. 溝通中：溝通效率要高

盡量避免用戶填寫后才告知錯誤，我們應該采取合理的方式規避根源。比如約朋友來家里吃飯，可以提前詢問你的朋友忌口的食物，不然就白費心血了。表單也是如此，你需要適時提供幫助信息正確引導用戶。

3.溝通后：信息反饋要全

別人在講話時，偶爾的點頭或者提問可以讓講話的人得到反饋，他會覺得自己是“聯網”了，而不是在玩“單機游戲”。表單也是如此，及時的反饋能讓用戶感覺到自己正在和系統交互中，而不是進入了死胡同。

參考資料：

1. 《表單設計及Axure原型》作者：曉夢蟬君
2. 《如何打造一個高可用性網頁表單設計？》
3. 《表單設計的思考》
4. 《表單設計-學習筆記》作者：丹頂鶴的日記本
5. 《與用戶體驗死磕到底：不簡單的表單設計》

其實我覺得還是刷《Web表單設計》比較系統，逃(￣▽￣)~*

PS：本文用到的繪圖工具是Balsamiq Mockups，炒雞稀飯這種風格，詳情介紹請戳鏈接PM工具盤點：那些鮮為人知卻好用到哭的效率神器

作者：安琪Angela，公眾號：idatadesign?；ヂ摼W數據行業UX&PM，參與過數據中心，商業智能和數據分析平臺等產品設計。關注大數據、人工智能和互聯網金融。歡迎大家一起交流~

本文由 @安琪Angela 原創發布于人人都是產品經理。未經許可，禁止轉載。

（題圖由作者提供）