編者按：這篇文章出自英國(guó)創(chuàng)意設(shè)計(jì)機(jī)構(gòu) Make it Clear 的資深設(shè)計(jì)師 Sarah Edwards，她將繁復(fù)的表單設(shè)計(jì)知識(shí)融會(huì)貫通總結(jié)成了非常容易理解和使用的 6 個(gè)要點(diǎn)，特別值得學(xué)習(xí)：

表單是數(shù)字化設(shè)計(jì)當(dāng)中最常見的一種元素，但是也是最為瑣碎和基礎(chǔ)的一個(gè)設(shè)計(jì)元素。簡(jiǎn)單的任務(wù)可能會(huì)用到表單，復(fù)雜的 B 端項(xiàng)目則會(huì)涉及到更加龐大，更加復(fù)雜的表單。因此，對(duì)于表單設(shè)計(jì)，從來(lái)都不是一件簡(jiǎn)單的事情，但是如果你能夠掌握一些最為核心的原則，則可以在絕大多數(shù)情況下，設(shè)計(jì)出足夠好用的表單。這篇文章當(dāng)中，我將會(huì)從6個(gè)不同的角度，幫你梳理出表單設(shè)計(jì)最為重要的原則和注意事項(xiàng)。

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

1、表單輸入框基礎(chǔ)剖析

首先，我們需要弄清楚表單輸入框的基礎(chǔ)結(jié)構(gòu)。表單通常是由很多不同的字段輸入框構(gòu)成主題，這些輸入框會(huì)幫你搜集數(shù)據(jù)，其中涉及到不同類型的數(shù)據(jù)字段，但是在基礎(chǔ)的輸入框單元上，它們有著統(tǒng)一的特征：

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

2、典型的表單字段類型

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

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

3、表單輸入框的狀態(tài)

在尼爾森的交互設(shè)計(jì)十大啟發(fā)式當(dāng)中，排名第一的原則是「系統(tǒng)狀態(tài)的可見性」，這是因?yàn)榻换ピO(shè)計(jì)當(dāng)中，需要始終讓用戶知道當(dāng)下正在發(fā)生的情況，因此需要借助設(shè)計(jì)來(lái)表明狀態(tài)：

• 未觸發(fā)狀態(tài)（Inactive）：這個(gè)輸入框已經(jīng)準(zhǔn)備好，并等待與用戶交互
• 懸停狀態(tài)（Hover）：光標(biāo)已經(jīng)移動(dòng)到輸入框上方并停止移動(dòng)，輸入框描邊狀態(tài)提示用戶可交互
• 已觸發(fā)狀態(tài)（Active）：這個(gè)時(shí)候用戶已經(jīng)點(diǎn)擊輸入框，可以直接輸入內(nèi)容了，輸入框高亮顯示它已經(jīng)被觸發(fā)，其內(nèi)部已經(jīng)顯示輸入光標(biāo)來(lái)指示將要輸入的內(nèi)容的位置。
• 已禁用狀態(tài)（Disabled）：某些輸入框因?yàn)樘囟ǖ脑蛞呀?jīng)不可輸入，整體呈現(xiàn)灰色來(lái)告訴用戶數(shù)據(jù)已不再允許被提交或者輸入。

4、文本標(biāo)簽的使用

每個(gè)字段都應(yīng)該有一個(gè)明確的標(biāo)簽，用來(lái)告知用戶這個(gè)字段的內(nèi)容和屬性。設(shè)計(jì)師 Luke Wroblewski 推薦在設(shè)計(jì)文本標(biāo)簽的時(shí)候，采用如下策略：

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

將標(biāo)簽置于輸入框頂部還有利于多語(yǔ)言支持，而且這種布局特別適合快速掃視并填寫。文本標(biāo)簽的可訪問(wèn)性在這種情形下也更強(qiáng)，因?yàn)檫@種布局對(duì)于屏幕閱讀器也更加友好。

除此之外，還有這些注意事項(xiàng)：

• 不要使用占位符作為標(biāo)簽，因?yàn)橛脩粼谳斎氲臅r(shí)候，占位符會(huì)消失并失效，容易讓人困惑。
• 文本標(biāo)簽應(yīng)當(dāng)盡量簡(jiǎn)明扼要。
• 占位符可以使用示例，并且確保可讀性。

5、表單錯(cuò)誤提示的注意事項(xiàng)

在表單填寫過(guò)程中，經(jīng)常會(huì)出現(xiàn)錯(cuò)誤，這個(gè)時(shí)候系統(tǒng)要告知用戶填寫出錯(cuò)以及出錯(cuò)的原因。這個(gè)時(shí)候不僅要允許用戶即時(shí)更正，而且需要以合理的視覺指示，來(lái)告訴用戶這些信息。

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

6、表格應(yīng)用一欄式布局

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

結(jié)語(yǔ)

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

• 需要針對(duì)移動(dòng)端的使用場(chǎng)景，對(duì)表單進(jìn)行優(yōu)化
• 省略不必要的字段
• 將更容易填寫的字段置于表單頂部
• 將相關(guān)的字段打包分組

設(shè)計(jì)表單其實(shí)是用戶體驗(yàn)設(shè)計(jì)中，最需要注意的組成部分之一，它有很多細(xì)節(jié)需要注意，但是最核心的就是以上提及的這些。幫助用戶有效、盡快完成表單的輸入，并且避免出現(xiàn)胡亂的情況，是所有這些設(shè)計(jì)的核心目標(biāo)。