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

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

一、輸入

1、按輸入類型匹配鍵盤

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

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

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

2、適當(dāng)?shù)呐渲米詣?dòng)大寫

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

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

無(wú)論如何，你不應(yīng)該使用自動(dòng)大寫在郵件地址輸入時(shí)，因?yàn)楫?dāng)它作用時(shí)，用戶可能返回并刪除第一個(gè)大寫字母,他們擔(dān)心電子郵件發(fā)送產(chǎn)生問(wèn)題。

3、詞典弱時(shí)不要開(kāi)啟自動(dòng)矯正功能

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

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

這種情況常常發(fā)生是因?yàn)橛脩粢话阕⒁庠谒麄冋谳斎氲膬?nèi)容而非他們已經(jīng)輸入了哪些。在地址信息場(chǎng)景下，這就導(dǎo)致有效的地址被自動(dòng)矯正成無(wú)效的并且被提交，因?yàn)橛脩魶](méi)有注意到自動(dòng)矯正功能。

4、固定的輸入格式

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

5、默認(rèn)值和自動(dòng)完成

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

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

二、標(biāo)簽和幫助信息

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

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

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

標(biāo)簽不是幫助文本。你應(yīng)該使用簡(jiǎn)明的，短的，描述性的標(biāo)簽（一兩個(gè)單詞）來(lái)使用戶快速的瀏覽你的文本框。

如果你需要更多的輸入框的信息，幫助信息是一個(gè)很好的方法來(lái)消除用戶困惑和可能面對(duì)的錯(cuò)誤。

2、簡(jiǎn)單的語(yǔ)言

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

3、行內(nèi)標(biāo)簽

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

但對(duì)于屏幕上顯示超過(guò)2個(gè)文本框的情況，行內(nèi)標(biāo)簽則不是獨(dú)立文本標(biāo)簽的一個(gè)好的取代方案。雖然它很流行，看起來(lái)也還不錯(cuò)，但實(shí)際上它有兩個(gè)很嚴(yán)重的問(wèn)題：

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

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

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

4、標(biāo)簽顏色

標(biāo)簽的顏色應(yīng)該反映你的app的調(diào)色板，同時(shí)滿足適當(dāng)?shù)膶?duì)比度（不應(yīng)該太亮或太暗）。

三、校驗(yàn)

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

1、實(shí)時(shí)校驗(yàn)

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

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

校驗(yàn)不應(yīng)該只告訴用戶他們哪里錯(cuò)了，也應(yīng)該告訴他們什么時(shí)候?qū)α?。這就給了用戶更多的信心來(lái)通過(guò)這一步。

2、明確的信息

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

錯(cuò)哪了，大概是為什么;

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

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

3、正確的顏色

顏色是設(shè)計(jì)校驗(yàn)校驗(yàn)時(shí)所使用的最好的工具之一。它按照我們的本能認(rèn)識(shí)起到難以置信的作用，紅色來(lái)表示錯(cuò)誤信息，黃色表示警告信息，綠色表示成功。下圖就是一個(gè)密碼輸入框校驗(yàn)的很好的例子：

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

但是別只依賴于顏色來(lái)表示校驗(yàn)信息。一定要確保用戶界面是可以理解的，這是執(zhí)行視覺(jué)設(shè)計(jì)很重要的一個(gè)點(diǎn)。

四、結(jié)論

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

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

譯者@三達(dá)不留點(diǎn)gpj

來(lái)源@簡(jiǎn)書

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