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

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

一、輸入

1、按輸入類型匹配鍵盤

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

• 數(shù)字型：電話號碼，信用卡號碼，
• 文本型：專有名詞，用戶名
• 混合型：郵件地址，街道地址，搜索詞條

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

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

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

• 問名字的地方，如用戶的姓和名
• 包含句子的信息,比如短信

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

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

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

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

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

4、固定的輸入格式

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

5、默認值和自動完成

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

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

二、標簽和幫助信息

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

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

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

標簽不是幫助文本。你應該使用簡明的，短的，描述性的標簽（一兩個單詞）來使用戶快速的瀏覽你的文本框。

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

2、簡單的語言

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

3、行內(nèi)標簽

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

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

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

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

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

4、標簽顏色

標簽的顏色應該反映你的app的調(diào)色板，同時滿足適當?shù)膶Ρ榷龋ú粦撎粱蛱担?/p>

三、校驗

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

1、實時校驗

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

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

校驗不應該只告訴用戶他們哪里錯了，也應該告訴他們什么時候對了。這就給了用戶更多的信心來通過這一步。

2、明確的信息

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

錯哪了，大概是為什么;

要修正這個錯誤用戶下一步應該做什么;

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

3、正確的顏色

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

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

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

四、結論

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

原文鏈接：https://uxplanet.org/text-fields-in-mobile-app-11d41f13e31#.x3c4fqbzx

譯者@三達不留點gpj

來源@簡書

本文由 @三達不留點gpj 授權發(fā)布于人人都是產(chǎn)品經(jīng)理 ，未經(jīng)許可，禁止轉載。