表單設(shè)計(jì)在生活中無處不在，大家經(jīng)常要填表、填信息的，那要如何設(shè)計(jì)一個(gè)表單呢？讓我們來從作者這里學(xué)習(xí)一下提升表單操作效率和體驗(yàn)的方法吧~

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

• 文字標(biāo)簽是左對(duì)齊還是右對(duì)齊？
• 確定按鈕是放左邊還是右邊？
• 控件長度是整齊劃一還是錯(cuò)落有致？
• ……

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

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

1、表單在我們的生活中無處不在

當(dāng)我們?nèi)肼殨r(shí)，會(huì)填寫入職登記表；當(dāng)辦理信用卡時(shí)，會(huì)填寫信用卡申請(qǐng)表；當(dāng)購物下單時(shí)，會(huì)填寫訂單、地址等信息表單。無處不在的表單充斥著我們的生活。

2、表單在人機(jī)交互過程中發(fā)揮著重要的作用

表單在網(wǎng)頁或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. 閱讀型表單：僅要求用戶閱讀表單上信息

2.2 表單組成要素

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

2.2.1 標(biāo)簽

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

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

優(yōu)點(diǎn)：方便用戶快速瀏覽標(biāo)簽；降低占用的垂直空間。

缺點(diǎn)：標(biāo)簽和輸入框相鄰間距過大，視覺上不夠和諧；根據(jù)馬泰奧的研究表明左對(duì)齊標(biāo)簽“典型的掃視時(shí)間為500毫秒”，相較右對(duì)齊標(biāo)簽用戶整體花費(fèi)時(shí)間更長。

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

優(yōu)點(diǎn)：標(biāo)簽和輸入框相鄰，用戶能快速填寫；根據(jù)馬泰奧的研究表明右對(duì)齊標(biāo)簽“典型的掃視時(shí)間為240毫秒”，比左對(duì)齊標(biāo)簽整體花費(fèi)時(shí)間少一半。

缺點(diǎn)：右對(duì)齊會(huì)造成左側(cè)不齊，用戶無法快速瀏覽標(biāo)簽；若標(biāo)簽過長，需要兩行文字展示，會(huì)導(dǎo)致一定的閱讀困難。

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

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

缺點(diǎn)：占用縱向空間，會(huì)拉長界面高度。

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

優(yōu)點(diǎn)：對(duì)屏幕的占用空間非常小，極大節(jié)省了頁面空間。

缺點(diǎn)：輸入內(nèi)容時(shí)輸入框中的標(biāo)簽占位符會(huì)消失，用戶得不到有效提示；表單項(xiàng)過多時(shí)，填寫完成后不利于用戶檢查內(nèi)容的對(duì)錯(cuò)。

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

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

2.3 錄入域

錄入域是表單的核心構(gòu)成部分，為了方便不同信息的錄入我們一般會(huì)采用不同的交互控件。在B端產(chǎn)品設(shè)計(jì)中，我們常見的錄入域主要分為兩大類：輸入型表單與選擇型表單。

1、輸入型表單主要包括單行文本框、多行文本框

1）單行文本框

單行文本框內(nèi)含有占位符，是對(duì)當(dāng)前項(xiàng)信息的補(bǔ)充描述，能夠幫助用戶準(zhǔn)確清晰的填寫內(nèi)容。單行文本框一般包含三種尺寸（大、默認(rèn)、?。?，高度分別為40px、32px 和 24px，并且一般默認(rèn)提供15~20個(gè)字符寬度。在設(shè)計(jì)過程中還需要注意單行文本框一般包含初始狀態(tài)、輸入狀態(tài)、只讀狀態(tài)、hover狀態(tài)、輸入完成狀態(tài)與禁用狀態(tài)。

2）多行文本框

多行文本框多用于長大段落文字的輸入，可以根據(jù)需要展示最大字?jǐn)?shù)或者自適應(yīng)文本框高度。

2、選擇型表單包括下拉選擇框、時(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)

在用戶輸入的過程中進(jìn)行實(shí)時(shí)驗(yàn)證，主要用于注冊頁面中密碼信息的驗(yàn)證。

優(yōu)點(diǎn)：提升輸入的效率和準(zhǔn)確度。

缺點(diǎn)：如果輸入的內(nèi)容出錯(cuò)概率較高，頻繁的給用戶錯(cuò)誤提示會(huì)降低用戶體驗(yàn)。

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

一般用戶輸入完成后，鼠標(biāo)失去焦點(diǎn)時(shí)進(jìn)行校驗(yàn)。校驗(yàn)狀態(tài)分為：成功、錯(cuò)誤和警示三種狀態(tài)，常用于輸入驗(yàn)證碼、注冊等環(huán)節(jié)。

優(yōu)點(diǎn)：輸完一項(xiàng)即校驗(yàn)，避免一下子出現(xiàn)很多錯(cuò)誤需要修改，緩解用戶壓力。

缺點(diǎn)：會(huì)延長用戶完成表單填寫的時(shí)間。

3、提交校驗(yàn)

當(dāng)完成表單信息填寫后，用戶通過button進(jìn)行操作，系統(tǒng)給出成功、失敗或者錯(cuò)誤提示，常用于登錄、數(shù)據(jù)提交等場景。

優(yōu)點(diǎn)：讓用戶感知填寫后提交的狀態(tài)。

缺點(diǎn)：報(bào)錯(cuò)過多會(huì)增加用戶再次修改填寫的壓力。

2.5 必填項(xiàng)

必填項(xiàng)經(jīng)常習(xí)慣用紅色的“*”來標(biāo)記，此外還可以用文字進(jìn)行說明。如果必填項(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)。

2.6 幫助提示

幫助提示有三種提示方式：占位符提示、常駐提示、圖標(biāo)氣泡提示。

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

2.7 操作按鈕

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

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

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

很多時(shí)候表單項(xiàng)較多，業(yè)務(wù)本身又具有流程化特性（例如注冊、發(fā)布等），此時(shí)可以用分步表單設(shè)計(jì)的策略，使用步驟條、進(jìn)度條進(jìn)行導(dǎo)航顯示。

優(yōu)點(diǎn)：流程清晰，降低用戶對(duì)表單的理解成本，減少用戶負(fù)擔(dān)。

缺點(diǎn)：用戶無法感知所有的填寫項(xiàng)，必須完成當(dāng)前這一步操作才能看到下一步操作。

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

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

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

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

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

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

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

輸入框?度應(yīng)該根據(jù)內(nèi)容的?度來定，通過?度來暗示它填寫內(nèi)容的?度。

6、保證清晰的視覺流

清晰的視覺流能夠讓用戶感覺表單整潔，簡單。當(dāng)標(biāo)簽右對(duì)?時(shí)，建議按鈕和輸入域?qū)?。

7、更具操作性的按鈕

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

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

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

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

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

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

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

四、小結(jié)

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

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