《在线时代先进文档编辑器设计探索-Suki》演讲视频&文字版

简介: 《在线时代先进文档编辑器设计探索-Suki》演讲视频&文字版
编者按:本文是蚂蚁集团语雀体验设计师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,谢谢大家🙏,欢迎试用语雀

相关文章
|
6月前
|
存储 编译器 数据库
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV核心类型 Mat
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV核心类型 Mat
|
存储 缓存 编解码
Web端短视频编辑器的设计与实现 - 像做PPT一样做视频
对于视频的生产,一般的方案是交由专业机构去创作,但这将花费很多预算,如果我们能提供一个工具,基于知识的通用结构沉淀一些视频模版,让用户快速创作出视频知识内容岂不美哉?让想法再奔放些,如果我们能直接从知识库中抽取结构化的知识内容直接生成视频或是半成品视频,用户只需要稍作调整就能发布,这想想就很酷吧?是的,小蜜视频创作工具我就是想做这样一件事情。本篇分享来自阿里巴巴前端工程师李志成(敦固)在第十六届D2前端技术论坛的分享。
2829 0
Web端短视频编辑器的设计与实现 - 像做PPT一样做视频
|
30天前
|
Unix Shell Linux
【Shell 命令集合 文档编辑】Linux 文本编辑器 ex命令使用指南
【Shell 命令集合 文档编辑】Linux 文本编辑器 ex命令使用指南
34 0
|
30天前
|
存储 Shell Linux
【Shell 命令集合 文档编辑】Linux 行编辑器 ed命令使用指南
【Shell 命令集合 文档编辑】Linux 行编辑器 ed命令使用指南
29 0
|
6月前
|
计算机视觉
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV视频lO接口
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV视频lO接口
|
6月前
|
文字识别 算法 计算机视觉
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV图像处理
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV图像处理
106 1
|
6月前
|
编译器 计算机视觉
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV vs2015编译
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV vs2015编译
|
存储 监控 安全
RFC 系列文档和 RFC 编辑器的相关说明
第一个征求意见 (Request for Comments,RFC) 文档于 1969 年 4 月发布,作为设计和构建我们现在所知的互联网的努力的一部分。从那时起,RFC 系列一直是致力于记录 Internet 技术规范的档案系列,包括 Internet 研究和工程社区的一般贡献以及标准文档。
351 0
RFC 系列文档和 RFC 编辑器的相关说明
MarkDown编辑器-MarkText使用文档
1.Why MarkText typora要收费使用了,🤔我们可以使用免费的开源软件MarkText来编写MarkDown文档 MarkText官方承认,将会永远免费开源此软件 MarkText 是一个带有各种降价扩展的降价实时预览编辑器。您可以简单地编写和编辑文本 安装地址: MarkText安装
1106 0
MarkDown编辑器-MarkText使用文档
|
Cloud Native Docker 容器
云原生之使用Docker部署etherpad文档编辑器
云原生之使用Docker部署etherpad文档编辑器
573 1