編輯導(dǎo)語(yǔ)：表單在我們的日常工作中經(jīng)常會(huì)用到，一個(gè)優(yōu)質(zhì)的表單可以提高我們的工作效率，完成一些更多的業(yè)務(wù)，提高產(chǎn)品體驗(yàn)；但表單的設(shè)計(jì)也比較復(fù)雜，本文作者分享了關(guān)于B端復(fù)雜業(yè)務(wù)表單設(shè)計(jì)，我們一起來(lái)了解一下。

一、前言

表單是B端產(chǎn)品中最常用的信息錄入工具，但由于B端產(chǎn)品業(yè)務(wù)的復(fù)雜性，表單往往呈現(xiàn)出字段多、類型雜等特點(diǎn)，增大了它的設(shè)計(jì)難度；一個(gè)糟糕的表單，會(huì)極大影響用戶信息的錄入的效率，從而影響到整個(gè)產(chǎn)品的體驗(yàn)。

最近我經(jīng)歷了云空間產(chǎn)品的項(xiàng)目重構(gòu)，對(duì)于復(fù)雜業(yè)務(wù)表單有了進(jìn)一步的理解，總理梳理了這篇文章，希望能給大家?guī)?lái)不一樣的啟示。

二、表單定義與構(gòu)成

2.1 表單定義

定義：表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能，是提交數(shù)據(jù)的一切形式。

為了充分理解表單定義，我們來(lái)看一個(gè)例子，大家認(rèn)為以下圖例屬于表單嗎？

答案：是的?？赡茉诖蠹业挠∠笾校斎肟?、下拉選擇框等這些控件才屬于表單，但從定義中能得到表單的本質(zhì)是提交數(shù)據(jù)；比如當(dāng)點(diǎn)擊“立即開(kāi)通”按鈕，在等待的過(guò)程中已經(jīng)提交了相關(guān)的數(shù)據(jù)信息，所以它就屬于一個(gè)表單。

2.2 表單構(gòu)成

一個(gè)表單通常由以下三部分組成：標(biāo)簽、輸入域、提示信息、動(dòng)作。

• 標(biāo)簽 – 告訴用戶相對(duì)應(yīng)的輸入字段的含義。
• 輸入域 – 是數(shù)據(jù)輸入的入口，表單的核心主體。
• 提示信息 – 幫助用戶更準(zhǔn)確的理解輸入域的具體操作。
• 動(dòng)作 – 用于將表單數(shù)據(jù)傳送到服務(wù)器上。

三、表單構(gòu)件解析

3.1 標(biāo)簽

標(biāo)簽的功能是表明表單域要求輸入的內(nèi)容，其文字描述應(yīng)該盡量的簡(jiǎn)潔明了，避免出現(xiàn)冗長(zhǎng)難以理解的標(biāo)簽，避免產(chǎn)生歧義；同時(shí)，用詞盡量夠貼近用戶的使用場(chǎng)景或業(yè)務(wù)場(chǎng)景，使用戶獲得產(chǎn)品體驗(yàn)的整體一致性。

在實(shí)際使用場(chǎng)景中，我們可以將標(biāo)簽樣式大致分為五種：頂部標(biāo)簽、左對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽以及浮動(dòng)標(biāo)簽。

3.1.1 頂部標(biāo)簽

頂部標(biāo)簽是標(biāo)簽在輸入域的上方，與輸入域進(jìn)行左垂直對(duì)齊；例如，藍(lán)湖和Jira Software采用的就是頂部標(biāo)簽。

• 優(yōu)點(diǎn)：有最快的瀏覽和處理速度；節(jié)省水平空間，標(biāo)簽長(zhǎng)度彈性大。
• 缺點(diǎn)：占用較大的垂直空間，表單項(xiàng)較多時(shí)增加頁(yè)面滾動(dòng)。
• 適用場(chǎng)景：希望用戶快速填寫(xiě)表單，完成任務(wù)；當(dāng)輸入項(xiàng)存在主次之分時(shí)；對(duì)標(biāo)簽擴(kuò)展性要求高。

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

左對(duì)齊標(biāo)簽是采用文字左對(duì)齊的方式放置在輸入域的左邊。這種結(jié)構(gòu)有利于用戶對(duì)標(biāo)簽整體的查看，從而清楚表單整體所需要填寫(xiě)的內(nèi)容。

• 優(yōu)點(diǎn)：文字開(kāi)頭按閱讀視線對(duì)齊，方便用戶快速瀏覽表單；節(jié)約垂直空間。
• 缺點(diǎn)：標(biāo)簽與表單域聯(lián)系不緊密，視覺(jué)跳動(dòng)大，填表不流暢；標(biāo)簽和輸入域的彈性長(zhǎng)度小。
• 適用場(chǎng)景：表單中存在較多的復(fù)雜敏感數(shù)據(jù)，希望用戶放慢速度，仔細(xì)思考。

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

右對(duì)齊標(biāo)簽是目前使用比較多的一種形式，此結(jié)構(gòu)使得標(biāo)簽與輸入域的距離是固定的，有明確的視覺(jué)關(guān)聯(lián)。

• 優(yōu)點(diǎn)：明確的視覺(jué)關(guān)聯(lián)，有利于用戶進(jìn)行填寫(xiě)，節(jié)約垂直空間。
• 缺點(diǎn)：左邊標(biāo)簽參差不齊，給通覽標(biāo)簽造成障礙，降低表單可讀性；標(biāo)簽和輸入域的彈性長(zhǎng)度小。
• 適用場(chǎng)景：既要減少垂直空間，又要加快填寫(xiě)速度。

3.1.4 內(nèi)聯(lián)標(biāo)簽

內(nèi)聯(lián)標(biāo)簽是將標(biāo)簽放在輸入域內(nèi)部顯示，標(biāo)簽代替了占位提示文字，來(lái)告訴用戶應(yīng)該填寫(xiě)什么內(nèi)容，常見(jiàn)于注冊(cè)登錄頁(yè)，如下圖。

• 優(yōu)點(diǎn)：同時(shí)節(jié)省橫向和縱向的空間。
• 缺點(diǎn)：消失的標(biāo)簽，用戶產(chǎn)生困惑，拓展性差。
• 適用場(chǎng)景：表單錄入項(xiàng)較少時(shí)可考慮使用，建議錄入項(xiàng)不超過(guò)3個(gè)。

3.1.5 圖標(biāo)標(biāo)簽

圖標(biāo)標(biāo)簽是內(nèi)聯(lián)標(biāo)簽的一種演化形式，采用圖像表意的方法來(lái)描述表單填寫(xiě)內(nèi)容，如下圖的表單采用就是這種樣式。

• 優(yōu)點(diǎn)：同時(shí)節(jié)省水平和垂直的空間；標(biāo)簽設(shè)計(jì)成圖標(biāo)，使表單更靈活和簡(jiǎn)潔。
• 缺點(diǎn)：抽象的圖標(biāo)標(biāo)簽，增加認(rèn)知負(fù)擔(dān)和記憶成本。
• 適用場(chǎng)景：表單錄入項(xiàng)的內(nèi)容信息區(qū)分度大，能用圖形表意的形式輕松識(shí)別內(nèi)容。

3.1.6 浮動(dòng)標(biāo)簽

浮動(dòng)標(biāo)簽是指用戶在錄入時(shí)，內(nèi)部標(biāo)題（輸入性提示信息）進(jìn)行浮動(dòng)位移，在登錄注冊(cè)頁(yè)中相當(dāng)常見(jiàn)，例如谷歌、小鵝通、藍(lán)湖等均采用此形式。

• 優(yōu)點(diǎn)：同時(shí)節(jié)省水平和垂直的空間；無(wú)需用戶對(duì)標(biāo)簽進(jìn)行記憶。
• 缺點(diǎn)：需要一定的開(kāi)發(fā)成本。
• 適用場(chǎng)景：復(fù)雜性和簡(jiǎn)易性表單均適用。

3.2 輸入域

輸入域是用來(lái)采集用戶數(shù)據(jù)信息的入口，包含了文本錄入、選框錄入以及文件上傳3種錄入類型，如下圖所示：

對(duì)于用戶來(lái)說(shuō)，再好填寫(xiě)體驗(yàn)對(duì)用戶來(lái)說(shuō)也是一種負(fù)擔(dān)。所以我們應(yīng)盡可能的減少用戶思考和理解的成本，降低用戶填寫(xiě)時(shí)的焦躁情緒，同時(shí)兼顧表單的錄入效率，輸入域的選擇就尤為重要。

3.2.1 文本錄入

文本錄入為用戶提供了編輯文本的控件，是表單域中最基礎(chǔ)和常見(jiàn)的類型。分為文本框和文本域，當(dāng)輸入字符總數(shù)較少時(shí)，使用單行的文本框形式；當(dāng)輸入錄入長(zhǎng)篇幅的單一的文本時(shí)，使用多行的文本區(qū)域。

• 優(yōu)勢(shì)：靈活性大，允許輸入任意類型和數(shù)量的字符（除非程序做了限制）。
• 劣勢(shì)：當(dāng)錄入項(xiàng)過(guò)多時(shí)，造成用戶負(fù)擔(dān)。
• 適用場(chǎng)景：適用于文本編輯的錄入場(chǎng)景。

3.2.2 選擇錄入

選擇錄入是讓用戶在一個(gè)預(yù)定的范圍中進(jìn)行選擇錄入。包含了選擇列表、單/復(fù)選框、開(kāi)關(guān)按鈕、滑塊選擇、日期選擇器、穿梭框等。

3.2.2.1 選擇列表

選擇列表通常也稱為下拉菜單，它允許用戶從預(yù)定的列表中選擇一個(gè)選項(xiàng)或多個(gè)選項(xiàng)，為用戶在選項(xiàng)的數(shù)量上提供了更多的靈活性；根據(jù)選擇類型，可以分為單選擇器、多選擇器、聯(lián)級(jí)選擇器以及樹(shù)選擇器3種類型。

• 優(yōu)勢(shì)：占用空間小，在展開(kāi)所有選項(xiàng)后，可以按重要程度排列。
• 劣勢(shì)：當(dāng)選項(xiàng)過(guò)多時(shí)需要滾動(dòng)，會(huì)放慢用戶輸入速度；不點(diǎn)擊下拉，用戶不知道選項(xiàng)都有什么，不方便比較。
• 適用場(chǎng)景：適用于選項(xiàng)個(gè)數(shù)較多的場(chǎng)景（一般多于5項(xiàng)）；適用于推薦使用默認(rèn)選項(xiàng)的場(chǎng)景；適用于選項(xiàng)中存有大量相似的選項(xiàng)的場(chǎng)景。

3.2.2.2 單選框

單選框是將所有選項(xiàng)都列出來(lái)，每個(gè)選項(xiàng)前面添加單選框，選項(xiàng)之間互斥，允許用戶從多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)。

• 優(yōu)勢(shì)：選項(xiàng)全部都列出來(lái)，方便用戶查看對(duì)比。
• 劣勢(shì)：占用空間大。
• 使用場(chǎng)景：適用于每個(gè)選項(xiàng)的重要性一樣，用戶需要進(jìn)行對(duì)比才能選擇的場(chǎng)景；適用于需要優(yōu)先考慮可見(jiàn)性和快速響應(yīng)的場(chǎng)景。

3.2.2.3 復(fù)選框

復(fù)選框[Check Box]由一個(gè)方形的選擇框和選項(xiàng)組成，復(fù)選框在選中狀態(tài)下有標(biāo)記。

• 優(yōu)勢(shì)：選項(xiàng)全部都列出來(lái)，方便用戶查看對(duì)比。
• 劣勢(shì)：占用空間大。
• 使用場(chǎng)景：適用于有多個(gè)選項(xiàng)，同時(shí)可以任意選擇(或不選)多個(gè)(或一個(gè))選項(xiàng)的場(chǎng)景。

3.2.2.4 開(kāi)關(guān)按鈕

開(kāi)關(guān)按鈕一般用來(lái)表示一個(gè)動(dòng)作（比如開(kāi)始或停止一件事），兩個(gè)選項(xiàng)是互相對(duì)立的，作用類似于實(shí)際生活中的燈控按鈕。允許用戶在兩個(gè)相反的狀態(tài)之間進(jìn)行選擇，如：有效或無(wú)效、是或否、開(kāi)或關(guān)等。

• 優(yōu)勢(shì)：操作時(shí)體現(xiàn)了狀態(tài)，同時(shí)可以很明顯的表示所處狀態(tài)。
• 劣勢(shì)：只有兩個(gè)選項(xiàng)，并且是對(duì)立的，使用情況受限。
• 使用場(chǎng)景：適用于切換單個(gè)選項(xiàng)狀態(tài)的場(chǎng)景，例如更改首選項(xiàng)、系統(tǒng)功能等。

3.2.2.5 滑塊選擇

滑塊選擇可以讓我們通過(guò)在連續(xù)或間斷的區(qū)間內(nèi)滑動(dòng)錨點(diǎn)來(lái)選擇一個(gè)合適的數(shù)值。這種交互特性使得它在設(shè)置諸如音量，亮度，色彩飽和度等需要反映強(qiáng)度等級(jí)的選項(xiàng)時(shí)是一種極好的選擇?；瑝K的常見(jiàn)樣式有三種，分別是單個(gè)連續(xù)滑塊、兩個(gè)連續(xù)滑塊、間續(xù)滑塊。

• 優(yōu)勢(shì)：便于用戶快速瀏覽大量的選項(xiàng)，提供流暢的用戶體驗(yàn)。
• 劣勢(shì)：有較強(qiáng)的不確定感。
• 使用場(chǎng)景：適用于輸入結(jié)果相對(duì)模糊或不準(zhǔn)確的場(chǎng)景。

3.2.2.6 穿梭框

穿梭框用直觀的方式在兩欄中移動(dòng)元素，完成選擇行為。

• 優(yōu)勢(shì)：展示更多的可選項(xiàng)、方便用戶對(duì)比已選項(xiàng)與未選項(xiàng)以及更改已選內(nèi)容；
• 劣勢(shì)：占用空間大；
• 適用場(chǎng)景：適用于需要在多個(gè)可選項(xiàng)中進(jìn)行多選時(shí)的場(chǎng)景。3.2.2.7 日期選擇器日期選擇器為用戶提供了一種可視化的方式去瀏覽和選擇一個(gè)日期或者日期范圍。當(dāng)用戶需要輸入一個(gè)時(shí)間，可以點(diǎn)擊標(biāo)準(zhǔn)輸入框，彈出時(shí)間面板進(jìn)行選擇。

3.2.3 文件上傳

文件上傳是將本地的相應(yīng)信息(包含本地和云儲(chǔ)存)通過(guò)網(wǎng)頁(yè)或者上傳工具發(fā)布到遠(yuǎn)程服務(wù)器上的過(guò)程?？梢苑譃楹?jiǎn)單點(diǎn)擊上傳、顯示縮略圖上傳、拖拽上傳三種。

3.2.4 關(guān)于輸入域的幾個(gè)思考

3.2.4.1 輸入框的寬度

在實(shí)際的業(yè)務(wù)場(chǎng)景中，大部分輸入框所需填寫(xiě)內(nèi)容都存在理想長(zhǎng)度，輸入框的寬度暗示填寫(xiě)內(nèi)容的長(zhǎng)度，合理的寬度將給用戶正確的預(yù)期，減少焦慮感、減輕判斷負(fù)擔(dān)。

這里要注意，如果內(nèi)容沒(méi)有規(guī)則無(wú)法判斷長(zhǎng)短，則輸入框應(yīng)保持長(zhǎng)度一致，給足填寫(xiě)空間即可，避免長(zhǎng)度不一導(dǎo)致用戶混亂。

如何讓輸入框的長(zhǎng)度有規(guī)律可循？參考Ant design表單設(shè)計(jì)研究的結(jié)論得的5種高頻的寬度需求區(qū)間，以尺碼類比分別是： XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

我們可以根據(jù)自己的業(yè)務(wù)訴求，參考這個(gè)XS尺碼的尺寸范圍（80-160px）來(lái)定制自己的輸入框尺寸x，然后通過(guò)倍數(shù)+間距疊加的方式得到不同的寬度尺碼和對(duì)齊關(guān)系。

例如，我們產(chǎn)品業(yè)務(wù)中經(jīng)常要填寫(xiě)金額，考慮金額輸入的極值來(lái)定制我們的最小輸入框尺寸為104px，那么我們就得到了104px*2+8px=216px、104px*3+16px=328px….五種尺寸（如下圖）。

3.2.4.2 可變化的文本框

從使用體驗(yàn)講，可變化的文本框使頁(yè)面整體效果更統(tǒng)一。

固定文的文本框當(dāng)輸入文本超過(guò)其設(shè)置的寬度，會(huì)出現(xiàn)內(nèi)滾動(dòng)條，當(dāng)頁(yè)面上出現(xiàn)兩個(gè)滾動(dòng)條時(shí)（大頁(yè)面的滾動(dòng)條），在使用操作上會(huì)帶來(lái)一定的混亂。

3.2.4.3?輸入格式

根據(jù)用戶的記憶結(jié)構(gòu)（7±2法則），采用合理的格式約束，能夠方便用戶更快的完成填寫(xiě)，而減少錯(cuò)誤出現(xiàn)。

3.2.4.4 智能聯(lián)想

智能聯(lián)想是指根據(jù)關(guān)鍵詞，輸入框可以實(shí)現(xiàn)模糊搜索、智能聯(lián)想、自動(dòng)匹配等選項(xiàng)；讓數(shù)據(jù)庫(kù)跑在用戶的前面，能節(jié)省用戶更多的時(shí)間，相應(yīng)的提高工作效率，同時(shí)也能減少出錯(cuò)率。

常見(jiàn)的場(chǎng)景有郵箱后綴的聯(lián)想、基于IP地址自動(dòng)填充國(guó)家和地區(qū)、電話號(hào)碼前綴聯(lián)想、基于關(guān)鍵詞查詢相關(guān)短語(yǔ)等。

3.2.4.5 紅色星號(hào)

表單的必填字段大多情況下會(huì)使用紅色星號(hào)表示。但當(dāng)必填項(xiàng)多于選填項(xiàng)時(shí)，頁(yè)面就會(huì)出現(xiàn)大量的紅色星號(hào)從而增加用戶的認(rèn)知負(fù)擔(dān)。同時(shí)，紅色星號(hào)會(huì)帶來(lái)一些恐懼感，增加表單填寫(xiě)的出錯(cuò)率。因此在表單設(shè)計(jì)中，當(dāng)必填項(xiàng)多于選填項(xiàng)時(shí)，可采用隱藏紅色星號(hào)標(biāo)記，改用暗提示標(biāo)記可選項(xiàng)的形式來(lái)幫助用戶識(shí)別，這種形式減少了視覺(jué)噪聲，增強(qiáng)了表單的可讀性。

3.3 提示信息

根據(jù)輸入流程將用戶輸入過(guò)程分為輸入前、輸入中、輸入后三個(gè)階段，提示信息在輸入前發(fā)生的稱為引導(dǎo)提示，提示信息在輸入中/后發(fā)生的叫反饋提示，如圖所示：

3.3.1 引導(dǎo)提示

引導(dǎo)信息是在用戶填寫(xiě)表單前對(duì)表單填寫(xiě)內(nèi)容進(jìn)行解釋說(shuō)明的提示信息，一般分為輸入性提示與幫助性文字。

3.3.1.1 輸入性提示

輸入性提示信息即占位符，在文本框獲取焦點(diǎn)后提示文字會(huì)消失，提示文字最好能簡(jiǎn)潔明了給出有效的提示信息，如果是大篇幅的解釋性內(nèi)容應(yīng)放在幫助性文字中。

3.3.1.2 幫助性文字

在表單的設(shè)計(jì)中當(dāng)標(biāo)簽不足以對(duì)輸入項(xiàng)準(zhǔn)確說(shuō)明時(shí)，幫助性文字起到非常重要的作用。幫助性文字可以有多種形式，比如文本提示、圖標(biāo)提示、隱藏氣泡提示等。

• 文本提示：包容性強(qiáng)，可運(yùn)用于詳細(xì)的解釋說(shuō)明、超鏈接、字?jǐn)?shù)限制等。
• 圖標(biāo)提示：一般在提示文本較多的情況下使用，比如文本提示超過(guò)一行，同時(shí)不想多行展示時(shí)就可以采用此方式。
• 隱藏氣泡提示：當(dāng)鼠標(biāo)懸停到輸入框上時(shí)輸入框上方出現(xiàn)氣泡提示，比如百度賬號(hào)的注冊(cè)頁(yè)。

這里要注意，如果是針對(duì)整個(gè)表單的解釋說(shuō)明，幫助性文字一般位于整個(gè)表單的最開(kāi)始位置；如果只是針對(duì)某個(gè)輸入域的提示，根據(jù)格式塔原理，則應(yīng)將兩者放在一起，讓用戶知道當(dāng)前處于什么地方，在針對(duì)什么進(jìn)行引導(dǎo)、輔助。

3.3.2 反饋提示

反饋提示是在用戶輸入時(shí)或輸入后對(duì)輸入內(nèi)容進(jìn)行的反饋，提示當(dāng)前輸入域所填寫(xiě)的內(nèi)容是否符合填寫(xiě)規(guī)則，一般有正確、錯(cuò)誤、警告三種狀態(tài)。其中，正確狀態(tài)通常不給予任何提示，也可采用圖標(biāo)進(jìn)行反饋，讓用戶感受更加直觀；反之當(dāng)用戶錄入的內(nèi)容與規(guī)則不符時(shí)，給予錯(cuò)誤提示信息。警告狀態(tài)往往與文本框相結(jié)合，當(dāng)字?jǐn)?shù)超過(guò)規(guī)則的限制時(shí)，給出相對(duì)應(yīng)的反饋。

這里要注意反饋提示的信息精準(zhǔn)度問(wèn)題，不要讓用戶產(chǎn)生歧義；例如“用戶名填寫(xiě)錯(cuò)誤”要提示用戶名具體錯(cuò)誤的原因“用戶名不能添加符號(hào)”“用戶名重復(fù)”“用戶名不能超過(guò)8個(gè)字符”等具體原因，讓用戶明確修改意圖。

3.3 動(dòng)作

動(dòng)作是完成表單的關(guān)鍵一步，因?yàn)槲覀兲顚?xiě)完表單之后要“提交”。我們可以把一些重要的行為視為“主動(dòng)作”，如：提交、保存、下一步等。另一些與完成表單填寫(xiě)的目標(biāo)相悖的行為可以視為“次動(dòng)作”，如：取消、撤銷、返回等。

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

當(dāng)表單項(xiàng)非常少時(shí)（一般為3個(gè)或以下），主按鈕禁用原則生效，這里的禁用狀態(tài)非常容易被用戶理解，用戶輸入內(nèi)容就會(huì)得到反饋；但表單項(xiàng)超過(guò)5個(gè)時(shí)則不建議使用主按鈕禁用原則，因?yàn)楸韱慰赡馨靥詈瓦x填項(xiàng)等多種選項(xiàng)，主按鈕禁用用戶不易識(shí)別，會(huì)造成用戶疑問(wèn)，此時(shí)采用提交時(shí)校驗(yàn)反饋的做法會(huì)更合適。

四、表單的交互

在B端產(chǎn)品中，表單的交互大致可以分為6種，分別是原位編輯、氣泡卡片、彈窗、抽屜、頁(yè)面跳轉(zhuǎn)以及新開(kāi)頁(yè)面，根據(jù)具體的使用場(chǎng)景選擇合適的頁(yè)面交互。

4.1 原位編輯

原位編輯的編輯內(nèi)容也為展示內(nèi)容，屬于輕量型信息采集表單。一般出現(xiàn)在表格內(nèi)、卡片中，在信息展示區(qū)域中通過(guò)鼠標(biāo)hover、點(diǎn)擊特定字段或操作按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。

• 優(yōu)勢(shì)：快捷易操作，隨時(shí)啟用與退出，主流程的操作流暢度高。
• 劣勢(shì)：編輯狀態(tài)較為隱晦，不宜察覺(jué)。
• 適用場(chǎng)景：適用于輸入內(nèi)容較少，適用于頻率較低，同時(shí)屬于主流程分支的場(chǎng)景。

4.2 氣泡卡片

氣泡卡片可以理解為一個(gè)超輕量的對(duì)話框（彈窗），允許用戶在當(dāng)前界面快速對(duì)某部分進(jìn)行編輯，同時(shí)不打斷主任務(wù)流，也可隨取隨用，隨時(shí)退出。

• 優(yōu)勢(shì)：簡(jiǎn)單快捷易操作、主流程的操作流暢度高。
• 劣勢(shì)：擴(kuò)展性不強(qiáng)，承載的信息不易過(guò)多。
• 適用場(chǎng)景：適用于快速編輯和輸入的場(chǎng)景。

4.3 彈窗

彈窗交互的表單樣式是比較常見(jiàn)的交互樣式，它的拓展性更強(qiáng)，承載的信息更多，可以分為模態(tài)彈窗和非模態(tài)彈窗兩種。

4.3.1 模態(tài)彈窗

模態(tài)彈窗通常以對(duì)話框的形式呈現(xiàn)，體現(xiàn)了頁(yè)面間的層級(jí)關(guān)系。它能讓用戶不離開(kāi)主流程的情況下繼續(xù)插入性操作。

• 優(yōu)勢(shì)：簡(jiǎn)單易操作、承載的信息量有較大的彈性空間。
• 劣勢(shì)：浮層彈窗給主操作流程造成較強(qiáng)的割裂，降低輸入的流暢度。
• 適用場(chǎng)景：適用于主流程步驟中需要分支任務(wù)行為的場(chǎng)景。

4.3.2 非模態(tài)彈窗

非模態(tài)彈窗的指的是能讓用戶不離開(kāi)主頁(yè)面的情況下，在當(dāng)前頁(yè)面中打開(kāi)多個(gè)浮層彈窗，對(duì)其內(nèi)容進(jìn)行編輯操作。

• 優(yōu)勢(shì)：同時(shí)進(jìn)行多個(gè)操作，阻斷性弱。
• 劣勢(shì)：學(xué)習(xí)成本高，容易產(chǎn)生混亂，誤操作概率高。
• 適用場(chǎng)景：適用于多任務(wù)處理情況有較高的要求的場(chǎng)景。

4.4 抽屜

抽屜指的是從當(dāng)前界面的“上下左右”側(cè)邊滑出相應(yīng)的表單內(nèi)容完成相應(yīng)操作，之前的內(nèi)容不丟失。

• 優(yōu)勢(shì)：承載的信息量有較大的彈性空間。
• 劣勢(shì)：由于信息集中在一側(cè)，導(dǎo)致視覺(jué)焦點(diǎn)不穩(wěn)定，如果長(zhǎng)時(shí)間工作，會(huì)產(chǎn)生不平衡的感覺(jué)。
• 適用場(chǎng)景：適用于當(dāng)前任務(wù)流中插入臨時(shí)任務(wù)的場(chǎng)景。

4.5 頁(yè)面跳轉(zhuǎn)

頁(yè)面跳轉(zhuǎn)是指在當(dāng)面頁(yè)面刷新，展示新內(nèi)容，多運(yùn)用于初始化類型的表單錄入操作。

• 優(yōu)勢(shì)：信息承載能力強(qiáng)；有利于用戶對(duì)業(yè)務(wù)流程有更清晰的認(rèn)識(shí)，從而使得主流程的操作流暢度高。
• 劣勢(shì)：及時(shí)性反饋較低。
• 適用場(chǎng)景：適用于特別重要的功能表單的填寫(xiě)場(chǎng)景。

4.6 新開(kāi)頁(yè)面

新開(kāi)頁(yè)面指的是當(dāng)前頁(yè)面保留，新的內(nèi)容在新頁(yè)面中呈現(xiàn)。停留的頁(yè)面可以為當(dāng)前頁(yè)面，也可以為新頁(yè)面，是情況而定。

• 優(yōu)勢(shì)：頁(yè)面之間相互獨(dú)立，互補(bǔ)不干擾。
• 劣勢(shì)：用戶的焦點(diǎn)丟失，注意力分散（因?yàn)橄到y(tǒng)中大部分的操作在同一個(gè)頁(yè)面中完成）。
• 適用場(chǎng)景：適用于需要參照一些文檔來(lái)幫助用戶完成表單錄入操作的場(chǎng)景。

五、表單內(nèi)容組織形式

在表單設(shè)計(jì)中，根據(jù)數(shù)據(jù)信息的容量來(lái)選擇合理的內(nèi)容組織形式，以此來(lái)保證信息屏效比和用戶操作效率。表單內(nèi)容的組織形式可以分為3種，分別為基礎(chǔ)平鋪、分組歸納、步驟引導(dǎo)。

5.1 基礎(chǔ)平鋪

基礎(chǔ)平鋪指的是將所有需要填寫(xiě)的表單內(nèi)容項(xiàng)直接羅列在頁(yè)面上，針對(duì)內(nèi)容項(xiàng)較少、內(nèi)容項(xiàng)無(wú)法按照相關(guān)性分組的表單可以采用這種方式。

• 優(yōu)勢(shì)：簡(jiǎn)潔直觀、便于操作。
• 劣勢(shì)：全部平鋪的信息會(huì)造成一定的用戶負(fù)擔(dān)。
• 使用場(chǎng)景：當(dāng)需要完成一個(gè)簡(jiǎn)單快速的任務(wù)，例如輸入少量信息即可完成創(chuàng)建、注冊(cè)登陸表單。

5.2 分組歸納

分組歸納是對(duì)表單內(nèi)容進(jìn)行分組，將相關(guān)聯(lián)的內(nèi)容放在一組，再按組羅列排布，有3種演變形式分別是：標(biāo)題分組、卡片分組、標(biāo)簽分組。將相同信息表單數(shù)據(jù)進(jìn)行分組，這樣即使有很多信息疊加在一起，用戶在輸入上的心理壓力與視覺(jué)疲勞都會(huì)得到緩解。

• 優(yōu)勢(shì)：內(nèi)容分類歸組，便于快速定位，減輕焦慮感和填寫(xiě)壓力。
• 劣勢(shì)：占用垂直空間。
• 使用場(chǎng)景：適用于一次需要填寫(xiě)很多內(nèi)容的表單，且不同內(nèi)容之間存在分類歸納性。

5.3 步驟引導(dǎo)

步驟引導(dǎo)是將用戶需要填寫(xiě)和確認(rèn)的信息按照線性流程組織，利用步驟條告知用戶完整流程和進(jìn)度，常常在最后提交前讓用戶再次確認(rèn)信息，并在流程結(jié)束給與明確的結(jié)果反饋。

• 優(yōu)勢(shì)：任務(wù)流程清晰，明確當(dāng)前用戶目標(biāo)，減少用戶負(fù)擔(dān)；及時(shí)的反饋校驗(yàn)，也避免填寫(xiě)完成后才發(fā)現(xiàn)中間的表單填寫(xiě)有誤，降低用戶的犯錯(cuò)成本。
• 劣勢(shì)：無(wú)法通篇瀏覽表單內(nèi)容，回溯成本高。
• 使用場(chǎng)景：適用于具有明確的線性邏輯的任務(wù)的場(chǎng)景。

六、結(jié)語(yǔ)

以上就是我對(duì)表單設(shè)計(jì)知識(shí)點(diǎn)的一些總結(jié)，感謝大家抽出時(shí)間來(lái)閱讀這篇文章，也希望這篇文章可以給你帶來(lái)幫助。

下一篇文章我將通過(guò)實(shí)際項(xiàng)目復(fù)盤(pán)為大家分享：如何運(yùn)用這些知識(shí)點(diǎn)，結(jié)合業(yè)務(wù)進(jìn)行場(chǎng)景化的表單設(shè)計(jì)。

參考文獻(xiàn)

https://ant.design/index-cn

https://zhuanlan.zhihu.com/p/110096160

https://www.uisdc.com/text-fields-forms-design

https://mp.weixin.qq.com/s/8Nndu1yjjBMlBZ35FpSijw

https://www.uisdc.com/mobile-form-design-guide

http://www.codemsi.com/pd/4369965.html

https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

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

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