輸入框背后的輸入反饋邏輯

Sponsor

輸入框是對交互設計知識的一個系統反映。設計本質上是兩點：向對方傳達什么樣的信息（目的），根據目的采用合適的設計手法。

輸入框作為交互的典型情景，設計師需要用戶做什么，以及如何引導用戶愉悅地進行遞交信息。最重要的是想用戶之所想，并且恰當地解決本應由設計師解決的，而不是交給用戶做的事情，比如驗證碼自動驗證，而不是用戶輸完固定格式的驗證碼還要點擊遞交；長字符信息根據格式分塊，比如銀行卡帳號按4位數分塊，讓用戶辨識自己輸入的帳號信息。

設計達人今天分享的這篇文章，基于輸入框的交互設計進行輸入反饋的邏輯梳理，讓設計師理解用戶共識心理之于交互設計的重要性?。其實設計的條條框框沒有那么復雜，只要設計師在設計的時候做到站在用戶的角度思考，想用戶之所想，減少冗余的步驟、明確清晰的引導和反饋，做出的設計不會?差到哪里去。

對于「輸入框」的解析，市面上有非常多的文章都講得很不錯。但是為什么它總是被拿出來說，卻又總是說不完呢？?

主要是因為它所承載的內容正好反映了交互設計的各種知識。

比如如何輸入，輸入前要注意什么，輸入的過程中要如何校驗，輸入完成會有哪些反饋。這一串內容其實就包含設計師設計一個功能時，所需要注意的所有信息了。

類比用戶使用功能前，如何清楚地知道這個功能的使用方式；使用過程中，明確地了解自己的行為正確與否；使用完成后，如何快速地得知結果。

所以針對「輸入框」這個問題，我想著還是有必要寫一篇文章來具體聊聊「輸入框的組成部分」以及它的「正向邏輯與逆向邏輯」。

一、輸入框的組成部分

通常一個「輸入框」包含的內容有兩種，載體、文本。但隨著用戶使用產品的場景復雜化，輸入框的內容也逐漸變得更為豐富，現在也包括了圖標。

細分下來是這樣的：

• 文本：包含標題，占位符，幫助，反饋；
• 載體：文本框；
• 圖標：展示型圖標，操作型圖標，反饋型圖標。

雖然輸入框在隨著場景的變化而越發豐富，但內容再怎么變化也基本離不開這三類。

接下來，我們對「輸入框」做一個詳細的拆解。

最常見的組合，就是文本框與標題的組合了。

這樣一個組合，至少能確保用戶知道需要在文本框中輸入什么信息。

需要注意的是，雖然這看起來很簡單，但在排版上需要注意多列內容如何進行正確展示才能在界面中顯得更為和諧的問題，因為它也涉及到了用戶的眼動行為。

上面兩類，左圖雖然左對齊，但是標題與輸入框的間距從整體上看顯得不夠協調；右邊采取了右對齊，但是標題與外框的距離又顯得參差不齊。且用戶在查看的過程中，會顯得較為吃力。

所以出現了下圖這樣的組合：

但這樣的組合也有問題，就是縱向展示空間變小了，上圖能放下三個輸入框，到這里就只能放下兩個了。所以對于輸入框展示形式的選擇也很關鍵，如果頁面內容較多，可選擇水平排列的，但如果內容較少，就可以選擇縱向排列的。

而當這兩種狀態都無法滿足的某個場景出現時，也就出現了其它變化。也就是把標題內嵌，作為「占位符」來使用。

這種方式雖然節省了空間，但只要用戶點擊輸入框后，就看不到標題了。很多用戶會習慣性點擊輸入框，但往往會忘了標題是什么，再想返回去看，也不知道如何才能讓其恢復再出現了。

所以又出現了這樣的形式：

這種展示形式的唯一問題就是點擊后顯示的標題太小，從而導致在展示類表單復查時難以閱讀的問題。

到這里已經提到三塊內容，文本框、占位符、標題，下面我們再來延伸一種：幫助。

由左圖可以看到，占位符的作用相對較大，上面既可以代替標題，這里同樣可以作為一種幫助提示。但它不適合在文字較多的情況下來使用，如果文字較多，那么右圖的展示形式會更可取。畢竟我們經常還能看到好幾條幫助提示的輸入框，就不適合用占位符來代替了。

說到這里可能需要理一下占位符，占位符的概念很大，不僅僅是占用某個位置，在占用的同時它需要提供自己的作用，因此除了代替標題，作為幫助提示，它還可以提供默認值。如姓名，可這樣展示：

如果你玩游戲的話，現在很多手游剛注冊登錄后，會自動填充一個姓名，你可以選擇替換，也可以就用這個自動填充的，比如我就是 @杭州彭于晏。

包括例如淘寶，在搜索輸入框里，會自動填充一個商品，用戶可以直接點擊搜索，也可以輸入替換。這就是占位符作為默認值的作用。

當然，對于文本框來說，它也有幾種不同的樣式，比如：

類似的還包括驗證碼的輸入。所以文本框的形式，也是需要依據需填寫內容的變化而改變。

那么到這里，我們講了文本框、標題、占位符、幫助提示，然后我們繼續延伸，下面我們來聊字符限制。

每次講到字符限制，很多人都會列舉譬如微博，告訴讀者在特殊場景下要做好字符限制，但現在微博已經不限制字符數，所以這里講一個常見但很少人提及的隱性字符限制。

在大部分產品的登錄注冊場景里，當用戶在輸入手機號時，只要超過 11 位就會無法繼續輸入。這其實就是一種字符數限制，只是大家有了共識，所以并不驚訝為什么無法繼續輸入，甚至反而會覺得可以繼續輸入的產品做得不好。包括在手機號輸入框里可輸入英文字母，這就是沒有做好輸入限制的典型問題，它不僅是技術邏輯的基礎認知，還是一種共識。

這就是一種以用戶共識創建產品功能的例子了。

聊完文本與載體，我們再代入圖標來看看。

圖標可分為展示、操作、反饋三類。其中最早出現，也是最為常見的，就是展示類圖標，我們通常用它代替標題：

比如電話、郵箱等較為容易表達的。但它也有弊端，就是用戶個體認知差異，所以當出現這么一個內容時，你就沒辦法猜測這到底是昵稱，姓名，還是其它什么。

因此，現在很多產品開始在輸入框里去掉這類展示型圖標。畢竟當它和標題文本一起出現時，也就顯得多余了。

還有一類是反饋型圖標，比如當我們填寫完內容脫離輸入框后，系統開始校驗，并給出反饋的圖標。

除此之外，我們還能看到的一類圖標是操作型圖標，其中最為常見的還是要數「清除」了。

寫這篇文章的時候，有群友在群里提到說，現在有些產品，在密碼輸入框中的鍵盤回刪效果跟點擊清除按鈕的效果一樣了，這是不是有問題的？

這要視具體情況而定，比如在校驗之前，鍵盤回刪應該是刪除上一個字母或數字；而在校驗之后，回刪與清除都是全部刪除。因為密碼大多是星號隱藏，所以校驗過后再單個回刪的操作就顯得笨拙了，而且用戶很難去數數說第幾個錯了。所以干脆就一鍵刪除。但是如果還沒檢驗，鍵盤回刪就全部刪除，那肯定是不對的。

回到手機號，因為手機號是正常顯示不隱藏，無論校驗與否，都不應該讓回刪與清除的效果變得一致，這不利于用戶建立界面圖標的使用意識，更不要說建立共識了。

所以雖然這里把輸入框都拆解出來了，但是到具體內容時，還需要具體問題具體分析才行。

當然，操作型圖標還包括，語音、密碼顯示/隱藏等。所以操作型圖標，是目前在輸入框中見到最多的一類，但使用邏輯也是最復雜的，所以要好好斟酌才是。

包括上面提到的幫助提示，通常在界面中空間不夠，且又不能沒有的情況下會做這樣的處理：

到這里，各位應該能知道輸入框所包含的內容，我再放一張大圖總結下。

內容包括：

1. 標題，應該始終可見
2. 載體，文本框，樣式可根據場景變化
3. 占位符，可作為提示，也可以提供默認值
4. 幫助提示，內容多可拆分，也可以融入操作圖標中
5. 反饋提示，有正確與錯誤兩種
6. 圖標，分為展示型圖標，操作型圖標，反饋型圖標
7. 反饋型圖標的一種

二、輸入反饋的規則邏輯

拆解完「輸入框」的架構，現在來聊規則邏輯，會更清晰。

反饋通常被認為是輸入完成后的被動行為，但其實它還包括了輸入前與輸入中的用戶行為提示與反饋的邏輯規則。

說人話就類似于，你走在路上，認出前面那個人是你朋友，所以你打算去打招呼；當你在打招呼的過程中，他會因為你的一系列舉止做出回應，而不是等你打完招呼他才轉過來看你，否則你的招呼他基本不會看到，更不可能給你任何回應；最后你打完招呼，他也會給你一個回應，這個回應可能是開心的，也可能是憤怒的（比如你在路上遇到你大學老師，你喊一句，嘿，孫賊~）。

輸入反饋的規則邏輯也一樣，有這么三個過程：輸入前提示，輸入中校驗，輸入后反饋。

輸入前提示，很簡單，看下面這張圖：

這里輸入驗證碼，看到后知道我的手機接收到了一條驗證碼信息，這條驗證碼是 4 位數的，所以只要在這個位置輸入這個 4 位數驗證碼即可。

當然，我上圖采用的形式，已經剔除掉了一部分可能會出現的問題，比如格式，位數。

輸入中校驗：

這一次校驗，因為我采用了這個形式，所以省略了一個內容，就是字母的限制輸入，因此直接排除了這個情況。如果采用常規格式，允許用戶輸入字母，那么也可進行報錯，但這樣的設計挺反人類，所以直接限制掉會更好。

那么在這個過程中，只需要校驗驗證碼是否正確就可以了。

最后如果成功，則直接進入下一步；如果失敗，則給予反饋提示：

這里的反饋，在樣式上要明確，且要清晰易懂：

• 利用反饋文本讓用戶知道為什么會出現問題；
• 確保反饋文本清晰易讀；
• 也可以加上圖標增強可讀性。

題外話：這里經常會出現的一類錯誤是密碼設置。

當密碼設置完，焦點脫離輸入框后，如果兩個密碼不唯一，要給兩個輸入框同時反饋錯誤顯示，因為系統不能判定哪一個輸入框的密碼是正確的。在一些產品里，經常會看到給第二個輸入框標注顯示錯誤，這是不對的。

說完輸入前中后的內容，我們再來細分下輸入反饋包含哪些規則邏輯：

• 驗證內容是否為空
• 驗證內容是否違規
• 驗證內容是否包含在一定范圍內
• 驗證內容的二次確認
• 驗證內容的格式
• 驗證內容的長度
• 驗證內容的唯一性

上述內容我相信在梳理框架的過程中大家已經大體理解，所以我舉幾條特殊的來說下。

第一條，有些輸入框具有占位符，但是該占位符不提供默認值，僅是提示，所以提交表單等行為會不產生任何作用，這時候也需要有反饋提示，告知用戶為什么沒有任何作用。

很多人這里會犯得一個錯誤，就是提交表單后，輸入框應該清除占位符，以便用戶查看具體錯誤原因。

接著是驗證內容是否違規。類似于我在微博把昵稱改成我的公眾號名稱，是不被允許的，可能它已經成了品牌名稱。

再是驗證內容是否包含在一定范圍內，比如地址的選擇，某些功能只能指定某些地區使用，所以如果我在山溝溝，可能就用不了某個產品的某個功能。

其它幾條較為簡單，相信大家都好理解，我這里就不做贅述了。

要理解輸入反饋的邏輯規則，首先要知道它的組成架構，然后理清輸入前中后的信息，基本就能理解大部分內容。而特殊問題，就需要具體分析了。

這里給各位留一個延伸。如果想研究「輸入反饋」的交互規則，可以看一看《微交互》這本書，里面提及的「觸發器、規則、反饋、循環與模式」的公式很好的解釋了整個反饋過程是如何進行的，有興趣的話可以讀一讀。

三、小結

來個文章的小結：

1. 反饋有三個節點，輸入前提示，輸入中校驗，輸入后反饋；
2. 對校驗的規則要熟悉并掌握，確保功能邏輯的合理性；
3. 對錯誤給予合理提示。

通常來說，具體反饋要具體分析，本文雖然含蓋點較全，但也不是說所有輸入框都要依據這樣的形式進行設計。而針對于具體功能的復盤，可選擇合適的內容進行分析是否符合這里提及的要求。

作者：呆總丶，微信公眾號：呆呆U理

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。