随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高,我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版:追求简洁、高效、一致的办公环境,精心打造极致的办公体验。

设计目标

从体验出发,寻找设计切入点,经过多方探索和需求分析,明确了此次更新的设计目标:

  • 内容成为主角,为用户提供更高效的工作环境;
  • 更准确的表意,让视觉资源的表意更清晰准确;
  • 构建设计规范,让多端视觉与交互拥有一致性;

实战案例!WPS 2021 年度设计改版完整复盘

设计过程

我们从桌面客户端出发进行问题洞察,随后扩展到对应的更多模块。以产品 LOGO 为起点到首页、组件页、应用中心、弹窗、窗格等等功能模块。结合前期讨论的设计目标进行设计的风格探索,经过多次探讨与比对,最终确定了现在大家所看到的 WPS 2021 版年度更新。

实战案例!WPS 2021 年度设计改版完整复盘

在设计风格探索中,我们时刻提醒自己,是否体现了三个视觉核心原则:简洁、高效、一致。设计方向基本确定后,我们梳理了一份初期的规范文档,方便团队内部协作,为后续串联升级 WPS 庞大的业务模块视觉打下基础。在后续的推进中,持续通过实践逐步完善这份规范。

实战案例!WPS 2021 年度设计改版完整复盘

LOGO 升级

作为一款软件产品,LOGO 是产品的标识,也是用户认识品牌的开端。

所以设计升级开始,我们便重点升级了 WPS LOGO:在延续 W 图形的前提下,用「纸张是文字信息传递载体」的设计理念和「协同是未来办公新模式」的远景构想作为出发点,用纸张层叠与卷曲的形态刻画出层次更丰富、更具动感的新 LOGO。

同时为了品牌视觉传达的规范与统一,WPS PC端、手机端的 LOGO 统一使用全新的 LOGO。

实战案例!WPS 2021 年度设计改版完整复盘

当用户认识品牌的开端完成升级后,使用感知最强、停留时间最长的「界面视觉改版」便成了我们此次升级最为核心的重点。

界面视觉改版

自从 WPS 提出一站式服务后,为电脑逐个安装办公软件的年代早已过去,现在 WPS Office 包含了文档编辑、文档管理、云文档、海报、日历、待办等丰富的应用,一款软件就能胜任多数人的日常工作需求。

为了更好的用户体验,此次版本,对 WPS PC端、移动端的新首页与组件页进行了全新视觉升级,采用扁平直的视觉基调,确保让用户更专注于内容本身。

实战案例!WPS 2021 年度设计改版完整复盘

实战案例!WPS 2021 年度设计改版完整复盘

WPS 2021 年度更新的颜色在色彩方面提升了饱和度和明度,使页面更有活力、不枯燥沉闷。同时还刻意对页面做降噪和扁平化处理,摒弃了之前通过长投影区分层级关系,化繁为简。模块划分方面,采用加大模块间的间距和少量分割线,通过加大关键信息层级,在保证层级之间关系明确的同时,让界面更加干净和具有呼吸感。

此外,在考虑示意性和拓展性后,我们对原内容区的块面图标进行了优化,使得界面更有层次感。

实战案例!WPS 2021 年度设计改版完整复盘

实战案例!WPS 2021 年度设计改版完整复盘

资源优化

WPS Office 组件拥有强大的文档处理能力,其中工具栏是主要的功能区,因此也是产品优化的重要模块之一,随着版本迭代,工具的数量越来越多,目前单纯工具栏图标已近千个。

我们希望新图标设计能达到清爽、规整的效果,为此重新绘制了 1200+ 功能区图标。通过延续 2019 版的「线为主面为辅」的设计风格,在色彩上进行了去色处理,线面结合让图标更具表现力、有层次,每个图标绘制都以表达基本特征为主。圆角细节的处理相比旧版看起来更清晰明确,不再圆润暧昧。

实战案例!WPS 2021 年度设计改版完整复盘

实战案例!WPS 2021 年度设计改版完整复盘

除了功能图标之外,首页图标、缺省插画、加载动效和应用中心图标等的资源也都进行了全新设计,且在 WPS PC端、移动端做了替换统一。

实战案例!WPS 2021 年度设计改版完整复盘

实战案例!WPS 2021 年度设计改版完整复盘

品牌插画

WPS Office 32 年的历史积累,使得产品的功能特性十分丰富,但这也让用户在使用时经常接触到各种不同的欢迎页、引导页、介绍页等反馈界面。

在此次改版中,为了让反馈界面的品牌视觉化、情感化,以及提升内部设计师的协同效率,我们为此打造了品牌插画体系,统一了品牌视觉。

实战案例!WPS 2021 年度设计改版完整复盘

在设计风格上,结合办公场景中的人和物,设计了一套简洁清爽的插画;在色彩上,则在饱和度和明度进行提升,使界面更有活力且不沉闷,并明确了插画各颜色的使用规范,保证协同效率提升。

全新皮肤

此次更新,WPS 2021 年度更新还推出了全新的暗色调模式(界面)。在光线较暗的场景下,能让用户拥有更舒适的使用体验。

色彩管理方面,我们使用了语义化的方式,让不同皮肤间的颜色通过映射建立起关系,并明确各颜色的使用规范,这有效保证了使用颜色的规范性,也大大提高了设计研发效率。

实战案例!WPS 2021 年度设计改版完整复盘

实战案例!WPS 2021 年度设计改版完整复盘

超级会员的专属皮肤,延续了超级会员的黑金风格,提升了会员的尊贵体验。为了达到深度定制,还特别对头像、字体样式、对话框和按钮等组件,进行专属化设计。

实战案例!WPS 2021 年度设计改版完整复盘

设计规范

每种设计风格,都有对应的视觉感受,这就如一本“无字之书”,虽然没有明确书写出来,但却能清晰传达情感,WPS 亦是如此。在去年设计探索过程中,逐渐形成的新设计样式,结合 WPS 2021 年度更新的设计原则「简洁、高效、一致」,我们确定了新的设计风格。

设计方向已经明晰,还需要能落实到产品的每处细节,做到视觉统一。这就需要梳理出一份具有指导意义的设计组件库和说明。

实战案例!WPS 2021 年度设计改版完整复盘

我们运用原子设计原则,搭建底层设计资源库。从视觉基础元素开始,赋予颜色含义,统一字体样式,建立图标和插画资源库等等。对界面里的元素进行结构层次划分,形成了分类合理、体系完整且通用性较高的基础设计规范,让设计师进行各模块设计的同时,也为整体视觉的一致性打下了坚实的基础。

最后

实战案例!WPS 2021 年度设计改版完整复盘

随着工作方式的转变,围绕着「多屏、云、内容、AI、协作」未来办公的到来,办公场景会更加丰富。我们思考,如何能让用户在交互过程中有更好的体验?这需要从用户角度,并结合实际场景去认真思考,才有助于把用户体验越做越好。对此,我们砥砺前行,把产品升级的出发点落实到用户服务之上,为用户提供更轻松的办公体验。

当决定要做改版时,我们知道这是一次对设计团队的考验,也深知还有许多产品体验需要改进。从前期的大量调研与分析,到中期方案的过审,再到设计稿的真正落地,我们脚踏实地一步一个脚印,在这过程中,也让我们迸发了许多好想法,未来还会继续努力,为用户提供 All in One 的极致办公体验。

欢迎关注作者微信公众号:「WPS办公助手」

实战案例!WPS 2021 年度设计改版完整复盘

点赞 37
收藏 118
继续阅读相关文章

发表评论 已发布 11

还可以输入 800 个字
 
 
载入中....
11 收藏