7.16-7.23 期间,阿里UCAN公开课文字精华笔记,公众号「UX小学」每日同步更新。将公众号设为「关注星标」,即可每日按时接收 UCAN 精华资料推送!


UCAN文字笔记:语雀设计,让知识创作轻松上手

支付宝高级设计专家 – 大宓

可能有很多同学从来没有听说过语雀。先简单介绍下:
语雀 是一个专业的云端知识库,孵化自蚂蚁金服 ,是体验科技理念下诞生的一款创新产品。语雀有一个使命:让知识等于财富,致力于为每个想表达所思所想的人提供一款顺手的工具,让知识能得以记录和传播。互联网知识发展推动了知识创作,经历了 1.0 本地文档形态 – 1.5 文档在线形态 – 2.0 文档协同形态这三个阶段,语雀将会以知识库 + 文档的 SaaS 服务为起点,把知识、协同、管理做好,语雀设计致力于知识创作和交流的体验,将一股清流般带给用户。


说再多,也不如视频来得直观。看完下方四十秒的短片,你就知道什么是语雀啦!


↑ 需佩戴 🎧  或开启声音播放 ↑ 

语雀,全新的知识协同工具

在协同办公软件这个领域,细分有 3 条赛道,分别是团队协作软件、项目管理软件、文件及文档软件,对应的市场规模分别是 35 亿美金、48 亿美金、110 亿美金。语雀定位在文件及文档软件这个赛道中,即全新的知识协同工具。全球用户使用文档的规模在 10 亿以上。
这个领域我们有着强大且令人尊敬的对手,国外有 Microsoft Office 办公套件、Google 文档、Confluence、Notion,国内有石墨文档、飞书、WPS。从 2016 年孵化至今,今天语雀已是 10 万阿里员工进行文档编写、知识沉淀的标配工具。



我们是这样办公的

大家一定非常好奇我们阿里同学平时是如何使用语雀来实现协同办公的,以疫情期间为例。年后国内因疫情大面积爆发,员工主要以居家办公为主,每天晨会结束后,我们使用 话题知识库 来记录晨会纪要,帮助团队完成一日的工作规划。
白天大家使用 文档知识库 书写需求文档和技术文档,并通过 画板知识库 来完成设计稿的异步评论,晚上大家也会使用语雀汇总工作日报。



我们的用户和诉求

作为一款企业协同 SaaS 软件,语雀的典型用户主要集中在技术、运营、产品、管理者,大家对于对于知识的创作和分享有相较一致的共性需求。
有趣的是设计师还捕获到不同群体的诉求差异,体现在编辑器用户界面的简洁、整理和寻找知识的高效、知识的结构化管理、团队协作的信息透明。


设计聚焦

本次分享为大家带来的一种设计方法,我们称之为「设计聚焦」。语雀是一支人员精简的创业团队,工作敏捷且高效,更偏爱于聚焦做事,设计团队亦是如此。我们认为设计聚焦在主链路的核心场景,尤其是用户高频使用的功能上。语雀设计对场景的体验有较高的要求,对于权限、读写这类的全局体验有深入的理解,可以作为客服小二为用户答疑解惑;对于用户核心流程的体验和用户界面的设计呈现,我们坚决做好专业深耕和设计下钻。下面来看看语雀设计如何做设计聚焦。

第一步,寻找用户使用的主链路。以语雀为例,知识在语雀上扭转链路是由知识创作 – 知识交流 – 知识协作 – 知识管理 – 知识再创作,最终完成一次扭转闭环。知识创作就是知识扭转中的一条主链路,把设计聚焦放在这条链路上。


第二步,设计师可以把各条链路下的用户使用场景归类出来(因为语雀对于各个场景是有设计铺垫的,如果没有梳理过用户场景请另行做功课),语雀设计认为「文档编辑」就是创作链路的核心场景。


第三步,在文档编辑场景中持续挖掘用户的高频行为,我们通过数据发现用户的高频行为集中在编辑器顶部的工具栏上,那么工具栏正式成为语雀设计聚焦的一则经典案例。工具栏设计让我们想到学习的对象是微软 Office 的 Ribbon UI,由选项卡(tab)和群组(group)构成,有序的布局帮助用户更快的找到重要的和常用的功能。


以 Word 为例,「开始Tab」 中拥有 48 枚图标坐落在工具栏中,我们的用户诉求是界面简洁为非 Office 般复杂。语雀工具栏设计以单行为基础,将功能按照通用编辑、文本编辑、颜色编辑、排版编辑、特色编辑等,从左到右分布,展示上保留了用户操作的高频功能并将低频功能收折,最终保留了 27 枚常用图标方便用户触发交互行为。


关于工具栏的设计假设,我们在不同尺寸的编辑器上做了设计验证,比如在日报场景(中型编辑器)和划词评论场景(mini 编辑器),并在全局编辑器中进行了大量的设计复制,确保在大、中、小编辑器中工具栏体验的一致性。
2020 年 3 月语雀发布的 桌面客户端,同样考虑了工具栏编辑和 web 端体验的一致性,友好的支持了工具栏的自动收折。放眼全局,语雀设计考虑到不同屏幕分辨率,从而引入了断点系统设计,让工具栏在多分辨率下自适应布局,提升编辑体验。


设计聚焦的方法适用于个人和团队,找到适合场景和高价值功能,通过垂直打磨可以有效保证设计输出。我们更建议设计聚焦一段时间再跳出来看看全局,做好设计验证和设计复制,实现成本投入和全局复用的价值最大化。

设计价值观

语雀设计为大家带来一个设计指导思想,驱动设计前行,叫设计价值观。它是体验的北极星,为设计师提供设计秩序的内在标准和设计向导。
最初,语雀只是一款简单易用的在线文档工具,伴随着产品价值观逐渐成长:安全可信任、与用户一起成长、平静创作愉悦的交流。基于此,语雀设计诞生出平静、友善的设计价值观。平静,专注于创作和阅读,给人以清风徐来的体验。友善,像朋友一样,给与确定性和帮助。



平静 – 清风徐来的阅读体验。
我们从大自然获得了四种颜色的馈赠,稻谷金、肉桂红、云山蓝、松石绿,把这些颜色植入到语雀品牌设计中。比如下面的这个案例,这幅插画是一张饱含诗意的 404 报错页面,画面描述的是一只小云雀矗立在河中央的石头上,专注且平静的看着一本书,而书中正是这大千世界。第一,我们希望借由书中画呈现出语雀和知识关系,让清风徐来的气质贯穿语雀(全局插画也是如此)让冰冷的报错页有温度,第二,产品 UI 风格和配色的明度、纯度,以这幅插画为基线,不会比它更强壮,不会更加闹腾。


平静 – 专注于阅读。
之前在讨论区常有用户发来抱怨,比如“11 号字太小,文章布局拥挤”。后来我们提供了宽松、紧凑两种布局的解决方案,但我更想说明的是这个解决方案背后,语雀设计的思考是什么。

收到用户的抱怨后,设计师并没有直接给出默认字号由原 11 号字增大到 12 号字这种设计方案,而是和前端同学仔细排查了一遍语雀文档的全部字号和文字间距。首先,发现我们使用的字号单位是 pt「磅」,其实用户对于 px「像素」更有感知,对于「磅」的单位概念相较模糊。所以设计师做了一个决定,将语雀所有的字号标准从「磅」升级为「像素」,新版本默认字号是 15px。

其次,之前的文字间距是代码写死的,而用户由小到大的调整字号时字形大小的增长曲线非常大。所以当用户将默认字号变大时,对应的行间距没有变化,就会造成文章排版拥挤的体验。出于平静阅读的目标,我们引入了一个变量单位叫 em,通过 em 可以有效的把字号和字间距、行间距动态捆绑在一起,变化一致。用户专注阅读,让文章的版式更有呼吸感。




友善 – 保证文字的可读性。 
在 W3C 标准中,语雀设计考虑到网页无障碍阅读,过去保持着 AA 标准,即文字的前景色比后景色大于 4.5:1,保障弱视群体的可读性,今年语雀设计全面升级到 AAA 标准,可读性包容了那些视觉受过轻微损伤的用户,这也是语雀文档更为友善的一面。


友善 – 帮助新手用户成长。
我们对用户做了分层,当新手用户完成第一次注册登录,进入工作台首页即看到我们专门设计的知识库样板间。聚焦在样板间内,用户可以快速创建一支兴趣小组或者一份学习笔记。
通过引导激活新用户,方案上线后的数据显示新手用户会更加积极的完成一篇文档,参与编辑的新手用户和总新手用户占比从 23% 提升到 35%,整体增长了 52%。


友善 – 提升熟练用户使用效率。
对于熟练用户我们思考如何提升知识创作效率,设计师在新建文档流程中加入了模板方案。默认将一些重要且高频使用的模板,比如周报、代办事项,会议纪要放出来。
比如在会议场景中,通过模板的使用方便产品经理快速完成会议纪要录入,并在文档发布时勾选邮件选项,将实时的会议纪要转发全员,这样知识的创作和传播实现大幅度提效。事实上语雀设计还做了很多提效好用的模板,引入了语雀特色卡片,比如思维导图卡片、流程图卡片、日历卡片、地图卡片等,实现让知识创作轻松上手。



平静、友善的语雀设计价值观,在支撑业务设计的同时起到了北极星的指引作用,设计团队自下向上贯穿和落实,紧密围绕专业本身实现用户价值。


工具产品设计不会面面俱到,而是有的放矢。打透一个有亮点的体验,设计价值最大;找到一个长远的指导思想,驱动设计前行。所以文中的方法,也主要强调设计聚焦,且聚焦在主链路核心场景,尤其是用户高频操作的功能上;其次,设计价值观是体验的北极星,能为设计师提供设计秩序的内在标准和设计向导。

最后,欢迎大家体验语雀在线协作: https://www.yuque.com/
本笔记完


前四篇UCAN笔记
支付宝 数字金融-信任力设计方法总结沉淀!
飞猪&支付宝 全链路体验设计总结
《掌握设计师思维,做啥都会比别人强!
优酷内容消费设计思考与沉淀》




长按识别关注二维码
接收每日 UCAN 笔记精华推送

阿里巴巴UCAN合作媒体  UX小学

本篇文章来源于微信公众号: UX小学