预览、保存和发布：编辑器的设计者如何设计这些功能

预览、保存和发布，是在进行一些图文编辑时会涉及到的基础功能，身为这些编辑器的设计者，该如何对这些功能进行考量，如何在设计时最大限度对使用者提供便利，笔者结合自己的工作经历给出了解答。

预览、保存和发布是在设计编辑器类产品中会遇到的基础功能点，笔者分别负责过H5编辑器、表单编辑器、Workflow编辑器的产品设计。文本将进一步结合图片编辑器、文字编辑器的分析，在此将自己的思考进行总结，主要涉及到的是实际功能设计时需要注意的部分点，希望与大家讨论学习。

一、预览

预览功能一般满足的是编辑者对编辑内容进行确认的需求，当无法在编辑中实现“所见即所得”的效果时，往往会通过预览来帮助确认实际效果符合其心理预期，在设计时需要考虑以下要点。

1. 是否需要预览？

需要思考是否为用户提供了“所见即所得”的效果 ，“所见”包含的意义不单指视觉层面的文章排版、图片样式，比如对于H5还意味着实际的交互体验，对于Workflow还意味着实际的工作流程是否有效。如果答案是否定的，则可以考虑提供预览功能。

目前市面上的H5/视频编辑器等产品一般都会有预览功能，比如易企秀、兔展等；创作平台的文章编辑器，比如知乎专栏、人人都是产品经理社区等基本也会提供。

图片编辑器虽然部分产品没提供直接的预览入口，但一般会在下载或分享时顺带提供预览。

H5编辑器 - 易企秀

文章编辑器 - 人人都是产品经理社区

图片编辑器 - 凡科快图

2. 谁可以预览？

一般我们谈及预览，都会认为是面向编辑者的，但在设计时还需要除编辑者外其他人还是否也可以预览，以及其他人预览的作用和意义是什么。

一般支持其他人预览的往往是为了在内容正式使用前，可以让其他相关者来对内容进行确认，比如知乎专栏支持邀请专栏编辑或好友来查看文章，从而提升专栏文章质量。

知乎专栏 - 写文章 - 邀请预览功能

3. 预览时是否触发自动保存？

回答这个问题还是需要回归到预览的场景中来，预览对于编辑者而言是一种确认的作用，进一步思考编辑者在确认是否符合预期后的动作是什么，往往符合预期的下一步动作是保存，而不符合则会取消刚才的编辑。对于符合预期的场景，自动保存是符合逻辑的，而对于不符合的场景，无论我们是否设计是否自动保存，用户都需要进行撤回操作。

所以，预览时最好是要进行自动保存的，但要注意预览时的自动保存并不意味着编辑者已经确认就要采取此时预览的方案，如果此时保存代表着确认完成则会出现问题。

以H5编辑器来说明问题：目前凡科和兔展在预览时都会触发自动保存，假设编辑者需要对已传播的作品进行编辑，在编辑中进行预览并触发自动保存。由于凡科和兔展都没有一个是否发布的状态，会导致此时保存的内容直接对线上的访客可见，从而影响实际作品的线上传播。这种情况下要解决问题，要么增加发布状态，要么取消自动保存的逻辑。

二、保存

1. 离线保存

指在断网情况下仍可以保存，数据将临时缓存，等到网络正常时再同步数据到线上，可以最大程度不影响用户使用产品，比如processon就提供了离线保存功能。

2. 自动保存与手动保存

自动保存存在的意义上是通过定时的自动保存来避免数据意外丢失，可以给编辑者安全感。对于文章编辑器而言，用户在打字排版过程中是几乎需要实时地对输入的内容进行保存，所以自动保存在文章编辑器中是最为常见的，并且当提供了定时自动保存，手动保存的功能其实也是可以不需要了（但为了给用户确定性，一些产品还是会保留）。

而H5编辑器中用户本质上不是需要对每个操作都进行保存，而只是在效果达到预期时才会需要保存，所以目前在凡科、MAKA、易企秀和兔展中，就只有兔展提供了自动保存的功能。

所以当考虑是否需要自动保存时，可以考虑 你的用户是会在怎样的场景下需要保存的 ，是对输入的每个字都需要保存，还是只对编辑内容达到某个预期时才保存。

简书：自动保存同时也提供手动保存

知乎：自动保存且未提供手动保存

三、发布

1. 是否需要发布功能？

当内容无需区分是否可见、是否有效、无需提交审核（往往发布是触发审核的一个动作）时，或者虽需区分是否可见和有效，但是往往简单编辑即可完成时，可以考虑不提供发布操作。比如图片编辑器，即不会和创作平台的文章编辑器一样需要区分文章是否编辑完成并可见，也不会和workflow 编辑器一样需要区分流程是否可以正式执行，所以一般不会提供发布操作。

易企秀图片编辑器：没有发布操作

对于H5编辑器而言，在首次编辑场景下其实也是无需区分是否可见，因为取决于用户是否是主动传播的。但在传播后二次编辑的场景下，是需要区分修改是否可见的，可以跟易企秀一样提供发布功能，不然就会出现前文在讲预览时H5编辑器遇到的问题。

易企秀H5编辑器：提供发布功能

2. 二次发布

当内容发布后，可能存在的场景就是已经发布的内容进行调整，需 结合调整的场景来设计二次发布的逻辑 。

如果二次调整不是一个耗时长且可能需多次间断编辑的操作，这个时候可以会将保存和发布合并为“保存并发布”；如果二次调整可能也是一个耗时长的操作，这个时候可以继续提供独立的保存和发布功能，需再次发布后才会把内容更新到线上。

四、总结

最后对预览、保存、发布功能的设计时的考虑点进行总结（太常规的比如发布状态定义就不涉及了）。

1. 预览：侧重考虑编辑是否可以实现“所见即所得”，如已提供发布功能，则预览时自动保存即可；
2. 保存：自动保存在文章编辑器中建议做，在非文章编辑器中必要性较低，可结合资源和优先级考虑；
3. 发布：发布用于区分是否真正完成，以决定是否可见或有效，如果是H5编辑器、创作平台文章编辑器、workflow 编辑器建议做，表单编辑器可做可不做（用户侧编辑完成一个表单的操作会比较简单），图片编辑器一般无需考虑做。

本文由 @Sen 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自unsplash，基于CC0协议

作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。


Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: