文本框作為日常工作中經常遇到的組件，其易用與否直接影響著用戶體驗，今天來探討下如何提升文本框的易用性。（我們常說的文本輸入有兩種，文本框和文本域，下文以文本框統稱。）
在開始設計文本框之前，要問自己三個問題：這個地方要實現什麼功能？必須以文本框的形式出現嗎？是不是有更好的替代方案？
因為相對於其他的人機界面交互方式來說，輸入成本是最大的。
結構
文本框的結構包括可見和非可見兩部分，可見部分通常由標籤Label、提示信息、輸入框、功能性圖標、內容、反饋六部分組成，非可見部分指文本框的校驗形式（即時校驗、失焦校驗、提交校驗）和校驗方式（前端校驗、後端校驗）。
下面我將從交互和UI兩個方面分析一下文本框正確的打開方式。
交互
1. 正常狀態
（1）標籤Label與輸入框的位置
Label與輸入框的位置關係主要有以下四種：
① Label與輸入框自上而下左對齊排列，瀏覽和輸入時，視線不存在左右掃描的情況，速度最快，常見於移動端。
② ③ Label與輸入框在同一水平高度上，Label對齊方式不同（左對齊和右對齊），常見於PC端，用戶以Z字形方式瀏覽和輸入，效率相對較低一些。對於涉及到安全、重要的信息，採用這種形式能夠減慢用戶輸入速度，降低用戶的出錯率。
④ Label在輸入框內以提示信息形式出現，這種看似簡潔又節約頁面空間的形式存在諸多問題：
- Label和提示信息會產生衝突，尤其當提示信息內容較多時；
- 當用戶的輸入被打斷或修改時，需要回憶Label是什麼，甚至需要刪掉已輸入的信息重新查看Label，成本太大；
- 給用戶造成產品不安全的感覺。
還有一種比較特殊的形式–浮動式標籤（如下圖），正常情況下Label在輸入框內，當激活輸入框時，Label變小浮動到框內左上角，常見於移動端較多，閱讀效率高，節約頁面空間；不足是在小屏幕下Label識別性較低，提示信息較多時，展示也存在問題。
（2）提示信息的位置
提示信息的位置一般有三種，如下圖所示。第一種一般用於對輸入內容有要求的情況，用戶需要邊輸入邊核對要求；第二種一般用於無約束條件的情況，Label的名稱足以提供給用戶有效的信息，用戶填寫出錯率較低時使用；第三種，提示內容隱藏在icon中。
常用於以下兩種情況：
- 提示信息內容很多，完全展示時已經對頁面整體效果造成了破壞；
- 重要程度相對較低，起到輔助作用的信息。
（3）Label和提示信息的內容
Label和提示信息應當做到“精”、“簡”、“短”的要求，避免冗長的文案造成閱讀和理解壓力。
（4）默認為激活狀態
新打開頁面時，文本框自動為激活狀態，簡化用戶操作路徑，用戶可直接輸入。這種形式常見於界面內只有一個文本框的情況。
2. 輸入狀態
（1）輸入法則
- 提示信息中要有明確的支持格式限定，如字母大小寫、下劃線、特殊符號等；
- 如果輸入框有明確的字符數限制，要給出明確的提示。字符限制有兩種類型：超過規定字數仍可以輸入，飄紅顯示超出多少字；達到最大字數時不能繼續輸入（如手機號輸入框）；
- 輸入信息後，要有一鍵清空的icon，尤其是針對操作不方便的移動端。
（2）輸入源
- 支持文本粘貼、複製、剪切等常規操作；
- 移動端激活輸入框時喚起鍵盤，喚起數字鍵盤還是中英文鍵盤要根據內容性質確定。如手機號、身份證號等應該直接喚起數字鍵盤，避免喚起中英文鍵盤後需要用戶手動切換到數字鍵；
- 為輸入框提供更便捷的輸入方式，如掃描銀行卡號的形式代替數字輸入，GPS定位代替地址輸入，遊戲中角色取名可通過搖骰子的形式隨機生成。
（3）特殊文本：密碼文本
由於明文的密碼會讓用戶感到不安全，因此在密碼上面添加遮罩形成了密文密碼。密文在用戶輸入錯誤時修改又比較麻煩，就出現了明/密文切換的形式。
移動端由於輸入不便，修改成本高，一般情況下默認為密文，點擊icon可顯示明文。PC端一般只有密文形式，不支持明文，一是因為PC端使用鍵盤輸入，錯誤率很低，二是考慮到他人借用電腦時密碼的安全性。
3. 反饋狀態
（1）關於校驗
校驗形式有三種：即時校驗、失去焦點時校驗和提交時校驗，即時校驗相對其他兩種效率更高，相應的實現成本也較高。
校驗的方式有：前端校驗和後端校驗。
- 前端校驗一般是格式校驗，如：是否包含特殊字符、格式是否符合要求等；
- 後端校驗一般是數據校驗，驗證是否符合後端數據庫要求，這種成本相對大一些。
（2）錯誤反饋
針對錯誤反饋，需要注意以下幾點：
- 要告知用戶錯誤的原因並引導如何糾正；
- 必要時給用戶提供推薦方案，如註冊時的用戶名推薦；
- 提示文案注意友好性，儘量避免命令式文案，不要將責任推卸給用戶。
（3）正確反饋
錯誤的操作需要反饋，正確的操作同樣需要。一方面給予反饋符合用戶的心理預期，另一方面能夠激勵用戶繼續操作完成任務。
在應用場景上，正確的反饋適用於花費時間、人力成本較大，要求比較複雜，操作難度較高的文本框，是對用戶正確操作的肯定；簡單的操作不需要反饋，過多的發反饋對用戶體驗是一種傷害。
4. 深入挖掘細節
（1）字數限制提示
常見的字數限制提示一般有兩種：一直顯示和超過一定閾值才提示的形式（如下圖）。
兩種形式運用的場景有所不同，這裡涉及到對於用戶的心流狀態的分析。
一直顯示的形式下，時時變化的數字是對用戶心流狀態的干擾和打斷，用戶的視線在輸入文本和數字提示上來回切換。這種比較適用於需要用戶仔細斟酌，謹慎輸入的情況，避免用戶隨心所欲的輸入達到自嗨的狀態。
到一定閾值才提示的形式，不會打斷用戶，用戶在輸入的過程中處於心流狀態。這類文本框在UGC類型的網站較多，鼓勵用戶生產、創作內容。
（2）錯誤反饋轉化為正確反饋
出現錯誤會讓用戶產生負面情緒，即便通過友好的提示、幫助用戶糾錯、情感化設計等途徑也只是緩解減少用戶的負面情緒。有些情況下，可以嘗試將錯誤反饋轉化為正確反饋，從根源上避免用戶負面情緒的產生。
我們經常碰到如上所示的文本框，針對複雜的要求可以進行合理的拆分，使用戶更易於理解，減輕心理壓力和閱讀負擔，使得用戶更有心理預期，每達成一個條件都有相應的反饋，對用戶也是一種激勵。
（3）敏感信息保存後進行局部隱藏
除密碼外，涉及到用戶隱私的其他文本如銀行卡、身份證等信息也需要做隱私處理，用戶在編輯完成後，要對其中的敏感信息進行隱藏，如電商平臺中收件人的手機號、支付寶中的銀行卡號等。
（4）密碼驗證失敗後，由默認的密文轉化成明文（移動端）
移動端的密碼輸入默認狀態下為密文，當驗證失敗後，直接展示給用戶明文，方便用戶進行查看和修改。
UI
1. Label
關於Label前文提到要足夠精簡，多餘的信息不要。如“我的電話”和“電話”。如果涉及到英文的Label，要避免全部採用大寫的形式，可讀性太低。
2. 文本框的長度和寬度
單個文本框的長度儘量根據字數的多少定義，讓用戶在操作前便產生心理預期。字數較多時採用文本域，文本域高度隨輸入內容拉伸，根據頁面情況確定是否需要限制最大高度，如移動端輸入框一般最高撐開5行。
3. 文本框之間的距離
注意文本框之間的距離，Label與輸入框之間的距離，Label之間的距離等。
4. 文本框顏色符合用戶認知習慣
文本框的不同的狀態要對應不同的顏色，及時反饋給用戶當前的狀態。如正常情況下一般為灰色，藍色代表文本框被激活、處於輸入狀態，紅色代表產生錯誤、異常，黃色代表警告和提示，綠色代表正確等。
總結
本文從交互和UI兩個方面入手，分析了提升文本框用戶體驗的要點，由於篇幅稍長，對以上組織結構進行整理回顧如下，期待大家共同交流。
題圖來自 Pixabay，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
