输入框

作者: 丁颖 | 来源:发表于2021-09-01 21:58 被阅读0次

以上为Google的旧版输入框,容易让用户将这条线与分隔线混淆。标签文本(Label text)和输入内容也容易与正文混淆,尤其是在密集文字排版中。

经过Google用户体验团队测试发现,文本框的以下特征最能影响到用户判断:

1、矩形(框形)样式的封闭文本框的性能优于仅带有线条的文本框;

2、文本框应该带有有色填充和底部线条;或者空白填充,但需要有色描边;

3、文本框的底部线条与背景的颜色对比度最小应为3:1(关于颜色对比度相关话题,我会在后面写一篇文章细致讲解);

4、标签文本应放置在文本框范围内;

5、文本框应具有圆角(用户视觉喜爱度更偏好)。

文本字数限制

一般在单行显示的场景,如果不做限制,会导致一行无法全部展示,那么处理办法只能是打点或换行展示。打点会导致信息显示不全,换行展示会影响展示效果。

1、计数交互

有两种方案,一种是展示总字数和当前输入的字数。另一种是数字限制倒计时。如下图所示:

方案2最佳,交互逻辑更简洁。

2、超过字数的校验

方案1: 允许用户继续输入,当用户提交时,进行校验

方案2:直接不让用户输入。当达到限制字数时,用户输入的文字,无法展示出来,并通过toast提示用户,如“昵称最多可输入15个字”

方案2更佳,方案1允许用户继续输入,点击提交才发现超过字数,需要再删除,这对用户来说是精力的浪费。

相关文章

  • 关于输入框的细节

    1、输入框类型:包括信息输入框、注册、登录输入框、搜索输入框、原创输入框、对话输入框以及其它; 2、文本输入框使用...

  • 几个关于输入框的细节

    输入框的类型包括信息输入框、注册、登录输入框、搜索输入框、原创输入框、对话输入框等。文本输入框使用场景多,交互频次...

  • react 输入框双向数据绑定、设置输入框默认值、获取输入框中的

    一、 输入框双向数据绑定 二、 设置输入框默认值和获取输入框中的值 设置输入框默认值 获取输入框中的值

  • 微信小程序input的type类型

    text 文本输入框 number 数字输入框 idcard 身份证类型的输入框 digit 带小数点的数字输入框

  • set FastInputIME failed. use "d(

    必须在输入框才能清空输入框

  • web测试方法

    Web测试方法总结 一、输入框 1 1、字符型输入框:2 2、数值型输入框:2 3、日期型输入框:2 二、搜索功能...

  • Tailwind Component

    按钮(button) 带符号的按钮 输入框(input) 普通输入框 邮箱输入框 文本域(textarea) 搜索...

  • 文本输入框

    语法: 1、type:当type="text"时,输入框为文本输入框;当type="password"时,输入框为...

  • 测试总结

    输入框 字符型输入框 字符型输入框:英文全角、英文半角、数字、空、空格、特殊符号“~!@#¥%……&*?[]{}”...

  • 手机小程序灵感记录之二

    实用工具-RGB调色板 界面内容:R值输入框,G值输入框,B值输入框,最终颜色编码输入框,颜色显示,颜色组合按钮,...

网友评论

      本文标题:输入框

      本文链接:https://www.haomeiwen.com/subject/rcpfwltx.html