編者按：表單當(dāng)中的輸入框和字段內(nèi)容設(shè)計(jì)，也是考驗(yàn)設(shè)計(jì)師的體驗(yàn)考慮周全度的一個重要考核內(nèi)容。這篇文章出自資深設(shè)計(jì)師 Saadia Minhas 之手，從她的工作經(jīng)驗(yàn)當(dāng)中總結(jié)了一些很容易影響到體驗(yàn)的輸入框設(shè)計(jì)法則。她的總結(jié)總體上還是蠻全面的，基本上覆蓋了絕大多數(shù)的規(guī)則，幫助設(shè)計(jì)師規(guī)避了最常見的問題。

之前我在《7 個簡單但效果顯著的按鈕設(shè)計(jì)法則》這篇文章當(dāng)中分享了影響按鈕設(shè)計(jì)體驗(yàn)的 7 個重要要素，今天的這篇文章我將重點(diǎn)介紹用戶體驗(yàn)設(shè)計(jì)的另一個重要的 UI 設(shè)計(jì)元素，用戶輸入表單時，文本輸入控件的設(shè)計(jì)。雖然這些都是小細(xì)節(jié)，但輸入字段是否經(jīng)過精心設(shè)計(jì)，會對產(chǎn)品的可用性產(chǎn)生巨大的影響。

我將分享一些實(shí)用技巧，幫助你創(chuàng)建直觀、用戶友好的表單輸入框，讓用戶更輕松、更高效地輸入數(shù)據(jù)。

1. 不要用字段名稱只作為輸入控件占位符

不要將字段標(biāo)簽的名稱，只用作輸入控件的占位符。當(dāng)用戶單擊文本控件內(nèi)部時，隱藏字段標(biāo)簽會因?yàn)橛脩舻亩唐谟洃浻邢?，而?dǎo)致用戶瞬間忘記要輸入什么內(nèi)容。

• 用戶需要在表單字段中輸入什么信息，是依靠標(biāo)簽來提供明確的指導(dǎo)。
• 當(dāng)標(biāo)簽消失時（因?yàn)樗鼈儽挥米髡嘉环谋荆?，用戶可能會忘記所需的輸入，特別是當(dāng)他們分心或者查看其他字段內(nèi)容的時候。
• 保持標(biāo)簽可見可以提高產(chǎn)品的可訪問性，尤其是面對認(rèn)知和記憶力較差的用戶的。它確保每個輸入字段的用途始終清晰，從而減輕用戶的認(rèn)知負(fù)擔(dān)。

總結(jié)：保持標(biāo)簽始終可見，可以使表單更加對用戶友好、清晰且易于訪問。

2. 不要使用過長的文本標(biāo)簽

不要使用過長的文本標(biāo)簽，且標(biāo)簽不應(yīng)占用多行，它應(yīng)該盡量保持在一行內(nèi)。

• 單行標(biāo)簽更易于閱讀且閱讀速度更快。
• 當(dāng)標(biāo)簽占用多行時，快速掃視和理解會變得更加困難，尤其是在小屏幕和復(fù)雜的表格上。
• 多行標(biāo)簽會使表單看起來混亂且難以理解，從而降低設(shè)計(jì)的整體清晰度。
• 將標(biāo)簽放在一行上可以確保布局一致、更清晰、更有條理。

總結(jié)：使用簡潔、清晰的語言來標(biāo)記標(biāo)簽，確保它們在同一行內(nèi)，且不會產(chǎn)生理解上的歧義。

3. 明確傳達(dá)輸入的要求

清楚地傳達(dá)用戶需要在表格中提供什么樣的信息。

• 輸入要求（例如字符限制、格式規(guī)則和必填字段）可幫助用戶準(zhǔn)確了解對他們的期望。
• 這有助于避免混淆和錯誤，使表格更容易第一次就正確填寫。
• 減少了提交無效數(shù)據(jù)的情況，也避免了用戶因錯誤消息而感到沮喪的情況發(fā)生。
• 用戶不必猜測需要什么，從而獲得更流暢、更輕松的體驗(yàn)。

總結(jié)：將輸入的要求放在相關(guān)字段附近（例如，標(biāo)簽下方和工具提示內(nèi)），并使用簡單明了的語言來描述。

4. 不要在控件內(nèi)使用占位符文本

盡量少用占位符文本，因?yàn)楫?dāng)用戶開始輸入時，作為提示的占位符文本就會消失。

• 用戶在輸入時還需要回憶占位符文本是很煩人的。而需要重新查看占位符的唯一方法是刪除已輸入的文本。
• 用戶可能需要暫停來回憶占位符指令，從而中斷輸入信息的流程。
• 不要使用占位符文本，而應(yīng)在輸入字段外，使用可見標(biāo)簽和幫助文本。
• 這確保了指引信息在整個交互過程中都保持可見，從而使表單更加用戶友好。

總結(jié)：減少甚至避免使用展示性占位符文本，可以提高信息傳達(dá)的清晰度，并減少用戶的挫敗感，從而提供更流暢、更直觀的表單填寫體驗(yàn)。

5. 使用合適的輸入控件

在為用戶設(shè)計(jì)表單時使用適當(dāng)?shù)妮斎肟丶?/p>

• 使用多行輸入控件來輸入較長、開放式的內(nèi)容，例如評論、反饋和詳細(xì)描述。
• 對于較長的內(nèi)容，使用單行輸入會限制用戶有效查看和編輯文本的能力。
• 對于多行輸入字段以視覺化的方式向用戶提供引導(dǎo)，表明他們可以提供更詳細(xì)和擴(kuò)展的內(nèi)容，指引用戶滾動瀏覽或者輸入大量內(nèi)容。

總結(jié)：合適的輸入控件，可確保用戶知道他們可以和應(yīng)該在某個字段輸入框中提供多少信息。

6. 僅標(biāo)記可選填字段

大部分情況下，表單中的所有字段都是必填的，除了幾個可選填字段。為了避免混亂，最好為非必填字段標(biāo)注可選填標(biāo)簽。

• 這種方式可以使得表單更整潔、更少雜亂，從而易于瀏覽。
• 此方法通過僅突出顯示可選字段，并自動將其與必填字段區(qū)分開來，從而減少了視覺噪音。
• 標(biāo)記可選填字段后，用戶無需猜測哪些字段是必填字段。這可帶來更順暢的體驗(yàn)，并有助于用戶提交不完整的內(nèi)容。

總結(jié)：標(biāo)記可選填字段，而不是必填字段可以減少表單混亂并簡化導(dǎo)航。

7.針對輸入內(nèi)容調(diào)整輸入控件寬度

使用輸入字段的寬度，作為指標(biāo)來標(biāo)識其中包含的輸入字符的數(shù)量和長度。

• 這將幫助用戶確定他們可以提供的輸入字符的長度。
• 當(dāng)輸入字段的大小合適時，用戶不必猜測他們可以和應(yīng)該輸入多少文本。
• 比例勻稱的輸入欄，可以使表單看起來更有條理。

總結(jié)：有針對性地調(diào)整輸入控件的寬度，可以為用戶提供清晰的視覺提示，告訴他們要輸入多少信息，從而提高表單的可用性。

8. 同時使用視覺指示和文字突出報錯信息

為了鼓勵簡約更加設(shè)計(jì)的設(shè)計(jì)，很多設(shè)計(jì)師傾向于只使用顏色來指示錯誤。然而，僅有顏色的指示是遠(yuǎn)遠(yuǎn)不夠的。

• 更好的選擇，是提供相關(guān)的圖標(biāo)和文字消息來清楚地解釋問題。
• 所有用戶都無法正確感知顏色，尤其是色盲和視力障礙的用戶。
• 用戶需要具體的反饋來解決錯誤。視覺指示（例如感嘆號圖標(biāo)與描述性的文本信息的搭配）可使錯誤顯而易見，并提供明確的解決方法。

總結(jié)：將顏色與視覺指示和文本相結(jié)合可確保錯誤消息清晰、易懂且有用。

陳子木