編者按：這篇文章來(lái)自資深設(shè)計(jì)師 Taras Bakusevych，長(zhǎng)期從事金融和企業(yè)類(lèi)數(shù)字產(chǎn)品的設(shè)計(jì)，在表單設(shè)計(jì)領(lǐng)域造詣精深。這篇文章梳理了他總結(jié)的 20 條表單和輸入框的設(shè)計(jì)經(jīng)驗(yàn)，實(shí)用性極強(qiáng)。

表單是 UI 界面中最為常見(jiàn)的元素，它通常是用來(lái)搜集和呈現(xiàn)一些數(shù)據(jù)、信息和特定的字段。在現(xiàn)實(shí)世界中，印刷的表格存在的時(shí)間更為久遠(yuǎn)，它們身上有很多設(shè)計(jì)可以作為重要的參考，幫助我們優(yōu)化 UI 中的表單元素。

1、充分了解文本輸入框的構(gòu)成

文本輸入框是 UI 表單的基本組成部分，無(wú)論是表單還是對(duì)話框中，它都非常常見(jiàn)。文本字段是提供內(nèi)容輸入交互的核心組件，在進(jìn)行布局和交互設(shè)計(jì)的時(shí)候，它其實(shí)有著不低的設(shè)計(jì)要求：它需要高效、顯著且有良好的可訪問(wèn)性。

這些是文本輸入框的關(guān)鍵元素：

• 1、文本容器——可交互的輸入?yún)^(qū)域

• 2、輸入文本——所輸入的文本內(nèi)容

• 3、標(biāo)簽文本——告訴用戶(hù)這個(gè)表單字段中要輸入的內(nèi)容屬性

• 4、占位符文本——輸入信息的范例，用戶(hù)后續(xù)需要用自己的內(nèi)容替代它

• 5、幫助和驗(yàn)證（可選）——提供上下文信息和驗(yàn)證信息

• 6、前導(dǎo)圖標(biāo)（可選）——描述文本字段所需的輸入類(lèi)型和特征

• 7、后綴圖標(biāo)（可選）——對(duì)輸入內(nèi)容進(jìn)行控制，比如現(xiàn)實(shí)和隱藏

2、明確文本輸入框的類(lèi)型

文本輸入框確實(shí)是用來(lái)輸入文本內(nèi)容的，但是不同類(lèi)型的文本差別很大，特定類(lèi)型的文本輸入框都應(yīng)該進(jìn)行合理的優(yōu)化，比如銀行卡號(hào)。下面列舉出了我們?cè)?UI 設(shè)計(jì)的時(shí)候，最常用到的一些輸入框：

（這里暫時(shí)不具體展開(kāi)文本輸入框的具體類(lèi)型，因?yàn)樵谙盗形恼潞竺鏁?huì)單獨(dú)列舉的）

3、選擇合理的輸入格式

不同的文本輸入的格式和類(lèi)型是不一樣的，通過(guò)合理的格式約束，能夠方便系統(tǒng)更好地搜集數(shù)據(jù)，而避免錯(cuò)誤出現(xiàn)。

4、根據(jù)狀態(tài)和用戶(hù)交互來(lái)改變輸入框樣式

通過(guò)不同的外觀樣式來(lái)呈現(xiàn)當(dāng)前所處的狀態(tài)，是輸入框在 UI 界面中的必須做到的事情。非激活狀態(tài)，光標(biāo)懸停狀態(tài)，禁用狀態(tài)、選定輸入狀態(tài)、驗(yàn)證識(shí)別狀態(tài)、出錯(cuò)狀態(tài)等等。所有的輸入框設(shè)計(jì)當(dāng)中都應(yīng)該保持一致，盡量不要進(jìn)行反常規(guī)設(shè)計(jì)，避免和用戶(hù)思維模型發(fā)生沖突。

5、選擇最佳的文本框樣式

絕大多數(shù)情況下，表單中用來(lái)說(shuō)明的文本標(biāo)簽可以放在頂部，可以左對(duì)齊，也可以右對(duì)齊。但是最佳的樣式通常取決于輸入框的大小、位置和整個(gè)表單的樣式，以及組件庫(kù)和平臺(tái)。每種設(shè)計(jì)都各有優(yōu)劣。

在最初的 Material Design 的設(shè)計(jì)規(guī)范當(dāng)中，使用下劃線作為輸入框并不是最佳的設(shè)計(jì)樣式，有趣的是，有研究表明，用戶(hù)更喜歡帶有圓角的輸入框。

6、輸入框標(biāo)簽左對(duì)齊

當(dāng)用戶(hù)不太熟悉你所提供的表單之時(shí)，左對(duì)齊是一個(gè)不錯(cuò)的選擇：

• 優(yōu)點(diǎn)：易于擴(kuò)展，可以充分利用垂直空間

• 缺點(diǎn)：標(biāo)簽和輸入框之間的距離可能會(huì)過(guò)長(zhǎng)，顯得參差不齊，并且完成表單填寫(xiě)會(huì)耗費(fèi)更多時(shí)間。

7、輸入框標(biāo)簽右對(duì)齊

和左對(duì)齊的標(biāo)簽相比，右對(duì)齊的標(biāo)簽在測(cè)算數(shù)據(jù)當(dāng)中，用戶(hù)填寫(xiě)速讀快了近2倍：

• 優(yōu)點(diǎn)：文本標(biāo)簽和輸入框之間的距離固定，用戶(hù)瀏覽掃視速度更快，完成時(shí)間更短文本標(biāo)簽和輸入框之間的距離固定，用戶(hù)瀏覽掃視速度更快，完成時(shí)間更短

• 缺點(diǎn)：因?yàn)樽髠?cè)參差不齊，整體掃讀表單的時(shí)候不容易了解全部信息

8、輸入框標(biāo)簽頂部對(duì)齊

在多數(shù)情況下，這是最佳的選擇，在移動(dòng)端設(shè)備上效果更好，因?yàn)椴恍枰嗨娇臻g。

• 優(yōu)點(diǎn)：用戶(hù)上下掃讀即可快速捕獲信息，并填寫(xiě)表單，更快完成

• 缺點(diǎn)：縱向上需要更多空間

9、輸入框長(zhǎng)度應(yīng)符合用戶(hù)預(yù)期

表單那中文本字段可能的輸入長(zhǎng)度，和輸入框本身長(zhǎng)度應(yīng)該一致，這樣不僅在體驗(yàn)上一致，而且在視覺(jué)體驗(yàn)上更加愉悅。

10、占位符不能替代標(biāo)簽

在輸入框中用作示意和說(shuō)明的占位符，在輸入之前可以給用戶(hù)一個(gè)指引性的短期記憶。它本身應(yīng)該是標(biāo)簽的補(bǔ)充。但是如果沒(méi)有標(biāo)簽，占位符又消失了，用戶(hù)可能會(huì)因?yàn)榭焖龠z忘而不知道要輸入啥。如果你需要極簡(jiǎn)的輸入框設(shè)計(jì)，可以采用 Material Design 中所推薦的浮動(dòng)式標(biāo)簽設(shè)計(jì)。

占位符有時(shí)候會(huì)讓用戶(hù)感到迷惑，標(biāo)簽是必不可少的。

10、幫助用戶(hù)填寫(xiě)表格

• 借助自動(dòng)填寫(xiě)功能，幫助用戶(hù)填寫(xiě)表單。用戶(hù)在填寫(xiě)過(guò)程在自動(dòng)查詢(xún)匹配，提供建議，用戶(hù)可以使用回車(chē)和方向鍵快速選擇。

• 使用自動(dòng)建議功能，基于關(guān)鍵詞查詢(xún)相關(guān)短語(yǔ)，以下拉框形式呈現(xiàn)。

• 使用預(yù)填充字段作為默認(rèn)值，比如基于IP地址幫用戶(hù)填寫(xiě)好國(guó)家和地區(qū)。這類(lèi)解決方案很靈活多樣，根據(jù)填寫(xiě)字段屬性、功能，可以靈活處理。

• 提供上下文信息。比如用戶(hù)在轉(zhuǎn)賬的時(shí)候，提供余額相關(guān)的信息。

11、使用內(nèi)聯(lián)驗(yàn)證

「實(shí)時(shí)在線驗(yàn)證」可以解決用戶(hù)輸入信息的有效性的問(wèn)題，而不是等到用戶(hù)最后提交的時(shí)候再驗(yàn)證，使用這一技術(shù)并不會(huì)造成太大問(wèn)題：

• 可以將驗(yàn)證結(jié)果和錯(cuò)誤提示靠近輸入框呈現(xiàn)

• 不用做的過(guò)于醒目，錯(cuò)誤信息主要告訴用戶(hù)如何解決問(wèn)題，而不是讓用戶(hù)感到緊張挫敗

• 避免過(guò)早進(jìn)行驗(yàn)證，在用戶(hù)完成當(dāng)前字段填寫(xiě)之后再進(jìn)行，避免一直報(bào)錯(cuò)

• 考慮使用更加令人愉悅的「積極驗(yàn)證」模式，增加愉悅感

12、盡量減少填寫(xiě)字段數(shù)量

太多的填寫(xiě)內(nèi)容會(huì)增加認(rèn)知負(fù)荷，盡量讓表單顯得更加簡(jiǎn)單。

• 不要將名字和日期分成多個(gè)字段

• 不要多次詢(xún)問(wèn)相同信息

• 重復(fù)輸入的內(nèi)容盡量減少

13、隱藏不相關(guān)的字段

不要一次性將所有的信息和步驟都呈現(xiàn)出來(lái)，而是要在用戶(hù)需要的時(shí)候再呈現(xiàn)，合理控制復(fù)雜性。

14、使用條件邏輯

基于用戶(hù)的不同選擇，將表單字段中不相關(guān)的部分隱藏掉，或者新增，這種靈活的機(jī)制就是條件邏輯。這種方式可以幫用戶(hù)規(guī)避掉很多不必要的填寫(xiě)內(nèi)容，并且讓填寫(xiě)過(guò)程更加個(gè)性化。

15、內(nèi)容分組

簡(jiǎn)化表單的最簡(jiǎn)單方法之一，就是將相關(guān)的字段條目分組，這一點(diǎn)非常符合格式塔原理，無(wú)論是接近性、先慣性、連續(xù)性還是閉合性，這種設(shè)計(jì)都很貼合，且有效。這種方式可以讓表單更加富有組織性。

16、避免多列布局

單列布局能夠給用戶(hù)呈現(xiàn)一條清晰的視覺(jué)路徑，但是多列表單則會(huì)讓用戶(hù)來(lái)回掃視，整體的效率和工作量都更大。

17、將復(fù)雜的表單分割為簡(jiǎn)單的步驟

有時(shí)候，即時(shí)你刪除了所有不必要的內(nèi)容，表單依然會(huì)很大。大型的表單和任務(wù)分割成為小任務(wù)和類(lèi)別明晰的表單，會(huì)讓執(zhí)行過(guò)程更加舒適。

• 顯示步驟，并且以視覺(jué)化的形式來(lái)呈現(xiàn)進(jìn)度，這可以提高滿意度，并且激勵(lì)用戶(hù)

• 不要太過(guò)細(xì)化，太多步驟無(wú)濟(jì)于事，可能會(huì)惹惱用戶(hù)

• 對(duì)關(guān)鍵信息進(jìn)行總結(jié)，減輕焦慮，最后需要復(fù)查

18、集中呈現(xiàn)導(dǎo)航和表單本身

如果需要填寫(xiě)的表單內(nèi)容非常多，可以分成多個(gè)步驟，但是需要注意的是，讓分布的導(dǎo)航和表單始終作為焦點(diǎn)來(lái)處理，無(wú)關(guān)的側(cè)邊欄和其他組件都隱藏起來(lái)，不要影響表單填寫(xiě)。

19、使用合理的鍵盤(pán)類(lèi)型

iOS 和 Android 提供多種不同的鍵盤(pán)，這是為了應(yīng)對(duì)不同的輸入需求。想要簡(jiǎn)化數(shù)據(jù)輸入，當(dāng)用戶(hù)輸入不同類(lèi)型的字段的時(shí)候，調(diào)用對(duì)應(yīng)類(lèi)型的鍵盤(pán)，同時(shí)需要注意鍵盤(pán)出現(xiàn)的位置，不要遮擋住關(guān)鍵信息。

20、別再用荒謬且令人難受的密碼設(shè)計(jì)了

• 允許用戶(hù)顯示和隱藏所設(shè)置的密碼，而不是讓用戶(hù)輸入2次來(lái)進(jìn)行驗(yàn)證，這對(duì)于生成有效的密碼更重要

• 始終顯示對(duì)于密碼的要求，并提供相應(yīng)的指引，并現(xiàn)實(shí)強(qiáng)度。嘗試簡(jiǎn)化對(duì)用戶(hù)的要求i。

原文作者：Taras Bakusevych

原文鏈接：https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0