关于sass:在线时代先进文档编辑器设计探索

6次阅读

共计 2751 个字符,预计需要花费 7 分钟才能阅读完成。

本文想借语雀编辑器 4.0 版本公布,交换一下,在无纸化办公的在线时代,语雀在文档编辑上的思考和摸索。

在 2016 年,蚂蚁的一群工程师厌弃公司外部的文档工具太难用了,于是他们开始捣鼓一套本人的 Markdown 产品,于是语雀就这么诞生了。

语雀经验了十分屡次的改革和倒退。始终到往年咱们推出了文档编辑器 4.0,明天想和大家交换的也是这么多年来,语雀是怎么一步步摸索过去的,以及将来咱们要去往何方。

在线文档的倒退

前段时间看到一个网友吐槽:“当初的在线文档产品还是在照搬 Word 的那套体验。”

而 Word 的设计初衷其实是围绕着桌面出版。这套零碎的设计,是为了在线上还原与印刷统一的成果,所以会有很多印刷相干的设计和逻辑。

这套零碎设计得切实太过于优良和深入人心了,以至于当初很多在线文档产品仍旧解脱不了它的影子。

然而随着时代的倒退,尤其是疫情,让最最传统的企业都曾经实现了无纸化转型。所以咱们畅想,以文档为核心的沟通协同是不是能够更加地高效和简略呢?

这是咱们所畅想的在线时代先进文档的特色:无边界、可交互、多样化。

多样化

咱们所了解的文档多样化是指,创作内容从文本转向了更多样的表达形式。

咱们认为人类写作的实质是为了表白,而表白素来不止于文字。图形、表格、表情、视觉的、听觉的 … 所有能够辅助你的表白的都能够成为你的文档之一。目前语雀曾经反对了 43 种各种各样能够插入的卡片。但这同样也带来了一些问题。

应用老本

设计师经常会面临一个很悲伤的事实就是,当用户想要的性能越多,它的应用老本也会逐步回升。

心理学上有一个乏味的实践:Hick’s Law,就解释了这样一个景象:当用户面临的抉择数量越多,他所须要的反馈时长也会逐步减少。

指令交互

在过来,咱们将大多数性能都平铺在工具栏上,就不可避免地会面临这种状况。即使起初微软推出了 Ribbon 工具栏,但操作门路也随之变长,并没有完满地解决这一问题。

但指令交互呈现了。在语雀的新版编辑器中,在任意地位输出 Command+/,都能够唤起一个斜杠面板,再联合一些特定指令,你甚至不须要来到键盘便能够实现整个输出。

在人机交互的最晚期,用户须要记住一些特定的指令来实现输出。这种输出形式学习老本很高但十分地高效。直到 1973 年,施乐公司设计了最早的 GUI 界面,人机交互才被一般公众所承受。但随着电脑的性能越来越多,应用老本也在逐步回升。指令交互就联合了这两种交互的长处,既高效又直观。在将来咱们甚至能够凋谢定制指令。

无边界

随着时代的倒退,内容载体逐步从纸质媒介转到了电子屏幕上。你的创作不再受限于物理限度,整个宽度由屏幕所决定。你能够让读者像看网页一样去设计你的文档。

而传统文档就有各种各样的边界。比方须要在文档里设置纸张尺寸,抉择页眉页脚 … 这些印刷相干的性能照样搬迁过去之后,反而会减少产品的复杂度,同时也限度了用户的内容展现。

咱们心愿将来文档更加的自在、舒服。于是咱们去除了纸张北京,让整个内容齐全由用户的屏幕所决定。但这时设计师便会面临新的问题:适配。

外围适配策略

当初的屏幕尺寸越来越多样化,既有 24 寸 2K 高清屏,也有 16 寸笔记本,甚至越来越多人开始尝试分屏工作。

那怎么让用户在各个尺寸下都用的很舒服呢?

前者是比拟常见的适配问题,而上图则是文档非凡的适配问题。语雀文档的构造非常灵活,用户能够在多种页面构造下随时切换。因而适配时还需思考到以上六种文档构造场景。

这就让咱们的适配问题变成五种常见的容器尺寸乘以六种文档构造,十分地简单。为了解决这种简单的状况,咱们制订了三条外围的适配策略:
● 优先保障重要模块
● 始终保障注释可读性
● 始终保障注释屏幕居中

策略 1: 优先保障重要模块

当屏幕无限时,让所有内容齐全展现是不事实的。于是咱们设定了模块优先级,当检测到容器宽度达到临界值时,逐级去收起次级模块。

这里有四条临界值,每一条都是咱们认为该文档构造最合适的浏览宽度。

策略 2: 始终保障注释的可读性

注释的可读性是最重要的。因而咱们做了一些细节的适配策略。比方右侧面板在不同宽度下关上时,展现策略则齐全不同。当宽度足够时,右侧面板会挤压注释,从而进步屏效比。而当宽度有余时,右侧面板关上则变成悬浮式,从而保障注释始终有肯定宽度。

策略 3: 始终保障注释屏幕居中

为什么会有这样一条策略呢?其实一开始咱们采纳的是最传统的分栏式布局。这种布局的益处就是规定非常简单,而且大多数产品都是这么做的。

但上线之后,咱们收到了十分多用户的吐槽。因为在应用大屏时,用户须要转动头部能力看到注释。于是咱们调整了适配策略,优先保障注释是居于屏幕居中的,而后再实时地计算两侧的宽度,最终决定另外两栏(目录与纲要)的布局策略。

这导致了咱们的适配规定十分的简单,每次用户关上网页咱们都在背地拼命地动静计算布局。但这简单的规定的确让咱们播种了更加舒服的浏览体验。

卡片级别的适配规定

除了文档级别的适配规定,咱们还将适配规定细化到了卡片级别。为什么这么做呢?举个例子大家应该就有所领会。当注释的宽度变得十分长的时候,其实是非常容易看串行的👇。这就意味着其实不同的内容类型是有不同的适配规定的。

比方文本类,咱们会采纳这种定宽布局,图片类则采纳等比缩放的形式,而表格则采纳拓展布局。在新版编辑器中,在表格上点击←→按钮即可开展表格,并且不影响注释的宽度。

可交互

在过来,用户浏览纸质文档是一种单向接管信息的过程,而在线时代,用户不仅仅只是接管,还能够点击、输出,从而实现双向的互动。

以场景为核心

在搭建这种互动能力的过程中,咱们始终围绕着场景为核心,有取舍地构建文档的交互能力。

比方在在线文档最常见的产研场景为例。文档评审是这个场景中十分重要又须要破费大量工夫的一个流程,在这个过程中你会发现,整个交互的颗粒度是十分粗疏的:共事会针对某句话甚至某个词提出修改意见。同时在流程中的每个人,都十分关怀以后的状态:这个文档是不是最新版?

所以在语雀的划词评论中,咱们将颗粒度反对到每一个字,每一个元素,甚至图片中的某一个区域。

并且咱们上线了一个评审性能,通过这个性能,你就能清晰地晓得,这篇文档是在评审中还是曾经通过。

丰盛多样的交互模式

除了以场景为核心拓展交互能力,咱们还在摸索更加丰盛多样的交互模式。

比方能够应用打卡卡片收集已读未读状态,也能够应用投票卡片定向收集反馈,在将来你甚至能够在文档中插入数据表卡片,实现更多维的常识治理。

咱们会紧紧围绕场景去摸索更多更丰盛的交互模式。通过一张张特色卡片,帮忙用户在文档中实现更多维的常识治理。在将来,这将是一个齐全由你自定义的新文档,你能够像搭乐高一样去搭建本人的文档,而不再是过来那样干燥地码字。

这就是咱们所畅想的将来世界,一个无边界、可交互、多样化的先进生产力工具。

我是 Suki,谢谢大家🙏,欢送试用语雀。

正文完
 0