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