前言

键盘输入相对于点击选择来说,是一种操作成本很高的动作。输入格式错误、输入内容超出范围、内容删除方式(是否需要一键清空),都是值得探讨的点。本文将分类讨论关于文本框输入超出限制时的一些状况和思考。

基础篇:

什么场景下需要/不需要设定输入限制?为什么?

短文本场景:

需要进行输入限制(如常见的账号、密码、标题等)

文本框输入超出限制怎么办?我总结了这3个方面!

原因分析:

  1. 认知层面:减少浏览时的认知和记忆负担
  2. 语义层面:比如商品名,本质是形容词+名词的结构,理应不会太长
  3. 阅读层面:移动端屏幕空间有限,用户注意力难以集中,不必要的长文本根本不会被读
  4. 展示层面:简单粗暴,文字太长会放不下

长文本场景:

需要分类讨论,有限制和无限制都有可能。

文本框输入超出限制怎么办?我总结了这3个方面!

有输入限制的原因:

  1. 可能是为了营造一种更轻量的阅读和表达体验。如微博之于博客。
  2. 避免过度描述,读者的注意力不够支撑,意义不大。

文本框输入超出限制怎么办?我总结了这3个方面!

无输入限制的原因:

  1. 无法预测用户将要输入的信息量,因此不设限制,让用户畅所欲言。
  2. 用户输入的信息与业务密切相关,如商品评价会对商品成交有显著影响,因此不应该限制用户的点评。

如果不需要输入限制,有哪些交互方案可选?

文本框输入超出限制怎么办?我总结了这3个方面!

不论是单行输入或是多行输入,输入框的高度都不发生变化。常见于搜索模块和点评模块。

文本框输入超出限制怎么办?我总结了这3个方面!

随着输入内容的增加,输入框的高度也相应增加。由于键盘占据一定高度,因此要设定输入框高度的最大值。

如果需要输入限制,有哪些交互方案?

文本框输入超出限制怎么办?我总结了这3个方面!

直接无法继续输入内容,无提示。见于微信的设置备注与设置名字。

文本框输入超出限制怎么办?我总结了这3个方面!

当输入量濒临极值时,出现高亮的字数提示,在不打断用户的输入流程的情况下,用较为安静的方式提示用户。

文本框输入超出限制怎么办?我总结了这3个方面!

当输入量超出最大值时,可以考虑用:

  1. toast 提示,告知用户已经超出字数(抖音)
  2. 用高亮文案告知用户,已经超出范围,需要删除部分内容(脉脉)
  3. 当用户点击行动点后,方才提示用户字数超标(朋友圈)

三种方式的强调程度:高亮文字 < toast < 对话框

分段提示

文本框输入超出限制怎么办?我总结了这3个方面!

微博采用了分段的形式进行提示:

  1. 正常范围,字数弱提示
  2. 超出 140 字,字数高亮
  3. 字数来到第二档位,提示转为头条文章
  4. 超出字数上限,点击发布后,会有对话框提示

总结

虽是非常细小的交互点,同样需要仔细思考,把场景分析清楚。让设计更加有理有据。

感谢阅读。

欢迎关注作者微信公众号:Change Design

文本框输入超出限制怎么办?我总结了这3个方面!

收藏 63
点赞 41

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。