表單設計在生活中無處不在，大家經常要填表、填信息的，那要如何設計一個表單呢？讓我們來從作者這里學習一下提升表單操作效率和體驗的方法吧~

對于表單設計，我們常常會陷入無限的糾結之中，比如：

• 文字標簽是左對齊還是右對齊？
• 確定按鈕是放左邊還是右邊？
• 控件長度是整齊劃一還是錯落有致？
• ……

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

一、為什么要學習表單設計

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

當我們入職時，會填寫入職登記表；當辦理信用卡時，會填寫信用卡申請表；當購物下單時，會填寫訂單、地址等信息表單。無處不在的表單充斥著我們的生活。

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

表單在網頁或App中主要發揮數據采集和數據呈現的作用。對用戶而言，表單是數據錄入和提交的媒介；對產品而言，表單是獲取用戶信息的重要途徑。

二、怎么學習表單設計

2.1 認識表單類型

表單按照按任務類型可以分為以下三類：

1. 輸入型表單：要求用戶輸入完整信息
2. 匹配型表單：要求用戶輸入部分信息
3. 閱讀型表單：僅要求用戶閱讀表單上信息

2.2 表單組成要素

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

2.2.1 標簽

在工作場景中，會有四種標簽對齊方式：左對齊、右對齊、頂對齊與文字內對齊。

1、左對齊標簽

優點：方便用戶快速瀏覽標簽；降低占用的垂直空間。

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

2、右對齊標簽

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

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

3、頂對齊標簽

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

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

4、文字內對齊標簽

優點：對屏幕的占用空間非常小，極大節省了頁面空間。

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

5、標簽對比小結

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

2.3 錄入域

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

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

1）單行文本框

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

2）多行文本框

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

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

2.4 校驗

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

1、及時校驗

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

優點：提升輸入的效率和準確度。

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

2、輸入完成后校驗

一般用戶輸入完成后，鼠標失去焦點時進行校驗。校驗狀態分為：成功、錯誤和警示三種狀態，常用于輸入驗證碼、注冊等環節。

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

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

3、提交校驗

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

優點：讓用戶感知填寫后提交的狀態。

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

2.5 必填項

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

2.6 幫助提示

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

• 占位符提示：一般出現在輸入框中，是對標簽的補充說明，輸入內容后就消失。
• 常駐提示：一般出現在錄入控件旁，是對錄入信息的補充說明，不會隨著輸入而消失。
• 圖標氣泡提示：通過鼠標的懸停展示，常用于對一些業務的專有名詞解釋或者提供說明。

2.7 操作按鈕

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

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

1、長表單分步設計

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

優點：流程清晰，降低用戶對表單的理解成本，減少用戶負擔。

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

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

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

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

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

4、簡明扼要的展示標簽文字

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

5、輸入框可以錯落有致

輸入框?度應該根據內容的?度來定，通過?度來暗示它填寫內容的?度。

6、保證清晰的視覺流

清晰的視覺流能夠讓用戶感覺表單整潔，簡單。當標簽右對?時，建議按鈕和輸入域對?。

7、更具操作性的按鈕

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

8、錯誤提示就近反饋

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

9、數字組合要有規律

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

10、時間格式要對

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

四、小結

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

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