不知道各位設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候，是不是經(jīng)常覺得自己做得很完善了，幾乎沒差什么邏輯或或者是圖，但是往往后期開發(fā)在實(shí)現(xiàn)功能的時(shí)候，會(huì)發(fā)現(xiàn)某個(gè)地方缺了一張空頁面，還有一些地方少了一些狀態(tài)等。其實(shí)這種情況經(jīng)常發(fā)生，可能和時(shí)不太在意一些異常狀態(tài)有一定的關(guān)系。

在設(shè)計(jì)的過程中，特別是新手設(shè)計(jì)師通常會(huì)有如下做法：如果是要做一個(gè)輸入框，那他的交互稿或者視覺稿中就只呈現(xiàn)出來只是一個(gè)輸入框，并且這個(gè)輸入框只有一個(gè)種狀態(tài)，那就是正?？奢斎氲臓顟B(tài)。但是如果這個(gè)設(shè)計(jì)師考慮得比較全面的話，那么他會(huì)想很多問題。舉個(gè)例子，例如現(xiàn)在是一個(gè)某應(yīng)用登錄頁面的輸入框，很多人就只給出如下一個(gè)頁面的稿子，賬號(hào)輸入的初始狀態(tài)。

但是對(duì)于真實(shí)的使用場景，上圖僅僅是那么多狀態(tài)中的一種。此外，還需要考慮用戶輸入的賬號(hào)是否符合此應(yīng)用的賬號(hào)規(guī)則，如字符位數(shù)區(qū)間，是否包含特殊字符&中文，如果賬號(hào)規(guī)定是郵箱的話，郵箱類型是否正確等提示。那么這個(gè)輸入框還應(yīng)該包括什么情況呢？

設(shè)計(jì)輸入框至少需要考慮以下8種情況

1. 開始輸入

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

3. 固定字符數(shù)量

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

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

6. 異常提示

7. 特殊字符處理

8. 特殊賬號(hào)輸入

9. 是否提供選擇輸入

對(duì)于輸入框的狀態(tài)，如果不知道需要什么狀態(tài)，你可以逐步思考，從看到頁面開始到輸入完成一共會(huì)經(jīng)過多少步，在每一步的操作中，可能會(huì)遇到什么問題，如何解決這些遇到的問題，就可以得出以下處理情況。

1. 開始輸入

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

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

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

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

3. 固定字符數(shù)量

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

這時(shí)候可能有人就會(huì)說，如果既要提供快速刪除，也要提示可輸入的字符數(shù)，怎么辦？據(jù)我觀察，現(xiàn)有的應(yīng)用中，這種兩者共存的情況比較少見，但是也不是可不可以用，下方提供了兩種方式供參考。暫時(shí)只想到這樣的處理方式，大家有更好的展示方式可以歡迎私信我哈。

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

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

5. 即時(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í)出來賬號(hào)是否正確等信息。

6. 異常提示

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

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

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

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

在這些提示中，需要注意的是，提示應(yīng)該包括錯(cuò)誤信息+改正方法兩種或其中的一種，讓用戶知道自己應(yīng)該怎么改正。很多應(yīng)用在的錯(cuò)誤提示經(jīng)常是提示：賬號(hào)格式不正確。但是不提示錯(cuò)在哪里，這樣用戶會(huì)生氣，分分鐘想卸載。

如下圖所示，只說明填寫不合法，但是頁面中沒有一個(gè)地方指明正確的填法是什么，真的很崩潰。所以在設(shè)計(jì)中要避免這種情況。

7. 特殊字符處理

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

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

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

但是這里需要注意的一點(diǎn)是，在輸入手機(jī)號(hào)碼時(shí)，在第3和第7位數(shù)的時(shí)候是有一個(gè)空格的，所以在用戶從后往前刪除的時(shí)候，也需要在刪除第4位和第8位數(shù)字時(shí)，多刪除一個(gè)空格。

9. 是否提供選擇輸入

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

總結(jié)

以上文章主要介紹了設(shè)計(jì)輸入框時(shí)需要考慮的9種情況，除此之外，在設(shè)計(jì)中還可以考慮其他因素，例如這個(gè)輸入框是否體現(xiàn)一些品牌特性在里面，看到這個(gè)輸入框，就知道是哪一家的產(chǎn)品。如優(yōu)設(shè)哥網(wǎng)站的搜索框，搜索框上放了他們的網(wǎng)站的形象，并且在輸入時(shí)，那只雞還會(huì)左右轉(zhuǎn)動(dòng)眼睛，有趣。

以上的9種思考都是在設(shè)計(jì)時(shí)輸入框可以考慮的，在各種不同的使用場景下靈活運(yùn)用，不需要死記硬背，用多了自然會(huì)熟悉。設(shè)計(jì)有很多種可能也可能會(huì)一成不變，所以作為一個(gè)設(shè)計(jì)師，需要多思考，思考各種可能發(fā)生或者不可能發(fā)生的場景，然后給出各種解決方案。善于發(fā)現(xiàn)問題，解決問題的設(shè)計(jì)師才是好的設(shè)計(jì)師。

如果你喜歡我的文章，那就麻煩動(dòng)動(dòng)小手指點(diǎn)贊吧～