表單是產(chǎn)品設計中常見且重要的組成部分，對 UX/UI 設計師來說，構建有效的表單至關重要。

經(jīng)過思考的表單設計，能夠為用戶帶來更好的實用性、包容性，讓填寫體驗更流暢。

讓我們一起來看看在表單設計過程中需要注意的技巧和問題點，創(chuàng)建更合理的表單！

1. 最小化字段數(shù)量

通常表單中的字段越多，用戶完成的可能性就越小。

在表單設計過程中我們要盡可能避免展示非必填的字段，尤其是想引導用戶注冊或者留資的場景中，避免表單中的某個字段為選填，保證用戶最大程度的留資轉化。

2. 明確標記可選字段

在同一個表單中，要確保用戶清楚哪些字段是必填、哪些是選填的。

用星號標記必填字段是設計師最常用的方法，但用戶仍有可能無法很好地理解星號的含義。

因此，簡單地用文本（選填）標記某些字段通常不會在視覺上造成負擔，并且更清晰。

3. 使用單列布局

盡管單列布局在視覺上可能不太優(yōu)雅，但可以提高用戶理解、減少輸入錯誤，提高整體的轉化率。

在單列布局中，用戶“遺漏”輸入的可能性會更小，因為在填寫單列布局的表單時，視線只需要從上至下垂直移動。

當用戶錯過某個字段時，會破壞用戶不斷填寫表單取得進展的節(jié)奏，因為他們需要被迫倒退并填寫更早的字段，產(chǎn)生負面體驗。

4. 將標簽放在表單上方

在單列布局中，難經(jīng)?？吹奖韱螛撕灧旁谳斎肟蜃髠鹊那闆r。

這意味著用戶的瀏覽視線仍然是 Z 字型，而不是簡單的垂直向下，這樣會增加填寫的復雜性，填寫過程更緩慢。

5. 對標簽和字段進行分組

在表單設計過程中，要確保表單的字段、相關的標簽有著清晰的層級分組和間距，并與周圍的元素充分分離。

6. 避免將數(shù)字拆分為多個輸入字段

當填寫電話號碼、身份證、銀行卡、訂單號等較長的數(shù)字時只需要一個輸入字段，避免將數(shù)字拆分為多個輸入字段。分成多個字段雖然看起來清楚，但需要用戶多次點擊輸入，操作更繁瑣。

7. 在移動端中使用默認控件

AndROId 和 iOS 都有用于特定類型數(shù)據(jù)輸入的默認組件，例如日期選擇器。

在移動端設計中，盡可能使用這些內置的元素，這樣用戶會更熟悉原生的選項，表現(xiàn)可能會更好。

8. 保證字段簡潔

在設計表單的標簽時，目標是最少的字段和最大的清晰度。

如果考慮到某個字段有不確定性，可以使用一些簡短的提示文本，明確說明如何填寫這個字段。

9. 在按鈕上使用準確的描述

在按鈕中使用點擊后將進行的操作，讓用戶能更明確知道點擊之后的操作。按鈕上最常見的描述是“提交”或者“取消”，代表的含義太不夠具體?？梢钥紤]使用“注冊”、“發(fā)送信息”、“創(chuàng)建帳戶”等文案。

10. 不要使用占位符作為標簽

占位符是指點擊輸入前在輸入框中顯示的提示文本。

使用占位符文本作為標簽看起來雖然很簡潔，但占位符文本的顏色往往是淺灰色，訪問性和識別度弱，不夠明顯。

另外一旦在輸入框內填寫信息后，占位符標簽就會消失，用戶可能會忘記這個表單的標簽或者輸入的具體要求。

11. 使用內聯(lián)驗證來確認進度

使用內聯(lián)驗證來確認用戶輸入的進度以及輸入的內容是否正確。

例如用戶填寫完成一個字段后，在字段旁出現(xiàn)正確的提示，即時反饋給用戶。

最后

以上是在表單設計中高效且實用的設計技巧，希望通過這些內容能讓你對表單設計有更多的學習。

慢慢來比較快，如覺得有幫助，

作者：Clip設計夾