B端产品中,一个较为重要的信息录入角色是文本输入框,输入框承载着一个页面内信息录入的主要入口。那么在输入框的设计中,我们经常遇到哪些问题,需要注意哪些事项呢?笔者根据网上的文章做了一些整理,供大家参考。

输入框的类型

一般输入框分为文本输入框和密码输入框,而文本输入框根据录入不同又有中文输入框、英文输入框、数字输入框等。
输入框在开发人员分解时,主要可以拆分为文本标签、输入框、占位符三个基本结构,此外还可能有帮助、提示和反馈等信息。

输入框设计的要点

输入框设计的时候,需要注意的要点有:

  • 表单标签的合理性
  • 输入限制
  • 占位符
  • 输入框的大小、焦点
  • 多行文本
  • 错误反馈
  • 换起键盘样式(移动端)
  • 帮助信息
  • 是否必填、规则判断
  • 结果反馈
  • 微文案

1. 标签

主要分为左右和上下结构,由于屏幕尺寸和空间占比原因,左右结构常见于 PC 端,但当标签名字太长时,也可以使用上下结构。

谨慎使用内部标签

内部标签只有提示性文字,当用户输入时,内部标签/文字就回消失,此时用户会失去判断的标准。当内容过多时,用户根本不记得自己填过什么。

尼尔森·诺曼集团的凯蒂·舍温(Katie Sherwin)在她上传的文章中提到将标签替换为占位符的七个不好的原因:

  • 消失的占位符文本会使用户的短期记忆紧张
  • 没有标签,用户无法在提交表单之前检查所填写的内容
  • 出现错误消息时,人们不知道如何解决问题
  • 当将光标放在表单字段中,占位符文本消失时,使用键盘导航的用户来说很不友好。
  • 其中包含的字段不太明显。
  • 用户可能会将占位符误认为是自动填写的数据
  • 有时用户必须手动删除占位符文本。

当然,以上原因并不全部适用,比如第六条,无论有没有标签,占位符都存在。
但在某些产品设计上,用户输入时,内部占位符会位移至输入框上,例如谷歌:
谷歌输入框的占位符设计

2. 输入限制

输入限制方式有两种,一是对表单域的信息进行字数限制,在输入框右下方可以显示当前字数和最大支持字数,例如 QQ 签名;二是属性限制,比如在数字文本框,禁止输入汉字或者字母。但有时候因为开发着急,会直接使用「input」的「text」类别,没有增加限制,这时候我们需要与开发沟通解决。

3. 占位符

占位符文字需要清晰明了、简短一致,颜色上不能使用太突出的颜色。
此外,在一个输入框可以输入多种类型信息的时候,例如用户名可以输入邮箱、手机号、QQ 等,可以使用占位符提醒。

4. 输入框大小

输入框在开发时,具有两个元素,包括外部的可视大小,内部有效输入框的大小。
输入框的域

设计时,需要考虑开发原因,标注输入框的大小与边距。而输入框有图标时,也应该注意图标与输入框的间距。

此外,需要根据输入文本的长度,合理设计输入框大小。

5. 输入框焦点

在用户准备输入的时候,焦点需要提供清晰的视觉定位。在输入框较多的时候,可以对输入框的样式做一些突出的改动,帮助用户清晰辨别。

6. 多行文本

多行文本出现在两个地方:标签和行内信息。

标签出现名字很长的时候,我们给文字设定宽度和行高,超出规定字数的做换行处理。
而行内换行时,我们需要给出横向字体宽度和上下间距。当内容过多时,一定内容下可以撑开输入框,但超出规定大小时,需要做隐藏处理。

7. 错误提醒

错误反馈需要及时、有效,而不是等用户耐心的填完所有表单,点击提交以后再进行。
因为用户在填写结束之后,大脑中分泌多巴胺,获得愉悦感,但在这个时候一个报错,把临到脑门的多巴胺给硬生生逼了回去,是很影响用户心情的,无论表单中所承载的信息有哪些,都应该让用户感受到引导感。用户所需要的是引导他完成表单的填写,而不是对他填写表单做判断。

8. 换起键盘样式

移动端设计表单输入的时候,都会弹起键盘,在不同场景下给用户换起不同的键盘,可以极大提高操作效率。
例如验证码、金融支付输入时弹出数字键盘、密码输入框弹起英文键盘等。
另外,在某些场景下,弹起的键盘可能遮挡关键区域,我们在设计的时候要考虑到。

9. 微文案

无论是以上任何情形,标签还是占位符,提示性文字还是错误反馈,表意必须清晰易懂,消除用户的疑虑,在整个流程中,让用户尽快做出准确的选择。

例如关闭时,弹出弹窗进行确认,是否要取消时,一个是确定,一个是取消,就会产生歧义。

更多关于微文案的内容,可以参考下文:微文案设计指南

特殊输入框的处理

1. 电话输入框

电话通常分为国家地区、区号、手机号。

2. 身份证/银行卡输入框

此类输入框可以结合输入、输入自动填充、扫描、图片识别等功能,减少用户操作。

3. 密码输入框

密码输入有两种形式,一是直接输入以「*」显示,从开始到结束,如果没有查看密码,就不知道自己输入是否正确;二是输入的时候明文显示,1~2s 后进行隐藏处理,这样可以减少用户的使用成本。
另外就是,一旦有密码,就必须有确认密码进行校正,减少用户错误率。

4. 邮箱输入框

邮箱输入时,适当加上后缀选择,可以减少用户输入。

本文参考链接:万字干货!帮你彻底完整掌握表单设计方法(上)



设计      输入框 B 端产品

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!