编辑功能的设计：你必须知道的三个关键点

最近对于编辑功能做了一个简单的产品调研，然后惊讶地发现，

现在市面上流行的编辑功能样式尽然有十几种

单纯从数量上来看，造成编辑样式如此多的原因，在于所对应的业务的多样性。

但如果跳出业务层面，仅从产品层面来看待这些编辑功能

“在这些编辑功能背后，是否存在着共性的设计呢？”

或许我们可以从以下三个方面进行一番探索：

• 如何触发？
• 如何展示？
• 如何保存？

一、如何触发

用户在使用某款产品时，最为常见的页面状态为“查看态”

与这一常规状态相比，“编辑态”则是一种非常规状态

而这一非常规状态的触发，则是需要一个前置的交互操作的。

作为编辑功能的一部分，这一交互操作本身与页面内容并没有太多的逻辑关联性

所以在实际使用的过程中，很容易作为干扰项，影响用户当前的阅读进度。

那么为给予用户更好的使用体验，应该如何设计这一前置的交互操作呢？

“明确阅读体验与编辑需求的优先级”

“查看态”与“编辑态”并不是一对相互对立的状态，相反，这两种状态是可以共存的，而通过需求优先级的排序，可以帮助我们确定触发操作的交互比重，从而保证当前用户阅读需求与编辑需求的平衡。

1. hover态

常规状态下，页面只是单纯的文案展示

当鼠标hover到内容上方后，对应的内容尾部就会显示“编辑”按钮，点击后

当前字段就可切换至可编辑状态。

显然，对于hover态的触发方式来说

其最大的优点就在于：“将选择权交还给用户”

用户可以根据自己的需求，主动选择按钮的显隐

这样就可以极大程度的减少前置交互操作，对于用户阅读体验的影响。

hover态的缺点：“触发方式不易发现，导致编辑功能被忽略”

hover态轻量级的触发方式，将选择权交还给了用户

但具体的触发过程，则需要用户将鼠标移动到具体内容上

并且对于这一操作，页面上也不会有对应的提示

这样很容易就会导致，编辑功能被完全遗忘。

意见与建议：

• 如果需要编辑的字段比较重要，或者用户对于当前内容编辑的可能性较高，hover模式的编辑触发方式，不建议使用
• 如果只是有简单的编辑需求，并且所编辑的字段不是很重要，那么为了用户阅读体验的流畅性，可以考虑这种触发方式

2. 外显态

常规状态下，编辑按钮直接外显，与页面内容同级，点击按钮后，可进入到编辑状态中，这种外显态的触发方式，其优缺点也十分的明显。

优点：减少用户使用路径

按钮外显，用户不需要进行鼠标hover，直接点击编辑按钮，从而进入到编辑态，这样使用户更容易触达编辑态，整个流程简洁高效。

缺点：干扰阅读进度，增加用户阅读理解成本

编辑按钮与页面内容，本身并不存在多少的逻辑关系，编辑按钮对于用户“阅读”这一行为来说，就是一个干扰信息。

干扰信息的存在，就会徒增用户的阅读理解成本，干扰用户阅读进度。

意见与建议：

• 如果当前页面的内容，用户有很大概率编辑，建议使用外显态的触发方式
• 如果用户需要编辑的内容信息比较重要，建议使用外显的触发方式
• 不适合那些以阅读、查看为核心需求的场景使用

二、如何展示

在选择了触发方式之后，点击对应按钮就可以切换至编辑状态，而这个编辑状态，应该如何展示呢？

1. 当前页面

点击编辑按钮后，当前页面中对应的字段，就会自动切换到编辑状态

而这些可以在“当前页面”被编辑的内容，其自身也具有一些特点：

• 所编辑的内容逻辑单一，一般不会出现级联编辑的操作
• 所编辑的内容简单，没有复杂的交互逻辑
• 所编辑的内容样式简单

像知乎所设计的编辑模块，在当前页面进行的编辑，就是简单的文字输入修改

并且在编辑的过程中，不会产生新的级联编辑的可能

在我们日常使用中，最为常见的当前页面的编辑展现形式，就是excel表格的编辑

除非进行表格的新增，否则这个excel表格的编辑，都是在当前页面进行编辑

这种在当前页面进行编辑的形式，其最大的优点：

“用户可以很方便地对于整体信息进行查看”

这样就可以保证整体编辑流程的连贯性

但这种页面内的编辑，由于所支持的编辑样式较少

这样就对于可编辑的范围进行了限制，不能给予用户更完善的编辑体验

意见与建议：

• 尽量选择单字段编辑或字段较少的编辑
• 对于阅读查看有一定要求的场景，可以采用这种编辑展现方式
• 若所编辑的信息内容比较重要，不建议采用这种编辑样式

2. 弹窗/浮层

点击编辑按钮后，编辑态的展现样式以弹窗/浮层的形式呈现，这种展现样式最大的特点，就是跳出了原有页面，以一个“中间态”的形式来展示所要编辑的信息，而这种“中间态”的展示，也造就了该样式的优点与缺点。

优点：

承载更多信息：

弹窗/浮层，相当于是在原有页面的基础上，开辟了一个新的空间，新空间所带来的信息增量，相较于原有页面的信息量，肯定是更多的，所以弹窗/浮层这种形式，可以承载更多的信息。

聚焦用户注意力：

点击按钮后，弹窗/浮层出现。在那一刻，用户所有的目光及注意力，会被强行聚焦在弹窗/浮层上。

支持较复杂的编辑功能：

页面内的编辑形式为了保持统一性，只能支持文本编辑等简单的编辑模式，而弹窗的展现形式，由于其空间的延展性以及内容的相对独立性，可以支持一些较复杂的编辑模式，如：附件上传、图片上传等。

缺点：给用户造成较为严重的割裂感

编辑态作为一种非常规状态，状态之间的切换，很容易就会给用户造成影响，而弹窗/浮层的展现样式，是在原有页面的基础上对于原有页面的跳出，突然出现在用户眼前，并且也不是用户所习惯的内容及状态，必然会与用户现有的使用状态产生矛盾，打破用户当前的状态，从而产生割裂感。

适合场景：

• 所编辑的信息为重要信息，需要使用者注意力集中
• 所编辑的内容，在数量上有一定的要求
• 所编辑的内容，在编辑形式上有一定的要求

3. 新页面

点击标记按钮后，当前页面会自刷新或者新开一个新页面，这种展现方式的核心，是将内容放置在一个新的空间下进行编辑，这一新的空间，可以看成是弹窗/浮层的放大版，所以这种新页面的展现方式，也就继承了弹窗/浮层的优点，并且在数量与质量上，都得到了不同程度的提高。

但与提高的优点相对应的，弹窗/浮层所具有的缺点，也是被同比例的放大，无论是新增页面，还是页面的自刷新，对于用户阅读查看体验的影响，都是成倍增加的。

因为这种展现方式，不仅仅会强制打断用户当前的阅读进度，甚至还会将整个阅读过程切断，切断用户与之前页面的联系。

适用场景：

• 大量数据的编辑填写（比如：新增一篇文章、新建一个数据表格等）
• 交互逻辑较多的编辑填写（比如：所编辑的内容包含文本、下拉框选择、附件上传、图片上传等）

三、如何保存

在编辑完成后，就需要对于所编辑的信息进行保存，现在市面上比较流行的保存方式有两种。

1. 失焦后，自动保存

没有保存按钮，用户可以随意点击任何地方，只要当前编辑状态失焦，就会自动退出当前的编辑状态，同时刚才所编辑的内容，也会一并保存下来，这种保存方式的特点就是“轻量”，适合与上文提到的“hover态”配套使用。

适用场景：

• 编辑的信息为单字段的信息——多字段的编辑，很容易出现尚未编辑完，由于误触而退出编辑状态的情景，这时候就需要用户再次点击进入编辑模式，拉长了用户使用路径
• 编辑的信息不能是太重要的信息

2. 点击按钮后保存

编辑完成之后，点击保存按钮，退出编辑态，并且保存当前所编辑的所有信息，这种保存方式相较于失焦保存就更为正式，用户需要点击固定的“保存”按钮后才能保存。

这种保存方式最大的特点就是“确定性”，用户可以明确的知道，在哪里可以进行信息的保存，并且这种方式与用户之间的交互感也更强，可以给予用户更好的结果反馈。

适用场景：

• 多字段编辑
• 列表编辑
• 整页面编辑
• 弹窗/浮层编辑

引用文献：

• 栗子设计喵：《页面编辑竟然包含这么多细节，如何把编辑体验做的顺滑》
• LIZ酱：《B端产品设计细节分析：编辑功能》

本文作者 @珞小土 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！