输入框

2021-09-01  本文已影响0人  丁颖

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

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

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

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

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

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

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

文本字数限制

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

1、计数交互

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

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

2、超过字数的校验

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

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

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

上一篇 下一篇

猜你喜欢

热点阅读