让工作更高效愉悦：

知识协同工具设计探索
杨颖（幺幺） 蚂蚁集团体验设计师
2020 年是 协同办公行业 的高光时刻
2020 年是 协同办公行业 的高光时刻

2016 年 - 2020 年中国「协同办公」行业市场规模变化 2020 年 1 月 22 日 - 2 月4 日「远程办公」关键词搜索热度

2020 年同比增长 在 2月3日 同比上升

95% 975%
 疫情期间在线开晨会

小明 一会儿开个晨会
同步下各自今天的工作安排吧

好的 小红

啊，我还在开另一个会 小王
 1 分钟后

小明 人都进来了吗？

哎呀，我这儿声音断断 小红
续续的，我检查下网络

10 分钟后

好了，终于正常了 小红

小明 …那我们开始吧
会议结束后

… 我上一个会结束了
小王
有什么信息要同步的吗？
增高的沟通成本 频繁的会议 不稳定的网络 变长的工作时间

线上办公如何保持高效？
办公感觉更累了，怎么办？
蚂蚁集团体验技术部正在 协同办公领域 探索新实践

以知识协同工具「语雀」 为例
分享相关设计经验
 新一代云端知识库
让协作更高效，打造轻松流畅的工作体验
 面对上述问题
产品理念也在发生变化

随时响应 异步协同 更高效

关注老板 重视一线员工 更有幸福感

传统理念 VS 新理念
 设计目标

提高
工作效率

单人工作 多人协同

提升
工作幸福感
 提高工作效率

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦

提升工作幸福感
 提高工作效率

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦

提升工作幸福感
降低 案例分析

负荷 语雀工作台改版
在语雀上异步协同的一天

9点 12 点 18 点

撰写产品需求文档 发起线上评审，等待其他人反馈 调整产品需求文档

产品经理

用在线表格统计客户信息 阅读产品需求文档，并给出意见
运营

阅读用户访谈记录 撰写用户调研报告 阅读产品需求文档，并给出意见

设计师
在语雀上异步协同的一天

9点 12 点 18 点

撰写产品需求文档 发起线上评审，等待其他人反馈 调整产品需求文档

产品经理

工作台是开启大多数工作的第一步
用在线表格统计客户信息
阅读产品需求文档，并给出意见
运营

在线观看用户访谈视频 撰写用户调研报告 阅读产品需求文档，并给出意见

设计师
语雀用户进入工作台后

30% 的用户从这里开始工作
语雀用户进入工作台后

信息混乱，找不到目标内容

团队

知识库

文档

知识库

文档
语雀用户进入工作台后

80% 的用户都选择从这里找内容

前往其他页面进一步查找
 主要问题

内容乱
找不到
步骤繁琐
主要问题 设计目标 设计策略

内容乱 弱化干扰
更聚焦工作
找不到 （降低认知负荷）
强化目标
提高查找效率
步骤繁琐 （降低运动负荷）
缩短路径
弱化干扰
去除不相关内容
弱化干扰
去除不相关内容
隐藏重复元素
弱化干扰
去除不相关内容
隐藏重复元素
去除不必要的装饰
弱化干扰
去除不相关内容
隐藏重复元素
去除不必要的装饰
隐藏不常用功能
合并重复功能
强化目标
突出核心/常用操作
强化目标
突出核心/常用操作
增强核心内容辨识度
缩短路径
常用入口放到一级导航
并允许用户自定义
 新版设计内测反馈

“ 最近文档列表样式的优化，更显 简洁清晰，是我喜欢的菜 ”

“ 现在用语雀进行创作更 舒适 了 ”

“ 页面也变得 轻量简洁 ”

“ 不管是新建或者是查看知识库，用户点击的 路径都缩短 了 ”

“ 新增了新建文档表格等的 扁平化操作方式 ，是很不错的设计 ”

BEFORE AFTER
 提高工作效率

弱化干扰
强化目标
缩短路径

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦

提升工作幸福感
 提高工作效率

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦

提升工作幸福感
 案例分析
缓解
疲劳 语雀文档样式优化
在语雀上异步协同的一天

9点 12 点 18 点

撰写产品需求文档 发起线上评审，等待其他人反馈 调整产品需求文档

产品经理

用在线表格统计客户信息 阅读产品需求文档，并给出意见
运营

阅读用户访谈记录 撰写用户调研报告 阅读产品需求文档，并给出意见

设计师
在语雀上异步协同办公的一天

9点 12 点 18 点

撰写产品需求文档 发起线上评审，等待其他人反馈 调整产品需求文档

产品经理

长时间的书写和阅读容易引起视觉疲劳
用在线表格统计客户信息 阅读产品需求文档，并给出意见
运营

在线观看用户访谈视频 撰写用户调研报告 阅读产品需求文档，并给出意见

设计师
用户原声

页面的排版行 间距太丑 了，能修改一下么？

默认 太小 了，瞅的眼花

很紧凑 显得 没有美感，阅读起来也 很累。

文字间 排得太紧 了，如果每段文字多，看着累

现在的页面编辑其实 有点紧密，观感不好
字号偏小

间距偏小
Before After
0.05em (0.7px) 0.008em (0.12px)

1.7em 1.7em
14px 15px (26px)
(24px)
#262626 #404040
对比度 1:15 对比度 1:10

增大字号，降低颜色对比度
减小字间距，增大行间距
Before After
 提高工作效率

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦
改善长文本易读性
包括文字和排版

提升工作幸福感
 提高工作效率

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦

提升工作幸福感
在语雀上异步协同的一天

9点 12 点 18 点

撰写产品需求文档 发起线上评审，等待其他人反馈 调整产品需求文档

产品经理

用在线表格统计客户信息 阅读产品需求文档，并给出意见
运营

阅读用户访谈记录 撰写用户调研报告 阅读产品需求文档，并给出意见

设计师
 建立多种信息连接渠道

团队首页

产品经理 个人主页
开发
话题讨论

文档评论

运营
动态 设计师

消息推送
 为了弥补异步协同的弱点，建立多种信息连接渠道

产品经理
开发
利用信息自身
引起用户了解和分享的兴趣

运营 设计师
 案例分析
增强
连接 语雀团队首页/个人主页改版
改版前的团队首页
改版前的团队首页

内容单一，形式单一
 主要问题

没啥东西

有啥好看
主要问题 设计目标 设计策略

没啥东西 强化信息分层
让信息主动发声
有啥好看 （找到引起用户兴趣的钩子）
优化展示样式
强化
信息分层
增加内容分组
增加分组导航
强化
信息分层
增加内容分组
增加分组导航
支持更灵活的布局
优化
展示样式
增加图片元素
美化
展示样式
增加图片元素
为不同尺寸适配设计
抽取可复用模块
抽取可复用模块

知识库

动态
应用到个人主页

知识库 675 35

动态

+5
通过强行化信息分层和优化展示样式
用户主动了解和分享信息的行为明显增多

675 35

个人主页访问量 有效阅读率 （从个人首页进入知识库、团队、文档阅读页）

20.6% 29.4%
 提高工作效率

强化信息分层
优化展示样式

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦

提升工作幸福感
 提高工作效率

降低 增强
负荷 连接
单人工作 多人协同
缓解 减少
疲劳 摩擦

提升工作幸福感
 案例分析
减少
摩擦 语雀表情包系列设计
 疫情期间，为了减少开会开始在语雀上提交日报

日报
产品经理
开发

运营 设计师
主管
大家每天写的都差不多，这也太敷衍了 🤷

一线员工
每天都要写日报，好累哦 😔
写了也没人看，写来有啥用？形式主义！😡
 让我们来看看大家写的日报

测试了一下刚上线的项目， 跟进 XX 项目进度，当前已 项目设计评审，相比上一版方案已

没有问题，开发哥哥很可靠 经在小组测试中，本周发布 经有了比较大的变化，感觉受到了
很大打击。
 增加表情包，更好表达感情

测试了一下刚上线的项目， 跟进 XX 项目进度，当前已 项目设计评审。相比上一版方案已

没有问题，开发哥哥很可靠 经在小组测试中，本周发布 经有了比较大的变化，感觉受到了
很大打击。
尝试更多情感化元素：语雀 IP 形象
结合工作场景推出品牌 IP 表情包

个人情绪 人际交往 工作场景

发通知

发评审

做客服
表情包的实际应用
 提高工作效率

弱化干扰
强化信息分层
强化目标
优化展示样式
缩短路径
降低 增强

知识协同工具 负荷 连接
单人工作 多人协同
设计探索 缓解 减少
疲劳 摩擦
改善长文本易读性 情感化元素
包括文字和排版 替代冰冷的文字

提升工作幸福感
让工作更高效愉悦
THANKS!