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

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

设计目标

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

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

设计过程

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

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

LOGO 升级

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

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

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

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

界面视觉改版

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

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

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

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

资源优化

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

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

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

品牌插画

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

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

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

全新皮肤

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

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

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

设计规范

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

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

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

最后

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

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

大厂设计师如何做改版设计？来看这份实战案例！

表情面板是百度APP互动场景中非常重要的基础输入体验功能。

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