改版背景

image.png
美事作为58集团内部线上办公软件,上线距今已经5年有余。在近两年疫情的影响下,随着线上办公、线上协同的诉求增加,旧版美事的诸多问题逐渐显现。为了给用户带来更好的使用体验,58UXD和企业平台部推动了本次改版设计。

制定设计目标

通过用户访谈和项目组线上内部讨论,我们总结旧版美事的问题集中在以下三点:

  1. 品牌调性不清晰,缺乏品牌感;
  2. 协同办公核心功能不突出;
  3. 办公平台定位与内部运营框架混乱功能分散。

OA产品如何做设计改版 - 图8OA产品如何做设计改版 - 图9
所以本次改版的主要设计手段为:

  1. 重塑品牌调性:品牌色、品牌标识优化,视觉语言升级;
  2. 强化协同属性:更贴合办公产品的定位,打磨协同类功能使用体验;
  3. 优化产品框架:聚合企业内部运营场景,提升企业内容扩张力。

重新定义产品主色

旧版美事的品牌色为橙色,寓意:友善,温暖,充满活力。从最早以内部沟通为核心功能的产品,到如今的在线协同办公平台,随着业务不断扩张和发展,我们的用户往往每天都要长时间使用我们的产品,大面积的橙色占比往往使用户更易疲劳。品牌色升级,从暖色系回归冷色系,只为向我们的用户传达:高效、安全、稳定、可信任的产品使用感受。
image.png

品牌标识升级

每一个品牌升级都不可避免的从重绘 logo 开始。对于58员工而言,美事有着让人印象深刻的橙子造型,所以我们保留这一份视觉”记忆“,希望可以延续用户对美事最直接的品牌认知。我们在创意上保持克制的同时,将新的品牌心智注入进品牌形象中,结合“传橙 收获 成长 开放 ”的新愿景,进行logo的抽象化设计表达。

image.png
image.png


设计语言设计

伴随美事6.0品牌升级,如何增强用户在产品层面的感知成为品牌渗透中的重点。我们将更清爽、更高效、更灵活的设计理念引入美事的设计语言中。面对更为复杂的场景,需要框架性、整体性的思考,更需要在交互路径上降低用户使用门槛。

image.png

更清爽

结合品牌升级中对美事品牌色的重新定义,延展出丰富的色彩体系,并应用于产品页面设计中,最终构建出美事的色彩组件。通过对线上颜色统一运用提升产品的一致性和清爽度。
OA产品如何做设计改版 - 图14
提高消息列表清爽度:通过提高文字梯度、降级辅助文字灰度,弱化分割线颜色等手段提高用户办公场景下的阅读体验,使关键信息更突出,便于用户快速阅读和信息速览。

OA产品如何做设计改版 - 图15
加大消息气泡、文字字号,拉高底部输入栏高度,强化icon颜色纯度,提高用户沟通场景界面的清爽度。
OA产品如何做设计改版 - 图16

更高效

在新美事中使用更直观更简洁的图标设计。只为让用户更关注内容本身,通过把握图标核心辩识点降低用户理解成本高效传递信息。
OA产品如何做设计改版 - 图17

更灵活

为保证产品一致性,避免用户在使用不同功能时产生割裂感,设计的规范、统一的组件、一致的设计语言就变得至关重要,我们力求每个组件的样式多样性以适应不同场景,同时也为产品后续的开放能力建设打好基础。通过组件库、规范文档设计师可以直接基于典型页面做设计、复用或者修改细节,极大提升设计和产品研发效率。
OA产品如何做设计改版 - 图18

三、提升办公属性

满足个性需求-灵活可配置的导航

随着产品功能的不断丰富,为了应对用户精准的差异化需求新版底部导航区支持自定义,通过这样的自定义,让用户以最快的速度、最简洁的操作进行快速跳转从而减少用户行为路径提高产品易用性。
OA产品如何做设计改版 - 图19
OA产品如何做设计改版 - 图20
让沟通更愉悦-重绘表情

提升协同效率从愉悦沟通开始!人是要被鼓励的,文档的一个点赞或者在聊天中一个鼓掌的表情都会让你在日复一日的平凡工作中感受到自己的价值。美事6.0新表情与品牌因子进行了融合,并针对办公场景设计了全新emoji表情,只为用户沟通更愉悦。另外我们对表情面板进行了优化,交互逻辑从左右翻页升级为下拉滚动,减少了操作步长,提高了查找速度。
OA产品如何做设计改版 - 图21
OA产品如何做设计改版 - 图22

聚焦用户场景-协同触达更多样

触达1:从早期单纯的IM沟通工具,美事不断集成公司各类协作应用(例如:日历、待办、文档、视频会议、直播等),变身为多工具、多业务的数据互通的一体化的协同办公平台。从“工具”到“平台”,我们将原来的“应用中心”升级为“全新工作台”。新版工作台涵盖协同办公领域数种功能,真正实现了企业内部各业务的高效协同。在视觉上,我们对100+应用图标进行了重绘,在保留延续性的同时让他们更符合界面场景。
OA产品如何做设计改版 - 图23
OA产品如何做设计改版 - 图24
触达2:通过工具的变革,提升员工工作效率,让企业运转的更流畅。在新版设计中,用户打开APP不用切换导航栏,即可从消息页进入所有核心入口。另外,下拉二楼与待办系统进行了数据打通,“今日待办”让用户快速了解今日重要事。消息页加号、下拉二楼、3Dtouch等多人口的加入,满足用户的各种使用习惯。

image.png四、优化框架木块

现在市场上的企业办公产品越来越趋于同质化,作为服务内部员工的产品如何提升产品温度感和内容扩张力也是我们本次设计的改版目标。

新发现:聚焦信息分发运营

新美事将积分消费、员工福利和公司资讯进行功能聚合,打造平台的运营中心,使发现路径更短,聚合吸引力更强。其中顶部神奇生活包含积分专区和员工福利两种入口,在设计风格上我们进行了区别化设计,通过区别化的设计使得积分消费能够得到更大程度的突出。公司资讯模块方便企业员工查看和了解组织文化。企业新闻、活动通知等信息都可以在这里呈现。
OA产品如何做设计改版 - 图26
OA产品如何做设计改版 - 图27
新侧边:强化员工归属

新版的个人中心与美事勋章系统进行了数据打通,交互方式借助手机陀螺仪功能,通过手机扭转移动,勋章会在X轴水平位移滚动。此功能的设计,给用户提供趣味性体验,提升用户心智,增加品牌传播。另外新版电子工卡功能做了精细化打磨,加入了动效隐喻提高了视觉层级,增强了用户点击欲。
OA产品如何做设计改版 - 图28
OA产品如何做设计改版 - 图29

OA产品如何做设计改版 - 图30

美事6.0改版,从立项到设计再到研发,多部门同学紧密配合,在有限的时间内最大化的完成预期上线效果。全量上线后,通过问卷对本次改版进行满意度收集,取得的成绩离不开每一位参与改版的同学支持,美事6.0改版只是一个开始,希望通过不断的打磨优化,秉持初心,为更多的用户提供更好的使用感受,享受到方便快捷的办公方式。