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

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

设计目标

从体验出发，寻找设计切入点，经R ; C T ~ z *过多方9 b l = P j 3 i v探索和需求分析，明确了此次更新的设计目标：

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

设计过程

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

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

LOGJ G x H ,O 升级

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

所以设计升级开始，我们便重点N g M F y i * b l升级了 WPS LOGO：在; k + V 6 / f延续 W 图形的前提下，用「x q T : Q 4 Q % Z纸张是文字信息传N 1 2 _ : s递载体」的设计理念和「协同是未来办公T s 1 / C =新模式」的远景构想作为出发点W 8 z L，用纸张层叠与卷曲的形态刻画出层e f 6次更丰富、更具动感的新 LOGO。

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

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

界面视觉改版

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

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

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

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

资源优化

WPS Office1 R l 0 F z / j 组件拥有强大的文档处理能力，其中工具栏是主要的功_ h z x S Q能区，因此也是产品优化的重要模块之一，随着版本迭代，工具的e s z _ 7 &数量越来越多1 K x O，目前单纯工具栏图标已近千个。

我们希望新图标设计能达到v ? i %清爽、规整的效U N : O 6 & 3 5 !果，为此重新绘制了 1200+, k . 功能区图标。通过延续K D 2 g $ E 2019 版的「线_ f F b = % 0为主面为辅」的设计风格，在色彩上进行了去色处理，^ 1 Z u A Q线面结合让图标更具表现力、有层次，每个图l O I Q 标绘制都# u Q v以表达基本特征为主。圆角细节的处理相比旧版看起来更清晰明确，不再圆润暧昧。

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

品牌插画

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

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

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

全新皮肤

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

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

超级会员的g 9 h j B ] h ~ `专属皮肤，延续了超级会员的黑金风格，提升了会员的尊贵体验。为了达到深度定制，还i m K | p ~ d M 2特别对头像、字体样式、对话框和按钮等组件，进行! – h 9 T专属化设计。

设计规范c v U

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

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

我们运用原子设计原则，搭建底层设计资源库。从视觉基础元f Z K素开始，赋予颜色含义，统一字体样/ | C K l W ! S式，建立图标和插画w K ] & ^ i ; 资源库等等。对界面里的元素进行结构层次划分，形成了分类合理L e 2 { 3 b K 1、体系完整且通用性较高的基础设计规范，让设计师进行各模块设计的同时，也为h N 7 M整体视觉的一致性打下了2 M ( v _坚实的基础。

最后

随着5 s {工作方式的转变，r [ n U Q G N c围绕着「多屏、云、内容、AI、协作」未来办公的到来，办公场景会更加丰{ W l Z `富。我们思考，如何能让用户在交互过程中有更好的体验？这需要从用户角度，并结合实际场景去认真思考，s % X : K才有助于把用X – g }户体验越做越好。对此，我们砥砺前行，把产品升级的出发点落实到用户服务之上，为用户提供更轻松的办公体8 e / 6 Q T验。

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

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