這篇文章對 B 端表單的用法進(jìn)行了總結(jié)與歸納。

一、什么是表單頁

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

• 采集/錄入數(shù)據(jù)信息。
• 編輯數(shù)據(jù)信息。
• 特殊的條件設(shè)置。

后臺產(chǎn)品的本質(zhì)是針對數(shù)據(jù)的增、刪、改、查。而增、改、查都可以用表單完成。

2. 常見的應(yīng)用場景

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

二、表單頁設(shè)計(jì)原則

1. 明確

用戶快速定位重要信息和目標(biāo)選項(xiàng)同時文案和組件能夠準(zhǔn)確傳達(dá)相應(yīng)含義

2. 高效

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

3. 安全

操作前：提示和防錯。

操作中：實(shí)時反饋與糾錯

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

三、表單的構(gòu)成

表單通常由表單標(biāo)簽、表單域、提示提示、操作按鈕四部分構(gòu)成。

1. 表單標(biāo)簽

左標(biāo)簽

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

缺點(diǎn)：不太適用于移動端等狹長空間

頂標(biāo)簽

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

缺點(diǎn)：縱向空間利用率不高

行內(nèi)標(biāo)簽

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

缺點(diǎn)：輸入狀態(tài)標(biāo)簽消失，用戶陷入迷茫

左對齊標(biāo)簽

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

特點(diǎn)：閱讀效率高，操作效率較低；

右對齊標(biāo)簽

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

特點(diǎn)：閱讀效率不高，標(biāo)簽指向明確，操作效率高

2. 表單域

如何定義輸入框/選擇框大?。?/strong>

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

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

3. 提示信息

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

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

4. 操作按鈕

按鈕常見位置：一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。

按鈕閱讀順序：按鈕出現(xiàn)頁面右上角或右下角時，閱讀順序是從右往左，這符合 pc 端操作習(xí)慣以及人閱讀習(xí)慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時，閱讀順序?yàn)閺淖笸?，這符合人的填寫順序從上往下，從左往右。

底部按鈕右對齊：一般用在彈框，因?yàn)閺椏蝽撁姹容^小，右對齊比較符合操作習(xí)慣。

底部按鈕居中：一般用在頁面中，因?yàn)橛蚁陆遣僮骶嚯x會有點(diǎn)遠(yuǎn)，所以表單用頁面承載的話按鈕建議居中。

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

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

四、表單交互

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

1. 原位編輯

編輯內(nèi)容即為展示內(nèi)容，容量低于 5 個時使用。

2. 氣泡卡片

設(shè)置項(xiàng)與看板內(nèi)容緊密相關(guān)時使用氣泡卡片，建議設(shè)置項(xiàng)低于 5 個。

3. 彈窗/抽屜

設(shè)置項(xiàng)與看板內(nèi)容可以有關(guān)聯(lián)也不可以沒有，大于三個以上的錄入項(xiàng)使用。

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

4. 頁面跳轉(zhuǎn)

如果容量超出了彈框/抽屜的承載量并且錄入項(xiàng)與看板沒有那么強(qiáng)的關(guān)聯(lián)性可采用頁面跳轉(zhuǎn)的方式。

五、頁面布局

頁面布局方式有四種。1.分組；2.錨點(diǎn)定位；3.標(biāo)簽頁；4.分步驟

1. 分組

標(biāo)題分組

設(shè)置項(xiàng)超過 7 個；彼此間的關(guān)聯(lián)性較弱且可以分類去歸納

卡片分組

有多個設(shè)置項(xiàng)，多個分類；彼此之間的關(guān)聯(lián)性更弱，分類明確

2. 錨點(diǎn)定位

有多個分類的情況可通過錨點(diǎn)定位迅速找到相關(guān)信息

3. 標(biāo)簽頁

彼此之間沒有特定的相關(guān)性，可以獨(dú)立設(shè)置。每個設(shè)置包含了多個錄入項(xiàng)且使用了標(biāo)題分組。

小結(jié)

當(dāng)錄入項(xiàng)少于 7 個時使用基礎(chǔ)布局；當(dāng)錄入項(xiàng)在 7-15 個時可采用標(biāo)題分組，卡片分組、錨點(diǎn)定位布局；當(dāng)錄入項(xiàng)大于 15 個時需采用標(biāo)簽頁布局。

4. 分步驟

利用步驟條將大型，復(fù)雜任務(wù)拆解為多個部分，并按照相關(guān)性分組。

建議 3 種分組依據(jù)

1. 采用必填項(xiàng)劃分，把必填的選項(xiàng)分在一起；
2. 采用相關(guān)性劃分；
3. 以操作成本劃分。

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

六、提升表單易用性

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

1. 信息降噪

場景一：當(dāng)表單中大多數(shù)都是必填只有極少數(shù)非必填時

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

2. 視覺清晰

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

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

3. 高效智能

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

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

提供合適的"默認(rèn)項(xiàng)"。

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

提供搜索、聯(lián)想，自動顯示匹配的信息

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

OCR 識別文件內(nèi)容

對于一些標(biāo)準(zhǔn)證件信息的錄入，可以通過 OCR 識別文件內(nèi)容。當(dāng)用戶上傳圖片后，運(yùn)用圖像識別技術(shù)提取關(guān)鍵信息并自動填入結(jié)果。

4. 防錯糾錯

對于長數(shù)字，四位一空格，用來分段

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

 為用戶封閉不正確道路

將超出時間選擇范圍的日期置灰。電話號、身份證錄入時只允許輸入數(shù)字同時設(shè)置字?jǐn)?shù)上限。

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

5. 所見即所得

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

七、體驗(yàn)衡量指標(biāo)

體驗(yàn)衡量指標(biāo)有 4 種。1.任務(wù)完成率；2.任務(wù)完成時長；3.必填項(xiàng)目數(shù)；4.易用度評分

1. 任務(wù)完成率

2. 任務(wù)完成時長

3. 必填項(xiàng)目數(shù)

結(jié)合業(yè)務(wù)場景給出最適合的必填項(xiàng)設(shè)定，提高用戶填寫效率。

4. 易用度評分（用戶完成某項(xiàng)任務(wù)的難易程度）

易用度可通過調(diào)研問卷和評分量表獲取。

結(jié)語

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

作者： 掘金瘦