超簡單！從這6個方面入手，徹底掌握表單設計

編者按：這篇文章出自英國創意設計機構 Make it Clear 的資深設計師 Sarah Edwards，她將繁復的表單設計知識融會貫通總結成了非常容易理解和使用的 6 個要點，特別值得學習：

表單是數字化設計當中最常見的一種元素，但是也是最為瑣碎和基礎的一個設計元素。簡單的任務可能會用到表單，復雜的 B 端項目則會涉及到更加龐大，更加復雜的表單。因此，對于表單設計，從來都不是一件簡單的事情，但是如果你能夠掌握一些最為核心的原則，則可以在絕大多數情況下，設計出足夠好用的表單。這篇文章當中，我將會從6個不同的角度，幫你梳理出表單設計最為重要的原則和注意事項。

另外，這兩篇文章也值得看看：

1、表單輸入框基礎剖析

首先，我們需要弄清楚表單輸入框的基礎結構。表單通常是由很多不同的字段輸入框構成主題，這些輸入框會幫你搜集數據，其中涉及到不同類型的數據字段，但是在基礎的輸入框單元上，它們有著統一的特征：

• 文本標簽（Label）：描述這個輸入框內數據的屬性特征
• 輸入框容器（Container）：輸入框的邊界
• 占位符/輸入文本：占位符通常是淺色的，以文本的形式告訴用戶需要輸入的數據是什么樣的，但是占位符不應該取代標簽。
• 前導圖標（可選）：通常用來指示輸入框內字段的屬性和功能
• 后綴圖標（可選）：通常用來標識字段輸入格式的正確與錯誤
• 幫助信息（可選）：提供輔助信息，幫助用戶了解一些必要的信息內容
• 上下間距：適當留白
• 左間距：適當留白

2、典型的表單字段類型

表單字段類型千變萬化，但是我們實際生活和設計中所涉及到的常見類型輸入框和字段其實類型非常有限，這里我整理出我們最容易碰到的 6 個類型，吃透它們，可以幫助你更好地完成日常的表單設計：

• 文本輸入框：通常這類表單輸入框包含有一個標簽，輸入框大小和需要輸入的字段的實際長度或者預期長度是接近的，一般會有簡單的占位符作為提示和說明。
• 搜索框：搜索框通常是在界面中特別明顯的位置，同時，搜索框內的占位符文本，通常會以示例的方式，提供一些常見的搜索內容，來引導用戶進行搜索。
• 日期選擇框；日期選擇器可以呼出日期選擇控件，同時也支持直接以占位符示意的方式，手動輸入日期。
• 下拉菜單：下拉菜單可能是最為常見的選擇器形式，下拉菜單提供一個交互式的下拉框和備選項，允許用戶在預定義的選項中，直接選取單個選項。通常下拉菜單中選項會比較多。
• 密碼輸入：默認情況下，密碼輸入框中的字段內容會被隱去，以小圓點或者星號來展示，
• 單選按鈕：這是另外一種常見的交互元素，允許用戶從數量較少（不超過3個）的互斥選項中選擇的控件。這種控件最重要的特質，就是選項之間是互斥的。

3、表單輸入框的狀態

在尼爾森的交互設計十大啟發式當中，排名第一的原則是「系統狀態的可見性」，這是因為交互設計當中，需要始終讓用戶知道當下正在發生的情況，因此需要借助設計來表明狀態：

• 未觸發狀態（Inactive）：這個輸入框已經準備好，并等待與用戶交互
• 懸停狀態（Hover）：光標已經移動到輸入框上方并停止移動，輸入框描邊狀態提示用戶可交互
• 已觸發狀態（Active）：這個時候用戶已經點擊輸入框，可以直接輸入內容了，輸入框高亮顯示它已經被觸發，其內部已經顯示輸入光標來指示將要輸入的內容的位置。
• 已禁用狀態（Disabled）：某些輸入框因為特定的原因已經不可輸入，整體呈現灰色來告訴用戶數據已不再允許被提交或者輸入。

4、文本標簽的使用

每個字段都應該有一個明確的標簽，用來告知用戶這個字段的內容和屬性。設計師 Luke Wroblewski 推薦在設計文本標簽的時候，采用如下策略：

• 想要高效輸入或者輸入熟悉的字段，標簽置于輸入框頂端并靠左對齊
• 對于用戶不熟悉的，或者是重要的字段，可以將標簽置于輸入框左側并對齊

將標簽置于輸入框頂部還有利于多語言支持，而且這種布局特別適合快速掃視并填寫。文本標簽的可訪問性在這種情形下也更強，因為這種布局對于屏幕閱讀器也更加友好。

除此之外，還有這些注意事項：

• 不要使用占位符作為標簽，因為用戶在輸入的時候，占位符會消失并失效，容易讓人困惑。
• 文本標簽應當盡量簡明扼要。
• 占位符可以使用示例，并且確保可讀性。

5、表單錯誤提示的注意事項

在表單填寫過程中，經常會出現錯誤，這個時候系統要告知用戶填寫出錯以及出錯的原因。這個時候不僅要允許用戶即時更正，而且需要以合理的視覺指示，來告訴用戶這些信息。

所以，比較合理的方式是通過輸入框的色彩改變來提示用戶出錯，同時加入文本提示來告訴用戶出錯的原因和改正的方法。

6、表格應用一欄式布局

表單應該盡量使用自上而下一欄式的布局，這樣用戶很難錯過需要填寫的內容。而多欄式的布局之下，用戶需要同時左右掃讀并上下瀏覽，這種情況下非常容易錯過某些字段內容。

結語

除了以上的 6 組要點之外，還有一些額外的小點需要注意：

• 需要針對移動端的使用場景，對表單進行優化
• 省略不必要的字段
• 將更容易填寫的字段置于表單頂部
• 將相關的字段打包分組

設計表單其實是用戶體驗設計中，最需要注意的組成部分之一，它有很多細節需要注意，但是最核心的就是以上提及的這些。幫助用戶有效、盡快完成表單的輸入，并且避免出現胡亂的情況，是所有這些設計的核心目標。