? ? ? ?最近整理了一些輸入框的有關(guān)內(nèi)容，越是研究的深入越發(fā)現(xiàn)輸入框不是之前認(rèn)為的那么簡(jiǎn)單。
? ? ? ?作為交互設(shè)計(jì)師和產(chǎn)品經(jīng)理如果不定義好輸入框的一些行為，開(kāi)發(fā)同學(xué)們就會(huì)按照自己的理解來(lái)寫輸入框，等到測(cè)試或者驗(yàn)收的時(shí)候就會(huì)出現(xiàn)各種問(wèn)題。
? ? ? ?輸入框最基本的作用就是輸入，為了輸入我們要做什么？我們要告訴用戶是否需要輸入，在哪里輸入，應(yīng)該輸入什么，有什么要求（格式，個(gè)數(shù)，字符），更高級(jí)別的要求就是我們還要給用戶好的體驗(yàn)。那我們?cè)趺醋龅竭@些呢？
1.告訴用戶是否需要輸入
我們現(xiàn)在比較常用的時(shí)候在輸入框附近出現(xiàn)紅色的* ， 提示用戶這個(gè)是必填項(xiàng)。
2.在哪里輸入
一種是用光標(biāo)的位置來(lái)告知用戶在這里可以輸入
另一種是把輸入框整個(gè)高亮。當(dāng)然也有兩種結(jié)合的辦法。
3.應(yīng)該輸入什么
一種是顯示標(biāo)簽， 不過(guò)使用標(biāo)簽有時(shí)候會(huì)讓頁(yè)面顯得不是那么簡(jiǎn)潔。
另一種是使用占位符，好處是頁(yè)面簡(jiǎn)潔，不好的地方在于一旦用戶開(kāi)始輸入，占位符就會(huì)消失，如果有時(shí)候用戶忘記了應(yīng)該輸入什么就要把內(nèi)容刪除才能重新看占位符。
對(duì)于一些專業(yè)性強(qiáng)，用戶不清楚的，或者涉及安全隱私，金錢有關(guān)的信息會(huì)用文案的方式提醒用戶。
4.有什么要求
---? 格式的要求，我們有以下三種處理方法：占位符提示 ； 有固定格式的（比如手機(jī)號(hào)）就可以把區(qū)號(hào)和手機(jī)號(hào)區(qū)分開(kāi)來(lái)編輯 ； 直接在輸入框附近出現(xiàn)格式要求的提示信息。
--- 個(gè)數(shù)的要求:一種處理方法是實(shí)時(shí)檢查，提示用戶還能輸入多少字符。 這里說(shuō)的實(shí)時(shí)其實(shí)不準(zhǔn)確，準(zhǔn)確的說(shuō)就是一旦發(fā)現(xiàn)輸入框的內(nèi)容發(fā)生變化就進(jìn)行檢測(cè)。輸入框的內(nèi)容變化的來(lái)源有，用戶正常輸入，拖拽內(nèi)容到輸入框，復(fù)制黏貼等。另一種辦法是到達(dá)字?jǐn)?shù)限制的時(shí)候不可以再輸入。（如果是app的話，鍵盤自動(dòng)縮回。）當(dāng)然還可以直接顯示提示信息告知用戶最多只能輸入多少個(gè)字。對(duì)于個(gè)數(shù)的要求這一點(diǎn)要特別注意中文字符和英文字符，還有就是不同的鍵盤。就拿app舉例，對(duì)于ios的自帶鍵盤，在輸入中文的時(shí)候，字母就已經(jīng)顯示在輸入框里，如果是即時(shí)提示的，這時(shí)候很可能字?jǐn)?shù)還沒(méi)到就提示超過(guò)個(gè)數(shù)限制。
--- 字體的要求，對(duì)于一些復(fù)雜的輸入框會(huì)有字體的設(shè)置。
--- 字符的要求，對(duì)于只能填寫數(shù)字還是數(shù)字加字符，對(duì)于特殊字符如何限制等等。
5.如何提升用戶體驗(yàn)
--- 提高舒適的點(diǎn)擊區(qū)域，一般說(shuō)來(lái)，拇指的觸發(fā)區(qū)域應(yīng)當(dāng)控制在 45~57px之間，但是在移動(dòng)端上，控件看起來(lái)太大會(huì)讓人覺(jué)得不舒服，所以你的文本框高度應(yīng)該設(shè)計(jì)在32~40px之間，這樣看起來(lái)足夠友好，又不會(huì)太大。
---?自動(dòng)提示減少用戶輸入，比如提示歷史記錄，推薦的搜索，或者輸入@就自動(dòng)提示常用郵箱的后綴，不過(guò)要注意的時(shí)這種提醒是由隱藏的時(shí)間要求的，比如提示信息出現(xiàn)大于2s，這樣就失去了原本的意義。
---?信息更清晰，對(duì)于一些特殊賬號(hào)，提供固定的輸入格式比如電話號(hào)碼 344 ， 433；銀行卡通常的的劃分是4444X，X就是最后一位數(shù)為少于4的位數(shù)，身份證684。當(dāng)時(shí)要注意的時(shí)如果用戶要?jiǎng)h除的時(shí)候要自動(dòng)幫組用戶刪除空格。
---?刪除，可以提供一鍵刪除，就免去用戶一個(gè)一個(gè)刪除的苦惱。
---?鍵盤自動(dòng)回縮，當(dāng)用戶輸入規(guī)定的字符后，自動(dòng)回縮鍵盤。
---?即時(shí)校驗(yàn)，一種是邊輸入邊校驗(yàn)，這種情況適用于不需要從后端數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)的場(chǎng)景，只需要前端通過(guò)格式就可以進(jìn)行校驗(yàn)的。另一種是輸入結(jié)束后立刻對(duì)本輸入框進(jìn)行校驗(yàn)。
---?對(duì)于app，根據(jù)輸入框的需要填寫的內(nèi)容自動(dòng)彈出不同的鍵盤，比如手機(jī)號(hào)/身份證等彈出數(shù)字鍵盤，英文字符彈出英文鍵盤，中文字符彈出中文鍵盤
6.需要注意的地方
---?對(duì)于app，點(diǎn)擊輸入框鍵盤回彈出，此時(shí)鍵盤可能會(huì)蓋住之前頁(yè)面的一些內(nèi)容甚至?xí)r按鈕。我們一般可以通過(guò)以下兩種方式來(lái)處理，一種是一開(kāi)始就預(yù)留出鍵盤的位置，這樣鍵盤彈出，頁(yè)面樣式不需要要任何改變。另一種是鍵盤彈出時(shí)，其他內(nèi)容自動(dòng)上移。根據(jù)需要選擇自己合適的方式。
---?考慮換行的問(wèn)題，如果文本輸入內(nèi)容原來(lái)大小的輸入框已經(jīng)顯示不全了，這時(shí)候我們可以采取以下兩種措施。一種是文本框隨著輸入文字增加而變大，當(dāng)大到一定大小輸入框大小固定，文字內(nèi)容上移。另一種方法是輸入框大小一開(kāi)始就固定，超過(guò)輸入框大小，內(nèi)容自動(dòng)上移。不管采用哪一種都要注意，裸露出部分遮擋住的文字，提醒用戶這前面還有內(nèi)容。
---?對(duì)于敏感信息，比如密碼，身份證號(hào)等。密碼全部掩藏，身份證號(hào)可以掩藏中間一部分。
---?對(duì)于內(nèi)容預(yù)覽，也有兩種處理的方法，當(dāng)輸入完成鍵盤自動(dòng)縮回，文本框自動(dòng)最大化可以進(jìn)行內(nèi)容預(yù)覽。另一種是通過(guò)上下滑動(dòng)進(jìn)行內(nèi)容的預(yù)覽。
有多個(gè)提示信息的時(shí)候，提示信息如何展示。一種是定義提示信息的優(yōu)先級(jí)，先展示優(yōu)先級(jí)高的，另一種處理方法是全部顯示，此時(shí)就要考慮頁(yè)面布局，盡量簡(jiǎn)潔。
7.輸入框組合
我們?cè)诂F(xiàn)實(shí)中更多見(jiàn)的是多個(gè)輸入框的組合，這時(shí)候我們要考慮的就是各種組合情況。比如校驗(yàn)是一旦完成一個(gè)輸入框就進(jìn)行校驗(yàn)還是填寫好全部輸入框內(nèi)容后點(diǎn)擊提交然后進(jìn)行校驗(yàn)，這種情況取決于我們的需求，如果我們有很多個(gè)輸入框，那此時(shí)最好是填寫好一個(gè)輸入框就進(jìn)行校驗(yàn)，否則等用戶提交了顯示你有10幾個(gè)輸入框填寫錯(cuò)誤，這種用戶體驗(yàn)是很糟糕的。
8.復(fù)雜的輸入框
有些輸入框里可以插入圖片，可以改變樣式，此時(shí)它不僅僅是一個(gè)輸入框，有時(shí)候更像是一個(gè)文本編輯器。這時(shí)候你要考慮的情況就更多了。比如選定格式后換行格式是否保存，用戶復(fù)制黏貼的內(nèi)容是否保存原來(lái)的樣式等等。
9.輸入框的變形
如下圖是一個(gè)輸入四位驗(yàn)證碼的四個(gè)框。開(kāi)發(fā)同學(xué)把這個(gè)做成了四個(gè)輸入框，這就導(dǎo)致了一個(gè)問(wèn)題，用戶要?jiǎng)h除的內(nèi)容的時(shí)候，不能通過(guò)點(diǎn)擊刪除鍵直接從右到左刪除。每刪除一個(gè)，需要鼠標(biāo)點(diǎn)擊到對(duì)應(yīng)的輸入框然后才能刪除。這樣的用戶體驗(yàn)是非常糟糕的。其實(shí)我們要的功能就是一個(gè)簡(jiǎn)單的輸入框的功能，那我們要么把這個(gè)做成一個(gè)輸入框，要么就是底層就是輸入框，只是在樣式上展現(xiàn)成四個(gè)輸入框，每個(gè)只能輸入一個(gè)字符。
? ? ? ?雖然我們說(shuō)了輸入框的這么多種情況，在我們平時(shí)的工作中不一定要面面俱到。要避免過(guò)度設(shè)計(jì)，有一些平時(shí)不容易出現(xiàn)的場(chǎng)景，開(kāi)發(fā)難度比較大的，對(duì)于提升產(chǎn)品沒(méi)有太大幫助的就可以適當(dāng)刪減，把我們的精力放在真正重要的地方。
? ? ? ?我這里整理了一份表格，大家可以作為參考，平時(shí)也可以使用它來(lái)檢查自己是否有某一方面缺失。
