我们都在研究好的设计，感叹优秀的产品带给我们的尖叫，但我们或许从未思考过，糟糕的用户体验设计也会给用户带来很大的伤害。这个产品体验栏目的灵感来自于乔纳森·沙利亚特的《设计的陷阱：用户体验设计案例透析》这本书。在本书的介绍里，有这么一句话——设计能杀人、使人愤怒、使人伤心。读到这句话的时候，让人惊愕，让人不可思议，但这就是事实，这就是糟糕的用户体验设计会导致的后果。「体验陷阱」的第一期，就让我们来看看那些被忽视的文章编辑器对用户体验的影响有多糟糕。

一、什么是文章编辑器？

文章编辑器是一个产品最基础的构成部分，不管是前台还是后台，编辑器都是一个非常基础的功能。比如一个产品需要发布新的资讯内容，在后台就一定需要有一个文章编辑器才能实现这个功能。
文章编辑器在各大网站、APP产品里都非常常见，特别对于以内容生产为主的社区、平台，比如像站酷网、人人都是产品经理、知乎、头条、网易这些平台，文章编辑器是一个非常基础又必不可少的功能。

二、我们理想中的文章编辑器？

1. 有用性
文章编辑器要能实现内容的发布，当用户从本地或在线文档（比如腾讯文档、飞书、石墨等）复制内容进去时候，可以轻松实现二次编辑，比如插入图片、调整标题样式等。

2. 易用性
编辑器的界面、功能，要能满足多数用户的期望，比如支持多张图片上传、第三方音频/视频链接，以及整个操作过程中使用起来愉悦、友好。

3. 容错性
当用户出现操作错误的时候，系统能够及时给用户提示，比如图片上传进度、图片尺寸大小限制、必填项勾选等等。容错性对用户体验的影响特别大，如果用户在使用过程中不清楚哪个地方犯错不能继续操作，用户对系统就会陷入焦虑。

三、实际产品设计中的编辑器

1. 站酷
站酷网是全国最大的设计师平台，吸引了国内众多优秀的设计师和设计知识创作者，但是他们的文章编辑器，体验下来却非常糟糕。接下来让我们来看看这个糟糕的文章编辑器，给用户带来了多大的体验伤害。

当我开开心心地把一篇在腾讯文档写好的内容复制到站酷编辑器的时候，在对标题进行格式调整的时候，全局样式竟然会同步更改，比如想把「标题」更改为「标题1」的样式，整篇文章就会一起更新，这让人摸不着头脑。不过我没放弃，经过多番尝试，才发现需要在标题上下各加一个Enter，这样才能设置成功（我是一个BUG解决天才）。

当文章篇幅撑过编辑器的默认高度以后，这个时候就会出现一个非常糟糕的体验，你找不到编辑器的工具栏。比如你想上传图片或者修改内容，你都不知道工具栏去哪里了，这个时候用户彻底迷失，变得异常焦躁。解决这个问题的唯一办法是——把编辑器全屏。

创过第一关以后，全屏的编辑器又出现一个非常糟糕的体验。那就是当你去调整某一段文字的时候，比如加一个换行，这个时候编辑器的光标就会像幽灵一样跑到底部，你只能重新找到刚才的原位置，你以为是眼花再试一次之后，光标再次出现在底部，简直让你怀疑人生。

当你从头部开始上传图片的时候，和调整字段一样，光标又会像幽灵一样跑到底部，这个时候，你还得去找之前的位置，才能继续上传。不过经过多番的尝试，我又破解了站酷编辑器的设计密码，原来可以从底部开始倒着传图片，那该死的光标，就不会跑到底部去了，这个秘诀让我提升了很高的效率，我真感慨自己的的智商：）

从站酷的编辑器可以看出，他们违反了尼尔森十大原则的系统性可见原则和防错原则。第一，在用户的内容高度超出编辑器默认高度以后，编辑器的工具栏消失不见，这其实是一个功能BUG，不但没有修复也没有提示用户使用全屏操作，用户彻底迷失；第二，在用户调整内容换行的时候，光标会像幽灵一样跳到底部，这也属于功能的BUG，没有修复也没有系统提示，最后导致用户在内容发布阶段就变得垂头丧气，最终浪费了无数宝贵的时间。

拓展阅读：
尼尔森十大可用性原则第一条，系统可见性原则，保持界面的状态可见，变化可见，内容可见。让用户知道发生了什么，在适当的时间内做出适当的反馈。
尼尔森十大可用性原则第五条，防错原则，比出现错误信息才提示更好的，是通过更用心的设计来防止这类问题发生。在用户选择动作发生之前，就要防止用户混淆或者错误选择。对产品进行不同的操作、重组或特别安排，防止用户出错。

2. UI中国

UI中国的文章编辑器，虽然不支持从腾讯文档、飞书文档直接复制过去的格式，但编辑器设计得非常清爽，给用户的第一印象非常好。但是，就在用户开开心心准备发布一篇精心准备的文章时候，噩梦来了。

UI中国的服务器非常不稳定，所以当用户上传图片的时候，图片的加载进度特别慢。其实慢一点也能接受，但是当进度条达到100%以后，图片始终还是无法载入，有时候需要等几秒，有时候等10几秒最后换回来的一串错误代码——Error during file upload。这个时候用户还有耐心，也许就是服务器偶然发生故障，于是再次重新上传，但收到的还是同样的结果。

为了解决这个问题，我以为是图片的尺寸或大小出现了问题，但经过查阅，并无任何问题，完全是官方的尺寸规范以内。最后通过数次的尝试，我总算摸到一点点规律，当一张图片反复上传出现乱码的时候，那就先去传其他的图片，最后再返回上传这张图片，运气好的时候就解决了，运气不好的话，你就休息一下再来上传。我只能感慨自己实在太聪明了。

从UI中国的编辑器可以看出，他们和站酷一样，违反了尼尔森十大原则的第五条原则，防错原则。在用户上传图片出现错误以后，并没有给用户及时的中文提示（99%的设计师看不懂Error during file upload这串英文代码，毫无意义），导致用户在使用过程中产生焦躁、愤怒的情绪，浪费了无数宝贵的时间。

3. 微信公众号

微信公众号是知识创作者最常用的工具了，但事实上对于新手来说，它的设计非常不友好。我还想起当我第一次操作公众号发布文章的时候，当我把内容都编辑好以后，我找不到「发布」的按钮。我很难理解「群发」的功能，特别是当我在下拉列表发现竟然还藏着一个「发布」按钮，我以为那就是发布。但当我开开心心准备分享我的推文时候，我在自己的公众号却怎么也找不到这篇文章。

最后我只能重新编辑一次，但问题还是没有解决。群发到底是什么意思？当我点击以后「群发」以后，又出现了群发、定时群发和分组群发的按钮，我实在难以理解这几个按钮有什么不同，我现在又应该选择什么。我犹豫不定，害怕犯错，又不知道如何解决，最后只能求助朋友。

微信公众号在「发布文章」这个环节的设计，完全违背了交互心理学上的席克定律，给用户太多、不清晰的选择，增加了用户的学习和消耗成本，对于公众号新手来说，简直就是一次噩梦。其次也违背了尼尔森十大原则的第十条，人性化帮助原则，没有给新手解释清楚「群发」和「发布」的区别，也没有对核心功能做出对应的文字解释，让用户在操作的过程中产生数次焦躁，最终只能求助于他人。

拓展阅读：
席克定律是指人的信息传递时间与刺激的平均信息量之间呈线性关系。简单一点我们可以理解为：人面临越多的选择，所要消耗的时间成本越高。
尼尔森十大原则第十条，人性化帮助原则，帮助性提示最好的方式是：①无需提示；②一次性提示；③常驻提示；④帮助文档。

4. 脉脉
脉脉作为拥有1.1亿用户的职场社交独角兽，为用户提供的专栏编辑器，用户体验差到让人绝望。

脉脉使用的编辑器，属于十年前最早一批的编辑器，不管是功能还是样式，都非常掉身价，和他们的品牌调性不匹配。它们不支持从腾讯文档、飞书复制过去的文章（Markdown格式），所以我每次都需要调整格式才能和源文档格式一致，极大增加了编辑成本。这也是我最后放弃脉脉更新的原因，他们流失了一个内容创作者。

在用户上传图片以后，他们没有做自适应配置，整个编辑器无法看到图片的完整内容，用户根本不知道自己上传的图片是否正确。更糟糕的是，当你想等比例调整图片的大小，图片就完全扭曲，让用户进一步崩溃。

点击上传图片以后，还需要用户点击「上传」，才能真正实现图片上传，增加了用户的操作步骤。其次已上传的图片不能取消选中，如果想要取消当前图片，只能再次上传一次图片。

最糟糕的是，文章竟然不支持自动或手动保存，想象一下当你花费了1个小时好不容易编辑好的文章，最后因为不小心关闭浏览器导致文章丢失了，这就是使人愤怒的设计，这几乎把用户使用的欲望彻底剿灭了，永远不会再回来。

脉脉的编辑器设计，严重违反了尼尔森十大原则中的多条原则，比如撤销重做原则、防错原则、容错原则等，可以说是非常糟糕的设计，这样的编辑器几乎可以毁灭任何一个内容创作者的心情。

拓展阅读：
尼尔森十大可用性原则第三条，撤销重做原则，给用户更多自主操作权，当用户在使用产品过程中产生错误的操作时，应提供更多的解决方案，例如撤销或重做等功能。
尼尔森十大可用性原则第九条，容错原则，帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码如404等。

5. 135编辑器
135编辑器作为国内最大的编辑器头部产品，他们几乎把编辑器可能有的功能都设计了，比如导入文章、语音合成、模版、一键排版等等。但是这个功能如此丰富的编辑器给新用户的体验则留下糟糕的印象。

135编辑器的功能非常强大，这就像一个2003年半的Word办公软件，一眼望去，都是数不清的功能。这样的设计导致了新手不知道如何开始，他们的按钮权重几乎都一样，比如新建、关闭、导入、微信复制等等，没有重点突出核心功能。

人在操作软件时候的记忆属于短期记忆，一般只会保留5-7秒，这便是心理学上最出名的7±2效应。在新手首次使用该软件的时候，面对几十上百个的功能，根本不知道如何下手。用户需要学习的成本非常高，甚至当你编辑好文章以后，你都不知道如何把文章同步到微信公众号，因为「微信复制」这个按钮没有重点突出，从字面意思也无法获取真正的意思。这也违背了人类运动的预测模型费茨定律，如果你想小孩子也简单轻松的能关掉房屋的开关，那么你的开关就应该大一点，明显一点。

其次过度商业化把这款编辑器的用户体验毁灭了，几乎80%的功能都需要加入VIP会员，然后你需要反复关闭窗口，操作路径变得又长又繁琐。试问，一个新用户在使用一款陌生的编辑器的时候，需要关闭几十次广告，你觉得他还有耐心去使用吗？

拓展阅读：
7±2效应就是指人的短期记忆容量在7±2的数量之间浮动，也就是说，用户最多同时处理5～9个信息。
费茨定律是人类运动的预测模型，主要用于人机交互和人体工程学。该定律预测光标或手指从一个起始位置移动到最终目标所需的时间（T）由两个参数决定，即光标或手指到目标的距离（D）和目标的大小（W）。

6. 国内某知名CMS系统
这是一个国内非常出名的开源CMS系统，目前已停止更新维护，不过国内的企业网站估计有50%都是基于这个系统搭建。做过外包设计的朋友都知道，经常会听见客户说系统难用，那么为什么难用，我们先来看看这些商业项目中管理后台的编辑器有多糟糕。

点击添加内容后，直接跳转到一个新窗口，这个新窗口还把当前屏幕都遮住了，这不得不让用户需要把这个窗口缩小才能复制内容。这个设计最让人头疼的是当你的桌面应用打开过多时候，你根本不知道这个内容窗口在哪里，让人感到无比焦躁。

编辑器的的样式、功能就几乎可以忽略不计了，因为这毕竟是一款开源的系统，而且官方都已经停止更新了。如果你从腾讯、飞书文档直接复制内容进去，文本格式就是错乱的，这和脉脉一样，这几乎需要在编辑器里重新调整格式才行，这严重提升了用户的使用成本。这对于很多兼职为公司负责更新网站的用户来说，简直就是一场灾难。过去有太多次用户对编辑器的问题提出了很多次，包括不懂使用、增加功能等，总之，这些开源系统的编辑器，对很多用户来说就是一场噩梦。

四、思考总结

通过数款大厂产品的体验总结，我们发现，对于文章编辑器这个非常基础但又必不可少的功能，其实带给用户的体验非常糟糕。类似的糟糕体验，其实还数不胜数，我们这一期就不再展开。最后我们对此次的体验陷阱做一个简单的总结。
我认为，造成如此糟糕的编辑器体验的原因有两个，第一个，大部分的产品团队完全不重视编辑器这个功能。在很多产品、设计，包含程序工程师看来，这就是一个非常基础简单的功能，所以他们对编辑器非常轻视，也许开发出来的产品团队自己都没有亲身测试发布过，才会导致有如此多明显、让人愤怒的BUG。然而他们根本不知道这样的设计对用户的实际体验影响有多么糟糕。
第二个，产品团队完全没有遵循最基础的设计原则意识。国内大部分产品设计师对设计基础原则、理论都非常忽视，甚至觉得这些纯理论的指导原则毫无意义。这也是设计这门学科在国内发展的真实写照，但我们从这些体验陷阱可以看出，一个没有遵循设计基础原则的产品，体验下来，是多么的糟糕，多么的让人绝望。