表單設計總結：構建有趣的界面「對話」

無論你是做什麼產品的，我相信表單設計的需求都是非常常見的，但是也是容易被忽略的。跟以往不同的是，寫這篇文章並不是我多有經驗，而是我意識到自己的表單體驗很糟糕，一直以來我覺得表單設計的需求簡單且索然無味，更願意去把精力投入有挑戰性的需求上。後來發現往往是這些糟糕的表單把用戶與平台溝通的入口堵死了，於是花了一段時間專門研究表單設計，反省下自己。

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

數據表格設計：從功能、交互和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.溝通後：信息反饋要全。

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

參考資料

http://www.jianshu.com/p/5bcf400b6a8a

http://www.jianshu.com/p/af8addad08fd

https://isux.tencent.com/web-form-design.html

http://www.jianshu.com/p/13d6b2c6691c

http://www.woshipm.com/pd/646301.html

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

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

推薦閱讀：