北京中科刘云涛 http://www.csjkc.com/zjtd/m/421.html输入框几乎每天都会接触到,但是看似简单的输入框,你真的会设计吗?
输入框的组成部分
输入框包含的内容有三种:载体、文本、图标,细分下来是这样的:
l文本:包含标题,占位符,帮助,反馈;
l载体:文本框;
l图标:展示型图标,操作型图标,反馈型图标。
不同类型的输入框组合
组合一:文本框与标题组合
组合能确保用户知道需要在文本框中输入什么信息,虽然看起来很简单,但排版上需要注意多列内容如何正确展示,涉及到用户的眼动行为。
上面五种文本框与标题的排列是最常见的,不同的排列方式各有利弊。
除此之外,我们有时还会加入占位符、帮助、默认提示来增加输入框的体验:
组合二:文本框与图标组合
图标可分为展示、操作、反馈三类。最早出现,最为常见的是展示型图标,
展示型图标:通常用它代替标题,如:电话、邮箱等容易表达的图标。
但用户个体认知差异,可能没办法猜测图标到底是什么意思,因此,现在很多产品开始在输入框里去掉展示型图标。
反馈型图标:如填写完内容系统开始校验,并给出的反馈图标。
操作型图标:常见的要数清除
我们再总结一下输入框包含的内容:
l标题:应该始终可见。
l载体:文本框,样式可根据场景变化。
l占位符:可作为提示,也可以提供默认值。
l帮助提示:内容多可拆分,也可以融入操作图标中。
l反馈提示:有正确与错误两种
l图标:展示型图标,操作型图标,反馈型图标
输入框设计的8种情况
↘开始输入
↘输入部分数据后
↘固定字符数量
↘指定账号的输入
↘即时校验
↘异常提示
↘特殊字符处理
↘特殊账号输入
↘是否提供选择输入
开始输入
开始输入后,提示文字消失。也有一些输入框是没有上方提示的,在输入时可能会造成用户不知道输入规则或者需要输入的内容是什么。
在开始输入的阶段,要给出此状态下的提示,以及光标的位置。
输入部分数据后
输入部分数据后,通常输入框右侧会出现一个快速删除全部的图标,方便用户快速删除所输入的数据,而不是仅能依靠键盘上的删除按键一个个数据删除。
固定字符数量
当输入的账号的字符数需要在某个范围内的话,建议加上字符的提示,用户可以清楚的知道自己输入了多少个字符,还有多少可以输入。
指定账号的输入
通常在一些应用/网站中,会指定一些特殊的账号输入(后台较多),例如某种特定格式的前缀或者是后缀,如KK开头的工号,或者是某种邮箱账号后缀。这时候为了防止用户输错,会在输入框预置前缀或者是后缀,用户只需要输入可变部分即可,简化了操作,降低错误率。如下图所示给出固定的后缀
qq.