關注▲Clip設計夾後台回復「進群」加入設計成長群
設計夾的第120篇文章分享
表單是產品設計中常見且重要的組成部分，對UX/UI設計師來說，構建有效的表單至關重要。
經過思考的表單設計，能夠為用戶帶來更好的實用性、包容性，讓填寫體驗更流暢。
最小化字段數量
通常表單中的字段越多，用戶完成的可能性就越小。
在表單設計過程中我們要儘可能避免展示非必填的字段，尤其是想引導用戶註冊或者留資的場景中，避免表單中的某個字段為選填，保證用戶最大程度的留資轉化。
明確標記可選字段
在同一個表單中，要確保用戶清楚哪些字段是必填、哪些是選填的。
用星號標記必填字段是設計師最常用的方法，但用戶仍有可能無法很好地理解星號的含義。
因此，簡單地用文本（選填）標記某些字段通常不會在視覺上造成負擔，並且更清晰。
使用單列布局
儘管單列布局在視覺上可能不太優雅，但可以提高用戶理解、減少輸入錯誤，提高整體的轉化率。
在單列布局中，用戶「遺漏」輸入的可能性會更小，因為在填寫單列布局的表單時，視線只需要從上至下垂直移動。
將標籤放在表單上方
在單列布局中，難經常看到表單標籤放在輸入框左側的情況。
這意味着用戶的瀏覽視線仍然是Z字型，而不是簡單的垂直向下，這樣會增加填寫的複雜性，填寫過程更緩慢。
對標籤和字段進行分組
在表單設計過程中，要確保表單的字段、相關的標籤有着清晰的層級分組和間距，並與周圍的元素充分分離。
避免將數字拆分為多個輸入字段
當填寫電話號碼、身份證、銀行卡、訂單號等較長的數字時只需要一個輸入字段，避免將數字拆分為多個輸入字段。分成多個字段雖然看起來清楚，但需要用戶多次點擊輸入，操作更繁瑣。
在移動端中使用默認控件
Android和iOS都有用於特定類型數據輸入的默認組件，例如日期選擇器。
在移動端設計中，儘可能使用這些內置的元素，這樣用戶會更熟悉原生的選項，表現可能會更好。
保證字段簡潔
在設計表單的標籤時，目標是最少的字段和最大的清晰度。
如果考慮到某個字段有不確定性，可以使用一些簡短的提示文本，明確說明如何填寫這個字段。
在按鈕上使用準確的描述
在按鈕中使用點擊後將進行的操作，讓用戶能更明確知道點擊之後的操作。按鈕上最常見的描述是「提交」或者「取消」，代表的含義太不夠具體。可以考慮使用「註冊」、「發送信息」、「創建帳戶」等文案。
不要使用占位符作為標籤
占位符是指點擊輸入前在輸入框中顯示的提示文本。
使用占位符文本作為標籤看起來雖然很簡潔，但占位符文本的顏色往往是淺灰色，訪問性和識別度弱，不夠明顯。
另外一旦在輸入框內填寫信息後，占位符標籤就會消失，用戶可能會忘記這個表單的標籤或者輸入的具體要求。
使用內聯驗證來確認進度
使用內聯驗證來確認用戶輸入的進度以及輸入的內容是否正確。
例如用戶填寫完成一個字段後，在字段旁出現正確的提示，即時反饋給用戶。
最後
以上是在表單設計中高效且實用的設計技巧，希望通過這些內容能讓你對表單設計有更多的學習。
慢慢來比較快，如覺得有幫助，
添加微信,邀你進設計成長群🌟
🔥文章合集
致2020：設計文章合集
留言列表