网站建设中如何设计输入框?
输入框几乎每天都会接触到,但是看似简单的输入框,你真的会设计吗?不知道各位在网站建设过程中做设计的时候,是不是经常觉得自己做得很完善了,几乎没差什么逻辑或或者是图,但是往往后期开发在实现功能的时候,会发现某个地方缺了一张空页面,还有一些地方少了一些状态等。 在设计的过程中,特别是新手设计师通常会有如下做法:如果是要做一个输入框,那他的交互稿或者视觉稿中就只呈现出来只是一个输入框,并且这个输入框只有一个种状态,那就是正常可输入的状态。但是如果这个设计师考虑得比较全面的话,那么他会想很多问题。1. 开始输入 开始输入后,提示文字消失。也有一些输入框是没有上方提示的,在输入时可能会造成用户不知道输入规则或者需要输入的内容是什么。在开始输入的阶段,要给出此状态下的提示,以及光标的位置。2. 输入部分数据后 输入部分数据后,通常输入框右侧会出现一个快速删除全部的图标,方便用户快速删除所输入的数据,而不是仅能依靠键盘上的删除按键一个个数据删除。3. 固定字符数量 当输入的账号的字符数需要在某个范围内的话,建议加上字符的提示,用户可以清楚的知道自己输入了多少个字符,还有多少可以输入。4. 指定账号的输入 通常在一些应用/网站中,会指定一些特殊的账号输入(后台较多)这时候为了防止用户输错,会在输入框预置前缀或者是后缀,用户只需要输入可变部分即可,简化了操作,降低错误率。5. 即时校验 现在使用很多应用或者是网站上会有即时校验的功能,当用户输入时,如果账号正确/错误,都会即时给出提示,以便用户进行下一步操作。6. 异常提示 异常提示包括账号不存在(未注册)、用户填写错误、字符位数超过限制等情况,这时候就需要给用户正确的提示,让用户快速更正所填的账号。7. 特殊字符处理 在输入框中特殊字符一般包括@ 和. 等,一般用户输入@可能是要输入邮箱,输入.有可能是网站后缀。所以**提供快速输入的方法,让用户减少输入的字符。8. 特殊账号的输入 如果是电话号码或银行的输入,这种相对长一些的数字输入,尽量按照用户习惯的规则划分,如果将所有数字连着一起就会比较容易输错。9. 是否提供选择输入