文本輸入框是最基本的界面控件之一。它看似簡單，但使用場景多，交互頻次高，值得我們花些時間好好設(shè)計。全球著名的用戶體驗(yàn)咨詢公司 Nielsen Norman Group 整理了一份設(shè)計自查清單，共 14 條。供大家參考。

當(dāng)你在移動設(shè)備上設(shè)計輸入框時，應(yīng)該查查它是否滿足下表中的14條可用性要求。

無論是設(shè)計網(wǎng)頁，還是 web app，或是原生的移動 app，文本輸入框都是設(shè)計中的基礎(chǔ)組成控件。

這是一個輸入框應(yīng)該有的樣子:

一只安靜的輸入框

下面是移動端輸入框應(yīng)該遵守的 14 條用戶體驗(yàn)準(zhǔn)則：

到底需不需要輸入框

這個輸入框真的是必須有的嗎？

輸入框的描述

輸入框的文字描述在它的上方嗎？（不在里面，也不在下面）

這個輸入框是必填的（*）還是選填的？

有沒有把輸入框里的占位符都去掉？（為什么要去掉占位符：http://www.nngroup.com/articles/form-design-placeholders/）

可見性

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

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

幫助用戶填寫信息

輸入框是否有合適的默認(rèn)值？

• 任何可用的歷史記錄值？
• 用戶經(jīng)常使用的值？

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

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

輸入過程

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

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

能不能根據(jù)前面輸入的字符進(jìn)行自動聯(lián)想或自動匹配？

• 對姓名、地址和電子郵件地址，不啟用自動更正。

允許單詞拼寫錯誤或是縮寫嗎？

允許用戶以任何格式輸入信息嗎？（譯注：如信用卡號、電話號碼里的「-」符號）

• 可以把用戶輸入的各式信息自動轉(zhuǎn)換為統(tǒng)一格式

根據(jù)這個清單檢查你設(shè)計中的每一個輸入框。這的確是有點(diǎn)耗時費(fèi)神，但是你受累總比用戶受累要好得多。

理想情況下，你的網(wǎng)站或是應(yīng)用中所有的輸入框都應(yīng)該百分百地符合這個清單。少了任何一項(xiàng)，都會影響用戶體驗(yàn)。

實(shí)踐中，你可能做不到讓所有輸入框都百分百滿足這些用戶體驗(yàn)要求。在這種情況下，優(yōu)先讓那些最常被用到的或者是對完成任務(wù)最為關(guān)鍵的輸入框盡可能符合這個清單。

譯者：Aven

來源：設(shè)計譯言（微信公眾號：shejiyiyan）

原作者 Raluca Budiu

原文 A Checklist for Designing Mobile Input Fields