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

一、什么是表單頁(yè)

1. 表單頁(yè)滿(mǎn)足的核心場(chǎng)景

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

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

2. 常見(jiàn)的應(yīng)用場(chǎng)景

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

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

1. 明確

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

2. 高效

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

3. 安全

操作前：提示和防錯(cuò)。

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

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

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

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

1. 表單標(biāo)簽

左標(biāo)簽

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

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

頂標(biāo)簽

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

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

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

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

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

左對(duì)齊標(biāo)簽

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

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

右對(duì)齊標(biāo)簽

視覺(jué)動(dòng)線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫(xiě)。

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

2. 表單域

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

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

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

3. 提示信息

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

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

4. 操作按鈕

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

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

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

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

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

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

四、表單交互

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

1. 原位編輯

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

2. 氣泡卡片

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

3. 彈窗/抽屜

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

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

4. 頁(yè)面跳轉(zhuǎn)

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

五、頁(yè)面布局

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

1. 分組

標(biāo)題分組

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

卡片分組

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

2. 錨點(diǎn)定位

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

3. 標(biāo)簽頁(yè)

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

小結(jié)

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

4. 分步驟

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

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

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

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

六、提升表單易用性

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

1. 信息降噪

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

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

2. 視覺(jué)清晰

場(chǎng)景一：盡量采用單列布局，視覺(jué)動(dòng)線流暢，不容易遺漏信息；按 enter 鍵換行。

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

3. 高效智能

根據(jù)上下文信息可以自動(dòng)獲取的，無(wú)需用戶(hù)再次填寫(xiě)。

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

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

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

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

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

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

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

4. 防錯(cuò)糾錯(cuò)

對(duì)于長(zhǎng)數(shù)字，四位一空格，用來(lái)分段

例如輸入銀行卡號(hào)；充值場(chǎng)景下輸入手機(jī)號(hào)等

 為用戶(hù)封閉不正確道路

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

告訴用戶(hù)哪里錯(cuò)了，而非簡(jiǎn)單粗暴的錯(cuò)誤提示

5. 所見(jiàn)即所得

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

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

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

1. 任務(wù)完成率

2. 任務(wù)完成時(shí)長(zhǎng)

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

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

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

易用度可通過(guò)調(diào)研問(wèn)卷和評(píng)分量表獲取。

結(jié)語(yǔ)

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

作者： 掘金瘦