一、什么是表單頁

1.1表單頁滿足的核心場景
1、采集/錄入數(shù)據(jù)信息。2、編輯數(shù)據(jù)信息。3、特殊的條件設(shè)置。后臺產(chǎn)品的本質(zhì)是針對數(shù)據(jù)的增、刪、改、查。而增、改、查都可以用表單完成。

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

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

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

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

2.3安全
操作前：提示和防錯。
操作中：實時反饋與糾錯
操作后：合理的保存、清空、取消、撤銷機(jī)制。

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

3.1表單標(biāo)簽

左標(biāo)簽
優(yōu)點：表意明確，節(jié)約縱向空間，多用于web端
缺點：不太適用于移動端等狹長空間

頂標(biāo)簽
優(yōu)點：對齊舒適，節(jié)約橫向空間，多用于移動端及英文場景下。
缺點：縱向空間利用率不高

行內(nèi)標(biāo)簽
優(yōu)點：最節(jié)省空間，多用于注冊登錄
缺點：輸入狀態(tài)標(biāo)簽消失，用戶陷入迷茫

左對齊標(biāo)簽
視線從標(biāo)簽移動到表單域時間為500ms，這比右對齊標(biāo)簽所用的時間長的多，所以更適合閱讀，用于詳情的陳列。
特點：閱讀效率高，操作效率較低；

右對齊標(biāo)簽
視覺動線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫。
特點：閱讀效率不高，標(biāo)簽指向明確，操作效率高

3.2表單域

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

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

3.3提示信息

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

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

3.4操作按鈕
按鈕常見位置：一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
按鈕閱讀順序：按鈕出現(xiàn)頁面右上角或右下角時，閱讀順序是從右往左，這符合pc端操作習(xí)慣以及人閱讀習(xí)慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時，閱讀順序為從左往右，這符合人的填寫順序從上往下，從左往右。

底部按鈕右對齊：一般用在彈框，因為彈框頁面比較小，右對齊比較符合操作習(xí)慣。
底部按鈕居中：一般用在頁面中，因為右下角操作距離會有點遠(yuǎn)，所以表單用頁面承載的話按鈕建議居中。

3.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)。

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

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

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

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

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

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

5.1分組

5.1.1標(biāo)題分組
設(shè)置項超過7個；彼此間的關(guān)聯(lián)性較弱且可以分類去歸納

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

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

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

小結(jié)當(dāng)錄入項少于7個時使用基礎(chǔ)布局；當(dāng)錄入項在7-15個時可采用標(biāo)題分組，卡片分組、錨點定位布局；當(dāng)錄入項大于15個時需采用標(biāo)簽頁布局。
5.4分步驟
利用步驟條將大型，復(fù)雜任務(wù)拆解為多個部分，并按照相關(guān)性分組。

建議3種分組依據(jù)1.采用必填項劃分，把必填的選項分在一起；2.采用相關(guān)性劃分；3.以操作成本劃分。把好填的簡單的表單放在前面，復(fù)雜的放在后面。

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

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

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

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

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

6.3高效智能

6.3.1根據(jù)上下文信息可以自動獲取的，無需用戶再次填寫。
例如根據(jù)手機(jī)號帶出用戶姓名；根據(jù)地址帶出郵政編碼；根據(jù)身份信息帶出生日。

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

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

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

6.4防錯糾錯

6.4.1對于長數(shù)字，四位一空格，用來分段
例如輸入銀行卡號；充值場景下輸入手機(jī)號等

6.4.2為用戶封閉不正確道路
將超出時間選擇范圍的日期置灰。電話號、身份證錄入時只允許輸入數(shù)字同時設(shè)置字?jǐn)?shù)上限。

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

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

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

7.1任務(wù)完成率

7.2任務(wù)完成時長

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

7.4易用度評分（用戶完成某項任務(wù)的難易程度）
易用度可通過調(diào)研問卷和評分量表獲取。

作者：鯤sky
來源：站酷

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。