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

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

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

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

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

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

核心設(shè)計思路

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

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

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

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

更進一步優(yōu)化方案

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

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

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

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

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

結(jié)語

UX 設(shè)計并沒有極限，只要愿意思考，通?？倳懈玫慕鉀Q方案。用戶所面臨的處境在變化，對于 UX 的要求也會變，相應(yīng)的設(shè)計的需求也需要更進一步。

作者：陳子木