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

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

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

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

不要將字段標簽的名稱，只用作輸入控件的占位符。當用戶單擊文本控件內部時，隱藏字段標簽會因為用戶的短期記憶有限，而導致用戶瞬間忘記要輸入什么內容。

• 用戶需要在表單字段中輸入什么信息，是依靠標簽來提供明確的指導。
• 當標簽消失時（因為它們被用作占位符文本），用戶可能會忘記所需的輸入，特別是當他們分心或者查看其他字段內容的時候。
• 保持標簽可見可以提高產品的可訪問性，尤其是面對認知和記憶力較差的用戶的。它確保每個輸入字段的用途始終清晰，從而減輕用戶的認知負擔。

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

2. 不要使用過長的文本標簽

不要使用過長的文本標簽，且標簽不應占用多行，它應該盡量保持在一行內。

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

總結：使用簡潔、清晰的語言來標記標簽，確保它們在同一行內，且不會產生理解上的歧義。

3. 明確傳達輸入的要求

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

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

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

4. 不要在控件內使用占位符文本

盡量少用占位符文本，因為當用戶開始輸入時，作為提示的占位符文本就會消失。

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

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

5. 使用合適的輸入控件

在為用戶設計表單時使用適當的輸入控件。

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

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

6. 僅標記可選填字段

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

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

總結：標記可選填字段，而不是必填字段可以減少表單混亂并簡化導航。

7.針對輸入內容調整輸入控件寬度

使用輸入字段的寬度，作為指標來標識其中包含的輸入字符的數量和長度。

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

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

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

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

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

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