這篇文章對 B 端表單的用法進行了總結與歸納。

更多表單設計干貨：

一、什么是表單頁

1. 表單頁滿足的核心場景

• 采集/錄入數據信息。
• 編輯數據信息。
• 特殊的條件設置。

后臺產品的本質是針對數據的增、刪、改、查。而增、改、查都可以用表單完成。

2. 常見的應用場景

OA 系統(tǒng)里面的請假申請，報銷申請，錄入員工，新建會議。教育類的創(chuàng)建課程。HRM 系統(tǒng)里面發(fā)布職位以及物聯網管理系統(tǒng)新建設備等等。

二、表單頁設計原則

1. 明確

用戶快速定位重要信息和目標選項同時文案和組件能夠準確傳達相應含義

2. 高效

整體表單排布有合理的交互形式；科學的信息布局和組織形式；盡可能“少操作一步”用戶在面對 50 和表單和 500 個表單的心理壓力是不一樣的。

3. 安全

操作前：提示和防錯。

操作中：實時反饋與糾錯

操作后：合理的保存、清空、取消、撤銷機制。

三、表單的構成

表單通常由表單標簽、表單域、提示提示、操作按鈕四部分構成。

1. 表單標簽

左標簽

優(yōu)點：表意明確，節(jié)約縱向空間，多用于 web 端

缺點：不太適用于移動端等狹長空間

頂標簽

優(yōu)點：對齊舒適，節(jié)約橫向空間，多用于移動端及英文場景下。

缺點：縱向空間利用率不高

行內標簽

優(yōu)點：最節(jié)省空間，多用于注冊登錄

缺點：輸入狀態(tài)標簽消失，用戶陷入迷茫

左對齊標簽

視線從標簽移動到表單域時間為 500ms，這比右對齊標簽所用的時間長的多，所以更適合閱讀，用于詳情的陳列。

特點：閱讀效率高，操作效率較低；

右對齊標簽

視覺動線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫。

特點：閱讀效率不高，標簽指向明確，操作效率高

2. 表單域

如何定義輸入框/選擇框大??？

步驟一：根據業(yè)務已經有的字段長度定義 4-5 種寬度規(guī)范，建議寬度可以是 8 或者是 40 的倍數。

步驟二：根據你要搭建的表單，選用合適的規(guī)范，長度與輸入預期成正比。有人會說排出來的表單左邊沒對齊，右邊也沒對齊，其實這就是 B 端產品特征那就是是好用大于好看，就要給用戶一種心智那就是給你的這個長度那就是要輸入一個這么長的內容。

3. 提示信息

避免“正確的廢話”：給不到用戶任何的幫助還增加了用戶的閱讀成本。

提示信息用哪種展示方式？

4. 操作按鈕

按鈕常見位置：一般出現在頁面頂部、跟隨表單里的內容、表單內容底部、頁面底部。

按鈕閱讀順序：按鈕出現頁面右上角或右下角時，閱讀順序是從右往左，這符合 pc 端操作習慣以及人閱讀習慣。按鈕跟隨表單內容或在表單內容底部時，閱讀順序為從左往右，這符合人的填寫順序從上往下，從左往右。

底部按鈕右對齊：一般用在彈框，因為彈框頁面比較小，右對齊比較符合操作習慣。

底部按鈕居中：一般用在頁面中，因為右下角操作距離會有點遠，所以表單用頁面承載的話按鈕建議居中。

5. 字體和間距規(guī)范

表單中字體全部統(tǒng)一采用 14px。表單上下間距一般有三種，1.內容與內容間距為 24px。2.內容與說明文案間距為 4px。3.內容與子內容間距以及及子內容之間的間距為 8px。

四、表單交互

表單交互方式有四種。1.原位編輯；2.氣泡卡片；3.彈窗/抽屜；4.頁面跳轉。

1. 原位編輯

編輯內容即為展示內容，容量低于 5 個時使用。

2. 氣泡卡片

設置項與看板內容緊密相關時使用氣泡卡片，建議設置項低于 5 個。

3. 彈窗/抽屜

設置項與看板內容可以有關聯也不可以沒有，大于三個以上的錄入項使用。

如果錄入項較多，用彈框承載出現翻頁的情況下可考慮使用抽屜。

4. 頁面跳轉

如果容量超出了彈框/抽屜的承載量并且錄入項與看板沒有那么強的關聯性可采用頁面跳轉的方式。

五、頁面布局

頁面布局方式有四種。1.分組；2.錨點定位；3.標簽頁；4.分步驟

1. 分組

標題分組

設置項超過 7 個；彼此間的關聯性較弱且可以分類去歸納

卡片分組

有多個設置項，多個分類；彼此之間的關聯性更弱，分類明確

2. 錨點定位

有多個分類的情況可通過錨點定位迅速找到相關信息

3. 標簽頁

彼此之間沒有特定的相關性，可以獨立設置。每個設置包含了多個錄入項且使用了標題分組。

小結

當錄入項少于 7 個時使用基礎布局；當錄入項在 7-15 個時可采用標題分組，卡片分組、錨點定位布局；當錄入項大于 15 個時需采用標簽頁布局。

4. 分步驟

利用步驟條將大型，復雜任務拆解為多個部分，并按照相關性分組。

建議 3 種分組依據

1. 采用必填項劃分，把必填的選項分在一起；
2. 采用相關性劃分；
3. 以操作成本劃分。

把好填的簡單的表單放在前面，復雜的放在后面。

六、提升表單易用性

提升表單易用性方式有 5 種。1.信息降噪；2.清晰易讀；3.高效智能；4.防錯糾錯；5.所見即所得

1. 信息降噪

場景一：當表單中大多數都是必填只有極少數非必填時

場景二：表單項非必填項比較多，可將低頻的非必填項收起

2. 視覺清晰

場景一：盡量采用單列布局，視覺動線流暢，不容易遺漏信息；按 enter 鍵換行。

場景二：如果出于業(yè)務方需要，必須在橫向添加內容，那最好有一定的分組依據。但這樣就不應該出現豎向分組，以免遺漏信息。

3. 高效智能

根據上下文信息可以自動獲取的，無需用戶再次填寫。

例如根據手機號帶出用戶姓名；根據地址帶出郵政編碼；根據身份信息帶出生日。

提供合適的“默認項”。

例如根據行業(yè)現狀提供常規(guī)的比例分配；根據定位把地區(qū)做默認的填充。

提供搜索、聯想，自動顯示匹配的信息

用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區(qū)域提供輔助提示，通過自動補全或聯想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。

OCR 識別文件內容

對于一些標準證件信息的錄入，可以通過 OCR 識別文件內容。當用戶上傳圖片后，運用圖像識別技術提取關鍵信息并自動填入結果。

4. 防錯糾錯

對于長數字，四位一空格，用來分段

例如輸入銀行卡號；充值場景下輸入手機號等

?為用戶封閉不正確道路

將超出時間選擇范圍的日期置灰。電話號、身份證錄入時只允許輸入數字同時設置字數上限。

告訴用戶哪里錯了，而非簡單粗暴的錯誤提示

5. 所見即所得

表單頁對填寫的物料內容進行映射，展示真實效果預覽，降低用戶心理的不確定性。適合對移動端、小程序、H5 頁面的設置。

七、體驗衡量指標

體驗衡量指標有 4 種。1.任務完成率；2.任務完成時長；3.必填項目數；4.易用度評分

1. 任務完成率

2. 任務完成時長

3. 必填項目數

結合業(yè)務場景給出最適合的必填項設定，提高用戶填寫效率。

4. 易用度評分（用戶完成某項任務的難易程度）

易用度可通過調研問卷和評分量表獲取。

結語

這篇文章對 B 端表單的用法進行了總結與歸納，感謝閱讀，歡迎交流～