輸入框幾乎每天都會接觸到，但是看似簡單的輸入框，你真的會設計嗎？

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

在設計的過程中，特別是新手設計師通常會有如下做法：如果是要做一個輸入框，那他的交互稿或者視覺稿中就只呈現出來只是一個輸入框，并且這個輸入框只有一個種狀態，那就是正?？奢斎氲臓顟B。

但是如果這個設計師考慮得比較全面的話，那么他會想很多問題。

舉個例子，例如現在是一個某應用登錄頁面的輸入框，很多人就只給出如下一個頁面的稿子，賬號輸入的初始狀態。

但是對于真實的使用場景，上圖僅僅是那么多狀態中的一種。此外，還需要考慮用戶輸入的賬號是否符合此應用的賬號規則，如字符位數區間，是否包含特殊字符&中文，如果賬號規定是郵箱的話，郵箱類型是否正確等提示。那么這個輸入框還應該包括什么情況呢？

設計輸入框至少需要考慮以下9種情況

1. 開始輸入
2. 輸入部分數據后
3. 固定字符數量
4. 指定賬號的輸入
5. 即時校驗
6. 異常提示
7. 特殊字符處理
8. 特殊賬號輸入
9. 是否提供選擇輸入

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

1. 開始輸入

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

在開始輸入的階段，要給出此狀態下的提示，以及光標的位置。

2. 輸入部分數據后

輸入部分數據后，通常輸入框右側會出現一個快速刪除全部的圖標，方便用戶快速刪除所輸入的數據，而不是僅能依靠鍵盤上的刪除按鍵一個個數據刪除。

3. 固定字符數量

當輸入的賬號的字符數需要在某個范圍內的話，建議加上字符的提示，用戶可以清楚的知道自己輸入了多少個字符，還有多少可以輸入。

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

4. 指定賬號的輸入

通常在一些應用/網站中，會指定一些特殊的賬號輸入（后臺較多），例如某種特定格式的前綴或者是后綴，如KK開頭的工號，或者是某種郵箱賬號后綴。這時候為了防止用戶輸錯，會在輸入框預置前綴或者是后綴，用戶只需要輸入可變部分即可，簡化了操作，降低錯誤率。如下圖所示給出固定的后綴@qq.com。

5. 即時校驗

現在使用很多應用或者是網站上會有即時校驗的功能，當用戶輸入時，如果賬號正確/錯誤，都會即時給出提示，以便用戶進行下一步操作。

如下圖所示，一般都是在輸入框的右側或下方標識出來賬號是否正確等信息：

6. 異常提示

異常提示包括賬號不存在（未注冊）、用戶填寫錯誤、字符位數超過限制等情況，這時候就需要給用戶正確的提示，讓用戶快速更正所填的賬號。

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

1. 當用戶輸入規則外的特殊字符時，提示用戶賬號不包含這些字符；
2. 用戶輸入的字符數量達到上限提示賬號的長度；
3. 賬號不存在時，提示此賬號未注冊，其實還可以在提示文案中增加“注冊此賬號”的鏈接，點擊即可跳轉到注冊頁面。

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

很多應用在的錯誤提示經常是提示：賬號格式不正確。但是不提示錯在哪里，這樣用戶會生氣，分分鐘想卸載。

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

7. 特殊字符處理

在輸入框中特殊字符一般包括@ 和. 等，一般用戶輸入@可能是要輸入郵箱，輸入.有可能是網站后綴，所以最好提供快速輸入的方法，讓用戶減少輸入的字符。

雖然現在一部分輸入法中已經增加了這些常用的固定的一段字符的按鍵，但是還是建議在輸入框中加入快速輸入的方法——與其依靠這種具有不確定性的情況，還不如一開始就設計好。

如下圖所示，當用戶輸入@時，提供快速輸入的方式：

8. 特殊賬號的輸入

如果是電話號碼或銀行的輸入，這種相對長一些的數字輸入，盡量按照用戶習慣的規則劃分，如果將所有數字連著一起就會比較容易輸錯。

例如電話號碼的劃分規則為344，所以用戶在設計的時候可以在將電話號碼間隔開，方便用戶識別。例如銀行卡通常的的劃分是4444X，X就是最后一位數為少于4的位數。

所以可以如下圖的方式設計：

但是這里需要注意的一點是：在輸入手機號碼時，在第3和第7位數的時候是有一個空格的，所以在用戶從后往前刪除的時候，也需要在刪除第4位和第8位數字時，多刪除一個空格。

9.?是否提供選擇輸入

在一些搜索框中，經常用到選擇輸入，例如一些推薦的搜索，推薦的標簽、歷史記錄等，用戶點擊一下即可輸入，大大減少了用戶的操作步驟。這種方式現有的應用中也應用得非常廣泛，最常用于搜索頁面。

如下圖的知乎的搜索框和豆瓣的搜索頁面，推薦一些熱門話題，點擊即可進行搜索：

總結

以上文章主要介紹了設計輸入框時需要考慮的9種情況，除此之外，在設計中還可以考慮其他因素，例如這個輸入框是否體現一些品牌特性在里面，看到這個輸入框，就知道是哪一家的產品。

如優設哥網站的搜索框，搜索框上放了他們的網站的形象，并且在輸入時，那只雞還會左右轉動眼睛，有趣。

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

如果你喜歡我的文章，那就麻煩動動小手指點贊吧～

作者：一戈何處，公眾號：一戈何處

本文由 @一戈何處 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議