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

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

因為相對于其他的人機界面交互方式來說，輸入成本是最大的。

結(jié)構(gòu)

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

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

交互

1. 正常狀態(tài)

（1）標簽Label與輸入框的位置

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

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

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

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

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

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

（2）提示信息的位置

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

常用于以下兩種情況：

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

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

Label和提示信息應當做到“精”、“簡”、“短”的要求，避免冗長的文案造成閱讀和理解壓力。

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

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

2. 輸入狀態(tài)

（1）輸入法則

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

（2）輸入源

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

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

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

移動端由于輸入不便，修改成本高，一般情況下默認為密文，點擊icon可顯示明文。PC端一般只有密文形式，不支持明文，一是因為PC端使用鍵盤輸入，錯誤率很低，二是考慮到他人借用電腦時密碼的安全性。

3. 反饋狀態(tài)

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

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

校驗的方式有：前端校驗和后端校驗。

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

（2）錯誤反饋

針對錯誤反饋，需要注意以下幾點：

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

（3）正確反饋

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

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

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

（1）字數(shù)限制提示

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

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

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

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

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

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

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

（3）敏感信息保存后進行局部隱藏

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

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

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

UI

1. Label

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

2. 文本框的長度和寬度

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

3. 文本框之間的距離

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

4. 文本框顏色符合用戶認知習慣

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

總結(jié)

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

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

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