B端页面——详细表单设计流程
一、什么是表單？
表單設(shè)計(jì)是B端產(chǎn)品設(shè)計(jì)的基礎(chǔ)頁(yè)面，想要做好表單設(shè)計(jì)首先要搞清楚表單的應(yīng)用場(chǎng)景。
表單是用戶采集數(shù)據(jù)信息的核心場(chǎng)景，同時(shí)又通過(guò)表單向用戶展示數(shù)據(jù)信息，簡(jiǎn)而言之表單是用戶與數(shù)據(jù)庫(kù)之間的橋梁；它可以確保用戶按要求填寫(xiě)信息并提交給后臺(tái)使用或引導(dǎo)用戶進(jìn)行各種設(shè)置，好的表單可以幫助用戶提升效率增加用戶滿意度。
表單價(jià)值
二、為什么需要表單？
原始的系統(tǒng)或軟件是沒(méi)有用戶信息的，用戶通過(guò)表單來(lái)進(jìn)行數(shù)據(jù)信息的錄入，錄入的信息越多，數(shù)據(jù)庫(kù)管理的信息就會(huì)越多，才能凸顯出該系統(tǒng)或軟件的數(shù)據(jù)管理優(yōu)勢(shì)才能實(shí)現(xiàn)其價(jià)值；因此表單是實(shí)現(xiàn)產(chǎn)品管理價(jià)值的第一步。
例如我們常用的“飛書(shū)”、“teambition”、“語(yǔ)雀”等產(chǎn)品本身是沒(méi)有數(shù)據(jù)信息的，想要實(shí)現(xiàn)其產(chǎn)品價(jià)值就要通過(guò)用戶錄入表單信息到數(shù)據(jù)庫(kù)，錄入的數(shù)據(jù)信息越豐富越能體現(xiàn)產(chǎn)品讀取/管理數(shù)據(jù)信息的便捷，所以表單設(shè)計(jì)的質(zhì)量高低也影響了整個(gè)產(chǎn)品的滿意度評(píng)價(jià)。
飛書(shū)初始頁(yè)面
B端產(chǎn)品的本質(zhì)是對(duì)數(shù)據(jù)信息的“增刪改查”在表單的應(yīng)用場(chǎng)景里對(duì)應(yīng)了“增”和“改”一般表現(xiàn)為表格中的“新增”與“編輯”（如下圖）；針對(duì)不同的用戶數(shù)據(jù)要進(jìn)行不同的表單設(shè)計(jì)，以便適用各個(gè)場(chǎng)景功能。
表單入口
三、表單設(shè)計(jì)原則與目標(biāo)
1. 表單設(shè)計(jì)目標(biāo)
幫助用戶高效、準(zhǔn)確、一致、安全的完成數(shù)據(jù)錄入與數(shù)據(jù)編輯。
表單設(shè)計(jì)目標(biāo)
2. 表單設(shè)計(jì)原則
1）高效性
通過(guò)合理的信息輸入組件與頁(yè)面布局和交互方式可以使用戶快速完成表單頁(yè)的信息填寫(xiě)任務(wù)。
例如，必填選項(xiàng)與非必填選項(xiàng)標(biāo)示問(wèn)題：
當(dāng)全部為必填項(xiàng)時(shí)可以不用標(biāo)示；
當(dāng)必填項(xiàng)數(shù)量占比極大，非必填項(xiàng)只占很少部分時(shí)可直接標(biāo)注非必填項(xiàng)，降低用戶的視覺(jué)干擾；
當(dāng)必填項(xiàng)比重不大則需要標(biāo)注必填項(xiàng)表識(shí)，而非無(wú)腦全部加“*”；
高效性
2）準(zhǔn)確性
表單的準(zhǔn)確性表現(xiàn)有很多，主要指不要讓你傳達(dá)的信息產(chǎn)生歧義，讓所有的用戶看到這個(gè)信息后的用戶行為保持一致，規(guī)避用戶犯錯(cuò)。
案例1：快速定位表單重要信息和當(dāng)前填寫(xiě)選項(xiàng)，例如，飛書(shū)文檔左側(cè)快速定位。
準(zhǔn)確性1
案例2：輸入框的長(zhǎng)度根據(jù)用戶輸入信息的多少進(jìn)行設(shè)置，不要讓輸入框?yàn)榱苏R保持一致，太長(zhǎng)的輸入框會(huì)給用戶帶來(lái)壓力。
準(zhǔn)確性2
3）一致性
針對(duì)同一產(chǎn)品下的頁(yè)面風(fēng)格/字號(hào)/組件使用都要保持一致，避免給用戶造成混淆增加理解成本。
一致性
4）安全感
要有一定的危險(xiǎn)操作保護(hù)措施，例如，返回不保存表單的危險(xiǎn)提示或即時(shí)保存表單的安全操作防止數(shù)據(jù)丟失；同時(shí)針對(duì)不同的使用場(chǎng)景增加返回上一步、重置填寫(xiě)、撤銷填寫(xiě)等幫助用戶修改錯(cuò)誤的后悔藥功能。
安全感
四、表單構(gòu)成
表單通常由標(biāo)簽、輸入域、填寫(xiě)提示、操作按鈕等幾部分構(gòu)成。
表單構(gòu)成
1. 標(biāo)簽
標(biāo)簽是為了告訴用戶此項(xiàng)表單的輸入內(nèi)容是什么，通常放在輸入內(nèi)容之前，有時(shí)候是正前方，有時(shí)候是正上方根據(jù)具體的布局調(diào)整，特殊情況放在輸入內(nèi)容里（后面會(huì)詳細(xì)講解哪種頁(yè)面適合哪種標(biāo)簽形式這里就不展開(kāi)說(shuō)了）。
填寫(xiě)內(nèi)容過(guò)多容易引起用戶的恐慌，填寫(xiě)內(nèi)容較少又不足以支撐后續(xù)的管理維護(hù)，為了平衡用戶感受和后續(xù)管理維護(hù)，這里提出不影響后續(xù)操作的前提下最少填寫(xiě)原則，就可以把表單標(biāo)簽按需求分為必填/選填/不填三項(xiàng)。
標(biāo)簽分類
必填項(xiàng)是指用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作，同時(shí)也是后續(xù)管理維護(hù)的保障；
選填項(xiàng)是指該項(xiàng)信息用戶可填可不填，根據(jù)用戶的意愿和需求度來(lái)自愿選擇，該項(xiàng)的填寫(xiě)不會(huì)影響后續(xù)的管理維護(hù)；
不填項(xiàng)是指該項(xiàng)不需要用戶填寫(xiě)，由系統(tǒng)自動(dòng)生成例如填寫(xiě)身份證號(hào)就不需要再填寫(xiě)生日，可由系統(tǒng)自動(dòng)生成。
注意：為了保證頁(yè)面整體高效，表單填寫(xiě)的內(nèi)容盡量少的使用選填項(xiàng)，省略不填項(xiàng)。
2. 輸入域
輸入域是用來(lái)采集用戶數(shù)據(jù)信息的核心內(nèi)容，每個(gè)輸入域字段包含一個(gè)類型的數(shù)據(jù)信息。
對(duì)于用戶來(lái)說(shuō)，表單的填寫(xiě)體驗(yàn)再好也是負(fù)擔(dān)，所以我們要盡可能的減少用戶思考、理解，降低用戶的焦躁情緒，同時(shí)提高表單的輸入效率，輸入域的選擇尤為重要。
1）輸入域分類
輸入域主要有以下四個(gè)類型：
輸入域分類
輸入，輸入框：
輸入框
選擇內(nèi)容：選擇器、級(jí)聯(lián)選擇器、樹(shù)選擇、單選框、多選框、穿梭框、開(kāi)關(guān)。
選擇內(nèi)容
選擇時(shí)間：時(shí)間選擇、日期選擇、日期時(shí)間選擇。
選擇時(shí)間
選擇數(shù)值范圍：步進(jìn)器、滑動(dòng)輸入條。
選擇數(shù)值范圍
上傳：文件上傳。
上傳
2）注意
① 輸入框長(zhǎng)度確定
表單輸入框的寬度要怎樣確定呢？實(shí)際業(yè)務(wù)中，大部分輸入框所需填寫(xiě)內(nèi)容都存在理想長(zhǎng)度，輸入框的寬度暗示填寫(xiě)內(nèi)容的長(zhǎng)度，合理的寬度幫助減少用戶的焦慮，給用戶帶來(lái)安全感。
在單項(xiàng)排布時(shí)也要盡量考慮用戶的觀感，通過(guò)設(shè)置合理的默認(rèn)寬度尺寸，讓設(shè)計(jì)師快速搭建出觀感舒適又給用戶降低焦慮的頁(yè)面。
我們可以根據(jù)產(chǎn)品的具體業(yè)務(wù)，羅列出常用的輸入內(nèi)容，根據(jù)這些輸入內(nèi)容的長(zhǎng)短來(lái)進(jìn)行具體輸入框尺寸的制定；如果輸入內(nèi)容很多，那么要定的尺寸很碎，針對(duì)每一個(gè)常用內(nèi)容制定一個(gè)輸入框尺寸是不現(xiàn)實(shí)的，在頁(yè)面實(shí)際設(shè)計(jì)中就會(huì)顯得頁(yè)面很凌亂，如下圖。
那么我們要解決的問(wèn)題就是如何讓輸入框在單個(gè)狀態(tài)與組合狀態(tài)下都盡量保持較好的對(duì)齊狀態(tài)，同時(shí)輸入框的尺寸還有規(guī)律可循。
輸入框長(zhǎng)度確定1
輸入框尺寸的確定，參考Ant design表單設(shè)計(jì)研究結(jié)論得到的5種高頻的寬度需求區(qū)間，以尺碼類比分別是：XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。
輸入框長(zhǎng)度確定2
我們可以參考這個(gè)XS尺碼的尺寸范圍（80-160px）來(lái)定制自己的輸入框尺寸x，對(duì)這個(gè)尺寸進(jìn)行x*2+8px（1個(gè)輸入框間距為8px）、x*3+16px（2個(gè)輸入框間距為16px）、*4+24（3個(gè)輸入框間距為24px）、*5+32（4個(gè)輸入框間距為32px）得到相應(yīng)的其他尺寸輸入框，這里把輸入框的長(zhǎng)度計(jì)算加上了輸入框間距是為了更好的使輸入框在不同的場(chǎng)景中對(duì)齊。
例如我們產(chǎn)品業(yè)務(wù)中經(jīng)常要填寫(xiě)日期，我們就根據(jù)常用的日期“2020-12-30”最大字段來(lái)定制我們的最小輸入框尺寸為118px，那么我們就得到了118px*2+8px=244px、118px*3+16px=370px….五種尺寸（如下圖）。
輸入框長(zhǎng)度確定3
然后可以再反向驗(yàn)證我們的常用信息內(nèi)容，是不是都能找到對(duì)應(yīng)的尺寸適配，如果不行的話就調(diào)整我們最小輸入框的尺寸，使大部分的填寫(xiě)內(nèi)容都能有合適的尺寸。
經(jīng)過(guò)我們?cè)O(shè)計(jì)稿適配，在各復(fù)雜度的組合輸入框和單輸入框組合排列，發(fā)現(xiàn)在場(chǎng)景中實(shí)際的應(yīng)用效果都遠(yuǎn)好于從前。
輸入框長(zhǎng)度確定4
② 選擇框優(yōu)于輸入框
輸入域的選擇要為用戶著想，因?yàn)橛脩舾敢獠僮魇髽?biāo)而不是鍵盤(pán)，任何密集的操作都會(huì)給用戶帶來(lái)壓力降低效率，所以能讓用戶進(jìn)行選擇就不要讓用戶輸入。
選擇的操作難度低于輸入，效率高于輸入，用戶的填寫(xiě)可以停留在一定的范圍之內(nèi)進(jìn)行選擇，不用在茫茫大海里進(jìn)行撈針行動(dòng)，也有可能撈錯(cuò)針就是錯(cuò)別字等輸入錯(cuò)誤的風(fēng)險(xiǎn)，默認(rèn)的幾個(gè)選項(xiàng)就可以解決這個(gè)問(wèn)題。
選擇框由于輸入框
③ 平鋪單選優(yōu)于下拉選擇框
平鋪單選也并非所有場(chǎng)景都優(yōu)于下拉選擇，但頁(yè)面中需要快速響應(yīng)優(yōu)先建議選用平鋪單選，用戶直觀的看到展示選項(xiàng)，直接單機(jī)選中目標(biāo)，提升操作效率。
平鋪單選適用場(chǎng)景：5個(gè)選項(xiàng)以內(nèi)、選項(xiàng)較長(zhǎng)、選項(xiàng)帶說(shuō)明文案。
下拉選擇框適用場(chǎng)景：超過(guò)5個(gè)選項(xiàng)，有默認(rèn)高頻選項(xiàng)、選項(xiàng)文案不長(zhǎng)。
在下拉選擇框中如果選項(xiàng)過(guò)多的情況，可以把高頻選項(xiàng)置頂或采用模糊搜索匹配選項(xiàng)，幫助用戶快捷選擇選項(xiàng)。
下拉選項(xiàng)的選擇后最好不要引起后續(xù)表單頁(yè)面的變化，后續(xù)表單變化建議采用平鋪單選，用戶感知變化產(chǎn)生不安可以隨時(shí)取消選擇或選擇其他選項(xiàng)返回原來(lái)頁(yè)面查看變化內(nèi)容。
平鋪單選優(yōu)于下拉選擇框
④ 智能聯(lián)想
智能聯(lián)想輸入域可以增加用戶對(duì)表單頁(yè)面的滿意度不至于用戶在復(fù)雜的表單頁(yè)面抓狂。
用戶通過(guò)標(biāo)簽傳達(dá)的信息給予關(guān)鍵詞，根據(jù)提供的關(guān)鍵詞輸入框可以實(shí)現(xiàn)模糊搜索、智能聯(lián)想、自動(dòng)匹配等選項(xiàng)；用戶就可以根據(jù)聯(lián)想出的選項(xiàng)進(jìn)行單機(jī)選擇，讓數(shù)據(jù)庫(kù)跑在用戶的前面給用戶節(jié)省更多的時(shí)間，提高工作效率，常見(jiàn)的場(chǎng)景在谷歌瀏覽器里輸入網(wǎng)址，你輸入幾個(gè)字母后它總是能猜對(duì)你要找的網(wǎng)址，這里是記錄了用戶之前訪問(wèn)過(guò)的網(wǎng)址根據(jù)高低頻呈現(xiàn)給用戶進(jìn)行選擇。
還有郵箱后綴的聯(lián)想、注冊(cè)唯一用戶名聯(lián)想（網(wǎng)站注冊(cè)用戶要求每個(gè)人的用戶名都不重復(fù)時(shí)，在你輸入別人使用過(guò)的用戶名時(shí)，系統(tǒng)會(huì)為你推薦幾個(gè)類似用戶名供用戶選擇）都是從用戶出發(fā)的操作。
?智能聯(lián)想
3. 提示信息
提示信息是為了幫助用戶更準(zhǔn)確的理解輸入域的具體操作，根據(jù)輸入流程將用戶輸入過(guò)程分為輸入前、輸入中、輸入后三個(gè)階段，提示信息在輸入前發(fā)生的稱為引導(dǎo)提示，提示信息在輸入中/后發(fā)生的叫反饋提示。
提示信息
4. 操作選項(xiàng)
操作選項(xiàng)指表單填寫(xiě)完成后，要進(jìn)入的操作動(dòng)作例如提交、返回、保存草稿等結(jié)束當(dāng)前頁(yè)面的操作流程，這里要注意雖然可能頁(yè)面的操作按鈕有很多但主按鈕只有一個(gè)。
主按鈕依據(jù)：常用按鈕或更想讓用戶點(diǎn)擊的按鈕。
操作選項(xiàng)
五、表單形式
1. 標(biāo)簽
前面講了不同的使用場(chǎng)景選擇不同的標(biāo)簽布局，讓我們先來(lái)了解一下標(biāo)簽布局，主要分成4種：左對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽、頂標(biāo)簽、行內(nèi)標(biāo)簽。每一種對(duì)齊方式都有一定的優(yōu)點(diǎn)與局現(xiàn)性；因此在合適的場(chǎng)景下選擇合適的標(biāo)簽樣式，可以提升用戶的輸入效率。
標(biāo)簽
1）左對(duì)齊標(biāo)簽
左對(duì)齊標(biāo)簽是最常用的一種標(biāo)簽，但它由于它橫向占用空間較大所以不適用于橫向空間狹小的表單頁(yè)面，左對(duì)齊有利于用戶對(duì)標(biāo)簽的整體查看，能夠清楚的看到表單也整體都要填寫(xiě)那些信息；但有由于標(biāo)簽長(zhǎng)短不一，有些標(biāo)簽距離輸入框較遠(yuǎn)，使標(biāo)簽與其輸入框親密性降低導(dǎo)致用戶填寫(xiě)費(fèi)力，用戶存留時(shí)間較長(zhǎng)，所以左對(duì)齊標(biāo)簽一般用于表單查看頁(yè)面或稱為詳情頁(yè)。
另一方面來(lái)講左標(biāo)簽雖然讓用戶存留的時(shí)間更長(zhǎng)同時(shí)也讓用戶瀏覽和思考的時(shí)間變長(zhǎng)，這種場(chǎng)景下保證標(biāo)簽與輸入域親密的前提下，在需要用戶謹(jǐn)慎填寫(xiě)的表單頁(yè)面可以采用這種對(duì)齊方式；例如阿里云購(gòu)買頁(yè)面讓用戶仔細(xì)看、謹(jǐn)慎選擇。
優(yōu)點(diǎn)：用戶視覺(jué)動(dòng)線左對(duì)齊，方便閱讀，節(jié)約垂直空間。
缺點(diǎn)：填寫(xiě)速度慢，浪費(fèi)橫向空間，標(biāo)簽長(zhǎng)度和輸入框彈性小。
左對(duì)齊標(biāo)簽
2）右對(duì)齊標(biāo)簽
右對(duì)齊標(biāo)簽與左對(duì)齊標(biāo)簽一樣橫向占用空間較大，不利于狹長(zhǎng)頁(yè)面的布局，右對(duì)齊由于標(biāo)簽字段長(zhǎng)短不一導(dǎo)致用戶的視覺(jué)動(dòng)線不在同一垂直線所以右對(duì)齊標(biāo)簽有利于用戶的填寫(xiě)，但是不利于用戶對(duì)標(biāo)簽信息的查看。
優(yōu)點(diǎn)：節(jié)約垂直空間，有利于用戶高效填寫(xiě)
缺點(diǎn)：可讀性較弱，標(biāo)簽長(zhǎng)度和輸入框彈性小。
3）頂部標(biāo)簽
頂部標(biāo)簽是標(biāo)簽在輸入域的上方，與輸入域進(jìn)行左對(duì)齊，這樣可以節(jié)省橫向空間的使用、用戶在填寫(xiě)時(shí)也比較方便，在移動(dòng)端產(chǎn)品的設(shè)計(jì)中下拉的交互比左右滑動(dòng)的交互更為便捷所以采用頂部標(biāo)簽較為常見(jiàn)。
頂部對(duì)齊可以讓用戶快速填寫(xiě)表單，完成任務(wù)的場(chǎng)景一般采用頂部標(biāo)簽，Prowork創(chuàng)建任務(wù)時(shí)就用的頂對(duì)齊，讓用戶快速創(chuàng)建任務(wù)。
優(yōu)點(diǎn)：對(duì)齊舒適、用戶瀏覽和填寫(xiě)表單的速度較快，節(jié)省橫向空間。
缺點(diǎn)：占用垂直空間。
頂部標(biāo)簽
4）行內(nèi)標(biāo)簽
行內(nèi)標(biāo)簽相當(dāng)于提示信息，在行內(nèi)顯示，雖然可以大大節(jié)省橫向和縱向的空間，但當(dāng)提示信息消失時(shí)會(huì)使用戶感到迷茫，使用體驗(yàn)較差，而且拓展性也較差；因?yàn)檩斎胗虿恢拱ㄝ斎肟蛉绻瞧戒亞芜x或開(kāi)關(guān)則無(wú)法沿用此種標(biāo)簽。UI中國(guó)登陸頁(yè)表單用的就是這種行內(nèi)對(duì)齊標(biāo)簽，輸入內(nèi)容少，用戶動(dòng)線清晰。
優(yōu)點(diǎn)：節(jié)省空間，多用于移動(dòng)端和登陸頁(yè)面。
缺點(diǎn)：輸入狀態(tài)消失，用戶產(chǎn)生困惑，拓展性差。
行內(nèi)標(biāo)簽
2. 輸入域
1）輸入域交互
表單頁(yè)面的交互方式分為以下4種：就地編輯、氣泡卡片、彈窗、抽屜、頁(yè)面跳轉(zhuǎn)，根據(jù)具體的使用場(chǎng)景選擇合適的頁(yè)面交互。
輸入域交互
① 原位編輯
原位編輯是比較輕量化的表單形式，適用于表單內(nèi)容較少，使用頻率較低的場(chǎng)景，操作編輯，雖取隨用，隨用隨變；表單操作后頁(yè)面隨即發(fā)生反饋改變，所見(jiàn)即所得，保證用戶對(duì)主要功能的高效操作。
原位編輯一般在列表、卡片、詳情中單擊或雙擊激活編輯態(tài)進(jìn)行原位編輯，用戶操作更加流暢，不會(huì)打斷還可單擊空白處隨時(shí)退出。
原位編輯
② 氣泡卡片
氣泡卡片交互方式也是比較輕量化的，適用信息數(shù)據(jù)容量小于5個(gè)的場(chǎng)景，所產(chǎn)生的表單頁(yè)與當(dāng)前的頁(yè)面親密性緊密相關(guān)，也可隨取隨用，隨時(shí)退出。
氣泡卡片
③ 彈窗/抽屜
彈窗/抽屜交互的表單樣式是比較常見(jiàn)的交互樣式，它的拓展性更強(qiáng)，承載的信息更多，當(dāng)前頁(yè)面的分支操作，體現(xiàn)兩頁(yè)面之間的層級(jí)關(guān)系；在原位編輯與氣泡卡片無(wú)法滿足交互時(shí)選擇彈窗/抽屜交互，用戶在不離開(kāi)當(dāng)前頁(yè)面的情況下進(jìn)行插入性操作，用戶也可隨時(shí)退出操作。
彈窗/抽屜頁(yè)面也不會(huì)打斷當(dāng)前頁(yè)面的流程，流暢性次于原位編輯與氣泡卡片交互但但優(yōu)于頁(yè)面跳轉(zhuǎn)。
抽屜的承載能力大于彈窗，根據(jù)數(shù)據(jù)信息選擇彈窗或抽屜。
彈窗
抽屜
④ 頁(yè)面跳轉(zhuǎn)
頁(yè)面跳轉(zhuǎn)也分為兩種：跳轉(zhuǎn)新頁(yè)面和跳轉(zhuǎn)當(dāng)前頁(yè)面，新頁(yè)面為當(dāng)前頁(yè)面的分支流程，不會(huì)干涉用戶對(duì)主頁(yè)面的操作，頁(yè)面功能是獨(dú)立的；跳轉(zhuǎn)頁(yè)面為當(dāng)前頁(yè)面流程的關(guān)鍵步驟，提示用戶已經(jīng)進(jìn)入下一步的操作，更少的建立新頁(yè)面就會(huì)讓用戶對(duì)業(yè)務(wù)流程更加清晰，減少用戶對(duì)新頁(yè)面的注意力，讓用戶專注于當(dāng)前表單的數(shù)據(jù)信息中。
頁(yè)面跳轉(zhuǎn)承載的表單的數(shù)據(jù)信息最多，但對(duì)數(shù)據(jù)的反饋不及時(shí)，體量較大，頁(yè)面更加穩(wěn)定，當(dāng)所需表單特別重要時(shí)采用頁(yè)面跳轉(zhuǎn)的交互。
頁(yè)面跳轉(zhuǎn)
2）選擇輸入域交互
如何選用合適的交互方式，應(yīng)從數(shù)據(jù)信息的容量和親密度兩方面梳理，親密性越高選擇就地編輯與氣泡卡片交互，容量越大選用頁(yè)面跳轉(zhuǎn)進(jìn)行交互。
選擇輸入域交互
3）輸入域布局
在表單頁(yè)設(shè)計(jì)中根據(jù)數(shù)據(jù)信息容量來(lái)選擇合理的布局方式，保證頁(yè)面展示屏效與用戶操作效率，表單頁(yè)面布局可分為4種分別為基礎(chǔ)布局、分組布局、標(biāo)簽頁(yè)布局。
輸入域布局
① 基礎(chǔ)布局
單例與多列布局：
單列布局：為了用戶的高效填寫(xiě)一般會(huì)采用單列布局，視覺(jué)動(dòng)線垂直向下延伸，避免用戶遺漏填寫(xiě)現(xiàn)象發(fā)生，但這樣布局容易造成頁(yè)面出現(xiàn)大量空白，多數(shù)是不被老板喜歡的；但在表單內(nèi)從上到下單列布局，引導(dǎo)用戶縱向閱讀，這是能夠最高效完成任務(wù)的布局方式。
單列布局
多列布局：多列布局在一定程度上可以提高空間利用率，卻犧牲了用戶的使用感受，還有可能造成用戶漏填信息；多列布局的分組分為兩種橫向分組和縱向分組，在實(shí)際頁(yè)面設(shè)計(jì)中一定要選擇多列布局時(shí)請(qǐng)選擇橫向分組而不是縱向分組。
橫向分組：頁(yè)面利用率高，視覺(jué)動(dòng)線也盡量減少了用戶遺漏。
多列布局
縱向分組：頁(yè)面整潔，但與用戶常規(guī)閱讀順序相悖十分容易遺漏填寫(xiě)信息，不建議使用。
縱向分組
提示：對(duì)表單信息的分類可以有效的降低視覺(jué)噪音，幫助用戶關(guān)注重要的填寫(xiě)內(nèi)容，根據(jù)表單數(shù)據(jù)信息的優(yōu)先級(jí)進(jìn)行分類，將優(yōu)先級(jí)高的放在表單前面，優(yōu)先級(jí)低的放在表單后面，或進(jìn)行折疊收起；在pro work中就很好的運(yùn)用了這一點(diǎn)，在創(chuàng)建項(xiàng)目時(shí)用戶填寫(xiě)成本極低，在密集的工作環(huán)境中可以快速完成項(xiàng)目的創(chuàng)建，但在空閑的時(shí)間里用戶就可以點(diǎn)擊更多選項(xiàng)來(lái)進(jìn)行詳細(xì)填寫(xiě)。
折疊收起
② 分組布局
標(biāo)題分組：
當(dāng)表單的數(shù)據(jù)信息較多一般超過(guò)7個(gè)輸入域，同時(shí)關(guān)聯(lián)性沒(méi)有那么強(qiáng)且可以被分組時(shí)，我們可以幫助用分組的方式幫用戶設(shè)置幾個(gè)休息點(diǎn)，讓用戶把要填寫(xiě)表單的大任務(wù)拆解成幾個(gè)小任務(wù)來(lái)完成；將相同信息表單數(shù)據(jù)進(jìn)行分組，這樣即使有很多信息疊加在一起，用戶在輸入上的心理壓力與視覺(jué)疲勞都會(huì)得到緩解。
標(biāo)題分組
“銷售易”個(gè)人設(shè)置基礎(chǔ)表單頁(yè)面，設(shè)置基本信息、聯(lián)系方式等標(biāo)題作為分組，層次清晰，用信息分組給用戶減壓。
“銷售易”個(gè)人設(shè)置
卡片分組：
當(dāng)表單數(shù)據(jù)內(nèi)容體量很大時(shí)以超過(guò)一屏為界，關(guān)聯(lián)性更弱且數(shù)據(jù)信息可被分類歸納時(shí)，可通過(guò)卡片分組的形式展示，在這里可對(duì)單獨(dú)的卡片進(jìn)行命名。
卡片分組
“華為云”購(gòu)買主機(jī)表單根據(jù)輸入信息將表單劃分為卡片模塊，使表單信息層級(jí)更加清晰。
華為云
③ 標(biāo)簽分組
當(dāng)表單數(shù)據(jù)信息之間沒(méi)有特定的關(guān)聯(lián)性，可以單獨(dú)設(shè)置，且每個(gè)設(shè)置項(xiàng)都包含多個(gè)輸入域，且多個(gè)輸入域都使用了標(biāo)題分組的情況下，布局就可以采用標(biāo)簽頁(yè)布局進(jìn)行展示操作。
標(biāo)簽分組
“有贊微商城”配送管理標(biāo)簽分組頁(yè)面
有贊微商城
④ 分步驟
分步驟的布局形式就與頁(yè)面的數(shù)據(jù)信息復(fù)雜度沒(méi)有太大關(guān)系了，主要是表單數(shù)據(jù)信息具有邏輯關(guān)系，這一步操作完成后才能進(jìn)行下一步的操作；分步驟布局只展示當(dāng)前步驟對(duì)應(yīng)的輸入域，點(diǎn)擊下一步校驗(yàn)后才可繼續(xù)填寫(xiě)。
讓用戶分步進(jìn)行操作，明確當(dāng)前用戶目標(biāo)，減少用戶負(fù)擔(dān)；及時(shí)的反饋校驗(yàn)，也避免填寫(xiě)完成后才發(fā)現(xiàn)中間的表單填寫(xiě)有誤，降低用戶的犯錯(cuò)成本。
分步驟
“有贊微商城”新建批量導(dǎo)入分步驟頁(yè)面。
“有贊微商城”新建批量導(dǎo)入
4）選擇輸入域布局
選擇輸入域布局根據(jù)表單信息數(shù)據(jù)的復(fù)雜性與親密度進(jìn)行選擇
選擇輸入域布局
3. 提示信息
提示信息在不同的表單輸入階段分為不同的類型，主要分為以下2類：
輸入前：引導(dǎo)信息；
輸入中后：反饋信息（此處有個(gè)前中后示意圖）。
提示信息
1）引導(dǎo)信息
引導(dǎo)信息是在用戶填寫(xiě)表單前對(duì)表單填寫(xiě)內(nèi)容進(jìn)行解釋說(shuō)明的提示信息，一般分為全局提示與單項(xiàng)提示。
① 全局提示
全局提示一般位于整個(gè)表單的最開(kāi)始，是對(duì)整個(gè)表單的解釋說(shuō)明，告知用戶填寫(xiě)表單的用途、填寫(xiě)表單的注意事項(xiàng)或告知用戶的信息安全性提示等，消除用戶的疑慮。
全局提示
② 單項(xiàng)提示
單項(xiàng)提示對(duì)應(yīng)單個(gè)輸入域，只對(duì)此項(xiàng)輸入域進(jìn)行解釋說(shuō)明，定位精準(zhǔn)便于用戶理解。
單項(xiàng)提示也可以選用不同的布局，分別有輸入框內(nèi)提示、提示圖標(biāo)在鼠標(biāo)haver時(shí)氣泡提示、輸入框下方文字提示、輸入框后方文字提示單機(jī)輸入框氣泡提示5種提示布局。
單項(xiàng)提示
注意1：有效提示
讓用戶能在上下文中獲取信息，幫助他完成輸入。
用戶填寫(xiě)表單時(shí)最容易出現(xiàn)的問(wèn)題就是不知道填寫(xiě)什么格式，例如民族填寫(xiě)“漢族”還是“漢”；生日填寫(xiě)“1997-06-11”還是“199年6月11日”這里可以提示具體的填寫(xiě)示例幫助用戶理解。
有效提示
2）反饋信息
反饋信息提示是在用戶輸入時(shí)或輸入后對(duì)輸入內(nèi)容進(jìn)行的反饋，提示當(dāng)前輸入域所填寫(xiě)的內(nèi)容是否符合填寫(xiě)規(guī)則；反饋信息提示一般為文字提示表達(dá)較為準(zhǔn)確同時(shí)可結(jié)合圖標(biāo)進(jìn)行反饋，讓用戶感受更加直觀。
反饋信息
注意：
這里的反饋信息要精準(zhǔn)到用看到提示信息就能發(fā)現(xiàn)填寫(xiě)出錯(cuò)點(diǎn)，不要讓用戶產(chǎn)生歧義；例如“用戶名填寫(xiě)錯(cuò)誤”要提示用戶名具體錯(cuò)誤的原因“用戶名不能添加符號(hào)”“用戶名重復(fù)”“用戶名不能超過(guò)8個(gè)字符”等具體原因，讓用戶明確修改意圖。
反饋信息要精準(zhǔn)
① 校驗(yàn)方式
在產(chǎn)品設(shè)計(jì)中我們還需要了解反饋信息的校驗(yàn)方式，校驗(yàn)方式主要分為：前端校驗(yàn)、后端校驗(yàn)。
前端校驗(yàn)：可以校驗(yàn)輸入的內(nèi)容格式是否有誤例如郵箱格式、用戶名格式、手機(jī)號(hào)格式，與數(shù)據(jù)庫(kù)無(wú)關(guān)。
后端校驗(yàn)：主要用來(lái)校驗(yàn)內(nèi)容信息是否有誤例如客戶名稱是否存在，密碼是否正確等與數(shù)據(jù)庫(kù)相關(guān)的校驗(yàn)。
校驗(yàn)方式
② 觸發(fā)條件
觸發(fā)條件是說(shuō)檢驗(yàn)的提示信息在什么節(jié)點(diǎn)（填寫(xiě)時(shí)、失焦時(shí)、點(diǎn)擊提交時(shí)）進(jìn)行提示，這里分為單項(xiàng)觸發(fā)、提交觸發(fā)。
觸發(fā)條件1
單項(xiàng)觸發(fā)：
觸發(fā)提示的條件是每填寫(xiě)完一項(xiàng)時(shí)，校驗(yàn)用于輸入項(xiàng)較多，且某個(gè)輸入項(xiàng)有先決條件，會(huì)對(duì)接下來(lái)的輸入產(chǎn)生影響；這是可以避免完整輸入后才反饋信息，為用戶增加犯錯(cuò)成本，一般登陸時(shí)就會(huì)采用單項(xiàng)觸發(fā)。
百度網(wǎng)站的注冊(cè)表單頁(yè)面，用戶名設(shè)置要求用戶輸入的用戶名必須獨(dú)立，根據(jù)用戶輸入的名稱失焦時(shí)作出相應(yīng)反饋。
提交觸發(fā)：
觸發(fā)條件是填寫(xiě)完表單點(diǎn)擊“提交”時(shí)統(tǒng)一校驗(yàn)，用于表單體量較小出錯(cuò)率較低的表單頁(yè)面，已從給出所有不和規(guī)則的表單信息，根據(jù)具體的提示內(nèi)容可以是單項(xiàng)提示也可以全局提示；百度網(wǎng)頁(yè)登錄賬號(hào)時(shí)，提交后校驗(yàn)密碼并給出相應(yīng)提示。
觸發(fā)條件2
4. 操作按鈕
當(dāng)頁(yè)面表單信息必填項(xiàng)未填寫(xiě)完整時(shí)，提交或保存等主按鈕一般為灰色狀態(tài)，不可進(jìn)行下一步操作，當(dāng)表單信息填寫(xiě)完成后按鈕變?yōu)楦吡量蛇M(jìn)行下一步操作。
注意：當(dāng)表單信息非常少時(shí)一般為3個(gè)或以下的情況這里主按鈕禁用原則生效，這里主按鈕禁用的狀態(tài)非常容易被用戶理解，用戶輸入內(nèi)容就會(huì)得到反饋。
但當(dāng)頁(yè)面表單復(fù)雜超過(guò)5個(gè)時(shí)不建議使用主按鈕禁用原則，因?yàn)楸韱伪旧砜赡馨靥?非必填等多種選項(xiàng)，流程不清晰，主按鈕禁用用戶不易識(shí)別，會(huì)造成用戶疑問(wèn)，可以提交時(shí)校驗(yàn)進(jìn)行并對(duì)表單進(jìn)行單項(xiàng)提示。
操作按鈕
六、表單應(yīng)用補(bǔ)充
1. 保護(hù)按鈕
保護(hù)按鈕的建立，一般用在密碼保護(hù)中，為了密碼的安全，可設(shè)置保護(hù)按鈕，在輸入框后設(shè)置隱藏秘密，給用戶帶來(lái)安全感。
2. 重置按鈕
重置按鈕，在表單輸入域非常多時(shí)可設(shè)置“重置”與“返回重置”按鈕。
用戶填寫(xiě)表單信息后，想重新填寫(xiě)，因?yàn)楸韱屋斎胗虮姸嘈枰謩?dòng)操作刪除，對(duì)用戶來(lái)說(shuō)非常不友好，這里設(shè)置“重置”表單按鈕就可以解決問(wèn)題——為了防止用戶操作失誤可以提示彈窗確認(rèn)，為了防止用戶后悔可以在點(diǎn)擊“重置”后按鈕版更新為“返回重置”回到重置之前的頁(yè)面，給用戶帶來(lái)良好的體驗(yàn)。
3. 數(shù)據(jù)持久化
數(shù)據(jù)持久化，用于解決在填寫(xiě)表單途中用戶不小心退出或關(guān)閉表單，再次打開(kāi)表單時(shí)之前的填寫(xiě)內(nèi)容丟失需要重新填寫(xiě)的問(wèn)題。
數(shù)據(jù)持久化簡(jiǎn)單來(lái)說(shuō)就是前端對(duì)已填寫(xiě)為保存的數(shù)據(jù)進(jìn)行緩存，再次打開(kāi)頁(yè)面時(shí)可接著上次的表單進(jìn)行完善。
今天晚上8點(diǎn)半在視頻號(hào)直播，給大家通俗移動(dòng)的解釋SAAS、BASS、PASS、IASS、OA、CRM、ERP等概念，也歡迎有問(wèn)題的小伙伴來(lái)聊聊，點(diǎn)擊下方按鈕預(yù)約，不錯(cuò)過(guò)直播。
最后，我建立了各大城市的產(chǎn)品交流群，想進(jìn)群小伙伴加微信：yw5201a1??我拉你進(jìn)群。
關(guān)注微信公眾號(hào)：產(chǎn)品劉?可領(lǐng)取大禮包一份。
··················END··················
今日研報(bào)：有贊云發(fā)布《2021年有贊云生態(tài)發(fā)展白皮書(shū)》，公眾號(hào)后臺(tái)回復(fù)“?有贊云”，即可下載完整PDF文件。
申明：報(bào)告版權(quán)歸?有贊云?所有，此處僅限分享學(xué)習(xí)使用，如有侵權(quán)，請(qǐng)聯(lián)系小編做刪除處理。
RECOMMEND
推薦閱讀
B端產(chǎn)品設(shè)計(jì)——批量導(dǎo)入
線下實(shí)戰(zhàn)2.0
實(shí)例講解策略產(chǎn)品經(jīng)理工作內(nèi)容
產(chǎn)品經(jīng)理需要向上思考
點(diǎn)擊“閱讀原文”
查看更多干貨
總結(jié)
以上是生活随笔為你收集整理的B端页面——详细表单设计流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： springboot集成kaptcha
- 下一篇： Shrio Unable to exec