1、輸入框類型:包括信息輸入框尺栖、注冊嫡纠、登錄輸入框、搜索輸入框决瞳、原創(chuàng)輸入框、對話輸入框以及其它左权；
2皮胡、文本輸入框使用場景多，交互頻次高赏迟，是基本的界面控件之一屡贺。每一個界面都分別對默認、輸入和反饋三個狀態(tài)進行設(shè)計锌杀。輸入的結(jié)果我們常常用顏色來反饋甩栈，比如藍色代表鏈接，灰色代表失效糕再，綠色代表正確量没，黃色代表提示，紅色代表錯誤突想。
下面是一些設(shè)計中需要注意的細節(jié):
一殴蹄、標注鍵盤類型
根據(jù)輸入框的不同數(shù)據(jù)類型，為用戶提供不同的鍵盤標注猾担，比如輸入手機號是標注數(shù)字鍵盤等等袭灯，用戶會偏愛那些根據(jù)輸入內(nèi)容提供了合適鍵盤的應(yīng)用。
二绑嘹、考慮鍵盤喚起狀態(tài)
左圖：這樣布局看起來沒問題稽荧，但沒有考慮到鍵盤調(diào)起的狀態(tài)，因為鍵盤調(diào)起來的時候登錄按鈕會被擋住工腋，操作成本就會增加姨丈。
中圖：不管鍵盤有沒有被喚起畅卓，頁面的布局都不會改變。
右圖：當鍵盤喚起時构挤，頁面向上提髓介，漏出登錄按鈕。
三筋现、減少用戶輸入
01唐础、增加一次性清除按鈕：當輸入框內(nèi)容不為空的時候獲得焦點，顯示一次性清除內(nèi)容的按鈕矾飞，而不需要用戶一直按刪除鍵一膨，一個個字符刪。
02洒沦、智能預設(shè)：需要填寫豹绪、選取的表單最好有預設(shè)的初始值或者內(nèi)容填充在其中，可以是建議申眼，也可以是相關(guān)推薦瞒津，這樣可以幫助用戶更準確、高效地填寫信息括尸。常見的使用場景有搜索聯(lián)想輸入巷蚪，地址定位等。
四濒翻、輸入提示
數(shù)據(jù)的呈現(xiàn)方式多種多樣屁柏。所以，當你在設(shè)計輸入框的時候有送，應(yīng)當與用戶輸入信息的類型淌喻、格式相互匹配。
01雀摘、選中輸入框準備輸入的時候裸删，應(yīng)當提供清晰的視覺提示，這樣讓用戶明確知道自己的位置阵赠，而不是迷失在茫茫表格中烁落，這種細微的反饋會讓用戶更有掌控力。比如外發(fā)光的輸入框豌注，或者閃動的光標伤塌，變顏色、加粗等都行轧铁。
02每聪、金額輸入：當用戶輸入的金額超過千時，出現(xiàn)最高分位提示，每多輸入一位药薯，最高分位隨之增加绑洛。
03、通過設(shè)計輸入框格式來“格式化”輸入內(nèi)容童本，讓用戶可以清楚的知道應(yīng)該輸入哪種類型真屯，多少位。
04穷娱、對于手機的輸入設(shè)置成3-4-4格式绑蔫，身份證的輸入設(shè)置成6-8-4格式，便于用戶能夠清楚及時了解到自己輸入的號碼有無缺漏泵额∨渖睿【對于身份證與手機，保存后可將中間幾位數(shù)變成*號嫁盲，畢竟是敏感信息】篓叶。
05、輸入框的輸入記錄：對部分輸入框的內(nèi)容進行記錄羞秤，比如登錄用戶名缸托、手機號，無需用戶二次登錄時輸入瘾蛋，提高輸入速率俐镐，優(yōu)化用戶體驗。
五瘦黑、必要的說明
01京革、不要過于依賴占位文本和標簽奇唤。一旦在輸入框里輸入內(nèi)容幸斥，占位文本就無法被看到了，一則用戶無法檢查輸入的內(nèi)容是否正確咬扇，二則當用戶在輸入框中看到提示文本甲葬，他們有可能認為這個文本框已被預填成功從而忽略它⌒负兀可以使用浮動標簽经窖，當用戶填寫當前文本框時，行內(nèi)標簽即浮動到文本框頂部梭灿，這樣可以使用戶隨時確認他們填寫的內(nèi)容是否正確画侣。一般當屏幕中多于兩個輸入框時，行內(nèi)標簽就不適用了堡妒。
具體標簽說明可查看：http://www.woshipm.com/pd/931662.html
02配乱、加入文字說明：比如專業(yè)性強，大眾可能不清楚的文本解釋：例如銀行轉(zhuǎn)賬不是及時到賬，需要兩小時搬泥，金額每天有上限桑寨，并且和所剩的余額相關(guān)。如果這些是在用戶輸入完才告知忿檩，或者報錯尉尾，那么這個鍋用戶當然不愿意背。再比如安全隱私或者金錢相關(guān)燥透，有心理顧慮沙咏，可以承諾不會對用戶造成損失，或者找背書兽掰，該方案已經(jīng)通過XXX安全認證芭碍。消除顧慮之后才能順利進行下一步。
03孽尽、幫助信息（或相關(guān)文字）應(yīng)當出現(xiàn)在需要的地方窖壕，比如表單中用文字說明為何需要填寫信用卡號，以及生日日期填寫之后的福利杉女，又或者“服務(wù)條款”鏈接的存在瞻讽。它們適時地出現(xiàn)，幫助用戶解釋了一些令人困惑的問題熏挎。一般說來速勇，這類幫助信息最好不要超過100字。
六坎拐、清晰的反饋
關(guān)于填寫錯誤的描述應(yīng)該非常清晰烦磁，比如注冊時密碼填寫，不要說密碼安全性過低哼勇，而要說都伪，密碼必須超過8位，或者密碼必須包含大小寫和數(shù)字积担。
注冊填寫手機號陨晶，當提示用戶手機號已被注冊時，應(yīng)提供跳轉(zhuǎn)登錄的入口帝璧。
七先誉、及時的驗證
1、在用戶填完內(nèi)容后立刻告知用戶輸入內(nèi)容是否正確的烁，而不是等提交后才提示褐耳。
2、實時的頁內(nèi)校驗可以馬上告知用戶輸入的正確性渴庆。幫助用戶及時改正铃芦，無需等到點擊提交按鈕买雾。如果只有一個錯誤要修正，那就很容易杨帽，能降低用戶放棄的可能性漓穿。
八、輸入限制問題
對于輸入框注盈，當文字只輸入一行的時候晃危，不會有什么問題，但輸入多行的時候老客，如果輸入框?qū)ψ謹?shù)有限制僚饭，而你沒有把規(guī)則告訴用戶，那用戶一定會吐糟胧砰。
01鳍鸵、微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字；5行字以內(nèi)尉间，輸入框會自動向上撐開偿乖；超過5行時輸入框大小不變動，5行以上的文字被遮擋住哲嘲。但微信這里有個細節(jié)體驗不是很好贪薪，因為遮擋住的內(nèi)容完全看不見。這個點唱吧的聊天界面就做得比較好眠副，被擋住的文字會露出半行画切，讓用戶知道原來上面還有字。
02囱怕、發(fā)布微博的時候霍弹，會在右下角告訴你已經(jīng)輸入多少文字，如果超過140字后娃弓，數(shù)字的顏色會變成橙色典格，起到警示作用。
03忘闻、知乎提問界面钝计，當離限制字數(shù)差10個字以內(nèi)時恋博，提示還差幾個字齐佳；當輸入超過限制字數(shù)時，直接提示已超過多少個字债沮。
九炼吴、移動端自查清單
01-這個輸入框真的是必須有的嗎？
02-輸入框的文字描述在它的上方嗎疫衩？（不在里面硅蹦，也不在下面）
03-這個輸入框是必填的（*）還是選填的？
04-有沒有把輸入框里的占位符都去掉？
05-輸入框是否足夠大童芹，以便完整顯示那些最有可能出現(xiàn)的輸入內(nèi)容涮瞻？
06-當鍵盤出現(xiàn)的時候，輸入框是否在橫屏和豎屏兩個模式下都能被看到假褪？
07-輸入框是否有合適的默認值署咽？
任何可用的歷史記錄值？
用戶經(jīng)常使用的值生音？
08-能不能用手機的特有功能（攝像頭宁否，GPS虐唠，語音信卡，聯(lián)系人）來填充呢？
09-能不能根據(jù)其他信息幫助用戶得出要填的值（例如阅仔，根據(jù)郵政編碼域醇，或者優(yōu)惠券輸入碼來推測用戶所在的地區(qū)）台谊？
10-是否支持直接復制并粘貼到輸入框內(nèi)？
11-適合這個輸入框的鍵盤是哪個類型的譬挚？（譯注：如英文鍵盤還是數(shù)字鍵盤）
12-能不能根據(jù)前面輸入的字符進行自動聯(lián)想或自動匹配青伤？
對姓名、地址和電子郵件地址殴瘦，不啟用自動更正狠角。
13-允許單詞拼寫錯誤或是縮寫嗎？
14-允許用戶以任何格式輸入信息嗎蚪腋？（譯注：如信用卡號丰歌、電話號碼里的「-」符號）
可以把用戶輸入的各式信息自動轉(zhuǎn)換為統(tǒng)一格式
來源：http://www.woshipm.com/pd/165608.html
