用户经常需要创建或编辑一个实体对象，这可能涉及到简单或复杂的需求，本文档将探讨该模式的种种形态，包括：局部列表，对话框，抽屉，完整页面。

设计目标

帮助用户轻松、快速地完成实体的新增和编辑，简化填写流程。

设计原则

• 自然

根据所需填写信息的内容量、操作与上下文的连贯性要求，选择最自然恰当的新增/编辑方式。

• 高效

提供多种新增方式，允许用户不从零开始填写新增实体的信息，从而高效创建。

• 安全感

合理的操作后果保障机制，例如针对复杂表单提供分步或即时保存机制；针对不同场景任务提供返回、重置、取消、清空、撤销等便捷功能。

典型模板

概览

本文档不覆盖所有的可能性，但会逐步扩充项目中遇到的场景。
类型与大致用法可参考下表，其中带星号“*”的表示可以该类型可以与其他类型结合使用。

局部列表新增和编辑

当表单中的某种数据类型对应着多条数据时，可根据单条数据的字段数量以及可能的条目数量来选择合适的录入方式。当多条数据的内容可能有所重合时，建议加入“复制”操作，允许用户通过在已有条目的基础上微调来完成实体的新增。

单行录入

字段较少，且无需文本标签解释字段含义时，可使用虚线按钮来增加单行数据，直接在行内编辑，支持删除。

可编辑表格

字段数量在2～5项，需要文本标签解释字段含义。使用虚线按钮来增加单行数据，直接在行内编辑，支持删除。

折叠面板

字段数量在6～8项，可使用折叠面板来收纳单条数据。

抽屉

字段数量多于8项，可使用抽屉来收纳单条数据。

整体新增和编辑

对话框

对话框通常用来针对数量有限的输入项进行新建及编辑，
用户需要一次完成所有字段的编辑并提交，对话框通常不支持暂存操作。

输入项相对较多的情况下，可以考虑2列布局，并对字段进行分组及归类，如下图

一般弹窗的主操作为2项：‘完成’及‘取消’，
某些特殊场景下，除了‘完成’与‘取消’操作，还可支持用户连续进行新建操作，即继续通过弹窗来新建item。
弹窗底部的操作为3项：完成并继续添加（主操作），完成，取消

抽屉

对于较为复杂，字段较多的新建及编辑场景，抽屉是更为合适的方式。
编辑字段较多时，抽屉支持滚动，也可以考虑2列布局。

完整页面

在新页面进行新建和编辑，离开了原来的上下文环境，较为适合输入项较多，需要用户集中精力，花费较长时间编辑的场景。由于用户可能无法一次完成较多的编辑工作，一般支持暂存操作。

也很适合多步骤的编辑场景。

分步的流程

除了上文提到的页面的多步骤场景，抽屉模式也可以支持多步骤的场景。
完成第一步操作后，点击下一步，抽屉内容切换。

通过复制或使用模板来新建

在特定的场景中，用户在新建的时候，可以通过模板或直接复制原来的item来创建。

并列展示多种创建方式：

在列表中复制单条数据：

在新建时允许继承已有模板：

设计建议

选择合适的打开方式

当需要整体新增或编辑一个实体对象，选择打开方式有以下考虑的角度：

1. 内容量：

新建页 > 抽屉> 弹窗
页面内容量影响呈现形式。
通常内容宽度有限、长度较长（表单条目数量大于8项）时，使用抽屉较为合理。内容宽度较宽、表单条目数量不多时，弹窗形式更为合理。而新建页合适宽度与长度同时较大的页面。
不过，近年来超宽抽屉、超大弹窗在B端产品中的出现频率也逐渐增多，可结合对上下文连贯性的需求综合考虑。

1. 上下文连贯性

抽屉>弹窗>新建页
如果用户在填写表单时希望能和页面中其他实体作对比，或者可能会接连新增或编辑多个实体的详情内容，那么抽屉的形式会更加适合。这种情况下，建议对抽屉内容做即时保存或暂存处理。
如果创建一个实体时只需要专注于实体本身的情况，不需要和页面中其他实体对比，且内容量较多，则适合以新建页面的方式来填写表单内容。

以上两个角度的概览可参考表格（对勾数量代表强弱/大小程度）：

|

从一致性的角度考虑，新增实体和编辑实体似乎应当采用相同的打开方式。但对于复杂的实体对象，编辑时可能只允许编辑一部分数据，其他数据在初始化时已经固定、不可更改；或者用户可能会频繁地修改大量的字段，也就是需要对单个字段即时修改并保存。此时新增和编辑的方式天然地不同。
查看实体详情的方式与编辑方式未必相同，尤其当表单内容复杂时，可以从详情抽屉跳转到新页面中进行编辑。
对于同一个实体，可能有多种查看详情的方式，同时也就可能对应了多种编辑它的方式。只要这种方式是容易理解的，就是合适的，而不需要拘泥于唯一固定的编辑方式。
案例：通过抽屉或新页面来编辑实体

在对话框/抽屉中新建一个实体

在复杂系统中，经常会碰到似乎需要在弹窗或抽屉中叠加一个弹窗的情况，例如在设置实体A的属性B时，发现需要新建一个对象b1，而新建b1可能也会是有一定复杂度的表单。
原则是避免弹窗上叠加弹窗的情况发生，转化思路大致有两种：使用非模态弹窗轻量地增加；前置关于属性B的配置方式。
使用非模态弹窗，往往是采用气泡卡片的方式，在弹窗或抽屉中直接简略地新增属性B的对象b1，从而满足当前实体A的设置。

前置关于属性B的配置方式，则是指在当前对话框中，先让用户判断是否需要新建B的对象，从而开辟两条分支：若已经有B的可选对象，则直接选择；若没有B的可选对象，则将新建B的表单加入当前的对话框。

考虑更简便的新增/编辑方式

用户希望能立刻完成一个实体的新增，而不是从零开始，或是一次性填写大量内容。建议准备好现成的模板，允许用户直接复用，或从外部导入信息。
如果实体确实带有很多属性，可以在初次填写时，只要求必填少量的关键字段，允许用户后续按需补充其他字段。
用户是否可能需要对多个对象进行相同的编辑？如果可能，请在设计时允许批量编辑共同属性。
常用简化方式：

• 省略非必填项（例如，将非必填项收纳到“高级配置”的模块中，或区分“快捷”和“详细”两种填写模式）
• 提供模板
• 允许复制已有实体对象
• 允许从外部导入数据
• 允许批量操作

案例：Teambition在任务中支持简略地添加子任务（仅输入任务标题），通过点击下钻来编辑更多的字段。

案例：省略非必填项，收纳在“高级设置”中。

关联模式或组件

详情页｜查看实体的详细信息
表单页｜数据的录入
批量编辑 （TODO）

扩展阅读

HUX设计模式库. 《表单页 | 数据的录入》可编辑列表 https://hux-design.yuque.com/xq16l6/eklapq/mf2suc#DfBSM
SAP. Simple Object https://experience.sap.com/fiori-design-web/manage-simple-objects/
SAP Fiori Design Guidelines. Object Handling (Create, Edit, Delete) https://experience.sap.com/fiori-design-web/manage-objects/
IBM Carbon Design. Create Flows https://www.carbondesignsystem.com/community/patterns/create-flows/
Salesforce Design Guidelines. Builder - Click to create https://www.lightningdesignsystem.com/guidelines/builder/click/#site-main-content
IBM Carbon Design. Common Actions https://www.carbondesignsystem.com/patterns/common-actions/