設計表單的正確姿勢

簡評：表單是產品設計中最重要的組件之一。本文重點介紹了表單設計的一般規則。請記住，這些都是一般準則，每個規則都有例外。

表單應該放到一列中

多列破壞了用戶的垂直閱讀習慣。

標籤頂部對齊

用戶更能夠接收頂對齊的提示標籤。並且標籤頂對齊在手機上也能很好的顯示。

標籤和輸入框分視覺上進行綁定

將標籤和輸入貼在一起，確保欄位之間有足夠的高度，以免用戶感到困惑。

不要所有的字元都用大寫字母

全大寫的單詞影響可讀性。

如果少於 6 個選項，應該全部顯示出來

下拉列表選項需要兩次點擊操作，並且需要隱藏下拉列表操作操作比較複雜。如果選項多餘 5 個建議使用下拉列表，如果選項多餘 25 個建議在下拉列表中加入搜索功能。

不要把標籤作為 placeholder

將多選框（單選框）放到彼此的下面

將複選框放在彼此之下方便瀏覽信息。

指出具體的錯誤

顯示用戶發生錯誤的地方，並顯示錯誤原因。

在用戶完成輸入之後才進行錯誤驗證

不要在用戶正在輸入期間進行錯誤驗證，這是很沒有必要的。

不要隱藏基本的幫助說明

儘可能顯示幫助文本。如果幫助文本比較複雜，可以考慮在聚焦狀態下顯示到輸入框旁邊。

強調重點

限制輸入框的長度可以提示用戶的輸入

通常手機號、郵編號、信用卡等固定長度的內容應該限制輸入框的長度

不要使用 （ * ） 表示必填

不是所有的用戶都知道 （ * ）的含義，最好用文字來表述。

對相關信息進行分組

通過創建分組，用戶可以快速的理解表單內容。

原文：Design Better Forms

推薦閱讀：Sketch 自動布局插件介紹

歡迎關註：知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。