對於「輸入框」的解析，市面上有非常多的文章都講得很不錯。但是為什麼它總是被拿出來說，卻又總是說不完呢？
主要是因為它所承載的內容正好反映了交互設計的各種知識。
比如如何輸入，輸入前要注意什麼，輸入的過程中要如何校驗，輸入完成會有哪些反饋。這一串內容其實就包含設計師設計一個功能時，所需要注意的所有信息了。
類比用戶使用功能前，如何清楚地知道這個功能的使用方式；使用過程中，明確地瞭解自己的行為正確與否；使用完成後，如何快速地得知結果。
所以針對「輸入框」這個問題，我想著還是有必要寫一篇文章來具體聊聊「輸入框的組成部分」以及它的「正向邏輯與逆向邏輯」。
輸入框的組成部分
通常一個「輸入框」包含的內容有兩種，載體、文本。但隨著用戶使用產品的場景複雜化，輸入框的內容也逐漸變得更為豐富，現在也包括了圖標。
細分下來是這樣的：
- 文本：包含標題，佔位符，幫助，反饋；
- 載體：文本框；
- 圖標：展示型圖標，操作型圖標，反饋型圖標。
雖然輸入框在隨著場景的變化而越發豐富，但內容再怎麼變化也基本離不開這三類。
接下來，我們對「輸入框」做一個詳細的拆解。
最常見的組合，就是文本框與標題的組合了。
這樣一個組合，至少能確保用戶知道需要在文本框中輸入什麼信息。
需要注意的是，雖然這看起來很簡單，但在排版上需要注意多列內容如何進行正確展示才能在界面中顯得更為和諧的問題，因為它也涉及到了用戶的眼動行為。
上面兩類，左圖雖然左對齊，但是標題與輸入框的間距從整體上看顯得不夠協調；右邊採取了右對齊，但是標題與外框的距離又顯得參差不齊。且用戶在查看的過程中，會顯得較為吃力。
所以出現了下圖這樣的組合：
但這樣的組合也有問題，就是縱向展示空間變小了，上圖能放下三個輸入框，到這裡就只能放下兩個了。所以對於輸入框展示形式的選擇也很關鍵，如果頁面內容較多，可選擇水平排列的，但如果內容較少，就可以選擇縱向排列的。
而當這兩種狀態都無法滿足的某個場景出現時，也就出現了其它變化。也就是把標題內嵌，作為「佔位符」來使用。
這種方式雖然節省了空間，但只要用戶點擊輸入框後，就看不到標題了。很多用戶會習慣性點擊輸入框，但往往會忘了標題是什麼，再想返回去看，也不知道如何才能讓其恢復再出現了。
所以又出現了這樣的形式：
這種展示形式的唯一問題就是點擊後顯示的標題太小，從而導致在展示類表單複查時難以閱讀的問題。
到這裡已經提到三塊內容，文本框、佔位符、標題，下面我們再來延伸一種：幫助。
由左圖可以看到，佔位符的作用相對較大，上面既可以代替標題，這裡同樣可以作為一種幫助提示。但它不適合在文字較多的情況下來使用，如果文字較多，那麼右圖的展示形式會更可取。畢竟我們經常還能看到好幾條幫助提示的輸入框，就不適合用佔位符來代替了。
說到這裡可能需要理一下佔位符，佔位符的概念很大，不僅僅是佔用某個位置，在佔用的同時它需要提供自己的作用，因此除了代替標題，作為幫助提示，它還可以提供默認值。如姓名，可這樣展示：
如果你玩遊戲的話，現在很多手遊剛註冊登錄後，會自動填充一個姓名，你可以選擇替換，也可以就用這個自動填充的，比如我就是 @杭州彭于晏。
包括例如淘寶，在搜索輸入框裡，會自動填充一個商品，用戶可以直接點擊搜索，也可以輸入替換。這就是佔位符作為默認值的作用。
當然，對於文本框來說，它也有幾種不同的樣式，比如：
類似的還包括驗證碼的輸入。所以文本框的形式，也是需要依據需填寫內容的變化而改變。
那麼到這裡，我們講了文本框、標題、佔位符、幫助提示，然後我們繼續延伸，下面我們來聊字符限制。
每次講到字符限制，很多人都會列舉譬如微博，告訴讀者在特殊場景下要做好字符限制，但現在微博已經不限制字符數，所以這裡講一個常見但很少人提及的隱性字符限制。
在大部分產品的登錄註冊場景裡，當用戶在輸入手機號時，只要超過 11 位就會無法繼續輸入。這其實就是一種字符數限制，只是大家有了共識，所以並不驚訝為什麼無法繼續輸入，甚至反而會覺得可以繼續輸入的產品做得不好。包括在手機號輸入框裡可輸入英文字母，這就是沒有做好輸入限制的典型問題，它不僅是技術邏輯的基礎認知，還是一種共識。
這就是一種以用戶共識創建產品功能的例子了。
聊完文本與載體，我們再代入圖標來看看。
圖標可分為展示、操作、反饋三類。其中最早出現，也是最為常見的，就是展示類圖標，我們通常用它代替標題：
比如電話、郵箱等較為容易表達的。但它也有弊端，就是用戶個體認知差異，所以當出現這麼一個內容時，你就沒辦法猜測這到底是暱稱，姓名，還是其它什麼。
因此，現在很多產品開始在輸入框裡去掉這類展示型圖標。畢竟當它和標題文本一起出現時，也就顯得多餘了。
還有一類是反饋型圖標，比如當我們填寫完內容脫離輸入框後，系統開始校驗，並給出反饋的圖標。
除此之外，我們還能看到的一類圖標是操作型圖標，其中最為常見的還是要數「清除」了。
寫這篇文章的時候，有群友在群裡提到說，現在有些產品，在密碼輸入框中的鍵盤迴刪效果跟點擊清除按鈕的效果一樣了，這是不是有問題的？
這要視具體情況而定，比如在校驗之前，鍵盤迴刪應該是刪除上一個字母或數字；而在校驗之後，回刪與清除都是全部刪除。因為密碼大多是星號隱藏，所以校驗過後再單個回刪的操作就顯得笨拙了，而且用戶很難去數數說第幾個錯了。所以乾脆就一鍵刪除。但是如果還沒檢驗，鍵盤迴刪就全部刪除，那肯定是不對的。
回到手機號，因為手機號是正常顯示不隱藏，無論校驗與否，都不應該讓回刪與清除的效果變得一致，這不利於用戶建立界面圖標的使用意識，更不要說建立共識了。
所以雖然這裡把輸入框都拆解出來了，但是到具體內容時，還需要具體問題具體分析才行。
當然，操作型圖標還包括，語音、密碼顯示/隱藏等。所以操作型圖標，是目前在輸入框中見到最多的一類，但使用邏輯也是最複雜的，所以要好好斟酌才是。
包括上面提到的幫助提示，通常在界面中空間不夠，且又不能沒有的情況下會做這樣的處理：
到這裡，各位應該能知道輸入框所包含的內容，我再放一張大圖總結下。
內容包括：
- 標題，應該始終可見
- 載體，文本框，樣式可根據場景變化
- 佔位符，可作為提示，也可以提供默認值
- 幫助提示，內容多可拆分，也可以融入操作圖標中
- 反饋提示，有正確與錯誤兩種
- 圖標，分為展示型圖標，操作型圖標，反饋型圖標
- 反饋型圖標的一種
輸入反饋的規則邏輯
拆解完「輸入框」的架構，現在來聊規則邏輯，會更清晰。
反饋通常被認為是輸入完成後的被動行為，但其實它還包括了輸入前與輸入中的用戶行為提示與反饋的邏輯規則。
說人話就類似於，你走在路上，認出前面那個人是你朋友，所以你打算去打招呼；當你在打招呼的過程中，他會因為你的一系列舉止做出回應，而不是等你打完招呼他才轉過來看你，否則你的招呼他基本不會看到，更不可能給你任何回應；最後你打完招呼，他也會給你一個回應，這個回應可能是開心的，也可能是憤怒的（比如你在路上遇到你大學老師，你喊一句，嘿，孫賊~）。
輸入反饋的規則邏輯也一樣，有這麼三個過程：輸入前提示，輸入中校驗，輸入後反饋。
輸入前提示，很簡單，看下面這張圖：
這裡輸入驗證碼，看到後知道我的手機接收到了一條驗證碼信息，這條驗證碼是 4 位數的，所以只要在這個位置輸入這個 4 位數驗證碼即可。
當然，我上圖採用的形式，已經剔除掉了一部分可能會出現的問題，比如格式，位數。
輸入中校驗：
這一次校驗，因為我採用了這個形式，所以省略了一個內容，就是字母的限制輸入，因此直接排除了這個情況。如果採用常規格式，允許用戶輸入字母，那麼也可進行報錯，但這樣的設計挺反人類，所以直接限制掉會更好。
那麼在這個過程中，只需要校驗驗證碼是否正確就可以了。
最後如果成功，則直接進入下一步；如果失敗，則給予反饋提示：
這裡的反饋，在樣式上要明確，且要清晰易懂：
- 利用反饋文本讓用戶知道為什麼會出現問題；
- 確保反饋文本清晰易讀；
- 也可以加上圖標增強可讀性。
題外話：這裡經常會出現的一類錯誤是密碼設置。
當密碼設置完，焦點脫離輸入框後，如果兩個密碼不唯一，要給兩個輸入框同時反饋錯誤顯示，因為系統不能判定哪一個輸入框的密碼是正確的。在一些產品裡，經常會看到給第二個輸入框標註顯示錯誤，這是不對的。
說完輸入前中後的內容，我們再來細分下輸入反饋包含哪些規則邏輯：
- 驗證內容是否為空
- 驗證內容是否違規
- 驗證內容是否包含在一定範圍內
- 驗證內容的二次確認
- 驗證內容的格式
- 驗證內容的長度
- 驗證內容的唯一性
上述內容我相信在梳理框架的過程中大家已經大體理解，所以我舉幾條特殊的來說下。
第一條，有些輸入框具有佔位符，但是該佔位符不提供默認值，僅是提示，所以提交表單等行為會不產生任何作用，這時候也需要有反饋提示，告知用戶為什麼沒有任何作用。
很多人這裡會犯得一個錯誤，就是提交表單後，輸入框應該清除佔位符，以便用戶查看具體錯誤原因。
接著是驗證內容是否違規。類似於我在微博把暱稱改成我的公眾號名稱，是不被允許的，可能它已經成了品牌名稱。
再是驗證內容是否包含在一定範圍內，比如地址的選擇，某些功能只能指定某些地區使用，所以如果我在山溝溝，可能就用不了某個產品的某個功能。
其它幾條較為簡單，相信大家都好理解，我這裡就不做贅述了。
要理解輸入反饋的邏輯規則，首先要知道它的組成架構，然後理清輸入前中後的信息，基本就能理解大部分內容。而特殊問題，就需要具體分析了。
這裡給各位留一個延伸。如果想研究「輸入反饋」的交互規則，可以看一看《微交互》這本書，裡面提及的「觸發器、規則、反饋、循環與模式」的公式很好的解釋了整個反饋過程是如何進行的，有興趣的話可以讀一讀。
小結
來個文章的小結：
- 反饋有三個節點，輸入前提示，輸入中校驗，輸入後反饋；
- 對校驗的規則要熟悉並掌握，確保功能邏輯的合理性；
- 對錯誤給予合理提示。
通常來說，具體反饋要具體分析，本文雖然含蓋點較全，但也不是說所有輸入框都要依據這樣的形式進行設計。而針對於具體功能的覆盤，可選擇合適的內容進行分析是否符合這裡提及的要求。
希望這篇文章對你有用：）
end
閱讀更多 PMTalk產品經理社區 的文章
