移動設(shè)備在用戶體驗設(shè)計面前有許多挑戰(zhàn)。一個最明顯的挑戰(zhàn)是在有限的屏幕空間中處理輸入歌殃。而對產(chǎn)品設(shè)計師、開發(fā)人員和產(chǎn)品經(jīng)理來說，能夠理解為用戶使這個過程很簡單的方法則是非常關(guān)鍵的庐舟。

本文強調(diào)了能夠提升數(shù)據(jù)輸入的三個主要因素,分別是加快輸入,為用戶提供幫助和說明，以及直接指出問題住拭。

一挪略、輸入

1、按輸入類型匹配鍵盤

App用戶欣賞那些能夠提供一個適當?shù)挠脕磔斎氲逆I盤滔岳。不像物理鍵盤杠娱，觸摸鍵盤可以被充分利用在用戶需要輸入的每個表單項上，而且輸入框的類型決定了哪種字符可以顯示其中谱煤。你應(yīng)該優(yōu)化的常見的輸入類型有：

數(shù)字型：電話號碼摊求，信用卡號碼，

文本型：專有名詞趴俘，用戶名

混合型：郵件地址睹簇，街道地址，搜索詞條

確保這個匹配是持續(xù)應(yīng)用在整個應(yīng)用程序中,而不是只對特定的任務(wù)寥闪。

2太惠、適當?shù)呐渲米詣哟髮?/b>

適當?shù)脑O(shè)置自動大寫對移動表單輸入框的可用性是很重要的。如果區(qū)域設(shè)置要求疲憋，那么每個文本框的第一個字母應(yīng)該大寫凿渊，每句話的第一個字母也是。這對以下這樣的輸入框尤其相關(guān)：

問名字的地方缚柳，如用戶的姓和名

包含句子的信息,比如短信

無論如何埃脏，你不應(yīng)該使用自動大寫在郵件地址輸入時，因為當它作用時秋忙，用戶可能返回并刪除第一個大寫字母,他們擔(dān)心電子郵件發(fā)送產(chǎn)生問題彩掐。

3、詞典弱時不要開啟自動矯正功能

當用戶注意到不好的自動矯正時灰追，他們會很失望堵幽，而當他們注意不到時狗超，可能會徹底的出錯。自動矯正功能通常在縮略語朴下，街道名稱努咐，郵件地址，人名以及其他不在詞典中的詞組中表現(xiàn)很差殴胧。

Amazon老版本的移動app在地址輸入框中有自動矯正功能渗稍，導(dǎo)致原本有效的地址被自動覆蓋。

這種情況常常發(fā)生是因為用戶一般注意在他們正在輸入的內(nèi)容而非他們已經(jīng)輸入了哪些团滥。在地址信息場景下竿屹，這就導(dǎo)致有效的地址被自動矯正成無效的并且被提交，因為用戶沒有注意到自動矯正功能惫撰。

4羔沙、固定的輸入格式

不要使用固定的輸入格式。使用固定輸入格式的最常見原因是驗證腳本的缺陷（你的后臺系統(tǒng)不能決定它需要的格式）厨钻。在大多數(shù)情況下扼雏，這是產(chǎn)品開發(fā)的問題，而非用戶的夯膀。不像在輸入如手機號這樣的內(nèi)容時限制格式诗充，你應(yīng)該盡可能的轉(zhuǎn)換用戶輸入的任何格式到你希望顯示或儲存的格式。

5诱建、默認值和自動完成

你應(yīng)該對經(jīng)常被選項做出預(yù)期蝴蜓，為用戶提供智能默認值或者基于先前數(shù)據(jù)的提示來簡化用戶在數(shù)據(jù)上的輸入。比如俺猿，你可以根據(jù)用戶的地理位置數(shù)據(jù)來事先幫他們選定·國家茎匠。

這個方案可以和能夠明顯加快用戶行為的自動完成功能配對使用。自動完成提供了實時的建議或在下拉列表中顯示完成后的效果,所以用戶可以更加準確和有效的輸入信息押袍。它對那些只有有限文字素養(yǎng)或有拼寫困難的用戶尤其有用,尤其是如果他們使用非母語诵冒。

二、標簽和幫助信息

用戶想知道在一個輸入框中應(yīng)該輸入什么類型的數(shù)據(jù)谊惭，一個清晰的標簽是讓你的UI更加易于理解的最主要方法之一汽馋。標簽告訴用戶這個輸入框的目的，且在用戶將焦點放置輸入?yún)^(qū)域中時應(yīng)持續(xù)有效圈盔，甚至在輸入完成時同樣有效豹芯。

你也可以在輸入框中提供有用的說明信息。有相關(guān)的語境信息能夠使用戶更容易的通過這一步驱敲。

1铁蹈、單詞數(shù)的限制

標簽不是幫助文本。你應(yīng)該使用簡明的众眨，短的木缝，描述性的標簽（一兩個單詞）來使用戶快速的瀏覽你的文本框便锨。

如果你需要更多的輸入框的信息围辙，幫助信息是一個很好的方法來消除用戶困惑和可能面對的錯誤我碟。

2、簡單的語言

使用跟你的用戶一樣的語言姚建。未知的術(shù)語或詞組將會增加用戶的認知成本矫俺。清晰的溝通與功能應(yīng)該始終優(yōu)先于專業(yè)行話和品牌標語。

3掸冤、行內(nèi)標簽

行內(nèi)標簽（或占位符文本）對于簡單地如用戶名和密碼輸入框來非常有效厘托。

但對于屏幕上顯示超過2個文本框的情況，行內(nèi)標簽則不是獨立文本標簽的一個好的取代方案稿湿。雖然它很流行铅匹，看起來也還不錯，但實際上它有兩個很嚴重的問題：

一旦用戶點擊了輸入框饺藤，標簽就消失了包斑，這樣用戶就不能二次檢查他們輸入的內(nèi)容是不是他們應(yīng)該輸入的類型。

當用戶看那些已經(jīng)寫在文本框的內(nèi)容涕俗，他們可能會認為它以被填寫并因此忽略它們罗丰。

解決這種占位符標簽的方法是使用漂浮標簽，當用戶選取了文本輸入框再姑，漂浮標簽移動到輸入框上面萌抵。這樣，可以保證用戶填入正確格式的內(nèi)容元镀。

4绍填、標簽顏色

標簽的顏色應(yīng)該反映你的app的調(diào)色板，同時滿足適當?shù)膶Ρ榷龋ú粦?yīng)該太亮或太暗）栖疑。

三讨永、校驗

輸入框校驗意味著跟用戶會話并指導(dǎo)他們糾正錯誤和不確定性。這個過程的輸出是情感,而不該是技術(shù)蔽挠。一個最重要的不為人喜歡的數(shù)據(jù)處理過程就是錯誤處理住闯。犯錯誤是人的天性，你的輸入框可能并不能免除人為錯誤澳淑。如果做得好,校驗可以把一個模棱兩可的互動變成一個清晰的比原。

1、實時校驗

用戶不喜歡當他們經(jīng)歷了輸入在提交數(shù)據(jù)輸入才發(fā)現(xiàn),他們犯了一個錯誤杠巡。正確通知用戶數(shù)據(jù)的成功/失敗的時間應(yīng)該是提交后立刻呈現(xiàn)量窘。

實時的行內(nèi)校驗迅速的告訴用戶數(shù)據(jù)的對錯。這種方法允許用戶更快的改正錯誤而不是非得等到他們按下提交按鈕的時候再看到錯誤氢拥。使用一個對比性的顏色來表示錯誤狀態(tài)蚌铜，如暖色調(diào)紅色或橘色锨侯。

校驗不應(yīng)該只告訴用戶他們哪里錯了，也應(yīng)該告訴他們什么時候?qū)α硕辍＿@就給了用戶更多的信心來通過這一步囚痴。

2、明確的信息

對比如用戶的疑問“剛剛發(fā)生了什么审葬？為什么發(fā)生”深滚，系統(tǒng)應(yīng)該給與直接的回答。你的校驗信息應(yīng)該明確狀態(tài)：

錯哪了涣觉，大概是為什么;

要修正這個錯誤用戶下一步應(yīng)該做什么;

再次強調(diào)痴荐，應(yīng)該避免使用技術(shù)行話。規(guī)則很簡單,但他們很容易忽視官册。

3生兆、正確的顏色

顏色是設(shè)計校驗校驗時所使用的最好的工具之一。它按照我們的本能認識起到難以置信的作用膝宁，紅色來表示錯誤信息鸦难，黃色表示警告信息，綠色表示成功昆汹。下圖就是一個密碼輸入框校驗的很好的例子：

另外一個使用顏色的很好地例子是文本輸入框的字符限制明刷。字符數(shù)和紅線表示已經(jīng)超出限制。

但是別只依賴于顏色來表示校驗信息满粗。一定要確保用戶界面是可以理解的辈末，這是執(zhí)行視覺設(shè)計很重要的一個點。

四映皆、結(jié)論

你應(yīng)該使數(shù)據(jù)輸入盡可能更簡單挤聘。即使如自動大寫或在每個輸入框顯示幫助信息這樣小的變化，都可以顯著提高輸入框的可用性和整體的用戶體驗捅彻。深入思考下用戶實際如何使用你的應(yīng)用程序輸入信息组去，并確保你在設(shè)計APP時沒有遺漏掉一些明顯的注意事項。

譯自：https://uxplanet.org/text-fields-in-mobile-app-11d41f13e31#.x3c4fqbzx