文本輸入框使用場(chǎng)景多，交互頻次高，是基本的界面控件之一。每一個(gè)界面都分別對(duì)默認(rèn)、輸入和反饋三個(gè)狀態(tài)進(jìn)行設(shè)計(jì)。輸入的結(jié)果我們常常用顏色來(lái)反饋，比如：藍(lán)色代表鏈接、灰色代表失效、綠色代表正確黃、色代表提示、紅色代表錯(cuò)誤。

下面是一些設(shè)計(jì)中需要注意的細(xì)節(jié):

一、標(biāo)注鍵盤(pán)類(lèi)型

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

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

左圖：這樣布局看起來(lái)沒(méi)問(wèn)題，但沒(méi)有考慮到鍵盤(pán)調(diào)起的狀態(tài)，因?yàn)殒I盤(pán)調(diào)起來(lái)的時(shí)候登錄按鈕會(huì)被擋住，操作成本就會(huì)增加。

中圖：不管鍵盤(pán)有沒(méi)有被喚起，頁(yè)面的布局都不會(huì)改變。

右圖：當(dāng)鍵盤(pán)喚起時(shí)，頁(yè)面向上提，漏出登錄按鈕。

三、減少用戶(hù)輸入

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

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

四、輸入提示

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

1. 選中輸入框準(zhǔn)備輸入的時(shí)候，應(yīng)當(dāng)提供清晰的視覺(jué)提示，這樣讓用戶(hù)明確知道自己的位置，而不是迷失在茫茫表格中，這種細(xì)微的反饋會(huì)讓用戶(hù)更有掌控力。比如：外發(fā)光的輸入框，或者閃動(dòng)的光標(biāo)，變顏色、加粗等都行。
2. 金額輸入：當(dāng)用戶(hù)輸入的金額超過(guò)千時(shí)，出現(xiàn)最高分位提示，每多輸入一位，最高分位隨之增加。
3. 通過(guò)設(shè)計(jì)輸入框格式來(lái)“格式化”輸入內(nèi)容，讓用戶(hù)可以清楚的知道應(yīng)該輸入哪種類(lèi)型、多少位。
4. 對(duì)于手機(jī)的輸入設(shè)置成3-4-4格式，身份證的輸入設(shè)置成6-8-4格式，便于用戶(hù)能夠清楚及時(shí)了解到自己輸入的號(hào)碼有無(wú)缺漏?！緦?duì)于身份證與手機(jī)，保存后可將中間幾位數(shù)變成*號(hào)，畢竟是敏感信息】
5. 輸入框的輸入記錄：對(duì)部分輸入框的內(nèi)容進(jìn)行記錄，比如登錄用戶(hù)名、手機(jī)號(hào)，無(wú)需用戶(hù)二次登錄時(shí)輸入，提高輸入速率，優(yōu)化用戶(hù)體驗(yàn)。

五、必要的說(shuō)明

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

一旦在輸入框里輸入內(nèi)容，占位文本就無(wú)法被看到了——一則用戶(hù)無(wú)法檢查輸入的內(nèi)容是否正確；二則當(dāng)用戶(hù)在輸入框中看到提示文本，他們有可能認(rèn)為這個(gè)文本框已被預(yù)填成功從而忽略它。

可以使用浮動(dòng)標(biāo)簽，當(dāng)用戶(hù)填寫(xiě)當(dāng)前文本框時(shí)，行內(nèi)標(biāo)簽即浮動(dòng)到文本框頂部，這樣可以使用戶(hù)隨時(shí)確認(rèn)他們填寫(xiě)的內(nèi)容是否正確。

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

具體標(biāo)簽說(shuō)明可查看：http://www.codemsi.com/pd/931662.html

來(lái)源：www.codemsi.com/ucd/361227.html

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

例如：銀行轉(zhuǎn)賬不是及時(shí)到賬，需要兩小時(shí)，金額每天有上限，并且和所剩的余額相關(guān)。如果這些是在用戶(hù)輸入完才告知，或者報(bào)錯(cuò)，那么這個(gè)鍋用戶(hù)當(dāng)然不愿意背。

再比如：安全隱私或者金錢(qián)相關(guān)，有心理顧慮，可以承諾不會(huì)對(duì)用戶(hù)造成損失，或者找背書(shū)，該方案已經(jīng)通過(guò)XXX安全認(rèn)證。消除顧慮之后才能順利進(jìn)行下一步。

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

比如：表單中用文字說(shuō)明為何需要填寫(xiě)信用卡號(hào)，以及生日日期填寫(xiě)之后的福利，又或者“服務(wù)條款”鏈接的存在。它們適時(shí)地出現(xiàn)，幫助用戶(hù)解釋了一些令人困惑的問(wèn)題。一般說(shuō)來(lái)，這類(lèi)幫助信息最好不要超過(guò)100字。

來(lái)源：www.codemsi.com/ucd/361227.html

六、清晰的反饋

關(guān)于填寫(xiě)錯(cuò)誤的描述應(yīng)該非常清晰，比如：注冊(cè)時(shí)密碼填寫(xiě)，不要說(shuō)密碼安全性過(guò)低，而要說(shuō)——碼必須超過(guò)8位，或者密碼必須包含大小寫(xiě)和數(shù)字。

注冊(cè)填寫(xiě)手機(jī)號(hào)，當(dāng)提示用戶(hù)手機(jī)號(hào)已被注冊(cè)時(shí)，應(yīng)提供跳轉(zhuǎn)登錄的入口。

七、及時(shí)的驗(yàn)證

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

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

來(lái)源：www.codemsi.com/ucd/361227.html

八、輸入限制問(wèn)題

對(duì)于輸入框，當(dāng)文字只輸入一行的時(shí)候，不會(huì)有什么問(wèn)題，但輸入多行的時(shí)候，如果輸入框?qū)ψ謹(jǐn)?shù)有限制，而你沒(méi)有把規(guī)則告訴用戶(hù)，那用戶(hù)一定會(huì)吐糟。

（1）微信個(gè)性簽名會(huì)在輸入框的右下角告訴你還可以輸入多少字，5行字以?xún)?nèi)，輸入框會(huì)自動(dòng)向上撐開(kāi)；超過(guò)5行時(shí)輸入框大小不變動(dòng)，5行以上的文字被遮擋住。

但微信這里有個(gè)細(xì)節(jié)體驗(yàn)不是很好，因?yàn)檎趽踝〉膬?nèi)容完全看不見(jiàn)。這個(gè)點(diǎn)唱吧的聊天界面就做得比較好，被擋住的文字會(huì)露出半行，讓用戶(hù)知道原來(lái)上面還有字。

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

（3）知乎提問(wèn)界面，當(dāng)離限制字?jǐn)?shù)差10個(gè)字以?xún)?nèi)時(shí)，提示還差幾個(gè)字。當(dāng)輸入超過(guò)限制字?jǐn)?shù)時(shí)，直接提示已超過(guò)多少個(gè)字。

九、移動(dòng)端自查清單

1. 這個(gè)輸入框真的是必須有的嗎？
2. 輸入框的文字描述在它的上方嗎？（不在里面，也不在下面）
3. 這個(gè)輸入框是必填的（*）還是選填的？
4. 有沒(méi)有把輸入框里的占位符都去掉？
5. 輸入框是否足夠大，以便完整顯示那些最有可能出現(xiàn)的輸入內(nèi)容？
6. 當(dāng)鍵盤(pán)出現(xiàn)的時(shí)候，輸入框是否在橫屏和豎屏兩個(gè)模式下都能被看到？
7. 輸入框是否有合適的默認(rèn)值？任何可用的歷史記錄值？用戶(hù)經(jīng)常使用的值？
8. 能不能用手機(jī)的特有功能（攝像頭，GPS，語(yǔ)音，聯(lián)系人）來(lái)填充呢？
9. 能不能根據(jù)其他信息幫助用戶(hù)得出要填的值（例如，根據(jù)郵政編碼，或者優(yōu)惠券輸入碼來(lái)推測(cè)用戶(hù)所在的地區(qū)）？
10. 是否支持直接復(fù)制并粘貼到輸入框內(nèi)？
11. 適合這個(gè)輸入框的鍵盤(pán)是哪個(gè)類(lèi)型的？（譯注：如英文鍵盤(pán)還是數(shù)字鍵盤(pán)）
12. 能不能根據(jù)前面輸入的字符進(jìn)行自動(dòng)聯(lián)想或自動(dòng)匹配？對(duì)姓名、地址和電子郵件地址，不啟用自動(dòng)更正。
13. 允許單詞拼寫(xiě)錯(cuò)誤或是縮寫(xiě)嗎？
14. 允許用戶(hù)以任何格式輸入信息嗎？（譯注：如信用卡號(hào)、電話(huà)號(hào)碼里的「-」符號(hào)）可以把用戶(hù)輸入的各式信息自動(dòng)轉(zhuǎn)換為統(tǒng)一格式。

本文由 @二O一七 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自網(wǎng)絡(luò)