在設計工作中，會經常遇到文本字數限制的功能設計，這個小功能看上去很簡單。但是有很多值得注意的點。
本篇文章是文本框字數限制交互設計方案的講解。文章大綱如下：
- 為什么要字數限制
- 字數定義
- 字數限制交互方案
- 最優(yōu)交互方案
- 總結
字數限制的場景經常出現在用戶昵稱、簡介等。
如下圖微博他人主頁，如果昵稱不做限制的話，會導致一行無法全部展示。那么處理方式只能打點展示或換行展示。
如果打點的話，那么用戶無法看到完整的用戶昵稱。
換行的話，展示效果很差，視覺上很不美觀。
按照技術開發(fā)定義來看：一個漢字=2 個字符，一個字母/數字=1 個字符。
但這種定義用作于普通用戶的話，會難以理解。
如下圖，昵稱限制 30 個字符，輸入一個漢字，計數顯示 2，明明輸入了 1 個字，怎么顯示 2？可能會覺得是軟件有問題。其實他很難理解，這是開發(fā)實現邏輯的定義。
為了讓用戶不產生疑問，理解起來更簡單，絕大部分 app，都將一個漢字、數字或者字母都當作 1 個計數處理。
如下圖所示。昵稱限制字數為 17 個字，當輸入一個漢字、數字或者字母時，當作 1 個計數處理。
當字數達到了限制字數時，一般有兩種交互方式。
一種是直接不讓用戶輸入。如下圖所示：
當達到限制字數時，用戶輸入的文字，無法展示出來，并通過 toast 提示用戶。
另一種方案是，允許用戶繼續(xù)輸入，當用戶提交時，進行校驗，同時出現提示告知用戶，昵稱超過限制字數。
如下圖所示：當用戶昵稱超過 18 個字符時，點擊保存，出現對話框提示，告知用戶，昵稱不能超過 18 個字符。
文本字數限制的交互主要由兩部分組成，一部分是字數定義和計數交互，另一部分是超過字數校驗交互邏輯。
對于字數定義和計數邏輯。有兩種方案，一種是展示總字數和當前輸入的字數。另一種是數字限制倒計時。
如下圖所示：
個人以為使用方案 2 最佳，交互邏輯更簡潔。
方案一中，當數字到達限制時，給予紅色標記或不紅色標記都不太完美自洽。對于超過字數校驗交互邏輯。個人覺得最佳方案是：超過字數不允許用戶輸入，這樣可以降低用戶操作失敗的成本。如果允許用戶繼續(xù)輸入，點擊提交才發(fā)現超過字數，需要再刪除，這對用戶來說是精力的浪費。
當超過字數不允許用戶輸入時，會出現一種情況，在 iOS 原生輸入法中，一次性輸入字數較長，就會在文本框里面變成字母。
如下圖，微信昵稱設置就會出現這種情況。安卓用戶以及 iOS 非原生輸入法不會受到此影響。
這時候就需要 iOS 開發(fā)單獨處理，將鍵盤上的漢字實時同步到文本框中，就可以解決這個問題。
文本框字數限制最佳交互方案如下圖所示：
當字數超過限制時，不允許用戶輸入，同時出現 toast 提示：昵稱最多可輸入 15 個字。對于 iOS，需要開發(fā)單獨處理，將鍵盤上的漢字實時同步到文本框中。
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。