58这个设计改版升级,有点东西
The following article is from 58UXD Author 环铁艺术家
通过用户访谈和项目组线上内部讨论,我们总结旧版美事的问题集中在以下三点:
品牌调性不清晰,缺乏品牌感;
协同办公核心功能不突出;
办公平台定位与内部运营框架混乱功能分散。
所以本次改版的主要设计手段为:
重新定义产品主色
旧版美事的品牌色为橙色,寓意:友善,温暖,充满活力。从最早以内部沟通为核心功能的产品,到如今的在线协同办公平台,随着业务不断扩张和发展,我们的用户往往每天都要长时间使用我们的产品,大面积的橙色占比往往使用户更易疲劳。品牌色升级,从暖色系回归冷色系,只为向我们的用户传达:高效、安全、稳定、可信任的产品使用感受。
品牌标识升级
每一个品牌升级都不可避免的从重绘 logo 开始。对于58员工而言,美事有着让人印象深刻的橙子造型,所以我们保留这一份视觉”记忆“,希望可以延续用户对美事最直接的品牌认知。我们在创意上保持克制的同时,将新的品牌心智注入进品牌形象中,结合“传橙 收获 成长 开放 ”的新愿景,进行logo的抽象化设计表达。
设计语言升级
伴随美事6.0品牌升级,如何增强用户在产品层面的感知成为品牌渗透中的重点。我们将更清爽、更高效、更灵活的设计理念引入美事的设计语言中。面对更为复杂的场景,需要框架性、整体性的思考,更需要在交互路径上降低用户使用门槛。
结合品牌升级中对美事品牌色的重新定义,延展出丰富的色彩体系,并应用于产品页面设计中,最终构建出美事的色彩组件。通过对线上颜色统一运用提升产品的一致性和清爽度。
提高消息列表清爽度:通过提高文字梯度、降级辅助文字灰度,弱化分割线颜色等手段提高用户办公场景下的阅读体验,使关键信息更突出,便于用户快速阅读和信息速览。
加大消息气泡、文字字号,拉高底部输入栏高度,强化icon颜色纯度,提高用户沟通场景界面的清爽度。
更高效
在新美事中使用更直观更简洁的图标设计。只为让用户更关注内容本身,通过把握图标核心辩识点降低用户理解成本高效传递信息。
更灵活
为保证产品一致性,避免用户在使用不同功能时产生割裂感,设计的规范、统一的组件、一致的设计语言就变得至关重要,我们力求每个组件的样式多样性以适应不同场景,同时也为产品后续的开放能力建设打好基础。通过组件库、规范文档设计师可以直接基于典型页面做设计、复用或者修改细节,极大提升设计和产品研发效率。
满足个性需求-灵活可配置的导航
随着产品功能的不断丰富,为了应对用户精准的差异化需求新版底部导航区支持自定义,通过这样的自定义,让用户以最快的速度、最简洁的操作进行快速跳转从而减少用户行为路径提高产品易用性。
提升协同效率从愉悦沟通开始!人是要被鼓励的,文档的一个点赞或者在聊天中一个鼓掌的表情都会让你在日复一日的平凡工作中感受到自己的价值。美事6.0新表情与品牌因子进行了融合,并针对办公场景设计了全新emoji表情,只为用户沟通更愉悦。另外我们对表情面板进行了优化,交互逻辑从左右翻页升级为下拉滚动,减少了操作步长,提高了查找速度。
聚焦用户场景-协同触达更多样
触达1:从早期单纯的IM沟通工具,美事不断集成公司各类协作应用(例如:日历、待办、文档、视频会议、直播等),变身为多工具、多业务的数据互通的一体化的协同办公平台。从“工具”到“平台”,我们将原来的“应用中心”升级为“全新工作台”。新版工作台涵盖协同办公领域数种功能,真正实现了企业内部各业务的高效协同。在视觉上,我们对100+应用图标进行了重绘,在保留延续性的同时让他们更符合界面场景。
触达2:通过工具的变革,提升员工工作效率,让企业运转的更流畅。在新版设计中,用户打开APP不用切换导航栏,即可从消息页进入所有核心入口。另外,下拉二楼与待办系统进行了数据打通,“今日待办”让用户快速了解今日重要事。消息页加号、下拉二楼、3Dtouch等多人口的加入,满足用户的各种使用习惯。
新发现:聚焦信息分发运营
新版的个人中心与美事勋章系统进行了数据打通,交互方式借助手机陀螺仪功能,通过手机扭转移动,勋章会在X轴水平位移滚动。此功能的设计,给用户提供趣味性体验,提升用户心智,增加品牌传播。另外新版电子工卡功能做了精细化打磨,加入了动效隐喻提高了视觉层级,增强了用户点击欲。