輸入框幾乎每天都會(huì)接觸到，但是看似簡(jiǎn)單的輸入框，你真的會(huì)設(shè)計(jì)嗎？

輸入框的組成部分

輸入框包含的內(nèi)容有三種：載體、文本、圖標(biāo)，細(xì)分下來(lái)是這樣的：

l文本：包含標(biāo)題，占位符，幫助，反饋；

l載體：文本框；

l圖標(biāo)：展示型圖標(biāo)，操作型圖標(biāo)，反饋型圖標(biāo)。

不同類型的輸入框組合

組合一：文本框與標(biāo)題組合

組合能確保用戶知道需要在文本框中輸入什么信息，雖然看起來(lái)很簡(jiǎn)單，但排版上需要注意多列內(nèi)容如何正確展示，涉及到用戶的眼動(dòng)行為。

上面五種文本框與標(biāo)題的排列是最常見的，不同的排列方式各有利弊。

除此之外，我們有時(shí)還會(huì)加入占位符、幫助、默認(rèn)提示來(lái)增加輸入框的體驗(yàn)：

組合二：文本框與圖標(biāo)組合

圖標(biāo)可分為展示、操作、反饋三類。最早出現(xiàn)，最為常見的是展示型圖標(biāo)，

展示型圖標(biāo)：通常用它代替標(biāo)題，如：電話、郵箱等容易表達(dá)的圖標(biāo)。

但用戶個(gè)體認(rèn)知差異，可能沒(méi)辦法猜測(cè)圖標(biāo)到底是什么意思，因此，現(xiàn)在很多產(chǎn)品開始在輸入框里去掉展示型圖標(biāo)。

反饋型圖標(biāo)：如填寫完內(nèi)容系統(tǒng)開始校驗(yàn)，并給出的反饋圖標(biāo)。

操作型圖標(biāo)：常見的要數(shù)清除

我們?cè)倏偨Y(jié)一下輸入框包含的內(nèi)容：

l標(biāo)題：應(yīng)該始終可見。

l載體：文本框，樣式可根據(jù)場(chǎng)景變化。

l占位符：可作為提示，也可以提供默認(rèn)值。

l幫助提示：內(nèi)容多可拆分，也可以融入操作圖標(biāo)中。

l反饋提示：有正確與錯(cuò)誤兩種

l圖標(biāo)：展示型圖標(biāo)，操作型圖標(biāo)，反饋型圖標(biāo)

輸入框設(shè)計(jì)的8種情況

↘開始輸入

↘輸入部分?jǐn)?shù)據(jù)后

↘固定字符數(shù)量

↘指定賬號(hào)的輸入

↘即時(shí)校驗(yàn)

↘異常提示

↘特殊字符處理

↘特殊賬號(hào)輸入

↘是否提供選擇輸入

開始輸入

開始輸入后，提示文字消失。也有一些輸入框是沒(méi)有上方提示的，在輸入時(shí)可能會(huì)造成用戶不知道輸入規(guī)則或者需要輸入的內(nèi)容是什么。

在開始輸入的階段，要給出此狀態(tài)下的提示，以及光標(biāo)的位置。

輸入部分?jǐn)?shù)據(jù)后

輸入部分?jǐn)?shù)據(jù)后，通常輸入框右側(cè)會(huì)出現(xiàn)一個(gè)快速刪除全部的圖標(biāo)，方便用戶快速刪除所輸入的數(shù)據(jù)，而不是僅能依靠鍵盤上的刪除按鍵一個(gè)個(gè)數(shù)據(jù)刪除。

固定字符數(shù)量

當(dāng)輸入的賬號(hào)的字符數(shù)需要在某個(gè)范圍內(nèi)的話，建議加上字符的提示，用戶可以清楚的知道自己輸入了多少個(gè)字符，還有多少可以輸入。

指定賬號(hào)的輸入

通常在一些應(yīng)用/網(wǎng)站中，會(huì)指定一些特殊的賬號(hào)輸入（后臺(tái)較多），例如某種特定格式的前綴或者是后綴，如KK開頭的工號(hào)，或者是某種郵箱賬號(hào)后綴。這時(shí)候?yàn)榱朔乐褂脩糨斿e(cuò)，會(huì)在輸入框預(yù)置前綴或者是后綴，用戶只需要輸入可變部分即可，簡(jiǎn)化了操作，降低錯(cuò)誤率。如下圖所示給出固定的后綴@qq.com。

即時(shí)校驗(yàn)

現(xiàn)在使用很多應(yīng)用或者是網(wǎng)站上會(huì)有即時(shí)校驗(yàn)的功能，當(dāng)用戶輸入時(shí)，如果賬號(hào)正確/錯(cuò)誤，都會(huì)即時(shí)給出提示，以便用戶進(jìn)行下一步操作。如下圖所示，一般都是在輸入框的右側(cè)或下方標(biāo)識(shí)出來(lái)賬號(hào)是否正確等信息。

異常提示

異常提示包括賬號(hào)不存在（未注冊(cè)）、用戶填寫錯(cuò)誤、字符位數(shù)超過(guò)限制等情況，這時(shí)候就需要給用戶正確的提示，讓用戶快速更正所填的賬號(hào)。

下圖展示的是一些常用的處理方式。

（1）當(dāng)用戶輸入規(guī)則外的特殊字符時(shí)，提示用戶賬號(hào)不包含這些字符；

（2）用戶輸入的字符數(shù)量達(dá)到上限提示賬號(hào)的長(zhǎng)度；

（3）賬號(hào)不存在時(shí)，提示此賬號(hào)未注冊(cè)，其實(shí)還可以在提示文案中增加“注冊(cè)此賬號(hào)”的鏈接，點(diǎn)擊即可跳轉(zhuǎn)到注冊(cè)頁(yè)面。

在這些提示中，需要注意的是，提示應(yīng)該包括錯(cuò)誤信息+改正方法兩種或其中的一種，讓用戶知道自己應(yīng)該怎么改正。

特殊字符處理

在輸入框中特殊字符一般包括@ 和. 等，一般用戶輸入@可能是要輸入郵箱，輸入.有可能是網(wǎng)站后綴。所以最好提供快速輸入的方法，讓用戶減少輸入的字符。雖然現(xiàn)在一部分輸入法中已經(jīng)增加了這些常用的固定的一段字符的按鍵。但是還是建議在輸入框中加入快速輸入的方法，與其依靠這種具有不確定性的情況，還不如一開始就設(shè)計(jì)好。如下圖所示，當(dāng)用戶輸入@時(shí)，提供快速輸入的方式。

特殊賬號(hào)的輸入

如果是電話號(hào)碼或銀行的輸入，這種相對(duì)長(zhǎng)一些的數(shù)字輸入，盡量按照用戶習(xí)慣的規(guī)則劃分，如果將所有數(shù)字連著一起就會(huì)比較容易輸錯(cuò)。例如電話號(hào)碼的劃分規(guī)則為344，所以用戶在設(shè)計(jì)的時(shí)候可以在將電話號(hào)碼間隔開，方便用戶識(shí)別。例如銀行卡通常的的劃分是4444X，X就是最后一位數(shù)為少于4的位數(shù)。所以可以如下圖的方式設(shè)計(jì)。

是否提供選擇輸入

在一些搜索框中，經(jīng)常用到選擇輸入，例如一些推薦的搜索，推薦的標(biāo)簽、歷史記錄等，用戶點(diǎn)擊一下即可輸入，大大減少了用戶的操作步驟。這種方式現(xiàn)有的應(yīng)用中也應(yīng)用得非常廣泛，最常用于搜索頁(yè)面。如下圖的知乎的搜索框和豆瓣的搜索頁(yè)面，推薦一些熱門話題，點(diǎn)擊即可進(jìn)行搜索。

- End -