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