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