美事作为 58 集团内部线上办公软件,上线距今已经 5 年有余。在近两年疫情的影响下,随着线上办公、线上协同的诉求增加,旧版美事的诸多问题逐渐显现。为了给用户带来更好的使用体验,58UXD 和企业平台部推动了本次改版设计。
通过用户访谈和项目组线上内部讨论,我们总结旧版美事的问题集中在以下三点:
品牌调性不清晰,缺乏品牌感;
协同办公核心功能不突出;
办公平台定位与内部运营框架混乱功能分散。
所以本次改版的主要设计手段为:
重塑品牌调性:品牌色、品牌标识优化,视觉语言升级;
强化协同属性:更贴合办公产品的定位,打磨协同类功能使用体验;
优化产品框架:聚合企业内部运营场景,提升企业内容扩张力。
重新定义产品主色
旧版美事的品牌色为橙色,寓意:友善,温暖,充满活力。从最早以内部沟通为核心功能的产品,到如今的在线协同办公平台,随着业务不断扩张和发展,我们的用户往往每天都要长时间使用我们的产品,大面积的橙色占比往往使用户更易疲劳。品牌色升级,从暖色系回归冷色系,只为向我们的用户传达:高效、安全、稳定、可信任的产品使用感受。
品牌标识升级
每一个品牌升级都不可避免的从重绘 logo 开始。对于 58 员工而言,美事有着让人印象深刻的橙子造型,所以我们保留这一份视觉”记忆 “,希望可以延续用户对美事最直接的品牌认知。我们在创意上保持克制的同时,将新的品牌心智注入进品牌形象中,结合“传橙 收获 成长 开放” 的新愿景,进行 logo 的抽象化设计表达。
设计语言升级
伴随美事 6.0 品牌升级,如何增强用户在产品层面的感知成为品牌渗透中的重点。我们将更清爽、更高效、更灵活的设计理念引入美事的设计语言中。面对更为复杂的场景,需要框架性、整体性的思考,更需要在交互路径上降低用户使用门槛。
更清爽
结合品牌升级中对美事品牌色的重新定义,延展出丰富的色彩体系,并应用于产品页面设计中,最终构建出美事的色彩组件。通过对线上颜色统一运用提升产品的一致性和清爽度。
提高消息列表清爽度:通过提高文字梯度、降级辅助文字灰度,弱化分割线颜色等手段提高用户办公场景下的阅读体验,使关键信息更突出,便于用户快速阅读和信息速览。
加大消息气泡、文字字号,拉高底部输入栏高度,强化 icon 颜色纯度,提高用户沟通场景界面的清爽度。
更高效
在新美事中使用更直观更简洁的图标设计。只为让用户更关注内容本身,通过把握图标核心辩识点降低用户理解成本高效传递信息。
更灵活
为保证产品一致性,避免用户在使用不同功能时产生割裂感,设计的规范、统一的组件、一致的设计语言就变得至关重要,我们力求每个组件的样式多样性以适应不同场景,同时也为产品后续的开放能力建设打好基础。通过组件库、规范文档设计师可以直接基于典型页面做设计、复用或者修改细节,极大提升设计和产品研发效率。
满足个性需求 - 灵活可配置的导航
随着产品功能的不断丰富,为了应对用户精准的差异化需求新版底部导航区支持自定义,通过这样的自定义,让用户以最快的速度、最简洁的操作进行快速跳转从而减少用户行为路径提高产品易用性。
让沟通更愉悦 - 重绘表情
提升协同效率从愉悦沟通开始!人是要被鼓励的,文档的一个点赞或者在聊天中一个鼓掌的表情都会让你在日复一日的平凡工作中感受到自己的价值。美事 6.0 新表情与品牌因子进行了融合,并针对办公场景设计了全新 emoji 表情,只为用户沟通更愉悦。另外我们对表情面板进行了优化,交互逻辑从左右翻页升级为下拉滚动,减少了操作步长,提高了查找速度。
聚焦用户场景 - 协同触达更多样
触达 1:从早期单纯的 IM 沟通工具,美事不断集成公司各类协作应用(例如:日历、待办、文档、视频会议、直播等),变身为多工具、多业务的数据互通的一体化的协同办公平台。从 “工具” 到“平台”,我们将原来的 “应用中心” 升级为“全新工作台”。新版工作台涵盖协同办公领域数种功能,真正实现了企业内部各业务的高效协同。在视觉上,我们对 100 + 应用图标进行了重绘,在保留延续性的同时让他们更符合界面场景。
触达 2:通过工具的变革,提升员工工作效率,让企业运转的更流畅。在新版设计中,用户打开 APP 不用切换导航栏,即可从消息页进入所有核心入口。另外,下拉二楼与待办系统进行了数据打通,“今日待办” 让用户快速了解今日重要事。消息页加号、下拉二楼、3Dtouch 等多人口的加入,满足用户的各种使用习惯。
现在市场上的企业办公产品越来越趋于同质化,作为服务内部员工的产品如何提升产品温度感和内容扩张力也是我们本次设计的改版目标。
新发现:聚焦信息分发运营
新美事将积分消费、员工福利和公司资讯进行功能聚合,打造平台的运营中心,使发现路径更短,聚合吸引力更强。其中顶部神奇生活包含积分专区和员工福利两种入口,在设计风格上我们进行了区别化设计,通过区别化的设计使得积分消费能够得到更大程度的突出。公司资讯模块方便企业员工查看和了解组织文化。企业新闻、活动通知等信息都可以在这里呈现。
新侧边:强化员工归属
新版的个人中心与美事勋章系统进行了数据打通,交互方式借助手机陀螺仪功能,通过手机扭转移动,勋章会在 X 轴水平位移滚动。此功能的设计,给用户提供趣味性体验,提升用户心智,增加品牌传播。另外新版电子工卡功能做了精细化打磨,加入了动效隐喻提高了视觉层级,增强了用户点击欲。
美事 6.0 改版,从立项到设计再到研发,多部门同学紧密配合,在有限的时间内最大化的完成预期上线效果。全量上线后,通过问卷对本次改版进行满意度收集,取得的成绩离不开每一位参与改版的同学支持,美事 6.0 改版只是一个开始,希望通过不断的打磨优化,秉持初心,为更多的用户提供更好的使用感受,享受到方便快捷的办公方式。
最后请您欣赏本次改版的品牌宣传视频:
感谢您的阅读,以上内容由 58UXD 团队创作与设计,谢谢 UXD 团队每一位设计师用心创作与支持~ 也期待您的加入。
项目指导 UX Director:何潇 / 李生 / 崔登学 / 张莉
交互设计 Interation Designer:林洁
UI 设计 UI Designer:朱超 / 刘朝晖 / 孙巧玲 / 孙非
视觉动效设计 Motion Designer:徐勤栋 / 谢玲艳 / 朱保旭 / 张彭星 / 訾亚磊
特别感谢 Special Thanks:企业平台产品技术团队
朱超
彼方尚有荣光在
扫码进群
转载时请连同下方内容一起转发
请与该公众号联系获取内容授权
长按二维码 轻松关注
微信公众号:i58UXD
58 同城用户体验设计中心