适配深色模式，你还没用变量库？

2019年可谓是深色模式广泛运用的一年，在iOS 13和Android 10系统相继推出Dark Mode之后，WPS Office 也及时的跟进行业趋势。作为一款有亿万用户使用的产品，我们在适配Dark Mode的时候，在时效性和品牌的一致性做了重点考量。我们希望通过适配Drak Mode继续保持各端统一的品牌属性，在用户体验上面延续一致性，继续提高用户的认知。

首先，我们先了解一下为什么用适配Dark Mode，他能给我们带来什么？

1、移动设备的续航始终是一个痛点，深色模式的推行在一定程度上面能够降低屏幕的亮度，从而减低能量的消耗，但这后面涉及到较为复杂的算法，具体取决于屏幕技术。

2、深色模式能够为弱视或对强光敏感的用户提供更好的可视性。

3、黑色的环境有利于我们更加的聚焦，各元素之间，较明亮的色彩会显得突出，有利于我们更迅速的获取信息，让用户更加专注。

4、深色在视觉氛围的营造中，对比浅色更容易突出效果。

WPS Office移动端在深色模式适配初期主要遇到这些问题：

1 、时间紧迫，预计是一个月的开发时间。

2、页面繁多，除了常见的几个主要界面，各个组件功能里包含着大量的界面。

3、图标多，WPS Office移动端有上千个图标，如果深色模式重新出一套，那么安装包将显得更加臃肿，另外还需要计算调整图标的人力成本。

4、沟通成本较高，每一个组件功能对应不同的开发同学，沟通需要耗费大量的时间成本。

带着上面这些问题，我们开始寻求解决问题的办法：

保持品牌统一和可复用性

为了延续WPS Office在多端品牌的一致性，在色彩上面我们继续围绕品牌色衍生。

图标继续保存原有的风格特点，在插图上面我们做了针对性优化。

针对多移动终端，我们重新梳理整合了页面风格，个别复杂的页面上，重新优化层级关系，简化操作。交互上面保持原有的使用习惯。

建立设计规范

设计规范的建立有利于我们更好的开展工作，色彩是这次适配中很重要的一环，由于Android和iOS在深色官方规范上面有一定的差异性，我们通过结合WPS产品特征分析，在各端上面实现统一性。梳理出背景色对应关系，将背景色层级化立体化，综合考虑不同场景下面的Light Mode 图层对应的 Dark Mode情况。

除了背景色，所有涉及的色彩情况也需要纳入考虑的范畴，大的方面例如主题色的使用，小的方面例如描边和遮罩层颜色的情况。

WPS Office 在iOS设备和安卓客户端都有着庞大的用户群体，我们在定义的时候也考虑到两个系统之间的差异化，针对性的对一些例如点击态的独立处理。

在文字的处理上面，我们用色彩的透明变化来覆盖所有使用场景，尽可能的简化规则，并设定他们的对应关系。

文本在两个模式下面一一对应

变量库的搭建

在适配深色模式之前，我们已经有一套较为完善的控件库，在多人协作的时候很大程度提升了我们的工作效率。解决了内部协作的问题，这个时候我们要考虑一下项目推进的跨部门协作。

在没有变量库之前，我们可能会遇到这些问题？

1、各开发同学独立实现某一界面，出现重复性工作。

2、各页面色彩需要单独的调整修改。

3、大量的页面标注，需要一定的时间和人力成本。

4、界面设计版本迭代，需要全部推倒重来。

各页面开发单独实现

针对这些问题，我们尝试用变量库结合控件的方法来解决。我们通过中台的概念，结合控件库的使用，对每个模块个体加上变量的名称，这样在生成标注文件出来之后，开发同学能够直接的浏览到变量名称。在实现界面的过程需要调用中台的封装内容，这个时候，开发同学并不需要知道对应模块的色值，只需要查看对应的变量名调用即可。

请求中台统一输出

当我们要对某一部分的色彩或者界面进行优化改版的时候，只需要调整中台封装部分的色值对应关系，之前调用到的内容都会被修改，这样大大的提升了效率，在版本迭代的时候也可以复用。

变量库实现了色彩在Light Mode和Dark Mode 之间的一一对应关系，它包含背景色、主题色、按钮颜色、下滑线、文字颜色等等。每一个变量有着对应且唯一的值。例如我们定义一个颜色变量名为secondBackgroundColor，在light mode的情况下他是 #FFFFFF，在dark mode下面他是#151515。

每个变量的对应关系

其中，在背景色的变量上面，为了在日常的交流中更直接的表达，我们定义了常用的几个颜色级别为一二三级色，通过页面的拆解，更为直观的感受到层级之间的关系。在项目的中后期，开发同学基本能够熟练的通过判断图层关系来调用变量值。

页面层级化

借着适配深色模式的机会，我们鼓动开发同学重新梳理了对应的程序控件库，当多人协作的时候，共用的功能模块统一调用写好的控件，这样既可以保证视觉输出的一致性，也能避免重复性的工作。

这里特别提到一点，大家可以使用金山文档的在线表格建立对应的色彩变量表，在与开发同学在线同步协作的时候效率更高。考虑到适配深色模式之后，项目后期新增的页面都是需要适配两种模式的，所以变量表在某种角度来说是长期使用的。

更快捷的团队协作

如何更快捷的团队协作，我们一直在思考与探索。

在这次dark mode的适配工作中，设计规范给开发同学提供了一定的指导和规范作用，但在实际执行中我们可能会碰到一些问题。例如开发同学是否很好的理解并查阅了规范的内容？是否能够迅速的找到相应的规范？

针对这种情况，我们在前期的适配协作中，对历史界面进行归类梳理，在图片上面标识对应的变量名编号，迅速的反馈结果给开发同学，效率提高了许多。

图标/配图的处理

由于WPS 的特色功能越来越多，安装包也是不断变的更加强（YONG）大（ZHONG）。

我们采用程序代码覆盖图标颜色的解决方案，避免图标库过大的问题，减低在日常的图标设计中的工作量。在日常的工作中，只需要提供light mode的方案。

在一些缺省图的处理上面，我们重新调整了样式，避免大面积的色彩使用，适当的调整色彩饱和度，在深色模式下面只需要降低透明度就可以实现两个模式通用。

配图在两种模式下的处理

在日常的设计工作中，团队协作的效率统筹越来越重要，有效的方式方法有助于我们更好的去完成任务。WPS Office for iOS通过各部门小伙伴一个月的通力合作，Dark Mode模式顺利的完成适配工作。作为一款体量很大的产品，不断追求更好的用户体验是我们一直前进的动力，未来希望能够给大家带来更多的惊喜，陪伴大家一起成长。

方案设计：布莱恩臣、夏左左、JS

项目执行：布莱恩臣、夏左左、ALEI、JS

图文撰写：JS

可爱的你请把可爱的我设为“星标”。

领取前面两本书中案例PSD源文件