編輯導(dǎo)語：B端設(shè)計師在日常工作中肯定少不了表單的設(shè)計，一個好的表單可以提高整體效率，提高完成度，并且在用戶側(cè)也有好的體驗(yàn)；在表單設(shè)計中，不同的應(yīng)用場景所對應(yīng)的表單也有所不同；本文作者分享了關(guān)于B端頁面中詳細(xì)的表單設(shè)計流程，我們一起來看一下。

一、什么是表單？

表單設(shè)計是B端產(chǎn)品設(shè)計的基礎(chǔ)頁面，想要做好表單設(shè)計首先要搞清楚表單的應(yīng)用場景。

表單是用戶采集數(shù)據(jù)信息的核心場景，同時又通過表單向用戶展示數(shù)據(jù)信息，簡而言之表單是用戶與數(shù)據(jù)庫之間的橋梁；它可以確保用戶按要求填寫信息并提交給后臺使用或引導(dǎo)用戶進(jìn)行各種設(shè)置，好的表單可以幫助用戶提升效率增加用戶滿意度。

表單價值

二、為什么需要表單？

原始的系統(tǒng)或軟件是沒有用戶信息的，用戶通過表單來進(jìn)行數(shù)據(jù)信息的錄入，錄入的信息越多，數(shù)據(jù)庫管理的信息就會越多，才能凸顯出該系統(tǒng)或軟件的數(shù)據(jù)管理優(yōu)勢才能實(shí)現(xiàn)其價值；因此表單是實(shí)現(xiàn)產(chǎn)品管理價值的第一步。

例如我們常用的“飛書”、“teambition”、“語雀”等產(chǎn)品本身是沒有數(shù)據(jù)信息的，想要實(shí)現(xiàn)其產(chǎn)品價值就要通過用戶錄入表單信息到數(shù)據(jù)庫，錄入的數(shù)據(jù)信息越豐富越能體現(xiàn)產(chǎn)品讀取/管理數(shù)據(jù)信息的便捷，所以表單設(shè)計的質(zhì)量高低也影響了整個產(chǎn)品的滿意度評價。

飛書初始頁面

B端產(chǎn)品的本質(zhì)是對數(shù)據(jù)信息的“增刪改查”在表單的應(yīng)用場景里對應(yīng)了“增”和“改”一般表現(xiàn)為表格中的“新增”與“編輯”（如下圖）；針對不同的用戶數(shù)據(jù)要進(jìn)行不同的表單設(shè)計，以便適用各個場景功能。

表單入口

三、表單設(shè)計原則與目標(biāo)

1. 表單設(shè)計目標(biāo)

幫助用戶高效、準(zhǔn)確、一致、安全的完成數(shù)據(jù)錄入與數(shù)據(jù)編輯。

表單設(shè)計目標(biāo)

2. 表單設(shè)計原則

1）高效性

通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務(wù)。

例如，必填選項(xiàng)與非必填選項(xiàng)標(biāo)示問題：

• 當(dāng)全部為必填項(xiàng)時可以不用標(biāo)示；
• 當(dāng)必填項(xiàng)數(shù)量占比極大，非必填項(xiàng)只占很少部分時可直接標(biāo)注非必填項(xiàng)，降低用戶的視覺干擾；
• 當(dāng)必填項(xiàng)比重不大則需要標(biāo)注必填項(xiàng)表識，而非無腦全部加“*”；

高效性

2）準(zhǔn)確性

表單的準(zhǔn)確性表現(xiàn)有很多，主要指不要讓你傳達(dá)的信息產(chǎn)生歧義，讓所有的用戶看到這個信息后的用戶行為保持一致，規(guī)避用戶犯錯。

案例1：快速定位表單重要信息和當(dāng)前填寫選項(xiàng)，例如，飛書文檔左側(cè)快速定位。

準(zhǔn)確性1

案例2：輸入框的長度根據(jù)用戶輸入信息的多少進(jìn)行設(shè)置，不要讓輸入框?yàn)榱苏R保持一致，太長的輸入框會給用戶帶來壓力。

準(zhǔn)確性2

3）一致性

針對同一產(chǎn)品下的頁面風(fēng)格/字號/組件使用都要保持一致，避免給用戶造成混淆增加理解成本。

一致性

4）安全感

要有一定的危險操作保護(hù)措施，例如，返回不保存表單的危險提示或即時保存表單的安全操作防止數(shù)據(jù)丟失；同時針對不同的使用場景增加返回上一步、重置填寫、撤銷填寫等幫助用戶修改錯誤的后悔藥功能。

安全感

四、表單構(gòu)成

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

表單構(gòu)成

1. 標(biāo)簽

標(biāo)簽是為了告訴用戶此項(xiàng)表單的輸入內(nèi)容是什么，通常放在輸入內(nèi)容之前，有時候是正前方，有時候是正上方根據(jù)具體的布局調(diào)整，特殊情況放在輸入內(nèi)容里（后面會詳細(xì)講解哪種頁面適合哪種標(biāo)簽形式這里就不展開說了）。

填寫內(nèi)容過多容易引起用戶的恐慌，填寫內(nèi)容較少又不足以支撐后續(xù)的管理維護(hù)，為了平衡用戶感受和后續(xù)管理維護(hù)，這里提出不影響后續(xù)操作的前提下最少填寫原則，就可以把表單標(biāo)簽按需求分為必填/選填/不填三項(xiàng)。

標(biāo)簽分類

• 必填項(xiàng)是指用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作，同時也是后續(xù)管理維護(hù)的保障；
• 選填項(xiàng)是指該項(xiàng)信息用戶可填可不填，根據(jù)用戶的意愿和需求度來自愿選擇，該項(xiàng)的填寫不會影響后續(xù)的管理維護(hù)；
• 不填項(xiàng)是指該項(xiàng)不需要用戶填寫，由系統(tǒng)自動生成例如填寫身份證號就不需要再填寫生日，可由系統(tǒng)自動生成。

注意：為了保證頁面整體高效，表單填寫的內(nèi)容盡量少的使用選填項(xiàng)，省略不填項(xiàng)。

2. 輸入域

輸入域是用來采集用戶數(shù)據(jù)信息的核心內(nèi)容，每個輸入域字段包含一個類型的數(shù)據(jù)信息。

對于用戶來說，表單的填寫體驗(yàn)再好也是負(fù)擔(dān)，所以我們要盡可能的減少用戶思考、理解，降低用戶的焦躁情緒，同時提高表單的輸入效率，輸入域的選擇尤為重要。

1）輸入域分類

輸入域主要有以下四個類型：

輸入域分類

輸入，輸入框：

輸入框

選擇內(nèi)容：選擇器、級聯(lián)選擇器、樹選擇、單選框、多選框、穿梭框、開關(guān)。

選擇內(nèi)容

選擇時間：時間選擇、日期選擇、日期時間選擇。

選擇時間

選擇數(shù)值范圍：步進(jìn)器、滑動輸入條。

選擇數(shù)值范圍

上傳：文件上傳。

上傳

2）注意

① 輸入框長度確定

表單輸入框的寬度要怎樣確定呢？實(shí)際業(yè)務(wù)中，大部分輸入框所需填寫內(nèi)容都存在理想長度，輸入框的寬度暗示填寫內(nèi)容的長度，合理的寬度幫助減少用戶的焦慮，給用戶帶來安全感。

在單項(xiàng)排布時也要盡量考慮用戶的觀感，通過設(shè)置合理的默認(rèn)寬度尺寸，讓設(shè)計師快速搭建出觀感舒適又給用戶降低焦慮的頁面。

我們可以根據(jù)產(chǎn)品的具體業(yè)務(wù)，羅列出常用的輸入內(nèi)容，根據(jù)這些輸入內(nèi)容的長短來進(jìn)行具體輸入框尺寸的制定；如果輸入內(nèi)容很多，那么要定的尺寸很碎，針對每一個常用內(nèi)容制定一個輸入框尺寸是不現(xiàn)實(shí)的，在頁面實(shí)際設(shè)計中就會顯得頁面很凌亂，如下圖。

那么我們要解決的問題就是如何讓輸入框在單個狀態(tài)與組合狀態(tài)下都盡量保持較好的對齊狀態(tài)，同時輸入框的尺寸還有規(guī)律可循。

輸入框長度確定1

輸入框尺寸的確定，參考Ant design表單設(shè)計研究結(jié)論得到的5種高頻的寬度需求區(qū)間，以尺碼類比分別是： XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

輸入框長度確定2

我們可以參考這個XS尺碼的尺寸范圍（80-160px）來定制自己的輸入框尺寸x，對這個尺寸進(jìn)行x*2+8px（1個輸入框間距為8px）、x*3+16px（2個輸入框間距為16px）、*4+24（3個輸入框間距為24px）、*5+32（4個輸入框間距為32px）得到相應(yīng)的其他尺寸輸入框，這里把輸入框的長度計算加上了輸入框間距是為了更好的使輸入框在不同的場景中對齊。

例如我們產(chǎn)品業(yè)務(wù)中經(jīng)常要填寫日期，我們就根據(jù)常用的日期“2020-12-30”最大字段來定制我們的最小輸入框尺寸為118px，那么我們就得到了118px*2+8px=244px、118px*3+16px=370px….五種尺寸（如下圖）。

輸入框長度確定3

然后可以再反向驗(yàn)證我們的常用信息內(nèi)容，是不是都能找到對應(yīng)的尺寸適配，如果不行的話就調(diào)整我們最小輸入框的尺寸，使大部分的填寫內(nèi)容都能有合適的尺寸。

經(jīng)過我們設(shè)計稿適配，在各復(fù)雜度的組合輸入框和單輸入框組合排列，發(fā)現(xiàn)在場景中實(shí)際的應(yīng)用效果都遠(yuǎn)好于從前。

輸入框長度確定4

② 選擇框優(yōu)于輸入框

輸入域的選擇要為用戶著想，因?yàn)橛脩舾敢獠僮魇髽?biāo)而不是鍵盤，任何密集的操作都會給用戶帶來壓力降低效率，所以能讓用戶進(jìn)行選擇就不要讓用戶輸入。

選擇的操作難度低于輸入，效率高于輸入，用戶的填寫可以停留在一定的范圍之內(nèi)進(jìn)行選擇，不用在茫茫大海里進(jìn)行撈針行動，也有可能撈錯針就是錯別字等輸入錯誤的風(fēng)險，默認(rèn)的幾個選項(xiàng)就可以解決這個問題。

選擇框由于輸入框

③ 平鋪單選優(yōu)于下拉選擇框

平鋪單選也并非所有場景都優(yōu)于下拉選擇，但頁面中需要快速響應(yīng)優(yōu)先建議選用平鋪單選，用戶直觀的看到展示選項(xiàng)，直接單機(jī)選中目標(biāo)，提升操作效率。

平鋪單選適用場景：5個選項(xiàng)以內(nèi)、選項(xiàng)較長、選項(xiàng)帶說明文案。

下拉選擇框適用場景：超過5個選項(xiàng)，有默認(rèn)高頻選項(xiàng)、選項(xiàng)文案不長。

在下拉選擇框中如果選項(xiàng)過多的情況，可以把高頻選項(xiàng)置頂或采用模糊搜索匹配選項(xiàng)，幫助用戶快捷選擇選項(xiàng)。

下拉選項(xiàng)的選擇后最好不要引起后續(xù)表單頁面的變化，后續(xù)表單變化建議采用平鋪單選，用戶感知變化產(chǎn)生不安可以隨時取消選擇或選擇其他選項(xiàng)返回原來頁面查看變化內(nèi)容。

平鋪單選優(yōu)于下拉選擇框

④ 智能聯(lián)想

智能聯(lián)想輸入域可以增加用戶對表單頁面的滿意度不至于用戶在復(fù)雜的表單頁面抓狂。

用戶通過標(biāo)簽傳達(dá)的信息給予關(guān)鍵詞，根據(jù)提供的關(guān)鍵詞輸入框可以實(shí)現(xiàn)模糊搜索、智能聯(lián)想、自動匹配等選項(xiàng)；用戶就可以根據(jù)聯(lián)想出的選項(xiàng)進(jìn)行單機(jī)選擇，讓數(shù)據(jù)庫跑在用戶的前面給用戶節(jié)省更多的時間，提高工作效率，常見的場景在谷歌瀏覽器里輸入網(wǎng)址，你輸入幾個字母后它總是能猜對你要找的網(wǎng)址，這里是記錄了用戶之前訪問過的網(wǎng)址根據(jù)高低頻呈現(xiàn)給用戶進(jìn)行選擇。

還有郵箱后綴的聯(lián)想、注冊唯一用戶名聯(lián)想（網(wǎng)站注冊用戶要求每個人的用戶名都不重復(fù)時，在你輸入別人使用過的用戶名時，系統(tǒng)會為你推薦幾個類似用戶名供用戶選擇）都是從用戶出發(fā)的操作。

?智能聯(lián)想

3. 提示信息

提示信息是為了幫助用戶更準(zhǔn)確的理解輸入域的具體操作，根據(jù)輸入流程將用戶輸入過程分為輸入前、輸入中、輸入后三個階段，提示信息在輸入前發(fā)生的稱為引導(dǎo)提示，提示信息在輸入中/后發(fā)生的叫反饋提示。

提示信息

4. 操作選項(xiàng)

操作選項(xiàng)指表單填寫完成后，要進(jìn)入的操作動作例如提交、返回、保存草稿等結(jié)束當(dāng)前頁面的操作流程，這里要注意雖然可能頁面的操作按鈕有很多但主按鈕只有一個。

主按鈕依據(jù)：常用按鈕或更想讓用戶點(diǎn)擊的按鈕。

操作選項(xiàng)

五、表單形式

1. 標(biāo)簽

前面講了不同的使用場景選擇不同的標(biāo)簽布局，讓我們先來了解一下標(biāo)簽布局，主要分成4種：左對齊標(biāo)簽、右對齊標(biāo)簽、頂標(biāo)簽、行內(nèi)標(biāo)簽。每一種對齊方式都有一定的優(yōu)點(diǎn)與局現(xiàn)性；因此在合適的場景下選擇合適的標(biāo)簽樣式，可以提升用戶的輸入效率。

標(biāo)簽

1）左對齊標(biāo)簽

左對齊標(biāo)簽是最常用的一種標(biāo)簽，但它由于它橫向占用空間較大所以不適用于橫向空間狹小的表單頁面，左對齊有利于用戶對標(biāo)簽的整體查看，能夠清楚的看到表單也整體都要填寫那些信息；但有由于標(biāo)簽長短不一，有些標(biāo)簽距離輸入框較遠(yuǎn)，使標(biāo)簽與其輸入框親密性降低導(dǎo)致用戶填寫費(fèi)力，用戶存留時間較長，所以左對齊標(biāo)簽一般用于表單查看頁面或稱為詳情頁。

另一方面來講左標(biāo)簽雖然讓用戶存留的時間更長同時也讓用戶瀏覽和思考的時間變長，這種場景下保證標(biāo)簽與輸入域親密的前提下，在需要用戶謹(jǐn)慎填寫的表單頁面可以采用這種對齊方式；例如阿里云購買頁面讓用戶仔細(xì)看、謹(jǐn)慎選擇。

• 優(yōu)點(diǎn)：用戶視覺動線左對齊，方便閱讀，節(jié)約垂直空間。
• 缺點(diǎn)：填寫速度慢，浪費(fèi)橫向空間，標(biāo)簽長度和輸入框彈性小。

左對齊標(biāo)簽

2）右對齊標(biāo)簽

右對齊標(biāo)簽與左對齊標(biāo)簽一樣橫向占用空間較大，不利于狹長頁面的布局，右對齊由于標(biāo)簽字段長短不一導(dǎo)致用戶的視覺動線不在同一垂直線所以右對齊標(biāo)簽有利于用戶的填寫，但是不利于用戶對標(biāo)簽信息的查看。

• 優(yōu)點(diǎn)：節(jié)約垂直空間，有利于用戶高效填寫
• 缺點(diǎn)：可讀性較弱，標(biāo)簽長度和輸入框彈性小。

3）頂部標(biāo)簽

頂部標(biāo)簽是標(biāo)簽在輸入域的上方，與輸入域進(jìn)行左對齊，這樣可以節(jié)省橫向空間的使用、用戶在填寫時也比較方便，在移動端產(chǎn)品的設(shè)計中下拉的交互比左右滑動的交互更為便捷所以采用頂部標(biāo)簽較為常見。

頂部對齊可以讓用戶快速填寫表單，完成任務(wù)的場景一般采用頂部標(biāo)簽，Prowork創(chuàng)建任務(wù)時就用的頂對齊，讓用戶快速創(chuàng)建任務(wù)。

• 優(yōu)點(diǎn)：對齊舒適、用戶瀏覽和填寫表單的速度較快，節(jié)省橫向空間。
• 缺點(diǎn)：占用垂直空間。

頂部標(biāo)簽

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

行內(nèi)標(biāo)簽相當(dāng)于提示信息，在行內(nèi)顯示，雖然可以大大節(jié)省橫向和縱向的空間，但當(dāng)提示信息消失時會使用戶感到迷茫，使用體驗(yàn)較差，而且拓展性也較差；因?yàn)檩斎胗虿恢拱ㄝ斎肟蛉绻瞧戒亞芜x或開關(guān)則無法沿用此種標(biāo)簽。UI中國登陸頁表單用的就是這種行內(nèi)對齊標(biāo)簽，輸入內(nèi)容少，用戶動線清晰。

• 優(yōu)點(diǎn)：節(jié)省空間，多用于移動端和登陸頁面。
• 缺點(diǎn)：輸入狀態(tài)消失，用戶產(chǎn)生困惑，拓展性差。

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

2. 輸入域

1）輸入域交互

表單頁面的交互方式分為以下4種：就地編輯、氣泡卡片、彈窗、抽屜、頁面跳轉(zhuǎn)，根據(jù)具體的使用場景選擇合適的頁面交互。

輸入域交互

① 原位編輯

原位編輯是比較輕量化的表單形式，適用于表單內(nèi)容較少，使用頻率較低的場景，操作編輯，雖取隨用，隨用隨變；表單操作后頁面隨即發(fā)生反饋改變，所見即所得，保證用戶對主要功能的高效操作。

原位編輯一般在列表、卡片、詳情中單擊或雙擊激活編輯態(tài)進(jìn)行原位編輯，用戶操作更加流暢，不會打斷還可單擊空白處隨時退出。

原位編輯

② 氣泡卡片

氣泡卡片交互方式也是比較輕量化的，適用信息數(shù)據(jù)容量小于5個的場景，所產(chǎn)生的表單頁與當(dāng)前的頁面親密性緊密相關(guān)，也可隨取隨用，隨時退出。

氣泡卡片

③ 彈窗/抽屜

彈窗/抽屜交互的表單樣式是比較常見的交互樣式，它的拓展性更強(qiáng)，承載的信息更多，當(dāng)前頁面的分支操作，體現(xiàn)兩頁面之間的層級關(guān)系；在原位編輯與氣泡卡片無法滿足交互時選擇彈窗/抽屜交互，用戶在不離開當(dāng)前頁面的情況下進(jìn)行插入性操作，用戶也可隨時退出操作。

彈窗/抽屜頁面也不會打斷當(dāng)前頁面的流程，流暢性次于原位編輯與氣泡卡片交互但但優(yōu)于頁面跳轉(zhuǎn)。

抽屜的承載能力大于彈窗，根據(jù)數(shù)據(jù)信息選擇彈窗或抽屜。

彈窗

抽屜

④ 頁面跳轉(zhuǎn)

頁面跳轉(zhuǎn)也分為兩種：跳轉(zhuǎn)新頁面和跳轉(zhuǎn)當(dāng)前頁面，新頁面為當(dāng)前頁面的分支流程，不會干涉用戶對主頁面的操作，頁面功能是獨(dú)立的；跳轉(zhuǎn)頁面為當(dāng)前頁面流程的關(guān)鍵步驟，提示用戶已經(jīng)進(jìn)入下一步的操作，更少的建立新頁面就會讓用戶對業(yè)務(wù)流程更加清晰，減少用戶對新頁面的注意力，讓用戶專注于當(dāng)前表單的數(shù)據(jù)信息中。

頁面跳轉(zhuǎn)承載的表單的數(shù)據(jù)信息最多，但對數(shù)據(jù)的反饋不及時，體量較大，頁面更加穩(wěn)定，當(dāng)所需表單特別重要時采用頁面跳轉(zhuǎn)的交互。

頁面跳轉(zhuǎn)

2）選擇輸入域交互

如何選用合適的交互方式，應(yīng)從數(shù)據(jù)信息的容量和親密度兩方面梳理，親密性越高選擇就地編輯與氣泡卡片交互，容量越大選用頁面跳轉(zhuǎn)進(jìn)行交互。

選擇輸入域交互

3）輸入域布局

在表單頁設(shè)計中根據(jù)數(shù)據(jù)信息容量來選擇合理的布局方式，保證頁面展示屏效與用戶操作效率，表單頁面布局可分為4種分別為基礎(chǔ)布局、分組布局、標(biāo)簽頁布局。

輸入域布局

① 基礎(chǔ)布局

單例與多列布局：

單列布局：為了用戶的高效填寫一般會采用單列布局，視覺動線垂直向下延伸，避免用戶遺漏填寫現(xiàn)象發(fā)生，但這樣布局容易造成頁面出現(xiàn)大量空白，多數(shù)是不被老板喜歡的；但在表單內(nèi)從上到下單列布局，引導(dǎo)用戶縱向閱讀，這是能夠最高效完成任務(wù)的布局方式。

單列布局

多列布局：多列布局在一定程度上可以提高空間利用率，卻犧牲了用戶的使用感受，還有可能造成用戶漏填信息；多列布局的分組分為兩種橫向分組和縱向分組，在實(shí)際頁面設(shè)計中一定要選擇多列布局時請選擇橫向分組而不是縱向分組。

橫向分組：頁面利用率高，視覺動線也盡量減少了用戶遺漏。

多列布局

縱向分組：頁面整潔，但與用戶常規(guī)閱讀順序相悖十分容易遺漏填寫信息，不建議使用。

縱向分組

提示：對表單信息的分類可以有效的降低視覺噪音，幫助用戶關(guān)注重要的填寫內(nèi)容，根據(jù)表單數(shù)據(jù)信息的優(yōu)先級進(jìn)行分類，將優(yōu)先級高的放在表單前面，優(yōu)先級低的放在表單后面，或進(jìn)行折疊收起；在pro work中就很好的運(yùn)用了這一點(diǎn)，在創(chuàng)建項(xiàng)目時用戶填寫成本極低，在密集的工作環(huán)境中可以快速完成項(xiàng)目的創(chuàng)建，但在空閑的時間里用戶就可以點(diǎn)擊更多選項(xiàng)來進(jìn)行詳細(xì)填寫。

折疊收起

② 分組布局

標(biāo)題分組：

當(dāng)表單的數(shù)據(jù)信息較多一般超過7個輸入域，同時關(guān)聯(lián)性沒有那么強(qiáng)且可以被分組時，我們可以幫助用分組的方式幫用戶設(shè)置幾個休息點(diǎn)，讓用戶把要填寫表單的大任務(wù)拆解成幾個小任務(wù)來完成；將相同信息表單數(shù)據(jù)進(jìn)行分組，這樣即使有很多信息疊加在一起，用戶在輸入上的心理壓力與視覺疲勞都會得到緩解。

標(biāo)題分組

“銷售易”個人設(shè)置基礎(chǔ)表單頁面，設(shè)置基本信息、聯(lián)系方式等標(biāo)題作為分組，層次清晰，用信息分組給用戶減壓。

“銷售易”個人設(shè)置

卡片分組：

當(dāng)表單數(shù)據(jù)內(nèi)容體量很大時以超過一屏為界，關(guān)聯(lián)性更弱且數(shù)據(jù)信息可被分類歸納時，可通過卡片分組的形式展示，在這里可對單獨(dú)的卡片進(jìn)行命名。

卡片分組

“華為云”購買主機(jī)表單根據(jù)輸入信息將表單劃分為卡片模塊，使表單信息層級更加清晰。

華為云

③ 標(biāo)簽分組

當(dāng)表單數(shù)據(jù)信息之間沒有特定的關(guān)聯(lián)性，可以單獨(dú)設(shè)置，且每個設(shè)置項(xiàng)都包含多個輸入域，且多個輸入域都使用了標(biāo)題分組的情況下，布局就可以采用標(biāo)簽頁布局進(jìn)行展示操作。

標(biāo)簽分組

“有贊微商城”配送管理標(biāo)簽分組頁面

有贊微商城

④ 分步驟

分步驟的布局形式就與頁面的數(shù)據(jù)信息復(fù)雜度沒有太大關(guān)系了，主要是表單數(shù)據(jù)信息具有邏輯關(guān)系，這一步操作完成后才能進(jìn)行下一步的操作；分步驟布局只展示當(dāng)前步驟對應(yīng)的輸入域，點(diǎn)擊下一步校驗(yàn)后才可繼續(xù)填寫。

讓用戶分步進(jìn)行操作，明確當(dāng)前用戶目標(biāo)，減少用戶負(fù)擔(dān)；及時的反饋校驗(yàn)，也避免填寫完成后才發(fā)現(xiàn)中間的表單填寫有誤，降低用戶的犯錯成本。

分步驟

“有贊微商城”新建批量導(dǎo)入分步驟頁面。

“有贊微商城”新建批量導(dǎo)入

4）選擇輸入域布局

選擇輸入域布局根據(jù)表單信息數(shù)據(jù)的復(fù)雜性與親密度進(jìn)行選擇

選擇輸入域布局

3. 提示信息

提示信息在不同的表單輸入階段分為不同的類型，主要分為以下2類：

• 輸入前：引導(dǎo)信息；
• 輸入中后：反饋信息（此處有個前中后示意圖）。

提示信息

1）引導(dǎo)信息

引導(dǎo)信息是在用戶填寫表單前對表單填寫內(nèi)容進(jìn)行解釋說明的提示信息，一般分為全局提示與單項(xiàng)提示。

① 全局提示

全局提示一般位于整個表單的最開始，是對整個表單的解釋說明，告知用戶填寫表單的用途、填寫表單的注意事項(xiàng)或告知用戶的信息安全性提示等，消除用戶的疑慮。

全局提示

② 單項(xiàng)提示

單項(xiàng)提示對應(yīng)單個輸入域，只對此項(xiàng)輸入域進(jìn)行解釋說明，定位精準(zhǔn)便于用戶理解。

單項(xiàng)提示也可以選用不同的布局，分別有輸入框內(nèi)提示、提示圖標(biāo)在鼠標(biāo)haver時氣泡提示、輸入框下方文字提示、輸入框后方文字提示單機(jī)輸入框氣泡提示5種提示布局。

單項(xiàng)提示

注意1：有效提示

讓用戶能在上下文中獲取信息，幫助他完成輸入。

用戶填寫表單時最容易出現(xiàn)的問題就是不知道填寫什么格式，例如民族填寫“漢族”還是“漢”；生日填寫“1997-06-11”還是“199年6月11日”這里可以提示具體的填寫示例幫助用戶理解。

有效提示

2）反饋信息

反饋信息提示是在用戶輸入時或輸入后對輸入內(nèi)容進(jìn)行的反饋，提示當(dāng)前輸入域所填寫的內(nèi)容是否符合填寫規(guī)則；反饋信息提示一般為文字提示表達(dá)較為準(zhǔn)確同時可結(jié)合圖標(biāo)進(jìn)行反饋，讓用戶感受更加直觀。

反饋信息

注意：

這里的反饋信息要精準(zhǔn)到用看到提示信息就能發(fā)現(xiàn)填寫出錯點(diǎn)，不要讓用戶產(chǎn)生歧義；例如“用戶名填寫錯誤”要提示用戶名具體錯誤的原因“用戶名不能添加符號”“用戶名重復(fù)”“用戶名不能超過8個字符”等具體原因，讓用戶明確修改意圖。

反饋信息要精準(zhǔn)

① 校驗(yàn)方式

在產(chǎn)品設(shè)計中我們還需要了解反饋信息的校驗(yàn)方式，校驗(yàn)方式主要分為：前端校驗(yàn)、后端校驗(yàn)。

• 前端校驗(yàn)：可以校驗(yàn)輸入的內(nèi)容格式是否有誤例如郵箱格式、用戶名格式、手機(jī)號格式，與數(shù)據(jù)庫無關(guān)。
• 后端校驗(yàn)：主要用來校驗(yàn)內(nèi)容信息是否有誤例如客戶名稱是否存在，密碼是否正確等與數(shù)據(jù)庫相關(guān)的校驗(yàn)。

校驗(yàn)方式

② 觸發(fā)條件

觸發(fā)條件是說檢驗(yàn)的提示信息在什么節(jié)點(diǎn)（填寫時、失焦時、點(diǎn)擊提交時）進(jìn)行提示，這里分為單項(xiàng)觸發(fā)、提交觸發(fā)。

觸發(fā)條件1

單項(xiàng)觸發(fā)：

觸發(fā)提示的條件是每填寫完一項(xiàng)時，校驗(yàn)用于輸入項(xiàng)較多，且某個輸入項(xiàng)有先決條件，會對接下來的輸入產(chǎn)生影響；這是可以避免完整輸入后才反饋信息，為用戶增加犯錯成本，一般登陸時就會采用單項(xiàng)觸發(fā)。

百度網(wǎng)站的注冊表單頁面，用戶名設(shè)置要求用戶輸入的用戶名必須獨(dú)立，根據(jù)用戶輸入的名稱失焦時作出相應(yīng)反饋。

提交觸發(fā)：

觸發(fā)條件是填寫完表單點(diǎn)擊“提交”時統(tǒng)一校驗(yàn)，用于表單體量較小出錯率較低的表單頁面，已從給出所有不和規(guī)則的表單信息，根據(jù)具體的提示內(nèi)容可以是單項(xiàng)提示也可以全局提示；百度網(wǎng)頁登錄賬號時，提交后校驗(yàn)密碼并給出相應(yīng)提示。

觸發(fā)條件2

4. 操作按鈕

當(dāng)頁面表單信息必填項(xiàng)未填寫完整時，提交或保存等主按鈕一般為灰色狀態(tài)，不可進(jìn)行下一步操作，當(dāng)表單信息填寫完成后按鈕變?yōu)楦吡量蛇M(jìn)行下一步操作。

注意：當(dāng)表單信息非常少時一般為3個或以下的情況這里主按鈕禁用原則生效，這里主按鈕禁用的狀態(tài)非常容易被用戶理解，用戶輸入內(nèi)容就會得到反饋。

但當(dāng)頁面表單復(fù)雜超過5個時不建議使用主按鈕禁用原則，因?yàn)楸韱伪旧砜赡馨靥?非必填等多種選項(xiàng)，流程不清晰，主按鈕禁用用戶不易識別，會造成用戶疑問，可以提交時校驗(yàn)進(jìn)行并對表單進(jìn)行單項(xiàng)提示。

操作按鈕

六、表單應(yīng)用補(bǔ)充

1. 保護(hù)按鈕

保護(hù)按鈕的建立，一般用在密碼保護(hù)中，為了密碼的安全，可設(shè)置保護(hù)按鈕，在輸入框后設(shè)置隱藏秘密，給用戶帶來安全感。

2. 重置按鈕

重置按鈕，在表單輸入域非常多時可設(shè)置“重置”與“返回重置”按鈕。

用戶填寫表單信息后，想重新填寫，因?yàn)楸韱屋斎胗虮姸嘈枰謩硬僮鲃h除，對用戶來說非常不友好，這里設(shè)置“重置”表單按鈕就可以解決問題——為了防止用戶操作失誤可以提示彈窗確認(rèn)，為了防止用戶后悔可以在點(diǎn)擊“重置”后按鈕版更新為“返回重置”回到重置之前的頁面，給用戶帶來良好的體驗(yàn)。

3. 數(shù)據(jù)持久化

數(shù)據(jù)持久化，用于解決在填寫表單途中用戶不小心退出或關(guān)閉表單，再次打開表單時之前的填寫內(nèi)容丟失需要重新填寫的問題。

數(shù)據(jù)持久化簡單來說就是前端對已填寫為保存的數(shù)據(jù)進(jìn)行緩存，再次打開頁面時可接著上次的表單進(jìn)行完善。

本文@?大星星? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Pexels，基于CC0協(xié)議。