點擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計師一起成長

三分設(shè) x VMIC UED

正文共：3813 字 39 圖 預(yù)計閱讀時間：12 分鐘

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

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

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

控件長度是整齊劃一還是錯落有致？

......

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

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

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

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

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

表單在網(wǎng)頁或App中主要發(fā)揮數(shù)據(jù)采集和數(shù)據(jù)呈現(xiàn)的作用。對用戶而言，表單是數(shù)據(jù)錄入和提交的媒介；對產(chǎn)品而言，表單是獲取用戶信息的重要途徑。

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

2.1 認識表單類型

表單按照按任務(wù)類型可以分為以下三類：

1、輸入型表單：要求用戶輸入完整信息

2、匹配型表單：要求用戶輸入部分信息

3、閱讀型表單：僅要求用戶閱讀表單上信息       

▲ 圖1 · 表單類型

2.2 表單組成要素

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

▲ 圖2 · 表單組成要素

2.2.1 標(biāo)簽

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

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

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

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

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

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

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

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

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

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

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

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

缺點：占用縱向空間，會拉長界面高度。

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

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

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

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

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

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

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

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

2.3 錄入域

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

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

1）單行文本框

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

▲ 圖9 · 單行文本框樣式

▲ 圖10 · 單行文本框狀態(tài)

2）多行文本框

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

▲ 圖11 · 多行文本框

2、選擇型表單包括下拉選擇框、時間選擇框、單選框、多選框

▲ 圖12 · 下拉選擇框

▲ 圖13 · 時間選擇框

2.4 校驗

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

1、及時校驗

在用戶輸入的過程中進行實時驗證，主要用于注冊頁面中密碼信息的驗證。

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

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

▲ 圖14 · Adobe網(wǎng)站的實時驗證

2、輸入完成后校驗

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

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

缺點：會延長用戶完成表單填寫的時間。      

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

3、提交校驗

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

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

缺點：報錯過多會增加用戶再次修改填寫的壓力。

▲ 圖16 · 提交校驗案例

2.5 必填項

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

   

▲ 圖17 · 必填項

2.6 幫助提示

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

1）占位符提示：一般出現(xiàn)在輸入框中，是對標(biāo)簽的補充說明，輸入內(nèi)容后就消失。

2）常駐提示：一般出現(xiàn)在錄入控件旁，是對錄入信息的補充說明，不會隨著輸入而消失。

3）圖標(biāo)氣泡提示：通過鼠標(biāo)的懸停展示，常用于對一些業(yè)務(wù)的專有名詞解釋或者提供說明。

▲ 圖18 · 幫助提示

2.7 操作按鈕

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

▲ 圖19 · 按鈕展示位置

三、如何提升表單的效率與體驗

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

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

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

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

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

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

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

         ▲ 圖21 · 提供選擇給用戶

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

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

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

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

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

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

5、輸入框可以錯落有致

   
   

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

    

   
   

▲ 圖24 · 輸入框可以錯落有致

6、保證清晰的視覺流

   
   

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

    ?。
   
   
   
   

    

   
   

▲ 圖25 · 保證清晰的視覺流

7、更具操作性的按鈕

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

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

8、錯誤提示就近反饋

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

▲ 圖27 · 錯誤提示就近反饋

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

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

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

10、時間格式要對

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

▲ 圖29 · 時間格式要對

四、小結(jié)

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

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

- END -

我們相信設(shè)計師和創(chuàng)造者一樣是思想家

一個開放的共創(chuàng)學(xué)習(xí)型產(chǎn)品設(shè)計社區(qū)

助力全球 1 億設(shè)計師成長

歡迎添加 ??  星標(biāo) · 獲取每天推薦知識分享

每天閱讀充電 · 養(yǎng)成終身學(xué)習(xí)

「資訊」「文章」「活動」「招聘」「課程」

創(chuàng)新 / 成長 / 共創(chuàng) / 公益

所有平臺贊助

將用于社區(qū)建設(shè)和反饋社區(qū)粉絲

期待與更多優(yōu)秀產(chǎn)品設(shè)計師一起成長

??????

掃碼進群

全年助力設(shè)友建立設(shè)計知識體系

「體系化知識研討」

「書籍共讀」「職場討論」「活動交流」

分享設(shè)計/管理/職場/心得，定期直播，答疑解惑

免費加入 · 特約邀請

↓↓↓點開『閱讀原文』，關(guān)注星球資料庫