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

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

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

设计目标

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

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

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

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

设计过程

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

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

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

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

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

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

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。

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

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

当用户认识品牌的开端完成升级后,使用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 年度设计改版完整复盘

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

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

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

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

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

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

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

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

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

资源优化

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以表达基本特征为主。圆角细节的处理相比旧版看起来更清晰明确,不再圆润暧昧。

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

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

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

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

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

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

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

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

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

品牌插画

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

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

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

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

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

全新皮肤

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

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

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

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

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

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

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

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

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

设计规范c v U

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

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

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

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

我们运用原子设计原则,搭建底层设计资源库。从视觉基础元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 _坚实的基础。

最后

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

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

随着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办公助手」

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

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

给TA打赏
共{{data.count}}人
人已打赏
教程分享

想进阶高级设计师,先了解设计系统基础知识!

2021-1-10 5:45:58

教程分享

快记下来!5个连大厂设计师都容易搞混的控件与规范

2021-1-10 5:47:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索