编者按：本文是蚂蚁集团语雀体验设计师Suki在 SEE Conf 2022 的演讲内容，包括演讲视频及文字内容，欢迎享用。
本文想借语雀编辑器 4.0 版本发布，交流一下，在无纸化办公的在线时代，语雀在文档编辑上的思考和探索。
在2016年，蚂蚁的一群工程师嫌弃公司内部的文档工具太难用了，于是他们开始捣鼓一套自己的 Markdown 产品，于是语雀就这么诞生了。语雀经历了非常多次的变革和发展。一直到今年我们推出了文档编辑器 4.0，今天想和大家交流的也是这么多年来，语雀是怎么一步步摸索过来的，以及未来我们要去往何方。
在线文档的发展
前段时间看到一个网友吐槽：“现在的在线文档产品还是在照搬 Word 的那套体验。”而 Word 的设计初衷其实是围绕着桌面出版。这套系统的设计，是为了在线上还原与印刷一致的效果，所以会有很多印刷相关的设计和逻辑。这套系统设计得实在太过于优秀和深入人心了，以至于现在很多在线文档产品仍旧摆脱不了它的影子。然而随着时代的发展，尤其是疫情，让最最传统的企业都已经完成了无纸化转型。所以我们畅想，以文档为中心的沟通协同是不是可以更加地高效和简单呢？
这是我们所畅想的在线时代先进文档的特征：无边界、可交互、多样化。
多样化
我们所理解的文档多样化是指，创作内容从文本转向了更多样的表达形式。我们认为人类写作的本质是为了表达，而表达从来不止于文字。图形、表格、表情、视觉的、听觉的...所有可以辅助你的表达的都可以成为你的文档之一。目前语雀已经支持了 43 种各种各样可以插入的卡片。但这同样也带来了一些问题。使用成本
设计师常常会面临一个很悲伤的事实就是，当用户想要的功能越多，它的使用成本也会逐渐上升。心理学上有一个有趣的理论：Hick's Law，就解释了这样一个现象：当用户面临的选择数量越多，他所需要的反应时长也会逐渐增加。指令交互在过去，我们将大多数功能都平铺在工具栏上，就不可避免地会面临这种情况。即便后来微软推出了 Ribbon 工具栏，但操作路径也随之变长，并没有完美地解决这一问题。但指令交互出现了。在语雀的新版编辑器中，在任意位置输入Command+/，都可以唤起一个斜杠面板，再结合一些特定指令，你甚至不需要离开键盘便可以完成整个输入。
在人机交互的最早期，用户需要记住一些特定的指令来完成输入。这种输入方式学习成本很高但非常地高效。直到 1973 年，施乐公司设计了最早的 GUI 界面，人机交互才被普通大众所接受。但随着电脑的功能越来越多，使用成本也在逐渐上升。指令交互就结合了这两种交互的优点，既高效又直观。在未来我们甚至可以开放定制指令。
无边界
随着时代的发展，内容载体逐渐从纸质媒介转到了电子屏幕上。你的创作不再受限于物理限制，整个宽度由屏幕所决定。你可以让读者像看网页一样去设计你的文档。而传统文档就有各种各样的边界。比如需要在文档里设置纸张尺寸，选择页眉页脚...这些印刷相关的功能照样搬迁过来之后，反而会增加产品的复杂度，同时也限制了用户的内容展示。我们希望未来文档更加的自由、舒适。于是我们去除了纸张北京，让整个内容完全由用户的屏幕所决定。但这时设计师便会面临新的问题：适配。
核心适配策略
现在的屏幕尺寸越来越多样化，既有 24 寸 2K 高清屏，也有 16 寸笔记本，甚至越来越多人开始尝试分屏工作。那怎么让用户在各个尺寸下都用的很舒适呢？
前者是比较常见的适配问题，而上图则是文档特殊的适配问题。语雀文档的结构非常灵活，用户可以在多种页面结构下随时切换。因此适配时还需考虑到以上六种文档结构场景。这就让我们的适配问题变成五种常见的容器尺寸乘以六种文档结构，非常地复杂。为了解决这种复杂的情况，我们制定了三条核心的适配策略：
- 优先保证重要模块
- 始终保证正文可读性
- 始终保证正文屏幕居中
策略1:优先保证重要模块
当屏幕有限时，让所有内容完全展示是不现实的。于是我们设定了模块优先级，当检测到容器宽度达到临界值时，逐级去收起次级模块。这里有四条临界值，每一条都是我们认为该文档结构最合适的阅读宽度。
策略2:始终保证正文的可读性
正文的可读性是最重要的。因此我们做了一些细节的适配策略。比如右侧面板在不同宽度下打开时，展示策略则完全不同。当宽度足够时，右侧面板会挤压正文，从而提高屏效比。而当宽度不足时，右侧面板打开则变成悬浮式，从而保证正文始终有一定宽度。
策略3:始终保证正文屏幕居中
为什么会有这样一条策略呢？其实一开始我们采用的是最传统的分栏式布局。这种布局的好处就是规则非常简单，而且大多数产品都是这么做的。但上线之后，我们收到了非常多用户的吐槽。因为在使用大屏时，用户需要转动头部才能看到正文。于是我们调整了适配策略，优先保证正文是居于屏幕居中的，然后再实时地计算两侧的宽度，最终决定另外两栏（目录与大纲）的布局策略。这导致了我们的适配规则非常的复杂，每次用户打开网页我们都在背后拼命地动态计算布局。但这复杂的规则确实让我们收获了更加舒适的阅读体验。
卡片级别的适配规则
除了文档级别的适配规则，我们还将适配规则细化到了卡片级别。为什么这么做呢？举个例子大家应该就有所体会。当正文的宽度变得非常长的时候，其实是非常容易看串行的👇。这就意味着其实不同的内容类型是有不同的适配规则的。
比如文本类，我们会采用这种定宽布局，图片类则采用等比缩放的方式，而表格则采用拓展布局。在新版编辑器中，在表格上点击←→按钮即可展开表格，并且不影响正文的宽度。
可交互
在过去，用户阅读纸质文档是一种单向接收信息的过程，而在线时代，用户不仅仅只是接收，还可以点击、输入，从而实现双向的互动。
以场景为中心
在搭建这种互动能力的过程中，我们始终围绕着场景为中心，有取舍地构建文档的交互能力。比如在在线文档最常见的产研场景为例。文档评审是这个场景中非常重要又需要花费大量时间的一个流程，在这个过程中你会发现，整个交互的颗粒度是非常细致的：同事会针对某句话甚至某个词提出修改意见。同时在流程中的每个人，都非常关心当前的状态：这个文档是不是最新版？所以在语雀的划词评论中，我们将颗粒度支持到每一个字，每一个元素，甚至图片中的某一个区域。并且我们上线了一个评审功能，通过这个功能，你就能清晰地知道，这篇文档是在评审中还是已经通过。
丰富多样的交互形式
除了以场景为中心拓展交互能力，我们还在探索更加丰富多样的交互形式。比如可以使用打卡卡片收集已读未读状态，也可以使用投票卡片定向收集反馈，在未来你甚至可以在文档中插入数据表卡片，实现更多维的知识管理。我们会紧紧围绕场景去探索更多更丰富的交互形式。通过一张张特色卡片，帮助用户在文档中实现更多维的知识管理。在未来，这将是一个完全由你自定义的新文档，你可以像搭乐高一样去搭建自己的文档，而不再是过去那样枯燥地码字。
这就是我们所畅想的未来世界，一个无边界、可交互、多样化的先进生产力工具。
我是Suki，谢谢大家🙏，欢迎试用语雀
