一、概述
1、用戶行為模式
- 入口設計：引導用戶進入表單。
- 給出填寫表單的理由（why）：有什么用，并給出快捷逃離入口。
- 填什么、怎么填(what、how)：包括填寫前的幫助、填寫后的驗證。
2、應用場景
- 場景類型：注冊與登錄、填寫（個人信息、提交訂單）、發布（商品、內容）等。
- 場景設計：如注冊時不強制要求填寫資料，先進行引導；支付時提前驗證：先提示余額是否足夠。
二、表單組成部分
1、標題和附加圖文
2、標簽
- 標簽后面是否加冒號對UX影響不大，視情況而定。
3、表單域
- 控件類型包括：輸入框-單行文本框/多行文本框/密碼框、單選按鈕/復選框、單選/多選下拉選擇框（或稱下拉列表）、文件上傳框、滑塊等。
- 同一表單項，涉及控件的選擇。如在PC端，與其在輸入框中限制格式，不如使用下拉列表。但在移動端，應減少使用下拉列表，以分段控件、開關、滑塊等代替。
4、操作：包括按鈕和鏈接
- 按鈕包括提交按鈕、復位按鈕、一般按鈕（如“更多”）。
- 提交按鈕屬于主要操作、復位按鈕等屬于次要操作——誤操作往往帶來不愉快。盡量只用主要操作，非得使用次要操作時，淡化處理。
三、表單設計：框架層
1、多步驟表單（導航）
2、邏輯分組與排序
- 可見表單項分組
- 隱藏內容關聯的表單項
- 隱藏部分表單項并以其他條件觸發：隱藏內容為高級/額外輸入，可滿足部分用戶需求。隱藏則又不干擾其他用戶。
3、必填/必選項
- 用戶基本熟悉“*”，具體則看目標用戶群
- 登錄等全部必填的表單不需要“*”
- 若只有少部分表單項為非必填，也標注必填——標注非必填若太弱則無法區分、太強則本末倒置
3.1 icon為*
*的位置一般為標簽左側、標簽右側、標簽和表單域中間、表單域右側。
標簽和表單域同行且相隔太遠時，*放在標簽和表單域中間——視覺保持可水平直線'
必填icon在標簽左側：與表單域太遠
必填icon在標簽和表單域中間
3.2 icon非*
- 如設計為書簽、木牌
3.3 無必填icon
- 全是必填，如登錄注冊等表單
3.4 文字標注
- 分框內注釋、框外注釋
4、填寫前的幫助
4.1 系統直接輸入：默認值
- 默認值即缺省值，分為整體默認和個性默認。一般用戶有修改權限。如輸入框默認值、下拉列表默認選項、單選按鈕/復選框默認勾選、進步器默認數字等。
4.2 系統輔助輸入：分框內、框外
- 框內分注釋和操作——如輸入框的數字微調、文件上傳框的上傳和取消。
- 框外分圖文和操作，包括直接展示、點擊觸發、hover觸發，其顯示位置包括表單域右側、下方或當前頁彈出框等。
5、填寫后的驗證
表單驗證四要素：時間、位置、顏色、反饋信息。
5.1 時間——何時驗證
- 提交后驗證：（填寫所有信息）提交表單后，正確/錯誤信息同時驗證顯示。
- 即時驗證：每完成一項即顯示驗證的反饋信息。
即時驗證的目標：提高成功率/減少錯誤率、縮短時間/減少視覺停留、提高滿意度、提升轉化率。
5.2 位置——顯示信息/提示條的位置
- 表單項右側或下方、表單頂部、氣球狀提示、彈層、對話框。
- 若采用提交后驗證，web表單用錨定位到首個錯誤項并獲取焦點。
5.3 顏色
- 表單域高亮、字體顏色、提示條邊框和底色
5.4 反饋信息
- 可分為兩大類：當前狀態和下一步操作。
- 每大類可分三小類：成功提示、報錯、無對錯的友情建議。
* 成功后給出鼓勵，包括提交成功后跳轉頁面時的成功反饋
* 反饋方式包括可視化效果，如以進度條展示密碼安全程度。
* 報錯以積極的引導方式，考慮給出解決方案。
* 自動糾錯，記住得告知用戶。
6、表單對齊方式
目的：清晰的視覺瀏覽線、減少停留時間
6.1 頂端對齊（又稱垂直對齊）
- 優點：標簽和表單域接近，視覺垂直下移即可。
-
缺點：增加垂直空間，表單項較多時增加頁面滾動。
垂直對齊建議：標簽字體加粗，以區分表單域內的文字
6.2 右對齊
- 優點：減少標簽和表單域距離，減少垂直空間。
-
缺點：左邊標簽參差不齊，給通覽標簽造成障礙。
右對齊
6.3 左對齊
- 優點：便于瀏覽標簽，減少垂直占用空間；幫用戶快速通覽標簽而不被表單域干擾；適用于標簽長度接近的表單。
-
缺點：標簽和表單域相隔太遠時，用戶目標須來回在標簽和表單域跳轉。
2.png
對齊方式小結：
- 根據眼動儀定量研究（即熱點圖），垂直對齊用戶視線集中，停留點少；右對齊視覺移動距離較少，且視線停留點較少；左對齊用戶視線移動較快，視覺停留點較多。
- 如果主目標是減少填表時間，可采用垂直對齊；若想盡量減少垂直空間，可采用右對齊；若須用戶仔細瀏覽標簽、了解每個表單域，可采用左對齊——pc端更適合右對齊，手機端更適合左對齊。
