长城上的猫

小编:2019年各大平台都陆续推出暗夜模式,微信也在Android和iOS中迎来了这一模式,相信其他APP也将会紧跟步伐。因此作为UI设计师怎么能不会呢,今天就分享下这一模式的考虑要点和入手方向,作者结合WPS Office暗黑模式的案例给我们清晰讲述,一起来看看吧!

 

 

项目背景

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

 

为什么要适配Dark 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 
  
原文地址:MU设计团队(公众号) 
作者:MU Partner 
 

 
 
 
 
 

转载请注明:学UI网 » 适配深色模式,你还没用变量库?

登录收藏
 
你可能喜欢的:
Material Design States 状态Material Design States 状态
浅谈用研(下)| 如何写好一份调研报告浅谈用研(下)| 如何写好一份调研报告
Material Design Selection 选择Material Design Selection 选择
从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?
异常场景怎么处理?异常场景怎么处理?
UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错
如何设计好一款APP的首页?如何设计好一款APP的首页?
B端品牌如何面向C端用户B端品牌如何面向C端用户
如何搭建一个易学性高可用性强的功能框架?如何搭建一个易学性高可用性强的功能框架?
盘点 | 4个成为标杆的超强体验设计盘点 | 4个成为标杆的超强体验设计