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