公司實在找不到新文章發(fā)布措拇，只能弱弱地滾去翻譯我纪，所以作為一個英語渣和ux初學(xué)者，新翻了一篇丐吓，orz翻墻也好累浅悉，以下為譯文：
6.28發(fā)現(xiàn)自己翻得好爛，有參照別人的文章修改了一下Ｈ纭Ｊ踅 ！粘衬！
移動設(shè)備涉及到用戶體驗的設(shè)計會面臨很多挑戰(zhàn)荞估，在有限的屏幕中輸入框會成為其中一個顯而易見的設(shè)計問題。至關(guān)重要的是稚新，這一過程會是產(chǎn)品設(shè)計師勘伺、開發(fā)人員和產(chǎn)品經(jīng)理了解用戶需求的最簡單的最佳途徑。
本文重點說明了褂删，改進(jìn)數(shù)據(jù)輸入的三個關(guān)鍵因素：加速輸入娇昙、為用戶提供服務(wù)或幫助、標(biāo)記用戶輸入直接相關(guān)的問題笤妙。
輸入
匹配鍵盤與所需的文本輸入框
用戶都偏愛那些根據(jù)輸入內(nèi)容提供了合適鍵盤的應(yīng)用。我們可以根據(jù)輸入框的類型優(yōu)化虛擬鍵盤噪裕，這是實體鍵盤不能做到的蹲盘。用戶可以填寫不同的文本字段的類型在不同的屬性范圍內(nèi)。你應(yīng)該優(yōu)化常用的輸入類型包括：
數(shù)字：電話號碼膳音、信用卡號召衔、PIN碼
文字：適當(dāng)?shù)拿Q、用戶名
混合格式：電子郵件地址祭陷，街道地址苍凛，關(guān)鍵字搜索查詢
確保此匹配是整個應(yīng)用程序，而不是只針對某些任務(wù)而不是一致性的實現(xiàn)想罕。
配置自動大寫適當(dāng)
配置自動大寫設(shè)置適應(yīng)是對于移動表單領(lǐng)域的可用性非常重要悠栓。每一個文本框的第一個字母自適應(yīng)與每個單詞或者句子的第一個單詞的首字母大寫。這些是輸入字段尤其相關(guān)的，例如：
1.給某信息命名惭适，比如用戶的姓和名笙瑟。
2.包含句子式的信息，比如短信息文本癞志。
然而往枷，你應(yīng)該在輸入電子郵件時禁用自動大寫，當(dāng)用戶發(fā)現(xiàn)郵箱首字母大寫時凄杯，常常會退回去將大寫字母刪掉错洁，因為他們擔(dān)心這樣會讓郵件發(fā)送產(chǎn)生問題。
字典詞庫很弱的時候禁用自動更正功能
自動修正這個功能往往使大多數(shù)用戶失望盾舌，甚至當(dāng)用戶沒有注意到的時候墓臭，它會明顯傷害用戶。自動糾錯功能對于以下這幾種信息更是收效甚微：例如縮寫妖谴、街道名稱窿锉、電子郵件、人名膝舅、以及詞典里沒有出現(xiàn)過的詞匯嗡载。
舊版的亞馬遜移動app文本輸入框在填寫地址欄的時候也有自動糾正模式，原本正確的輸入反而被自動糾錯的內(nèi)容代替了仍稀。
這種情況經(jīng)常會發(fā)生洼滚，因為用戶往往更關(guān)注他們正在輸入的內(nèi)容而不是已經(jīng)輸入的內(nèi)容。如果輸入的內(nèi)容是地址類的信息技潘，自動修改功能會悄悄篡改原本正確的輸入內(nèi)容遥巴，用戶很難注意這點。
固定的輸入模式
不要使用固定的輸入模式享幽。使用固定樣式的最常見的理由是腳本校驗限制铲掐。（后端可能不能判斷用戶輸入的格式）。然而大部分情況下值桩，這是開發(fā)者的問題摆霉，不應(yīng)該讓用戶買單你應(yīng)該盡可能從用戶輸入轉(zhuǎn)化到你需要存儲的格式，而不是強迫用戶在輸入過程中必須使用固定格式奔坟，比如電話號碼的格式携栋。
默認(rèn)值和自動完成
設(shè)計師們往往希望根據(jù)用戶的歷史記錄為他們提供預(yù)設(shè)的默認(rèn)值和提示語，從而使用戶更便捷地輸入信息。比如，可以根據(jù)用戶所處的地理位置信息預(yù)設(shè)國家地區(qū)益愈。
這種設(shè)計方法如果與自動完成功能配合使用户誓，可以顯著提高用戶輸入的效率饼灿。得益于自動填充提供了實時性的輸入建議或是可以選擇一項內(nèi)容來完成輸入的下拉菜單，用戶可以更精確高效地輸入信息帝美。對于那些讀寫能力不佳碍彭、拼寫困難、特別是使用非本國語言的用戶來說悼潭，這具有很高的價值庇忌。
標(biāo)簽和幫助信息
當(dāng)用戶在輸入框輸入信息時，他們想知道所輸入信息的類型舰褪，提供清晰的標(biāo)簽文本是一個使UI更具有可用性的好辦法皆疹。標(biāo)簽告知用戶文本框的目的，當(dāng)輸入框獲得焦點時發(fā)揮作用使用戶即使輸入完信息后占拍，仍然保證對輸入框的關(guān)注度略就。
你還可以在輸入字段的上下間提供有用的信息。于此同時晃酒，相關(guān)的上下文信息能幫助用戶更簡便地完成任務(wù)表牢。
標(biāo)簽長度限制
標(biāo)簽并不是幫助文本。我們在設(shè)計中應(yīng)當(dāng)使用簡潔的贝次、短的具有描述性的標(biāo)簽（1-2個）崔兴，好讓用戶可以快速瀏覽所有的輸入框的需求。
如果你需要更多關(guān)于輸入框的信息，提示文本可以幫助用戶解除困惑山析、并避免犯錯折汞。
簡單的文案
設(shè)計用戶易于理解的語言。表意不明的術(shù)語和句子會給用戶增加認(rèn)知負(fù)擔(dān)盖腿， 清晰的溝通和功能應(yīng)該始終優(yōu)先于專業(yè)的術(shù)語。
輸入框內(nèi)的提示信息
內(nèi)嵌標(biāo)簽翩腐、頁內(nèi)標(biāo)簽（或占位符文本）適用于簡單的輸入框，比如用戶名和密碼膏燃。
當(dāng)屏幕中存在多于兩個輸入框時茂卦，對于那些分隔開的文本標(biāo)簽，行內(nèi)標(biāo)簽就不適用了组哩。雖然他們看起來整潔有序等龙，但存在兩個嚴(yán)重的問題：
當(dāng)用戶點擊了輸入框处渣，行內(nèi)標(biāo)簽就會消失，所以他們不能再檢查所輸入的內(nèi)容是否正確
當(dāng)用戶在輸入框中看到提示文本蛛砰，他們有可能認(rèn)為這個文本框已被預(yù)填成功從而忽略它罐栈。
對于占位符文本輸入框的一個好的解決方案是把它做成一個浮動標(biāo)簽——當(dāng)用戶在文本輸入字段時，當(dāng)用戶填寫當(dāng)前某文本框時泥畅，行內(nèi)標(biāo)簽即浮動到文本框頂部荠诬，如圖所示：
順便說一句：
不要過于依賴占位文本和標(biāo)簽。因為一旦在輸入框里輸入內(nèi)容位仁，占位文本就無法被看到了柑贞。可以使用浮動標(biāo)簽聂抢，這樣可以使用戶隨時確認(rèn)他們填寫的內(nèi)容是否正確钧嘶。
標(biāo)簽顏色
標(biāo)簽的顏色應(yīng)該與整個應(yīng)用的顏色匹配，同時也要滿足合適的對比度（不宜太亮或太暗） 琳疏。
校驗
輸入框校驗意味著給用戶反饋有决，引導(dǎo)他們通過輸入流程，避免錯誤和不確定信息轿亮。這個過程的輸出是情感疮薇，而不僅僅是技術(shù)。一個數(shù)據(jù)處理中最重要的我注，是對錯誤的處理方式按咒。犯錯誤是人之常情，輸入字段可能是不能避免人為錯誤的但骨。如果設(shè)計得當(dāng)励七，校驗可以使原本表意不清的交互行為變得清晰易懂。
實時校驗
當(dāng)用戶在輸入數(shù)據(jù)的過程中奔缠，他們不喜歡在最后提交時才發(fā)現(xiàn)自己犯了錯誤掠抬。正確的做法是，我們應(yīng)該在用戶剛剛剛填寫完某條信息后就立刻告知他是否正確校哎。
實時的頁內(nèi)校驗可以立刻告知用戶他們輸入的信息是否正確两波。用戶可以更快地修改錯誤，而不必等到按下提交按鈕后才知道哪里錯了闷哆。設(shè)計師可以給錯誤文案定義鮮明的顏色腰奋，比如紅色或者橙色這種暖色調(diào)。
校驗不僅應(yīng)該告知用戶錯誤局冰，還應(yīng)告訴他們怎么做才是正確的测蘑，用戶才會更有信心完成輸入過程。
清晰的信息
用戶時常有這樣的困惑“剛才發(fā)生了什么康二？為什么會這樣碳胳？”。此時應(yīng)該提供一個直接了當(dāng)?shù)拇鸢冈 Ｒ虼诵ｒ炐畔?yīng)該清晰地說明：
錯誤是什么以及可能產(chǎn)生錯誤的原因
用戶下一步應(yīng)該做什么來改正錯誤
再次強調(diào)固逗，應(yīng)避免使用技術(shù)術(shù)語。這很簡單能做到藕帜，但很容易被忽視烫罩。
適當(dāng)?shù)念伾?/b>
當(dāng)設(shè)計校驗信息時，色彩是設(shè)計驗證流程時使用的最佳工具之一洽故。來自認(rèn)知本能的適用贝攒，紅色的為錯誤信息提示，黃色為警告消息提示时甚，綠色為成功信息提示隘弊。這項提示的方法非常有效。下面是一個校驗密碼輸入框的好案例：：
另一個運用顏色的優(yōu)秀案例是對文本輸入框做出字?jǐn)?shù)限制荒适。紅色的字符計數(shù)器及紅色下劃線說明該輸入框字?jǐn)?shù)已超限梨熙。
界面中顏色的應(yīng)用應(yīng)該符合用戶認(rèn)知，這是衡量優(yōu)秀視覺設(shè)計的重要標(biāo)準(zhǔn)之一刀诬。
總結(jié)
你應(yīng)該把數(shù)據(jù)輸入的過程中盡可能的變得容易咽扇，即使像是首字母自動大寫或給每個輸入框提供合理的指示這種簡單的辦法都會大大提高輸入框的可用性。設(shè)計師應(yīng)該多考慮用戶輸入時的真實使用行為從而在設(shè)計時確保沒有忽視某些重要的信息陕壹。
原作者：Nick?Babich
原文：https://uxplanet.org/text-fields-in-mobile-app-11d41f13e31#.914wa1yw3
