教你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)
發(fā)布時(shí)間:2022-01-05 11:01 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

在設(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ù)限制


字?jǐn)?shù)限制的場(chǎng)景經(jīng)常出現(xiàn)在用戶昵稱(chēng)、簡(jiǎn)介等。

如下圖微博他人主頁(yè),如果昵稱(chēng)不做限制的話,會(huì)導(dǎo)致一行無(wú)法全部展示。那么處理方式只能打點(diǎn)展示或換行展示。

用一篇文章,讓你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)

如果打點(diǎn)的話,那么用戶無(wú)法看到完整的用戶昵稱(chēng)。

換行的話,展示效果很差,視覺(jué)上很不美觀。


字?jǐn)?shù)定義


按照技術(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)邏輯的定義。

用一篇文章,讓你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)

為了讓用戶不產(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ù)處理。

用一篇文章,讓你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)


字?jǐn)?shù)限制交互方案


當(dāng)字?jǐn)?shù)達(dá)到了限制字?jǐn)?shù)時(shí),一般有兩種交互方式。

一種是直接不讓用戶輸入。如下圖所示:

當(dāng)達(dá)到限制字?jǐn)?shù)時(shí),用戶輸入的文字,無(wú)法展示出來(lái),并通過(guò) toast 提示用戶。

用一篇文章,讓你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)

另一種方案是,允許用戶繼續(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ù)限制的交互設(shè)計(jì)


最優(yōu)交互方案

.

文本字?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í)。

如下圖所示:

用一篇文章,讓你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)

個(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ì)受到此影響。

用一篇文章,讓你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)

這時(shí)候就需要 iOS 開(kāi)發(fā)單獨(dú)處理,將鍵盤(pán)上的漢字實(shí)時(shí)同步到文本框中,就可以解決這個(gè)問(wèn)題。


總結(jié)


文本框字?jǐn)?shù)限制最佳交互方案如下圖所示:

用一篇文章,讓你搞透文本字?jǐn)?shù)限制的交互設(shè)計(jì)

當(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í)同步到文本框中。

HTML基礎(chǔ)視頻教程
我要自學(xué)網(wǎng)商城 ¥30 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC