一、概述
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端更適合右對齊,手機端更適合左對齊。