文本框作為日常工作中經(jīng)常遇到的組件，其易用與否直接影響著用戶體驗(yàn)，今天來探討下如何提升文本框的易用性。（我們常說的文本輸入有兩種，文本框和文本域，下文以文本框統(tǒng)稱。）

在開始設(shè)計(jì)文本框之前，要問自己三個(gè)問題：這個(gè)地方要實(shí)現(xiàn)什么功能？必須以文本框的形式出現(xiàn)嗎？是不是有更好的替代方案？

因?yàn)橄鄬?duì)于其他的人機(jī)界面交互方式來說，輸入成本是最大的。

結(jié)構(gòu)

文本框的結(jié)構(gòu)包括可見和非可見兩部分，可見部分通常由標(biāo)簽Label、提示信息、輸入框、功能性圖標(biāo)、內(nèi)容、反饋六部分組成，非可見部分指文本框的校驗(yàn)形式（即時(shí)校驗(yàn)、失焦校驗(yàn)、提交校驗(yàn)）和校驗(yàn)方式（前端校驗(yàn)、后端校驗(yàn)）。

下面我將從交互和UI兩個(gè)方面分析一下文本框正確的打開方式。

交互

1. 正常狀態(tài)

（1）標(biāo)簽Label與輸入框的位置

Label與輸入框的位置關(guān)系主要有以下四種：

① Label與輸入框自上而下左對(duì)齊排列，瀏覽和輸入時(shí)，視線不存在左右掃描的情況，速度最快，常見于移動(dòng)端。

② ③ Label與輸入框在同一水平高度上，Label對(duì)齊方式不同（左對(duì)齊和右對(duì)齊），常見于PC端，用戶以Z字形方式瀏覽和輸入，效率相對(duì)較低一些。對(duì)于涉及到安全、重要的信息，采用這種形式能夠減慢用戶輸入速度，降低用戶的出錯(cuò)率。

④ Label在輸入框內(nèi)以提示信息形式出現(xiàn)，這種看似簡(jiǎn)潔又節(jié)約頁面空間的形式存在諸多問題：

• Label和提示信息會(huì)產(chǎn)生沖突，尤其當(dāng)提示信息內(nèi)容較多時(shí)；
• 當(dāng)用戶的輸入被打斷或修改時(shí)，需要回憶Label是什么，甚至需要?jiǎng)h掉已輸入的信息重新查看Label，成本太大；
• 給用戶造成產(chǎn)品不安全的感覺。

還有一種比較特殊的形式–浮動(dòng)式標(biāo)簽（如下圖），正常情況下Label在輸入框內(nèi)，當(dāng)激活輸入框時(shí)，Label變小浮動(dòng)到框內(nèi)左上角，常見于移動(dòng)端較多，閱讀效率高，節(jié)約頁面空間；不足是在小屏幕下Label識(shí)別性較低，提示信息較多時(shí)，展示也存在問題。

（2）提示信息的位置

提示信息的位置一般有三種，如下圖所示。第一種一般用于對(duì)輸入內(nèi)容有要求的情況，用戶需要邊輸入邊核對(duì)要求；第二種一般用于無約束條件的情況，Label的名稱足以提供給用戶有效的信息，用戶填寫出錯(cuò)率較低時(shí)使用；第三種，提示內(nèi)容隱藏在icon中。

常用于以下兩種情況：

1. 提示信息內(nèi)容很多，完全展示時(shí)已經(jīng)對(duì)頁面整體效果造成了破壞；
2. 重要程度相對(duì)較低，起到輔助作用的信息。

（3）Label和提示信息的內(nèi)容

Label和提示信息應(yīng)當(dāng)做到“精”、“簡(jiǎn)”、“短”的要求，避免冗長(zhǎng)的文案造成閱讀和理解壓力。

（4）默認(rèn)為激活狀態(tài)

新打開頁面時(shí)，文本框自動(dòng)為激活狀態(tài)，簡(jiǎn)化用戶操作路徑，用戶可直接輸入。這種形式常見于界面內(nèi)只有一個(gè)文本框的情況。

2. 輸入狀態(tài)

（1）輸入法則

1. 提示信息中要有明確的支持格式限定，如字母大小寫、下劃線、特殊符號(hào)等；
2. 如果輸入框有明確的字符數(shù)限制，要給出明確的提示。字符限制有兩種類型：超過規(guī)定字?jǐn)?shù)仍可以輸入，飄紅顯示超出多少字；達(dá)到最大字?jǐn)?shù)時(shí)不能繼續(xù)輸入（如手機(jī)號(hào)輸入框）；
3. 輸入信息后，要有一鍵清空的icon，尤其是針對(duì)操作不方便的移動(dòng)端。

（2）輸入源

1. 支持文本粘貼、復(fù)制、剪切等常規(guī)操作；
2. 移動(dòng)端激活輸入框時(shí)喚起鍵盤，喚起數(shù)字鍵盤還是中英文鍵盤要根據(jù)內(nèi)容性質(zhì)確定。如手機(jī)號(hào)、身份證號(hào)等應(yīng)該直接喚起數(shù)字鍵盤，避免喚起中英文鍵盤后需要用戶手動(dòng)切換到數(shù)字鍵；
3. 為輸入框提供更便捷的輸入方式，如掃描銀行卡號(hào)的形式代替數(shù)字輸入，GPS定位代替地址輸入，游戲中角色取名可通過搖骰子的形式隨機(jī)生成。

（3）特殊文本：密碼文本

由于明文的密碼會(huì)讓用戶感到不安全，因此在密碼上面添加遮罩形成了密文密碼。密文在用戶輸入錯(cuò)誤時(shí)修改又比較麻煩，就出現(xiàn)了明/密文切換的形式。

移動(dòng)端由于輸入不便，修改成本高，一般情況下默認(rèn)為密文，點(diǎn)擊icon可顯示明文。PC端一般只有密文形式，不支持明文，一是因?yàn)镻C端使用鍵盤輸入，錯(cuò)誤率很低，二是考慮到他人借用電腦時(shí)密碼的安全性。

3. 反饋狀態(tài)

（1）關(guān)于校驗(yàn)

校驗(yàn)形式有三種：即時(shí)校驗(yàn)、失去焦點(diǎn)時(shí)校驗(yàn)和提交時(shí)校驗(yàn)，即時(shí)校驗(yàn)相對(duì)其他兩種效率更高，相應(yīng)的實(shí)現(xiàn)成本也較高。

校驗(yàn)的方式有：前端校驗(yàn)和后端校驗(yàn)。

• 前端校驗(yàn)一般是格式校驗(yàn)，如：是否包含特殊字符、格式是否符合要求等；
• 后端校驗(yàn)一般是數(shù)據(jù)校驗(yàn)，驗(yàn)證是否符合后端數(shù)據(jù)庫要求，這種成本相對(duì)大一些。

（2）錯(cuò)誤反饋

針對(duì)錯(cuò)誤反饋，需要注意以下幾點(diǎn)：

1. 要告知用戶錯(cuò)誤的原因并引導(dǎo)如何糾正；
2. 必要時(shí)給用戶提供推薦方案，如注冊(cè)時(shí)的用戶名推薦；
3. 提示文案注意友好性，盡量避免命令式文案，不要將責(zé)任推卸給用戶。

（3）正確反饋

錯(cuò)誤的操作需要反饋，正確的操作同樣需要。一方面給予反饋符合用戶的心理預(yù)期，另一方面能夠激勵(lì)用戶繼續(xù)操作完成任務(wù)。

在應(yīng)用場(chǎng)景上，正確的反饋適用于花費(fèi)時(shí)間、人力成本較大，要求比較復(fù)雜，操作難度較高的文本框，是對(duì)用戶正確操作的肯定；簡(jiǎn)單的操作不需要反饋，過多的發(fā)反饋對(duì)用戶體驗(yàn)是一種傷害。

4. 深入挖掘細(xì)節(jié)

（1）字?jǐn)?shù)限制提示

常見的字?jǐn)?shù)限制提示一般有兩種：一直顯示和超過一定閾值才提示的形式（如下圖）。

兩種形式運(yùn)用的場(chǎng)景有所不同，這里涉及到對(duì)于用戶的心流狀態(tài)的分析。

一直顯示的形式下，時(shí)時(shí)變化的數(shù)字是對(duì)用戶心流狀態(tài)的干擾和打斷，用戶的視線在輸入文本和數(shù)字提示上來回切換。這種比較適用于需要用戶仔細(xì)斟酌，謹(jǐn)慎輸入的情況，避免用戶隨心所欲的輸入達(dá)到自嗨的狀態(tài)。

到一定閾值才提示的形式，不會(huì)打斷用戶，用戶在輸入的過程中處于心流狀態(tài)。這類文本框在UGC類型的網(wǎng)站較多，鼓勵(lì)用戶生產(chǎn)、創(chuàng)作內(nèi)容。

（2）錯(cuò)誤反饋轉(zhuǎn)化為正確反饋

出現(xiàn)錯(cuò)誤會(huì)讓用戶產(chǎn)生負(fù)面情緒，即便通過友好的提示、幫助用戶糾錯(cuò)、情感化設(shè)計(jì)等途徑也只是緩解減少用戶的負(fù)面情緒。有些情況下，可以嘗試將錯(cuò)誤反饋轉(zhuǎn)化為正確反饋，從根源上避免用戶負(fù)面情緒的產(chǎn)生。

我們經(jīng)常碰到如上所示的文本框，針對(duì)復(fù)雜的要求可以進(jìn)行合理的拆分，使用戶更易于理解，減輕心理壓力和閱讀負(fù)擔(dān)，使得用戶更有心理預(yù)期，每達(dá)成一個(gè)條件都有相應(yīng)的反饋，對(duì)用戶也是一種激勵(lì)。

（3）敏感信息保存后進(jìn)行局部隱藏

除密碼外，涉及到用戶隱私的其他文本如銀行卡、身份證等信息也需要做隱私處理，用戶在編輯完成后，要對(duì)其中的敏感信息進(jìn)行隱藏，如電商平臺(tái)中收件人的手機(jī)號(hào)、支付寶中的銀行卡號(hào)等。

（4）密碼驗(yàn)證失敗后，由默認(rèn)的密文轉(zhuǎn)化成明文（移動(dòng)端）

移動(dòng)端的密碼輸入默認(rèn)狀態(tài)下為密文，當(dāng)驗(yàn)證失敗后，直接展示給用戶明文，方便用戶進(jìn)行查看和修改。

UI

1. Label

關(guān)于Label前文提到要足夠精簡(jiǎn)，多余的信息不要。如“我的電話”和“電話”。如果涉及到英文的Label，要避免全部采用大寫的形式，可讀性太低。

2. 文本框的長(zhǎng)度和寬度

單個(gè)文本框的長(zhǎng)度盡量根據(jù)字?jǐn)?shù)的多少定義，讓用戶在操作前便產(chǎn)生心理預(yù)期。字?jǐn)?shù)較多時(shí)采用文本域，文本域高度隨輸入內(nèi)容拉伸，根據(jù)頁面情況確定是否需要限制最大高度，如移動(dòng)端輸入框一般最高撐開5行。

3. 文本框之間的距離

注意文本框之間的距離，Label與輸入框之間的距離，Label之間的距離等。

4. 文本框顏色符合用戶認(rèn)知習(xí)慣

文本框的不同的狀態(tài)要對(duì)應(yīng)不同的顏色，及時(shí)反饋給用戶當(dāng)前的狀態(tài)。如正常情況下一般為灰色，藍(lán)色代表文本框被激活、處于輸入狀態(tài)，紅色代表產(chǎn)生錯(cuò)誤、異常，黃色代表警告和提示，綠色代表正確等。

總結(jié)

本文從交互和UI兩個(gè)方面入手，分析了提升文本框用戶體驗(yàn)的要點(diǎn)，由于篇幅稍長(zhǎng)，對(duì)以上組織結(jié)構(gòu)進(jìn)行整理回顧如下，期待大家共同交流。

本文由 @墨白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議