起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線(xiàn)下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)「譯文」輸入框的設(shè)計(jì)自查清單
文本輸入框是最基本的界面控件之一。它看似簡(jiǎn)單，但使用場(chǎng)景多，交互頻次高，值得我們花些時(shí)間好好設(shè)計(jì)。全球著名的用戶(hù)體驗(yàn)咨詢(xún)公司 Nielsen Norman Group 整理了一份設(shè)計(jì)自查清單，共 14 條。供大家參考。
當(dāng)你在移動(dòng)設(shè)備上設(shè)計(jì)輸入框時(shí)，應(yīng)該查查它是否滿(mǎn)足下表中的14條可用性要求。
無(wú)論是設(shè)計(jì)網(wǎng)頁(yè)，還是 web app，或是原生的移動(dòng) app，文本輸入框都是設(shè)計(jì)中的基礎(chǔ)組成控件。
這是一個(gè)輸入框應(yīng)該有的樣子:
一只安靜的輸入框
下面是移動(dòng)端輸入框應(yīng)該遵守的 14 條用戶(hù)體驗(yàn)準(zhǔn)則：
到底需不需要輸入框
這個(gè)輸入框真的是必須有的嗎？
輸入框的描述
輸入框的文字描述在它的上方嗎？（不在里面，也不在下面）
這個(gè)輸入框是必填的（*）還是選填的？
有沒(méi)有把輸入框里的占位符都去掉？（為什么要去掉占位符：http://www.nngroup.com/articles/form-design-placeholders/）
可見(jiàn)性
輸入框是否足夠大，以便完整顯示那些最有可能出現(xiàn)的輸入內(nèi)容？
當(dāng)鍵盤(pán)出現(xiàn)的時(shí)候，輸入框是否在橫屏和豎屏兩個(gè)模式下都能被看到？
幫助用戶(hù)填寫(xiě)信息
輸入框是否有合適的默認(rèn)值？
- 任何可用的歷史記錄值？
- 用戶(hù)經(jīng)常使用的值？
能不能用手機(jī)的特有功能（攝像頭，GPS，語(yǔ)音，聯(lián)系人）來(lái)填充呢？
能不能根據(jù)其他信息幫助用戶(hù)得出要填的值（例如，根據(jù)郵政編碼，或者優(yōu)惠券輸入碼來(lái)推測(cè)用戶(hù)所在的地區(qū)）？
輸入過(guò)程
是否支持直接復(fù)制并粘貼到輸入框內(nèi)？
適合這個(gè)輸入框的鍵盤(pán)是哪個(gè)類(lèi)型的？（譯注：如英文鍵盤(pán)還是數(shù)字鍵盤(pán)）
能不能根據(jù)前面輸入的字符進(jìn)行自動(dòng)聯(lián)想或自動(dòng)匹配？
- 對(duì)姓名、地址和電子郵件地址，不啟用自動(dòng)更正。
允許單詞拼寫(xiě)錯(cuò)誤或是縮寫(xiě)嗎？
允許用戶(hù)以任何格式輸入信息嗎？（譯注：如信用卡號(hào)、電話(huà)號(hào)碼里的「-」符號(hào)）
- 可以把用戶(hù)輸入的各式信息自動(dòng)轉(zhuǎn)換為統(tǒng)一格式
根據(jù)這個(gè)清單檢查你設(shè)計(jì)中的每一個(gè)輸入框。這的確是有點(diǎn)耗時(shí)費(fèi)神，但是你受累總比用戶(hù)受累要好得多。
理想情況下，你的網(wǎng)站或是應(yīng)用中所有的輸入框都應(yīng)該百分百地符合這個(gè)清單。少了任何一項(xiàng)，都會(huì)影響用戶(hù)體驗(yàn)。
實(shí)踐中，你可能做不到讓所有輸入框都百分百滿(mǎn)足這些用戶(hù)體驗(yàn)要求。在這種情況下，優(yōu)先讓那些最常被用到的或者是對(duì)完成任務(wù)最為關(guān)鍵的輸入框盡可能符合這個(gè)清單。
譯者：Aven
來(lái)源：設(shè)計(jì)譯言（微信公眾號(hào)：shejiyiyan）
原作者 Raluca Budiu
原文 A Checklist for Designing Mobile Input Fields
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
