輸入框的類型包括信息輸入框、注冊桶错、登錄輸入框航唆、搜索輸入框、原創(chuàng)輸入框院刁、對話輸入框等糯钙。文本輸入框使用場景多，交互頻次高，是基本的界面控件之一任岸。每一個界面都分別對默認(rèn)再榄、輸入和反饋三個狀態(tài)進(jìn)行設(shè)計。輸入的結(jié)果我們常常用顏色來反饋享潜，比如：藍(lán)色代表鏈接困鸥、灰色代表失效、綠色代表正確剑按、黃色代表提示疾就、紅色代表錯誤。

一艺蝴、標(biāo)注鍵盤類型

根據(jù)輸入框的不同數(shù)據(jù)類型猬腰，為用戶提供不同的鍵盤標(biāo)注，比如：輸入手機(jī)號是標(biāo)注數(shù)字鍵盤等等猜敢，用戶會偏愛那些根據(jù)輸入內(nèi)容提供了合適鍵盤的應(yīng)用姑荷。

適合的鍵盤

二、考慮鍵盤喚起狀態(tài)

左圖：這樣布局看起來沒問題缩擂，但沒有考慮到鍵盤調(diào)起的狀態(tài)厢拭，因為鍵盤調(diào)起來的時候登錄按鈕會被擋住，操作成本就會增加撇叁。

中圖：不管鍵盤有沒有被喚起供鸠，頁面的布局都不會改變。

右圖：當(dāng)鍵盤喚起時陨闹，頁面向上提楞捂，漏出登錄按鈕。

三種鍵盤喚起設(shè)計

三趋厉、減少用戶輸入

（1）增加一次性清除按鈕：當(dāng)輸入框內(nèi)容不為空的時候獲得焦點(diǎn)寨闹，顯示一次性清除內(nèi)容的按鈕，而不需要用戶一直按刪除鍵君账，一個個字符刪繁堡。

（2）智能預(yù)設(shè)：需要填寫、選取的表單最好有預(yù)設(shè)的初始值或者內(nèi)容填充在其中乡数，可以是建議椭蹄，也可以是相關(guān)推薦，這樣可以幫助用戶更準(zhǔn)確净赴、高效地填寫信息绳矩。常見的使用場景有搜索聯(lián)想輸入，地址定位等玖翅。

用戶最少輸入

四翼馆、輸入提示

數(shù)據(jù)的呈現(xiàn)方式多種多樣割以，所以，當(dāng)你在設(shè)計輸入框的時候应媚，應(yīng)當(dāng)與用戶輸入信息的類型严沥、格式相互匹配。

選中輸入框準(zhǔn)備輸入的時候中姜，應(yīng)當(dāng)提供清晰的視覺提示消玄，這樣讓用戶明確知道自己的位置，而不是迷失在茫茫表格中扎筒，這種細(xì)微的反饋會讓用戶更有掌控力莱找。比如：外發(fā)光的輸入框，或者閃動的光標(biāo)嗜桌，變顏色奥溺、加粗等都行。

金額輸入：當(dāng)用戶輸入的金額超過千時骨宠，出現(xiàn)最高分位提示浮定，每多輸入一位，最高分位隨之增加层亿。

通過設(shè)計輸入框格式來“格式化”輸入內(nèi)容桦卒，讓用戶可以清楚的知道應(yīng)該輸入哪種類型、多少位匿又。

對于手機(jī)的輸入設(shè)置成3-4-4格式方灾，身份證的輸入設(shè)置成6-8-4格式，便于用戶能夠清楚及時了解到自己輸入的號碼有無缺漏碌更≡３ィ【對于身份證與手機(jī)，保存后可將中間幾位數(shù)變成*號痛单，畢竟是敏感信息】

輸入框的輸入記錄：對部分輸入框的內(nèi)容進(jìn)行記錄嘿棘，比如登錄用戶名、手機(jī)號旭绒，無需用戶二次登錄時輸入鸟妙，提高輸入速率，優(yōu)化用戶體驗挥吵。

輸入提示

五重父、必要的說明

（1）不要過于依賴占位文本和標(biāo)簽。

一旦在輸入框里輸入內(nèi)容蔫劣，占位文本就無法被看到了——一則用戶無法檢查輸入的內(nèi)容是否正確坪郭；二則當(dāng)用戶在輸入框中看到提示文本，他們有可能認(rèn)為這個文本框已被預(yù)填成功從而忽略它脉幢⊥嵛郑可以使用浮動標(biāo)簽，當(dāng)用戶填寫當(dāng)前文本框時嫌松，行內(nèi)標(biāo)簽即浮動到文本框頂部沪曙，這樣可以使用戶隨時確認(rèn)他們填寫的內(nèi)容是否正確。

一般當(dāng)屏幕中多于兩個輸入框時萎羔，行內(nèi)標(biāo)簽就不適用了液走。

浮動標(biāo)簽

（2）加入文字說明：比如專業(yè)性強(qiáng)，大眾可能不清楚的文本解釋贾陷。

例如：銀行轉(zhuǎn)賬不是及時到賬缘眶，需要兩小時，金額每天有上限髓废，并且和所剩的余額相關(guān)巷懈。如果這些是在用戶輸入完才告知，或者報錯慌洪，那么這個鍋用戶當(dāng)然不愿意背顶燕。再比如：安全隱私或者金錢相關(guān)，有心理顧慮冈爹，可以承諾不會對用戶造成損失涌攻，或者找背書，該方案已經(jīng)通過XXX安全認(rèn)證频伤。消除顧慮之后才能順利進(jìn)行下一步恳谎。

文字說明

（3）幫助信息（或相關(guān)文字）應(yīng)當(dāng)出現(xiàn)在需要的地方。

比如表單中用文字說明為何需要填寫信用卡號憋肖，以及生日日期填寫之后的福利因痛，又或者“服務(wù)條款”鏈接的存在。它們適時地出現(xiàn)瞬哼，幫助用戶解釋了一些令人困惑的問題婚肆。一般說來，這類幫助信息最好不要超過100字坐慰。

文字提示

六较性、清晰地反饋

關(guān)于填寫錯誤的描述應(yīng)該非常清晰，比如：注冊時密碼填寫结胀，不要說密碼安全性過低赞咙，而要說密碼必須超過8位，或者密碼必須包含大小寫和數(shù)字糟港。注冊填寫手機(jī)號攀操，當(dāng)提示用戶手機(jī)號已被注冊時，應(yīng)提供跳轉(zhuǎn)登錄的入口秸抚。

清晰的反饋信息

七速和、及時的驗證

（1）在用戶填完內(nèi)容后立刻告知用戶輸入內(nèi)容是否正確歹垫，而不是等提交后才提示。

（2）實(shí)時的頁內(nèi)校驗可以馬上告知用戶輸入的正確性颠放，幫助用戶及時改正排惨，無需等到點(diǎn)擊提交按鈕。如果只有一個錯誤要修正碰凶，那就很容易暮芭，能降低用戶放棄的可能性。

及時校驗

八欲低、輸入限制問題

對于輸入框，當(dāng)文字只輸入一行的時候砾莱，不會有什么問題，但輸入多行的時候恤磷，如果輸入框?qū)ψ謹(jǐn)?shù)有限制，而你沒有把規(guī)則告訴用戶扫步，那用戶一定會吐糟。

（1）微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字河胎，5行字以內(nèi)闯袒，輸入框會自動向上撐開游岳；超過5行時輸入框大小不變動政敢，5行以上的文字被遮擋住。但微信這里有個細(xì)節(jié)體驗不是很好胚迫，因為遮擋住的內(nèi)容完全看不見喷户。這個點(diǎn)唱吧的聊天界面就做得比較好，被擋住的文字會露出半行访锻，讓用戶知道原來上面還有字褪尝。

（2）發(fā)布微博的時候，會在右下角告訴你已經(jīng)輸入多少文字期犬，如果超過140字后河哑，數(shù)字的顏色會變成橙色，起到警示作用龟虎。

（3）知乎提問界面璃谨，當(dāng)離限制字?jǐn)?shù)差10個字以內(nèi)時，提示還差幾個字。當(dāng)輸入超過限制字?jǐn)?shù)時佳吞，直接提示已超過多少個字拱雏。

輸入限制

九、移動端自查清單

1容达、這個輸入框真的是必須有的嗎古涧？

2垂券、輸入框的文字描述在它的上方嗎花盐？（不在里面，也不在下面）

3菇爪、這個輸入框是必填的（*）還是選填的算芯？

4、有沒有把輸入框里的占位符都去掉凳宙？

5熙揍、輸入框是否足夠大，以便完整顯示那些最有可能出現(xiàn)的輸入內(nèi)容氏涩？

6届囚、當(dāng)鍵盤出現(xiàn)的時候，輸入框是否在橫屏和豎屏兩個模式下都能被看到是尖？

7意系、輸入框是否有合適的默認(rèn)值？任何可用的歷史記錄值饺汹？用戶經(jīng)常使用的值蛔添？

8、能不能用手機(jī)的特有功能（攝像頭兜辞，GPS迎瞧，語音，聯(lián)系人）來填充呢逸吵？

9凶硅、能不能根據(jù)其他信息幫助用戶得出要填的值（例如扫皱，根據(jù)郵政編碼，或者優(yōu)惠券輸入碼來推測用戶所在的地區(qū)）编检？

10扰才、是否支持直接復(fù)制并粘貼到輸入框內(nèi)衩匣？

11粥航、適合這個輸入框的鍵盤是哪個類型的递雀？（譯注：如英文鍵盤還是數(shù)字鍵盤）

12蚀浆、能不能根據(jù)前面輸入的字符進(jìn)行自動聯(lián)想或自動匹配？對姓名杨凑、地址和電子郵件地址，不啟用自動更正撩满。

13绅你、允許單詞拼寫錯誤或是縮寫嗎？

14伪嫁、允許用戶以任何格式輸入信息嗎汉规？（譯注：如信用卡號、電話號碼里的「-」符號）可以把用戶輸入的各式信息自動轉(zhuǎn)換為統(tǒng)一格式晶伦。