本文3671字，閱讀時(shí)間約15分鐘~

對(duì)于表單設(shè)計(jì)，我們常常會(huì)陷入無(wú)限的糾結(jié)之中，比如：

文字標(biāo)簽是左對(duì)齊還是右對(duì)齊？

確定按鈕是放左邊還是右邊？

控件長(zhǎng)度是整齊劃一還是錯(cuò)落有致？

......

類似的問(wèn)題在表單設(shè)計(jì)過(guò)程中會(huì)經(jīng)常遇到，本文將從以下三個(gè)方面和大家一起探討「如何設(shè)計(jì)一份體驗(yàn)良好的表單」。

一、為什么要學(xué)習(xí)表單設(shè)計(jì)

1、表單在我們的生活中無(wú)處不在當(dāng)我們?nèi)肼殨r(shí)，會(huì)填寫(xiě)入職登記表；當(dāng)辦理信用卡時(shí)，會(huì)填寫(xiě)信用卡申請(qǐng)表；當(dāng)購(gòu)物下單時(shí)，會(huì)填寫(xiě)訂單、地址等信息表單。無(wú)處不在的表單充斥著我們的生活。
2、表單在人機(jī)交互過(guò)程中發(fā)揮著重要的作用表單在網(wǎng)頁(yè)或App中主要發(fā)揮數(shù)據(jù)采集和數(shù)據(jù)呈現(xiàn)的作用。對(duì)用戶而言，表單是數(shù)據(jù)錄入和提交的媒介；對(duì)產(chǎn)品而言，表單是獲取用戶信息的重要途徑。

二、怎么學(xué)習(xí)表單設(shè)計(jì)

2.1 認(rèn)識(shí)表單類型

表單按照按任務(wù)類型可以分為以下三類：1、輸入型表單：要求用戶輸入完整信息2、匹配型表單：要求用戶輸入部分信息3、閱讀型表單：僅要求用戶閱讀表單上信息? ? ? ?

▲ 圖1 · 表單類型

2.2 表單組成要素

一個(gè)表單由標(biāo)簽、錄入域、校驗(yàn)、必填標(biāo)識(shí)、幫助提示、操作按鈕組成。

▲ 圖2 · 表單組成要素

2.2.1 標(biāo)簽

在工作場(chǎng)景中，會(huì)有四種標(biāo)簽對(duì)齊方式：左對(duì)齊、右對(duì)齊、頂對(duì)齊與文字內(nèi)對(duì)齊。

▲ 圖3 · 標(biāo)簽對(duì)齊方式

1、左對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：方便用戶快速瀏覽標(biāo)簽；降低占用的垂直空間。缺點(diǎn)：標(biāo)簽和輸入框相鄰間距過(guò)大，視覺(jué)上不夠和諧；根據(jù)馬泰奧的研究表明左對(duì)齊標(biāo)簽“典型的掃視時(shí)間為500毫秒”，相較右對(duì)齊標(biāo)簽用戶整體花費(fèi)時(shí)間更長(zhǎng)。??

▲ 圖4 · 左對(duì)齊標(biāo)簽

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

優(yōu)點(diǎn)：標(biāo)簽和輸入框相鄰，用戶能快速填寫(xiě)；根據(jù)馬泰奧的研究表明右對(duì)齊標(biāo)簽“典型的掃視時(shí)間為240毫秒”，比左對(duì)齊標(biāo)簽整體花費(fèi)時(shí)間少一半。缺點(diǎn)：右對(duì)齊會(huì)造成左側(cè)不齊，用戶無(wú)法快速瀏覽標(biāo)簽；若標(biāo)簽過(guò)長(zhǎng)，需要兩行文字展示，會(huì)導(dǎo)致一定的閱讀困難。

▲ 圖5?· 右對(duì)齊標(biāo)簽

3、頂對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：瀏覽路徑更加清晰，用戶只需上下移動(dòng)視線；根據(jù)馬泰奧的研究表明頂對(duì)齊標(biāo)簽“典型的掃視時(shí)間為50毫秒”，用戶閱讀效率更高；提供了大量的橫向空間，能夠展示更多信息。缺點(diǎn)：占用縱向空間，會(huì)拉長(zhǎng)界面高度。

▲ 圖6 · 頂對(duì)齊標(biāo)簽

4、文字內(nèi)對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：對(duì)屏幕的占用空間非常小，極大節(jié)省了頁(yè)面空間。缺點(diǎn)：輸入內(nèi)容時(shí)輸入框中的標(biāo)簽占位符會(huì)消失，用戶得不到有效提示；表單項(xiàng)過(guò)多時(shí)，填寫(xiě)完成后不利于用戶檢查內(nèi)容的對(duì)錯(cuò)。

▲ 圖7 · 文字內(nèi)對(duì)齊標(biāo)簽

5、標(biāo)簽對(duì)比小結(jié)

總的來(lái)說(shuō)，右對(duì)齊標(biāo)簽比左對(duì)齊標(biāo)簽用戶閱讀的速度要快一倍；頂對(duì)齊標(biāo)簽是最快的，常用于移動(dòng)端；文字內(nèi)標(biāo)簽常用于用戶熟悉的表單填寫(xiě)；如果想讓用戶謹(jǐn)慎填寫(xiě)可以使用左對(duì)齊標(biāo)簽。具體的標(biāo)簽優(yōu)缺點(diǎn)與應(yīng)用場(chǎng)景如下圖所示：

▲ 圖8 · 標(biāo)簽對(duì)比

2.3 錄入域

錄入域是表單的核心構(gòu)成部分，為了方便不同信息的錄入我們一般會(huì)采用不同的交互控件。在B端產(chǎn)品設(shè)計(jì)中，我們常見(jiàn)的錄入域主要分為兩大類：輸入型表單與選擇型表單。
1、輸入型表單主要包括單行文本框、多行文本框1）單行文本框單行文本框內(nèi)含有占位符，是對(duì)當(dāng)前項(xiàng)信息的補(bǔ)充描述，能夠幫助用戶準(zhǔn)確清晰的填寫(xiě)內(nèi)容。單行文本框一般包含三種尺寸（大、默認(rèn)、小），高度分別為?40px、32px 和 24px，并且一般默認(rèn)提供15~20個(gè)字符寬度。在設(shè)計(jì)過(guò)程中還需要注意單行文本框一般包含初始狀態(tài)、輸入狀態(tài)、只讀狀態(tài)、hover狀態(tài)、輸入完成狀態(tài)與禁用狀態(tài)。

▲ 圖9 · 單行文本框樣式

▲ 圖10?· 單行文本框狀態(tài)
2）多行文本框多行文本框多用于長(zhǎng)大段落文字的輸入，可以根據(jù)需要展示最大字?jǐn)?shù)或者自適應(yīng)文本框高度。

▲ 圖11?· 多行文本框
2、選擇型表單包括下拉選擇框、時(shí)間選擇框、單選框、多選框

▲ 圖12?· 下拉選擇框

▲ 圖13?· 時(shí)間選擇框

2.4 校驗(yàn)

當(dāng)用戶輸入信息后，必不可少的需要對(duì)用戶的信息進(jìn)行校驗(yàn)，保證用戶信息輸入的正確性與完整性。校驗(yàn)一般可以分為：及時(shí)校驗(yàn)、輸入完成后校驗(yàn)、提交校驗(yàn)。

1、及時(shí)校驗(yàn)

在用戶輸入的過(guò)程中進(jìn)行實(shí)時(shí)驗(yàn)證，主要用于注冊(cè)頁(yè)面中密碼信息的驗(yàn)證。優(yōu)點(diǎn)：提升輸入的效率和準(zhǔn)確度。缺點(diǎn)：如果輸入的內(nèi)容出錯(cuò)概率較高，頻繁的給用戶錯(cuò)誤提示會(huì)降低用戶體驗(yàn)。? ??

▲ 圖14?· Adobe網(wǎng)站的實(shí)時(shí)驗(yàn)證

2、輸入完成后校驗(yàn)

一般用戶輸入完成后，鼠標(biāo)失去焦點(diǎn)時(shí)進(jìn)行校驗(yàn)。校驗(yàn)狀態(tài)分為：成功、錯(cuò)誤和警示三種狀態(tài)，常用于輸入驗(yàn)證碼、注冊(cè)等環(huán)節(jié)。優(yōu)點(diǎn)：輸完一項(xiàng)即校驗(yàn)，避免一下子出現(xiàn)很多錯(cuò)誤需要修改，緩解用戶壓力。缺點(diǎn)：會(huì)延長(zhǎng)用戶完成表單填寫(xiě)的時(shí)間。? ? ??

? ? ? ?▲ 圖15?· 輸入完成后校驗(yàn)狀態(tài)提示

3、提交校驗(yàn)

當(dāng)完成表單信息填寫(xiě)后，用戶通過(guò)button進(jìn)行操作，系統(tǒng)給出成功、失敗或者錯(cuò)誤提示，常用于登錄、數(shù)據(jù)提交等場(chǎng)景。優(yōu)點(diǎn)：讓用戶感知填寫(xiě)后提交的狀態(tài)。缺點(diǎn)：報(bào)錯(cuò)過(guò)多會(huì)增加用戶再次修改填寫(xiě)的壓力。

▲ 圖16?· 提交校驗(yàn)案例

2.5 必填項(xiàng)

必填項(xiàng)經(jīng)常習(xí)慣用紅色的“*”來(lái)標(biāo)記，此外還可以用文字進(jìn)行說(shuō)明。如果必填項(xiàng)多于選填項(xiàng)，將選填項(xiàng)單獨(dú)標(biāo)記；如果選填項(xiàng)多于必填項(xiàng)，將必填項(xiàng)單獨(dú)標(biāo)記；如果全是必填項(xiàng)，就不需要標(biāo)記，避免滿屏都是小星星，增加用戶的認(rèn)知負(fù)擔(dān)。? ?

▲ 圖17?· 必填項(xiàng)

2.6 幫助提示

幫助提示有三種提示方式：占位符提示、常駐提示、圖標(biāo)氣泡提示。1）占位符提示：一般出現(xiàn)在輸入框中，是對(duì)標(biāo)簽的補(bǔ)充說(shuō)明，輸入內(nèi)容后就消失。2）常駐提示：一般出現(xiàn)在錄入控件旁，是對(duì)錄入信息的補(bǔ)充說(shuō)明，不會(huì)隨著輸入而消失。3）圖標(biāo)氣泡提示：通過(guò)鼠標(biāo)的懸停展示，常用于對(duì)一些業(yè)務(wù)的專有名詞解釋或者提供說(shuō)明。

▲ 圖18?· 幫助提示

2.7 操作按鈕

操作按鈕是表單信息錄入完成后，提交、繼續(xù)或取消任務(wù)的觸發(fā)器。一個(gè)場(chǎng)景中通常只有一個(gè)主按鈕。如果表單內(nèi)容較少且在一屏以內(nèi)時(shí)，按鈕應(yīng)該緊跟隨內(nèi)容；如果表單內(nèi)容較多且多余一屏?xí)r，為了方便用戶快速找到按鈕應(yīng)該將按鈕固定在頁(yè)面底部。

▲ 圖19?· 按鈕展示位置

三、如何提升表單的效率與體驗(yàn)

1、長(zhǎng)表單分步設(shè)計(jì)

很多時(shí)候表單項(xiàng)較多，業(yè)務(wù)本身又具有流程化特性（例如注冊(cè)、發(fā)布等），此時(shí)可以用分步表單設(shè)計(jì)的策略，使用步驟條、進(jìn)度條進(jìn)行導(dǎo)航顯示。優(yōu)點(diǎn)：流程清晰，降低用戶對(duì)表單的理解成本，減少用戶負(fù)擔(dān)。缺點(diǎn)：用戶無(wú)法感知所有的填寫(xiě)項(xiàng)，必須完成當(dāng)前這一步操作才能看到下一步操作。

▲ 圖20?· 分步設(shè)計(jì)

2、 提供選擇，減少用戶的輸入操作

人都是有惰性的，表單錄入過(guò)程中能用選擇的就不要用輸入操作，研究表明自動(dòng)填充能使表單的錄入速度提高30%。? ? ??

? ? ? ? ?▲ 圖21?· 提供選擇給用戶

3、先易后難，先必填后選填

先易后難的設(shè)計(jì)邏輯容易引起用戶的填寫(xiě)欲望，增加用戶的填寫(xiě)信心。先必填后選填可以保證用戶任務(wù)的完成度，即使用戶中途放棄，必填的填寫(xiě)項(xiàng)完成度也相對(duì)會(huì)更高。

▲ 圖22 · 先易后難 先必填后選填

4、簡(jiǎn)明扼要的展示標(biāo)簽文字

標(biāo)簽文本不宜太長(zhǎng)，需要簡(jiǎn)明扼要，保證用戶能夠快速理解。

▲ 圖23 · 簡(jiǎn)明扼要的展示標(biāo)簽文字

5、輸入框可以錯(cuò)落有致

▲ 圖24 · 輸入框可以錯(cuò)落有致

6、保證清晰的視覺(jué)流

▲ 圖25 · 保證清晰的視覺(jué)流

7、更具操作性的按鈕

提交按鈕應(yīng)讓用戶明確了解意圖和功能，盡量避免使用“提交”、“下一步”、“繼續(xù)”之類的通用型文本。嘗試使用更具有操作性的文本，例如：“創(chuàng)建賬戶”、“加入團(tuán)隊(duì)”、“創(chuàng)建新賬號(hào)”等文本。

? ?▲ 圖26 · 更具操作性的按鈕

8、錯(cuò)誤提示就近反饋

當(dāng)用戶輸入完成后，校驗(yàn)反饋應(yīng)該就近展示，并且準(zhǔn)確告訴用戶錯(cuò)誤的原因與解決措施，這樣能讓用戶準(zhǔn)確的獲取到錯(cuò)誤提示，并快速定位到相關(guān)項(xiàng)。

▲ 圖27 · 錯(cuò)誤提示就近反饋

9、數(shù)字組合要有規(guī)律

對(duì)于表單中的數(shù)字（如電話號(hào)碼、銀行卡號(hào)等一連串?dāng)?shù)字）來(lái)說(shuō)，可以采用空格進(jìn)行間隔。?這樣能夠幫助用戶快速記憶、校驗(yàn)和閱讀。

▲ 圖28 ·數(shù)字組合要有規(guī)律

10、時(shí)間格式要對(duì)

時(shí)間選擇框主要分為時(shí)間點(diǎn)和時(shí)間范圍。對(duì)于時(shí)間范圍的選擇，主要在格式上需要注意，當(dāng)時(shí)間點(diǎn)使用的是“-”， 則采用“至”進(jìn)行連接；當(dāng)時(shí)間點(diǎn)使用的是中文，則采用“-”進(jìn)行連接。

▲ 圖29 · 時(shí)間格式要對(duì)
11、小結(jié)在本節(jié)中對(duì)如何提升表單設(shè)計(jì)的效率與體驗(yàn)進(jìn)行了介紹。對(duì)于流程較為復(fù)雜、具有流程性特征的表單可以采用分步表單的設(shè)計(jì)方式；盡量讓用戶去選擇而不是輸入，按照先易后難、先必填后選填的邏輯給用戶提供選項(xiàng)；通過(guò)展示簡(jiǎn)明扼要的標(biāo)簽文字、讓輸入框錯(cuò)落有致的排列來(lái)保證清晰的視覺(jué)流；此外還要注意讓操作按鈕具有引導(dǎo)性，錯(cuò)誤提示就近展示保障用戶能夠發(fā)現(xiàn)；最后還需要注意數(shù)字與時(shí)間的展示格式，提高信息的可讀性。

以上就是本文的全部?jī)?nèi)容，主要介紹了表單設(shè)計(jì)的類型、構(gòu)成要素與如何提升表單設(shè)計(jì)效率與體驗(yàn)的方法，希望能對(duì)大家今后的日常工作有所幫助～

本文內(nèi)容為轉(zhuǎn)載 僅供個(gè)人學(xué)習(xí)使用