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

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

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

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

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

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

核心設(shè)計(jì)思路

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

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

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

• 超出限制后，不要阻止用戶(hù)輸入文本。
• 通過(guò)突出顯示多余字符，來(lái)強(qiáng)化視覺(jué)提示。
• 雖然文本可以輸入，但是會(huì)限制下一步操作，直到用戶(hù)刪除附加文本。

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

有時(shí)，[剩余字符數(shù)/總字符數(shù)] 的約定對(duì)于用戶(hù)來(lái)說(shuō)很難理解。

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

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

為了顯得更加直觀(guān)，你可以使用進(jìn)度指示器來(lái)顯示字符限制信息。

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

結(jié)語(yǔ)

UX 設(shè)計(jì)并沒(méi)有極限，只要愿意思考，通?？倳?huì)有更好的解決方案。用戶(hù)所面臨的處境在變化，對(duì)于 UX 的要求也會(huì)變，相應(yīng)的設(shè)計(jì)的需求也需要更進(jìn)一步。