B端产品设计：3种常见的编辑模式，它们都有哪些优点和不足？

wy168

Hi, 大家周一快乐！

说到B端产品设计，其核心功能总是离不开增、删、改、查这四个部分。今天我们来讲一下其中的改，也就是编辑功能，下面给大家介绍3种常见的编辑模式，以及它们的优点、适用场景和设计原则。

1. 内嵌模式

在原页面直接编辑：

产品：Asana

• 优点：快捷、方便，用户能直观地看到自己在修改什么。
• 缺点：防错性弱；编辑区域大小受制于内容所占页面空间。
• 适用于：编辑简单内容，不涉及类似权限变更这样的敏感操作。

常见的交互设计：

1、点击内容区域即可触发编辑，点击其它区域，自动保存修改内容。

产品：Asana

2、鼠标悬浮到内容区域，显示编辑图标，点击出现「保存」 和 「取消」 按钮，需要点击按钮保存修改内容。

产品：Mixpanel

2. 弹出模式

在弹出的载体中进行编辑：

产品：Asana

• 优点：可以承载更多信息；防错性强。
• 缺点：在原有页面弹出弹窗，容易打破阅读的连续性，影响用户的心流体验。
• 适用于：编辑重要的、复杂的内容。

常见形式：

1、浮层弹窗（Popover）

产品：Asana

2、弹窗（Modal）

产品：Asana

3、抽屉（Drawer）

产品：Asana

3. 跳转模式

从原页面跳转至新页面进行编辑：

• 优点：编辑时，页面中的干扰元素少。
• 缺点：严重破坏页面信息连贯性。容易让用户迷失，不知道在页面中所处的位置。
• 适用于：需要减少干扰信息，让用户专注于编辑操作的场景，例如注册。

虽然跳转到一个新页面后，可以承载更多的编辑内容，但我个人的习惯，会尽量避免出现页面跳转，因为这样很容易打乱用户的心流体验，用户可能会忘记自己在上一个页面正在做的事情。

另外，在这种模式下，用户很可能会点击表单之外的区域（如导航），这对产品性能和交互跳转的严谨性也是一种考验，一个细节没有做好，就很容易出现错误跳转、内容未保存、卡顿等不好的用户体验，因此这种模式最好谨慎选择。

好啦，那以上就是今天的分享，祝愿大家拥有美好快乐的一周，如果喜欢这篇文章别忘了它一个赞or评论or转发。我们下期再见，拜拜