輸入框怎么控制輸入文本數(shù)量才優(yōu)雅？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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