关于编辑器:阿里巴巴设计师语雀工作台改版完整复盘

8次阅读

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

2018 年 1 月 8 日,支付宝旗下常识创作和交换工具——语雀正式对外。

三年来,随着语雀在常识创作、协同、交换等场景的深刻摸索,在性能一直强化的同时,也带来了“上手老本高”“场景多”“语雀到底想做什么”的灵魂拷问。

于是,2020 年的最初一个季度,为了解决用户的外围问题,咱们对语雀进行了一次从新的扫视。

联合外围主线,咱们将第一个降级重点瞄准了工作台。

为什么是工作台?

工作台是语雀最重要的页面之一,新用户注册后进入的是工作台,老用户每天登陆 yuque.com 进入的也是工作台。

能够说,工作台是一个直达枢纽,大家每天就是从这里开启本人创作。

回顾一下老工作台:

老工作台可能根本满足大家从这里找到文档、知识库和团队的需要,但依然存在以下三局部的问题:

链路长

  1. 工作台左侧以性能维度进行场景的流转,概念门槛高,很难触达用户的应用心智。
  2. 新建不同类型的文档以下拉菜单的模式进行收起,入口较深,在工作台无奈间接体现语雀最外围的文档性能。

心智乱

  1. 动静放在工作台中,与工作台内容流转的心智不一,烦扰用户。
  2. 左侧导航性能多,用户认知老本高,决策难度大。
  3. 最近列表内容凌乱。

格调旧

  1. 视觉表白古老,页面品质感较低。
  2. 冗余的视觉烦扰元素,升高了信息传播的效率。
  3. 居中布局,页面屏效率低,对大屏用户不敌对。
  4. 年久失修,视觉一致性差。
  5. 短少情感化传播

设计指标

基于下面的问题,确立了这次改版的设计指标

洞察与优化

链路长

一. 更加贴近用户的应用场景,缩短流转链路

很多用户其实并不是在工作台开始工作,而是进入知识库 / 团队进一步查找,那么从工作台到知识库 / 团队的链路就至关重要。

为了缩短这个链路,咱们将知识库与团队列表前置,并提供给用户 Pin(自定义工作台罕用列表)的性能,用户可将本人罕用的知识库或团队在工作台中显示,缩短了用户达到外围场景的应用链路。

工作台自定义知识库列表

二. 将新建性能前置

旧工作台的新建按钮以下拉菜单的形式收起不够突出,所以,咱们此次降级将新建性能前置在页面右上角。

对于新用户:更加间接的向新用户传播语雀的外围性能。
对于老用户:缩短了新建流程,升高了静止负荷。

心智乱

一. 对立工作台心智

先前工作台中不仅有最近的文档,还有关注人的动静,这让工作台的心智暧昧不明。

于是,咱们将工作台中的动静列表与关注一起整合到发现中,给用户造成:【工作台 —— 协同和创作】【发现 —— 分享交换】的心智。

二. 整合导航栏性能

希克定律说,人面临的选中越多,所做出抉择的工夫就越长。

联合语雀接下来要强化常识创作、协同、交换的产品状态,以及用户点击左侧 tab 的数据钻研,咱们对左侧导航栏进行重塑,联合以上两点对性能进行前置、整合或收起。

通过用户点击数据,辅助设计洞见,将左侧列表应用度低的局部性能缩减,将大家重度应用的知识库、团队性能增强,让重要的信息高深莫测:

三. 精简最近列表内容

最近列表位于工作台最地方,占据最重要的 C 位,而过来,这个列表承载的内容过多,团队、知识库、文档等各个维度的细碎操作都沉积在这里,冗余的信息量让这块最重要的区域失去实用性。

咱们从新梳理了信息维度,将最重要的四个维度「新建」、「编辑」、「上传」、「评论」筛选进去,并将文档、资源和话题宰割为 3 个 Tab 各自为政。

格调旧

一. 格调摸索 —— 重塑设计语言,晋升设计品质

到底什么样的格调是语雀的格调?

带着这样的问题咱们团队外部进行了一次脑暴,将后期摸索中创立的语雀情绪版贯彻到视觉降级中。

情绪版

提炼视觉映射

二. 进步页面无效信息的透传

决定格调后,咱们再来看看以后页面信息透传的问题。

作为一款效率工具,语雀的工作台并不是须要用户在这里勾留很久的页面,相同,咱们可能更心愿用户更快的在这里找到下一站,疾速来到。

所以咱们并不需要抢占用户太多的注意力,但却须要明确传播你要返回的下一站在哪里。

缩小乐音
采纳扁平化设计,化繁为简,去除冗余的视觉烦扰,使页面更加简洁清晰。

放大信号

优化字体大小

  1. 优化字体大小,进步页面的易读性。页面增加 16px 文字,慎用 12px 大小的文字。
  2. 进步背景与文字的对比度。使其合乎 W3C 的 AA 规范。

加强图标辨识度

  1. 明确图标类型,标准应用场景,造就用户心智。
    面性图标 > 更具辨识度与目标性 > 实用于文档、知识库、团队等图标,用于对类型进行辨别
    线性图标 > 表意性强,灵便度高 > 实用于功能性图标,辨别性能间对差别
  2. 升高图标认知负荷
    ● 面性图标优化图标色彩,加强图标间的辨识度。
    ● 线性图标优化线条粗细,增强图标分量感。
  3. 加强图标的友善性
    将图标中线条的拐角及线段的末端由直角变成圆角,缩小锐度带来的距离感。

三. 进步屏效率

  1. 采纳全屏化设计进步页面展现效率,优化响应式标准,为多端体验一致性夯实根底
  2. 采纳左右布局,内容模块分区更清晰,页面拓展性强,更贴近语雀工具性的产品属性。

四. 建设清晰的设计语言

随着语雀性能一直的强化,设计组内新力量一直退出,逐步积淀出包含设计价值观、模版、组建库、全局款式的设计指引,并与前端工程联合造成 LarkUI 资产库。通过此次工作台的优化,咱们对立并提取出列表组件,进步了设计与开发同学的效率。

对立图形化格调,减少了页面情感化传播

反馈与跟进

前文说到,工作台可能语雀最重要的性能之一,所以对这个页面的改变也是慎之又慎。

新旧更替中,肯定会有一些不习惯不适应或者咱们没思考到的小细节影响大家的应用。

为了最大限度的顺滑过渡,咱们采纳老用户邀测的形式对工作台进行灰度测试,并在灰度期间收集大家的倡议反馈并疾速跟进。

用户反馈

大范畴取得用户好评,定量评估大幅晋升

让咱们非常欣慰的是,此次改版取得了用户大范畴的好评,尤为集中在:信息的检索和拜访效率以及视觉出现上失去了用户的必定。

内测用户对新老工作台的评分从老工作台的 2.27 分 进步到 3.84 分(五分制)。

突出问题

纵观所有用户的反馈评分,大都在 3.5-4.5 之间,失分的点集中在:

文档列表相干

  1. 短少对合作文档的筛选
  2. 心愿提供多种视图的最近列表出现形式
  3. 页面横向布局空间利用率有余。

知识库列表相干

  1. 邀请我合作的知识库,利用率低。
  2. 团队内的知识库无奈在工作台展现。

动静相干问题
动静列表整合到发现中后,无奈获取最近的更新

疾速跟进

疾速收集用户反馈后,咱们开了几次讨论会,联合产品布局及开发成本,疾速优化用户的外围问题。

文档列表相干

洞察问题
用户心愿最近列表提供多种视图展示,归根结底在于最近列表横向布局空间利用率低。回顾改版前最近列表的用户数据,列表前三行的点击率远远高于余下的内容并出现逐条体检的趋势。因而理论用户并没有一屏内展现更多文档的需要,反而应该优化列表内容,通过对列表信息的筛选,进步列表的应用效率。

计划优化
将列表由单行内题目、信息高低展现,改为单行内横向平铺展现,丰盛列表辅助信息,为列表提供筛选性能,使用户能够疾速聚焦指标文档,进步了列表的效率。通过筛选创建者,同时解决了合作文档找不到的问题。

知识库列表相干

洞察问题

  1. 邀请我合作知识库概念了解老本高,默认展现的知识库多为用户被迫退出,在工作台导航中显示不能满足用户预期。
  2. 后期用户调研中,用户对团队内知识库的应用门路多为:团队首页 > 指标知识库,很少通过知识库列表抉择团队内的知识库。因而在改版中,在工作台前置了集体知识库列表和邀请我合作知识库列表,缩短了这两种属性的知识库的应用门路。并没有解决工作台到团队内知识库流转链路长的问题。

计划优化
将「邀请我合作的知识库」改为更狭义的「合作知识库」展现我是成员的知识库以及团队内知识库。同时解决了邀请我合作知识库利用率低,以及团队内知识库应用链路长的问题。

动静问题

洞察问题
对于动静的使用者来说,改版前能够通过工作台疾速获取关注者的最新更新提醒。对立工作台心智后,动静被整合到发现中,用户失去了疾速获取更新的提醒。换个角度,内容被发现的老本也变高。

优化计划
当有新的动静时顶部导航栏「发现」右上角呈现「小绿点」揭示用户有新内容更新。

后续布局

工作台改版中因为新的页面架构及视觉款式使本来的体验问题更加突出。后续会依据产品布局,继续摸索优化。
集中体现在:

优化新建流程
因为新建性能的前置,使抉择新建归属体验差的问题更为突出。

新开页面逻辑优化
工具性质的布局款式,使用户在以后页面跳转的需要更加强烈,后续会尝试设计全局性导航在语雀中的应用。

新格调在全栈的落地
当用户从工作台跳转到其余页面后,新老设计格调的跳脱给用户带来割裂感。后期为验证新格调的普适性,对主流程中的外围页面进行了格调验证。后续依据 28 法令聚焦外围场景,分批落地。

心得

好的设计须要一直推动

总是听同学们提到推动体验优化的过程从老本效益的角度十分困难,最近通过做语雀长文体验优化及语雀工作台改版得出了一些小的心得跟大家分享。

第一步:发现问题
第二步:寻找解决方案的同时一直在业务方耳边裸露问题,逐步影响业务方发现问题的重要性
第三步:寻找机会,因为后期一直的在业务方面前裸露问题,在相干改版的时候业务方会被动帮我寻找机会
第四步:抓住机会疾速给出解决方案
第五步:在工夫紧急的状况下先抓住产品指标,并与产品和开发同学打成终极目标的对立认知
第六步:分级分段逐步推动开发实现最终成果

做产品可不要「贪杯」哦

这次工作台改版的外围是对立用户心智,集中体现在产品概念、功能模块、交互模式、视觉款式上的优化。
产品在长年运作积攒的过程中,大都存在性能积攒导致用户认知艰难,产品应用难度减少的问题。
当咱们增加新性能的时候,要思考老本效益

*● 产品层 :* 新增加的性能是否是产品的外围性能链路中。
● 用户层: 新增加的性能是否是用户迫切需要的。
● 设计层:新的交互 & 视觉形式是否合乎设计准则。
● 老本维度:综合上述维度,新性能增加后,投入产出比是否成正比。

依据以上四个维度,判断是否丰盛产品性能。

正文完
 0