網(wǎng)站建設如何設計移動(dòng)端的文本輸入框發(fā)布者：本站     時(shí)間：2022-05-09 11:05:06

基于移動(dòng)設備的ux設計有很多難點(diǎn)。其中最大的設計挑戰之一是在有限的屏幕空間上解決點(diǎn)擊輸入的問(wèn)題。對于ux設計師、開(kāi)發(fā)人員和產(chǎn)品經(jīng)理來(lái)說(shuō)，讓這個(gè)過(guò)程變得易于用戶(hù)使用就顯得至關(guān)重要。

本篇文章闡述了提高數據輸入體驗中的三個(gè)關(guān)鍵因素－－速度（提高輸入速度）、引導（為用戶(hù)輸入提供引導幫助），反饋（直接有效地指出用戶(hù)輸入過(guò)程中的問(wèn)題）。
 

輸入
根據不同的輸入信息匹配合適的鍵盤(pán)
用戶(hù)都偏愛(ài)那些根據輸入內容提供了合適鍵盤(pán)的應用。我們可以根據輸入框的類(lèi)型優(yōu)化虛擬鍵盤(pán)，這是實(shí)體鍵盤(pán)不能做到的。常見(jiàn)輸入內容的類(lèi)型包括：

?  數字：電話(huà)號碼、信用卡號碼，PIN碼

?  文字：正確的名字、用戶(hù)名

?  混合輸入：電子郵件地址、街道地址、搜索關(guān)鍵詞

請確保這種匹配鍵盤(pán)的設計在整個(gè)應用中是統一的，而不是僅僅用在了某些地方。

如何設計移動(dòng)端的文本輸入框

圖1左：用戶(hù)需要點(diǎn)擊123鍵來(lái)切換鍵盤(pán)類(lèi)型以便使用數字鍵盤(pán)
圖1右：我們應該為需要輸入數字的文本區域自動(dòng)匹配合適的數字鍵盤(pán)

合理使用自動(dòng)大寫(xiě)功能
合理使用自動(dòng)大寫(xiě)對于提高移動(dòng)端表單的可用性來(lái)說(shuō)至關(guān)重要。每個(gè)文本輸入框的首字母和及每句話(huà)的首字母應該自動(dòng)大寫(xiě)。這尤其適用于以下兩類(lèi)輸入區域：

?  給某信息命名，比如用戶(hù)的姓和名。

?  包含句子式的信息，比如短信息文本。

不過(guò)，當我們輸入電子郵件地址時(shí)，應該禁用自動(dòng)大寫(xiě)功能，當用戶(hù)發(fā)現郵箱首字母大寫(xiě)時(shí)，常常會(huì )退回去將大寫(xiě)字母刪掉，因為他們擔心這樣會(huì )讓郵件發(fā)送產(chǎn)生問(wèn)題。

如何設計移動(dòng)端的文本輸入框

圖2
當詞典不好用時(shí)關(guān)閉自動(dòng)糾錯功能
自動(dòng)修正這個(gè)功能往往使大多數用戶(hù)失望，甚至當用戶(hù)沒(méi)有注意到的時(shí)候，它會(huì )明顯傷害用戶(hù)。自動(dòng)糾錯功能對于以下這幾種信息更是收效甚微：例如縮寫(xiě)、街道名稱(chēng)、電子郵件、人名、以及詞典里沒(méi)有出現過(guò)的詞匯。

舊版本的亞馬遜手機app在文本輸入框中應用了自動(dòng)修改模式，原本正確的輸入反而被自動(dòng)糾錯的內容代替了。

如何設計移動(dòng)端的文本輸入框

圖3
這種情況經(jīng)常會(huì )發(fā)生，因為用戶(hù)往往更關(guān)注他們正在輸入的內容而不是已經(jīng)輸入的內容。如果輸入的內容是地址類(lèi)的信息，自動(dòng)修改功能會(huì )悄悄篡改原本正確的輸入內容，用戶(hù)很難注意這點(diǎn)。

 
固定的輸入模式
不要使用固定的輸入模式。使用固定樣式的最常見(jiàn)的理由是腳本校驗限制。（后端可能不能判斷用戶(hù)輸入的格式）。然而大部分情況下，這是開(kāi)發(fā)者的問(wèn)題，不應該讓用戶(hù)買(mǎi)單。你應該想辦法將用戶(hù)的輸入轉化成可以存儲或顯示的格式，而不是強迫用戶(hù)輸入固定的格式。

如何設計移動(dòng)端的文本輸入框

圖4左：數據輸入框的樣式符合慣例（把電話(huà)號碼分割成三個(gè)輸入框），其余表單被鍵盤(pán)遮擋
圖4右：輸入框支持輸入靈活的內容，并且輸入完成后自動(dòng)提高以便不會(huì )被鍵盤(pán)遮擋

默認值和自動(dòng)完成
設計師們往往希望根據用戶(hù)的歷史記錄為他們提供預設的默認值和提示語(yǔ)，從而使用戶(hù)更便捷地輸入信息。比如，可以根據用戶(hù)所處的地理位置信息預設國家地區。

這種設計方法如果與自動(dòng)完成功能配合使用，可以顯著(zhù)提高用戶(hù)輸入的效率。得益于自動(dòng)填充提供了實(shí)時(shí)性的輸入建議或是可以選擇一項內容來(lái)完成輸入的下拉菜單，用戶(hù)可以更精確高效地輸入信息。對于那些讀寫(xiě)能力不佳、拼寫(xiě)困難、特別時(shí)使用非本國語(yǔ)言的用戶(hù)來(lái)說(shuō)，這具有很高的價(jià)值。

如何設計移動(dòng)端的文本輸入框

圖5：提供了搜索建議的文本域

標簽和有用的信息
當用戶(hù)在輸入框輸入信息時(shí)，他們想知道所輸入信息的類(lèi)型，提供清晰的標簽文本是一個(gè)使UI更具有可用性的好辦法。標簽告知用戶(hù)文本框的目的，當輸入框獲得焦點(diǎn)時(shí)發(fā)揮作用使用戶(hù)即使輸入完信息后，仍然保證對輸入框的關(guān)注度。

你也可以根據輸入框的上下文提供有用的信息。相關(guān)的上下文信息能幫助用戶(hù)更簡(jiǎn)便地完成任務(wù)。
 

標簽長(cháng)度限制
標簽并不是幫助信息。我們在設計中應當使用簡(jiǎn)潔的、短的具有描述性的標簽（1-2個(gè)），好讓用戶(hù)可以快速瀏覽所有的輸入框的需求。

如何設計移動(dòng)端的文本輸入框

圖6：輸入框的標簽是 ‘電話(huà)’、’入住’、‘退房’

如果你需要更多關(guān)于輸入框的信息，提示文本可以幫助用戶(hù)解除困惑、并避免犯錯。

如何設計移動(dòng)端的文本輸入框

圖7：‘PHONE’文本框下方的信息是幫助文本

簡(jiǎn)單的文案
設計用戶(hù)易于理解的語(yǔ)言。表意不明的術(shù)語(yǔ)和句子會(huì )給用戶(hù)增加認知負擔， 清晰的溝通和功能應該始終優(yōu)先于專(zhuān)業(yè)的術(shù)語(yǔ)。

如何設計移動(dòng)端的文本輸入框

圖8左：生僻的文案會(huì )迷惑用戶(hù)       
圖8右：清晰易懂的術(shù)語(yǔ)易于用戶(hù)理解

輸入框內的提示信息
頁(yè)內標簽（也叫占位符文本）適用于簡(jiǎn)單的輸入框，比如用戶(hù)名和密碼。

如何設計移動(dòng)端的文本輸入框

圖9

當屏幕中存在多于兩個(gè)輸入框時(shí)，對于那些分隔開(kāi)的文本標簽，行內標簽就不適用了。雖然他們看起來(lái)整潔有序，但存在兩個(gè)嚴重的問(wèn)題：

? 當用戶(hù)點(diǎn)擊了輸入框，行內標簽就會(huì )消失，所以他們不能再檢查所輸入的內容是否正確

? 當用戶(hù)在輸入框中看到提示文本，他們有可能認為這個(gè)文本框已被預填成功從而忽略它。

一個(gè)處理占位符文本的好辦法是－－浮動(dòng)標簽。 當用戶(hù)填寫(xiě)當前某文本框時(shí)，行內標簽即浮動(dòng)到文本框頂部。

如何設計移動(dòng)端的文本輸入框

圖10

注意：不要過(guò)于依賴(lài)占位文本和標簽。因為一旦在輸入框里輸入內容，占位文本就無(wú)法被看到了?？梢允褂酶?dòng)標簽，這樣可以使用戶(hù)隨時(shí)確認他們填寫(xiě)的內容是否正確。
 

標簽顏色
標簽的顏色應該與整個(gè)應用的顏色匹配，并保持合適的對比度（不應該太亮或太暗）。

如何設計移動(dòng)端的文本輸入框

圖11

校驗
輸入框校驗意味著(zhù)給用戶(hù)反饋并引導他們改正錯誤，消除用戶(hù)的疑惑。這個(gè)校驗的結果應該是人性化的而非像機器般冷冰。數據處理過(guò)程中最重要也是最容易讓人累覺(jué)不愛(ài)的地方是錯誤處理。犯錯是人類(lèi)天性，我們在填寫(xiě)輸入框時(shí)也不可避免。如果設計得當，校驗可以使原本表意不清的交互行為變得清晰易懂。
 

實(shí)時(shí)校驗
當用戶(hù)在輸入數據的過(guò)程中，他們不喜歡在最后提交時(shí)才發(fā)現自己犯了錯誤。正確的做法是，我們應該在用戶(hù)剛剛剛填寫(xiě)完某條信息后就立刻告知他是否正確。

實(shí)時(shí)的頁(yè)內校驗可以立刻告知用戶(hù)他們輸入的信息是否正確。用戶(hù)可以更快地修改錯誤，而不必等到按下提交按鈕后才知道哪里錯了。設計師可以給錯誤文案定義鮮明的顏色，比如紅色或者橙色這種暖色調。

如何設計移動(dòng)端的文本輸入框

圖12左：表單輸入內容直到點(diǎn)擊提交后才報錯，并且錯誤信息在輸入框之外
圖12右：輸入框下方實(shí)時(shí)顯示了錯誤信息

校驗不僅應該告知用戶(hù)錯誤，還應告訴他們怎么做才是正確的，用戶(hù)才會(huì )更有信心完成輸入過(guò)程。

如何設計移動(dòng)端的文本輸入框

圖13

清晰的信息
用戶(hù)時(shí)常有這樣的困惑“剛才發(fā)生了什么？為什么會(huì )這樣？”。此時(shí)應該提供一個(gè)直接了當的答案。因此校驗信息應該清晰地說(shuō)明：

?  錯誤是什么以及可能產(chǎn)生錯誤的原因

?  用戶(hù)下一步應該做什么來(lái)改正錯誤

再次重申，避免使用機械性的術(shù)語(yǔ)。這條規則看起來(lái)很簡(jiǎn)單，但是有時(shí)卻很容易被忽略。
 

適當的顏色
當設計校驗信息時(shí)，顏色是一個(gè)可利用的好工具。根據慣例，紅色表示錯誤信息，黃色表示警告信息，綠色表示成功，這些辦法很奏效。下圖是一個(gè)校驗密碼輸入框的好案例：

如何設計移動(dòng)端的文本輸入框

圖14

另一個(gè)運用顏色的優(yōu)秀案例是對文本輸入框做出字數限制。紅色的字符計數器及紅色下劃線(xiàn)說(shuō)明該輸入框字數已超限。