編者按：文本輸入框是一個非常常見的 UI 組件，但是很多文本輸入字段本身其實是有數量限制的，在實際輸入過程中，經常會碰到輸入完了才提示字數超過限制的情況。那么在體驗層面上，能不能解決這些問題呢？當然可以，Saadia Minhas 的這篇文章詳細拆解了UI和體驗設計層面上可能存在的問題和相應的解決方案，以下是正文：

文本輸入控件是 Web 表單中最常用的控件，輸入框當中可以以文本形式接收用戶所輸入的內容，用戶則需要在給定的輸入框控件中輸入符合要求的文本。

但是通常而言，你可能需要定義輸入控件的中的字符數限制，避免過多或者過少的文本信息，不符合具體的字段要求。在實際的操作中，字符數量限制通常定義的是用戶可以輸入的最大字符數。

例如，你可以為郵政編碼輸入控件，設置 5 個字符的數量限制。同樣，在描述框中，你可以設置 300 個字符的輸入限制。

設置字數限制可幫助用戶了解，他們需要輸入的文本類型，和相應的要求。這樣一來，用戶可以遵循這些要求來填寫內容，規避問題。

相應的，問題出現了。怎樣以用戶友好的方式提供字符限制控制，就顯得非常重要了。

核心設計思路

以下是一些可用于定義輸入控件的字符限制的核心注意事項：

• 使用 [剩余字符/總字符數] 的標識，來輔助控制輸入數量。
• 一旦用戶單擊文本輸入控件內部，就顯示此數量控制的標識。
• 當用戶開始輸入文本時，剩余數字會實時更新。
• 當用戶達到限制時，將剩余字符的顏色從灰色（默認）更改為橙色再更改為紅色。
• 當超出限制時，剩余字符將以紅色顯示「0」。

（1）當用戶點擊輸入控件時顯示數量限制。 （2）當用戶開始輸入時，更新剩余字符。 （3）&（4）當用戶輸入字符接近總字符數時，更改剩余字符的顏色以突出輸入數量限制。

• 超出限制后，不要阻止用戶輸入文本。
• 通過突出顯示多余字符，來強化視覺提示。
• 雖然文本可以輸入，但是會限制下一步操作，直到用戶刪除附加文本。

更進一步優化方案

有時，[剩余字符數/總字符數] 的約定對于用戶來說很難理解。

在這種情況下，你可以與輸入控件一起顯示一條文本消息，來告知用戶剩余字符數。例如，「剩余 25 個可輸入字符」。

漸進的色彩提示也可以在這種方案當中使用，當用戶輸入的字符數量接近限制時，將提示信息的顏色從灰色更改為橙??色再更改為紅色。

為了顯得更加直觀，你可以使用進度指示器來顯示字符限制信息。

當用戶達到限制時，進度指示器的顏色會發生變化。此外，進度指示器內會顯示剩余可輸入的字符數，以告知用戶剩余數量。

結語

UX 設計并沒有極限，只要愿意思考，通常總會有更好的解決方案。用戶所面臨的處境在變化，對于 UX 的要求也會變，相應的設計的需求也需要更進一步。