高效易用表单设计详细指南


表单是什么?

表单是一个包含表单元素的区域,使用表单标签(<form>)定义。

表单元素是允许用户在表单中输入信息的元素,主要负责数据采集功能。

表单页通常用来执行登录、注册、预定、下单、评论等任务,是产品中数据录入必不可少的页面模式。因此,舒适的表单设计,可以引导用户高效地完成表单背后的工作流程。——ANT Design


五大要素:标签,输入框,输入反馈,动作,帮助信息

1.标签:告诉用户表单问题是什么,要填写什么类型的信息;占位符文本(Placeholder text)—提示文本,位于表单文本框内,一般用于提示用户填写,开始输入时自动消失;

2.输入框:供给用户填写答案信息,收集用户输入的信息,每个字段包含着某一类型的信息(如姓名、性别等);

3.反馈:针对用户输入给出反馈;

4.动作:点击一个按钮或链接,执行提交表单操作;

5.帮助:为如何填写表单提供帮助。


关键:产品核心价值,最快得到所需

结果:表单简短,精简问题


为什么要简化表单?

减少认知负荷;对使用屏幕阅读器的用户更友好;处理错误、更改细节更容易,降低用户放弃的可能性;页面加载更快;易于追踪行为和过程,为分析提供数据;滚动操作减少,甚至被消灭;用户对数据更有掌控力。


如何设计表单?

在填写表单之前:

给用户明确期望的进程提示,表单起始页提示用户要做什么准备,比如身份证、驾照、护照、银行卡等,不要等到后期发现缺失必要信息而无法继续。

宏观排序:

1)按逻辑排序,条理清晰组织字段区域,如按时间,首字母。

2)由易至难,让用户适应提问的氛围,逐步融入再仔细思考较难问题。

3)与当前情境最相关的问题优先,可选问题放在最后,减少侵略性,这些问题可能会得到更多照顾。


一.标签

Tips:

1. 避免将标签作为占位符,占位符不可替代字段标签,建议使用浮动(或自适应)标签floating labels,占位符文本(提示文本)一般来说它弊大于利。标签作为占位符文本,输入时提示文本自动消失,容易造成用户短期记忆的压力以及错误;

NN Group的研究表明空字段对比有文字的字段更吸引用户注意,用户更可能跳过那些有提示文本的字段,因为扫描式的浏览很容易误会框内已经被输入了文字。

占位符文本可以使用比普通的文本更浅的颜色,但容易导致对比度不符合W3C Web内容的可访问性指南(正常文本比4.5:1)。此外,占位符文本不支持辅助残疾人的设计(如屏幕阅读器),这会让这部分用户填写表单变得很困难。


浮动标签样式

2.标签的命名要易于用户阅读和理解,避免模糊的描述给用户造成困扰;正确区分必填字段和选填字段;

3.选择合适的对齐方式;

右对齐方式标签的表单浏览时间仅次于顶部对齐标签的表单,网页高度有限的话推荐这种对齐方式。采用左对齐标签方式的表单是三者之中浏览时间最长的,却能放慢用户的速度阅读,让其仔细考虑。

对齐方式


二.输入框

Tips:

1. 关联标签和输入框,给出具体的输入要求或特殊格式规范;内容长度和输入框长度保持对应,利用可供性暗示填写方式,为用户提供有意义的暗示;更大的文字输入框、适度的留白空间会让人更有填写的欲望。避免一些不必要的输入,减少用户对不必要问题的反感,提高用户满意度,降低操作的错误率。


可供性暗示

2. 输入框三种状态:普通状态、禁用状态(逻辑上先后关联的情况)、输入状态(高亮显示)。自由填写支持灵活多样的格式,提高容错率。

输入掩码(Input Masks)掩码字段能在用户填写时自动编排输入的文本格式,将关注的重点放在填写信息和查错上,适用于手机号、卡号等;

邮件地址字段中提供常见的域名后缀,输入@时,自动补充常见的后缀域名。

输入字段(Input Fields)触发对应键盘类型,如手机号、日期、邮编、卡号等弹出数字键盘


自动编排数字组合

3. 选择填充的表单格式(除了常规的文字框Text Field输入)可提供搜寻功能的下拉式选单,输入内容即时进行筛选、智能联想,输入与点选结合,快速方便。

常规选择填充方式:下拉框(dropdown list)、单选框(radio button)、复选框(checkbox);

衍生填充方式:滑块(Range/slider)、微调步进器(Stepper)、开关钮(Toggle switch)、Tab选框、搜索框等。

tips:TAB选项一次点选,效率高,选项低于6个可全部呈现;选择值只有2-3个时避免使用下拉框,建议使用单选样式。下拉框操作需点击两次,但包含多项选择时更节省空间。


时间选择器

4. 填写效率:自动填充 > 选择填充 > 自由填充

预填充(Pre-Fills)设计时可考虑:默认值、可选值、常用值、历史值、上次填充值

tips:

自动填写,利用浏览器保存并列举用户以前填写过的值,以实现自动个性化默认填写,敏感数据除外;

智能补充,根据地址得到邮编,根据身份证号码推测出生日;

基于定位,自动获取地理位置信息,这种预填充方式要允许用户进行微调和修改;

从更多的渠道搜集数据,第三方的帐号用户授权;

自动更正输入的拼写错误,特殊字段除外;

自动首字母大写,适用于填写姓名;

智能默认,设置满足多数人需要的默认选择,能为用户节省时间,提供参考意见保证默认选项符合大多数用户利益,比如默认用户同意条款。


默认勾选

三.动作

主动作:完成表单上最重要行为(完成表单)的动作。

次动作:与完成表单这一目标相悖的动作,比如撤销、返回、重置、删除等,当用户无意误操作时容易造成不可挽回的负面影响。

Tips:

1. 表述清晰的行为动作按钮;主要操作(主动作)和次要操作(次动作)可使用差异化的设计来区分,当表单中不可避免出现次动作时,应该尽量弱化次动作的视觉表现,将潜在出错率降到最低,引导用户完成任务流;表单未全部填写完时,动作按钮应为禁用状态,高亮和点击动作按钮也应给出相应的反馈;

2. 流程闭环,避免用户在中途跳出; 提供Tab快捷键跳转下一行;避免重置按钮和清空表单按钮,如果表单中含用户财务信息之类的敏感字段,可以提供一个“取消”按钮,让用户自行决定是否放弃表单填写。


主、次动作区隔

四.帮助

作用:有效说服用户填写表单,剔除负面干扰,消除用户疑问,在隐私保密或安全方面获取信任

Tips:

1. 不要隐藏基本的帮助文本,保证帮助文字简单简洁;

2. 合理地拆分步骤减轻填写的心理压力,相关信息分组;

3. 自动即时帮助,在帮助信息最合适的时间和位置显示帮助信息,如多次输错密码时,提示用户找回密码;

用户控制打开/关闭弹层,帮助文字区域体现相关性的同时不能遮盖其余的表单元素;

4. 适当的保留空间可视化图形作为引导,配合有趣的动画。


简洁的帮助提示文本


五.反馈

Tips:

1. 给予恰当的输入限制,限制用户的行为(如在预定机票时返回时间无法选择出发时间之前的日期,出发城市不能跟到达城市一样等),将表单填写规则标注在明显区域,或提供自动修正来预防犯错;

2. 用户填写完后即时校验,进行有效的拼写检查,名称,地址等特殊字段忽略此功能;指明出错的内容,让用户能及时修改、补充缺漏的信息,采用高亮且精准的错误呈现形式,如粗边框、粗体文字提醒、下划线、斜体,不局限于色彩这一元素;若包含多个错误反馈,可另外在顶部增加横幅统一列出全部提示;


错误反馈

3. 可将动作按钮、跳转过程、出错提示/完成状态提醒设计成合一的多态按钮,简洁实用。


表单内容设计之后:

视觉角度Tips:

1. 建立清晰的视觉线性流和完成路径,将所有字段如标签、输入框、主要动作按钮排成一个垂直单列,不要在表单中使用垂直分栏(列),多列布局会打断用户自上而下的阅读习惯;醒目的提交或完成按钮,放在用户的浏览线的终点更有利于用户的完成操作;

2. 将有关联的标注和字段在视觉上进行分组,保障可浏览性,专注当前表单任务;

3. 填写表单的界面,应该减少噪音,强调文字和背景对比,避免背景广告干扰,减少其他任务路径,避免用户退出表单填写。


背景干扰

极端场景角度Tips:

保存表单进度。当表单过长,一些特殊原因导致表单关闭,如网页崩溃、用户误操作,提供保存表单进度功能,再访问表单时保留上一次的填写进度。

推荐阅读更多精彩内容

  • 大屏千千万,有块是你做的。会Excel的分析师都可以设计一块给自己、给管理层、给业务相关同事或伙伴的大屏,数据大屏...
    totoroii阅读 93评论 0 0
  • 协作角色:交互、产品、开发、UI交互团队:优秀的交互文档需要在组内进行过审核,包括一致的撰写标准和模式的使用,需要...
    日暮山主人阅读 67评论 0 3
  • 写在文章之前 一个好的产品的诞生必定离不开一份高质量的原型图。原型图的设计师整个产品开发的核心,并且直接决定整个软...
    寒冰ODOT阅读 903评论 0 6
  • 设计规范一直是我们设计师需要关注的,毕竟设计规范能增强团队之间的协作能力、工作效率。设计规范如果考虑不到位,往往会...
    DY产品人阅读 1,883评论 1 28
  • 大家好,我是Clippp。今天为大家带来的文章是「极简主义」设计。日本极简主义盛行,这一点不仅单纯体现在生活中,在...
    Clip设计夹阅读 1,517评论 1 25