logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.26.0
  • Ant Design
    • 介绍
    • 设计价值观
    • 实践案例
  • 全局样式
    • 色彩
    • 布局
    • 字体
    • 图标
    • 暗黑模式
    • 阴影
  • 设计模式
    • 概览
    • 全局规则
      • 反馈
      • 导航
      • 数据录入
      • 数据展示
      • 数据格式
      • 文案
      • 按钮
      • 数据列表
    • 原则
      • 亲密性
      • 对齐
      • 对比
      • 重复
      • 直截了当
      • 足不出户
      • 简化交互
      • 提供邀请
      • 巧用过渡
      • 即时反应
    • 模板文档
      • 数据可视化页
      • 详情页
  • 设计模式 - 探索
    • 概览
    • 模板文档
      • 表单页
      • 工作台
      • 列表页
      • 结果页
      • 异常页
    • 全局规则
      • 导航
      • 消息与反馈
      • 空状态
  • 可视化
  • 动效
  • 图形化
设计目标
设计原则
Do & Don’t
如何设计
普通布局
任务拆解和编排
特定场景模板
设计建议
前期准备
布局方式
扩展阅读
会用到哪些模块或组件
外部参考文章

表单页

文档贡献者
  • 概览工作台

    相关资源

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design 语雀专栏
    Ant Design 知乎专栏
    体验科技专栏
    seeconf logoSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech logo更多产品

    yuque logo语雀-构建你的数字花园
    AntV logoAntV-数据可视化解决方案
    Egg logoEgg-企业级 Node.js 框架
    Kitchen logoKitchen-Sketch 工具集
    Galacean logoGalacean-互动图形解决方案
    xtech logo蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Ant Design 开源社区

    表单页是一种用于信息添加、录入的页面类型。用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。

    设计目标

    帮助用户明确当前页面任务,快速查找和定位修改目标,轻松准确地理解表单项含义及生效后果,同时简化填写流程,确保用户准确、轻松、快速地完成任务。

    设计原则

    高效

    通过合理的信息组织形式和表单组件的使用,使用户可以快速完成表单页任务。

    明确

    1. 快速定位重要信息和目标选项;
    2. 标题、选项、提示等内容准确传达含义;
    3. 让用户感知不同大小操作的前因后果,并及时响应相关反馈。

    安全感

    合理的操作后果保障机制,例如针对复杂表单提供分布或即时保存机制;针对不同场景任务提供返回、重置、取消、清空、撤销等后悔药和速效药功能。

    Do & Don’t

    在表单页中组织呈现各表单项时要注意简洁表达、高效准确,避免增加用户录入信息的成本。

    错误示范
    预览
    错误示范

    一个表单页中针对同一种内容类型的表单项不要使用不同的组件或表现形式,会增加用户理解成本。


    正确示范
    预览
    正确示范
    错误示范
    预览
    错误示范

    表单项的标题、提示不要使用不易理解的词汇或过长,造成理解成本,如不可避免使用少见词汇,可使用帮助说明等元素辅助设计。


    错误示范
    预览
    错误示范

    预填提示避免正确的废话,例如一个叫姓名的表单项输入提示是“请输入姓名”。


    如何设计

    表单类页面模板聚焦于提交一次表单的过程体验。按照任务的复杂度,提供四种解决问题的布局方式:

    • 普通布局
    • 任务拆解和编排
    • 特定场景

    普通布局

    平铺所有需要填写的信息,适合内容项较少、内容项无法按照相关性分组的表单。

    模板 - 基础表单

    预览

    什么时候用

    当需要完成一个简单快速的任务,例如输入少量信息即可完成创建。

    任务拆解和编排

    将大型、复杂任务拆解为多个部分,并按照相关性分组,减轻用户输入负担。尽管每部分内容单独处理,但最终一起完成提交。适用于大型、复杂表单。通过适当的任务分割,可以降低用户出错率。

    模板 - 基础分步表单

    预览

    什么时候用

    将用户需要填写和确认的信息按照线性流程组织,利用步骤条告知用户完整流程和进度,常常在最后提交前让用户再次确认信息,并在流程结束给与明确的结果反馈。适用于具有明确的线性逻辑的任务。

    模板 - 分组表单

    预览

    什么时候用

    单次任务的表单页中需要填写内容众多,且不同内容之中存在一定可分类归纳性。

    模板 - 可编辑列表(开发中)

    什么时候用

    预览

    动态增减:建议条目表单数 ≤3 项,并且每个输入框不需要单独的标题使用。


    预览

    可编辑表格:建议条目表单数 2 ~ 5 项 时使用,以使得每行内容可被完整呈现。


    预览

    折叠面板编辑:建议条目表单数在 6 ~ 8 项 时使用。


    预览

    抽屉编辑:建议条目表单表单数 >8 项 时使用。


    预览

    规则树:应用于规则编辑场景。

    适用于页面中需要添加一个或多个对象,且每个对象都需要添加或编辑多组数据的情况。

    特定场景模板

    模板 - 设置

    预览

    什么时候用

    个人档案、应用配置等设置类页面,使用频率较低,一般用户操作后不会频繁修改。

    使用建议

    每个页面选择一种设置模式:

    • 即时生效模式:用户在修改选项即生效;
    • 提交生效模式:当设置项之间有关联关系,使用提交生效模式。

    根据设置项数量确定是否需要分组:

    • 数量 <7 项,不建议分组;
    • 数量 7~ 15 个建议分组;
    • 数量 >15 个建议使用页签分组。

    模板 - 登录

    预览

    Ant Design 标准登录模板

    模板 - 注册

    预览

    Ant Design 标准注册模板

    设计建议

    前期准备

    • 表单页的核心由表单项组成,设计前建议先熟悉表单基础规则;
    • 梳理用户当前信息录入任务中所涉及的信息类型,并根据 Ant Design 数据录入规则 确定所使用的组件。

    布局方式

    在单个表单页中需要根据内容量进行合理地布局,以兼顾页面展示和用户效率。表单页布局可由简到繁划分为 4 个梯度,每一级梯度都兼容前一种布局方式。

    基础布局

    预览

    在一个区域内从上到下单列布局,引导用户纵向阅读,据研究这是能够最高效完成任务的布局方式。

    弱分组

    预览
    错误示范
    预览
    错误示范
    为避免和弱分组布局的阅读顺序混淆,一个区域内禁用多列表单。

    在空间有限时,较短宽度且具有相关性的表单项可多个组合在一行中,形成分组的暗示。

    区域内分组

    预览

    当一个区域中内容较多且可被分类归纳时,可通过区分标题来进行区域内分组。

    卡片分组

    预览

    当一个页面中内容众多(通常大于两屏)且可被分类归纳时,可通过卡片分组来承载,每个卡片需要包含一个大标题。

    判断布局方式

    预览

    关于使用何种布局方式的判断,和详情页类似,应从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板,进行页面快速搭建。


    扩展阅读

    会用到哪些模块或组件

    • 表单
    • 步骤条

    外部参考文章

    • Label Placement in Forms