跳到主要内容

单页表单

在一个页面即可完成内容录入,例如新增单据。


页面结构

1.头部导航区域:主要用于明确当前位置,包含页面标题、返回按钮、功能按钮等,可配合标签栏固定于顶部。

2.表单区域:放置表单区域,尽可能使用统一布局的表单样式。

3.底部按钮区域:用户完成信息录入后,进行保存、提交、下一步等操作。

头部导航

始终固定在头部的导航栏或者标签栏。

表单内容

表单由数据录入和操作按钮构成,包含标题、标签、提示信息、输入区、操作按钮。

表单多数以卡片的形式呈现,可以很好的将信息进行分组,提高用户填写的效率。

基础式

基础表单,一般用于系统层面的简单输入。

线框式

常规的输入表单,一般用于单据输入等场景。

背景式

特殊场景下需要突出的表单样式,通常不超过三个。

底部按钮

当用户完成信息录入时,点击底部按钮进行提交、进入下一步等。

固定底部

底部固定操作按钮,用户无需上下滑动可随时点击,省时增效。适用于页面内容较多,必填项和选填项较为杂乱的情况。

跟随内容

表单内容较长且重要性较高,需要完成绝大部分的必填项,需要用户下拉到最后一个表单项时才能看到按钮,能起到一定的引导作用。

对于内容较少的表单,按钮最靠近内容,用户无需太大的视觉跳跃就能连贯地操作。

交互规则

  • 当用户在完成表单的过程中或已完成还未提交时需离开当前页面,为避免用户重复完成表单内容影响体验,我们需根据使用场景加入自动保存、手动保存、二次确认的交互方式。
  • 若表单选项太多且不可控,使用跳转页面的方式则体验更佳。

设计指南

表单设计
  • 当同一页面表单项过多时,需要根据类型、相似性或前后关系进行分组,以保持页面的节奏感,让用户在最短的时间内对整个页面内容有个大致的了解,从而能更轻松的完成表单。
必填项
  • 必填项尽量集中放在前面,非必填项放在后面,除非有逻辑依赖关系;如果重要性较低,就考虑舍弃。
保存按钮
  • 若表单选项很少,可在必填项填写完成前置灰主按钮。
  • 按钮的文案要能明确的告知用户操作的目的和功能。比如,按钮的功能是可以提交一个订单,那按钮的文案用“提交订单”好过“提交”。

何时使用

  • 内容较少,且结构简单的表单页面。
  • 表单在单个页面的的编辑模式(瀑布流卡片)。