中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、什么是表單？

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

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

表單價(jià)值

二、為什么需要表單？

原始的系統(tǒng)或軟件是沒有用戶信息的，用戶通過表單來(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à)值的第一步。

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

飛書初始頁(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）高效性

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

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

• 當(dāng)全部為必填項(xiàng)時(shí)可以不用標(biāo)示；
• 當(dāng)必填項(xiàng)數(shù)量占比極大，非必填項(xiàng)只占很少部分時(shí)可直接標(biāo)注非必填項(xiàng)，降低用戶的視覺干擾；
• 當(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àng)，例如，飛書文檔左側(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)景增加返回上一步、重置填寫、撤銷填寫等幫助用戶修改錯(cuò)誤的后悔藥功能。

安全感

四、表單構(gòu)成

表單通常由標(biāo)簽、輸入域、填寫提示、操作按鈕等幾部分構(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)簽形式這里就不展開說了）。

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

標(biāo)簽分類

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

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

2. 輸入域

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

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

1）輸入域分類

輸入域主要有以下四個(gè)類型：

輸入域分類

輸入，輸入框：

輸入框

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

選擇內(nèi)容

選擇時(shí)間：時(shí)間選擇、日期選擇、日期時(shí)間選擇。

選擇時(shí)間

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

選擇數(shù)值范圍

上傳：文件上傳。

上傳

2）注意

① 輸入框長(zhǎng)度確定

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

在單項(xiàng)排布時(shí)也要盡量考慮用戶的觀感，通過設(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è)面很凌亂，如下圖。

那么我們要解決的問題就是如何讓輸入框在單個(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)常要填寫日期，我們就根據(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)整我們最小輸入框的尺寸，使大部分的填寫內(nèi)容都能有合適的尺寸。

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

輸入框長(zhǎng)度確定4

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

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

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

選擇框由于輸入框

③ 平鋪單選優(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)帶說明文案。

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

在下拉選擇框中如果選項(xiàng)過多的情況，可以把高頻選項(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è)面抓狂。

用戶通過標(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í)間，提高工作效率，常見的場(chǎng)景在谷歌瀏覽器里輸入網(wǎng)址，你輸入幾個(gè)字母后它總是能猜對(duì)你要找的網(wǎng)址，這里是記錄了用戶之前訪問過的網(wǎng)址根據(jù)高低頻呈現(xiàn)給用戶進(jìn)行選擇。

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

?智能聯(lián)想

3. 提示信息

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

提示信息

4. 操作選項(xiàng)

操作選項(xiàng)指表單填寫完成后，要進(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)簽的整體查看，能夠清楚的看到表單也整體都要填寫那些信息；但有由于標(biāo)簽長(zhǎng)短不一，有些標(biāo)簽距離輸入框較遠(yuǎn)，使標(biāo)簽與其輸入框親密性降低導(dǎo)致用戶填寫費(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)慎填寫的表單頁(yè)面可以采用這種對(duì)齊方式；例如阿里云購(gòu)買頁(yè)面讓用戶仔細(xì)看、謹(jǐn)慎選擇。

• 優(yōu)點(diǎn)：用戶視覺動(dòng)線左對(duì)齊，方便閱讀，節(jié)約垂直空間。
• 缺點(diǎn)：填寫速度慢，浪費(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)致用戶的視覺動(dòng)線不在同一垂直線所以右對(duì)齊標(biāo)簽有利于用戶的填寫，但是不利于用戶對(duì)標(biāo)簽信息的查看。

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

3）頂部標(biāo)簽

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

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

• 優(yōu)點(diǎn)：對(duì)齊舒適、用戶瀏覽和填寫表單的速度較快，節(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或開關(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ā)生反饋改變，所見即所得，保證用戶對(duì)主要功能的高效操作。

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

原位編輯

② 氣泡卡片

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

氣泡卡片

③ 彈窗/抽屜

彈窗/抽屜交互的表單樣式是比較常見的交互樣式，它的拓展性更強(qiáng)，承載的信息更多，當(dāng)前頁(yè)面的分支操作，體現(xiàn)兩頁(yè)面之間的層級(jí)關(guān)系；在原位編輯與氣泡卡片無(wú)法滿足交互時(shí)選擇彈窗/抽屜交互，用戶在不離開當(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ǔ)布局

單例與多列布局：

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

單列布局

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

橫向分組：頁(yè)面利用率高，視覺動(dòng)線也盡量減少了用戶遺漏。

多列布局

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

縱向分組

提示：對(duì)表單信息的分類可以有效的降低視覺噪音，幫助用戶關(guān)注重要的填寫內(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í)用戶填寫成本極低，在密集的工作環(huán)境中可以快速完成項(xiàng)目的創(chuàng)建，但在空閑的時(shí)間里用戶就可以點(diǎn)擊更多選項(xiàng)來(lái)進(jìn)行詳細(xì)填寫。

折疊收起

② 分組布局

標(biāo)題分組：

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

標(biāo)題分組

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

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

卡片分組：

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

卡片分組

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

華為云

③ 標(biāo)簽分組

當(dāng)表單數(shù)據(jù)信息之間沒有特定的關(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ù)雜度沒有太大關(guān)系了，主要是表單數(shù)據(jù)信息具有邏輯關(guān)系，這一步操作完成后才能進(jìn)行下一步的操作；分步驟布局只展示當(dāng)前步驟對(duì)應(yīng)的輸入域，點(diǎn)擊下一步校驗(yàn)后才可繼續(xù)填寫。

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

分步驟

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

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

4）選擇輸入域布局

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

選擇輸入域布局

3. 提示信息

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

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

提示信息

1）引導(dǎo)信息

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

① 全局提示

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

全局提示

② 單項(xiàng)提示

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

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

單項(xiàng)提示

注意1：有效提示

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

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

有效提示

2）反饋信息

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

反饋信息

注意：

這里的反饋信息要精準(zhǔn)到用看到提示信息就能發(fā)現(xiàn)填寫出錯(cuò)點(diǎn)，不要讓用戶產(chǎn)生歧義；例如“用戶名填寫錯(cuò)誤”要提示用戶名具體錯(cuò)誤的原因“用戶名不能添加符號(hào)”“用戶名重復(fù)”“用戶名不能超過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ā)條件是說檢驗(yàn)的提示信息在什么節(jié)點(diǎn)（填寫時(shí)、失焦時(shí)、點(diǎn)擊提交時(shí)）進(jìn)行提示，這里分為單項(xiàng)觸發(fā)、提交觸發(fā)。

觸發(fā)條件1

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

觸發(fā)提示的條件是每填寫完一項(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ā)條件是填寫完表單點(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)未填寫完整時(shí)，提交或保存等主按鈕一般為灰色狀態(tài)，不可進(jìn)行下一步操作，當(dāng)表單信息填寫完成后按鈕變?yōu)楦吡量蛇M(jìn)行下一步操作。

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

但當(dāng)頁(yè)面表單復(fù)雜超過5個(gè)時(shí)不建議使用主按鈕禁用原則，因?yàn)楸韱伪旧砜赡馨靥?非必填等多種選項(xiàng)，流程不清晰，主按鈕禁用用戶不易識(shí)別，會(huì)造成用戶疑問，可以提交時(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è)置“重置”與“返回重置”按鈕。

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

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

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

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

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

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