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