编辑导语：跟着iOS 13的宣布，深色模式逐渐走入我们的视野，用户也逐渐开端应用深色模式；深色模式采取文字前景与深色背景的比较度，在设计方面也有一些难题；本文作者分享了关于深色模式的汗青以及对深色模式的懂得，我们一路来看一下。
近一年，跟着iOS和安卓陆续支撑了深色模式，各个团队的一通操作，也切实其实为用户带来“面前一黑”的体验，深色模式也成为了前阵子业界最火的话题之一。
只是当设计师看了无数的关于深色模式的评论辩论；当无数产品跟进上线了深色模式；再当无数App的深色模式被骂的改了又改，回头来看看，你说的黑，到底是什么黑。
一、我所经历过的深色模式
固然说，我真正开端做UI设计是近年，然则曾经照样体验过很多深色模式的界面的；甚至有很多产品，生成就是深色模式。
可以发明，史前的深色模式，要么是因为技巧原因，要么就一些对留意力和比较度需求比较特别的场景，还有可能是因为…微软的Geek们一些对深色的一些蜜汁执着吧。
1. 故事的开端其实都是深色模式：敕令行界面
啥？这也算深色模式？你说的对，要说深色模式是个近年来才进入我们视野的话，其实深色模式真的是一个古老的器械，甚至比如今大年夜行其道的“淡色模式”汗青更悠长。
所以，这个深色模式，要追溯到什么时刻呢？大年夜概就是这个时刻吧；毕竟那个时刻，CRT显示器要不就是黑屏，要不就只显示白点，那只能如许了。
然则比及GUI出现之后，界面就变成了白色；除了视觉上的变更，在交互上，其实GUI和敕令行最大年夜的设计上的差别，是产生了“容器”和“空间层级”的概念。
不得不说，GUI真是一个巨大年夜的创造呀。可是界面层级的问题，在白色界面下获得了很好的解决，这个也正好是今天在做深色模式的时刻，界面上最大年夜程度被减弱的信息部分。
既然有一个“容器”，那必须得有个底，并且大年夜家都习惯于白纸黑字，所有的界面都变成了白色了，似乎白色会给人一种加倍被“包装好”的感到；从此今后黑色界面的时代就以前了，只存在于黑客片子中。
而电脑，也逐渐成为了“白色家电”，和GUI设计的风格融为一体。
2. 移动深色模式的前驱：夜间手机浏览器
2G时代，当PC正在白色UI上一去不复回时，移动端似乎在深色模式上找到了属于本身的场景：夜间浏览；UC浏览器 / Opera / Zaker / 各类信息流浏览器。
因为在低光照下须要保持低比较度来护眼，所以陆续推出了深色浏览模式；这也是深色模式在GUI时代第一次走进了大年夜众的视野中。
3. 让人无法接收的深色模式：Windows高比较度模式
在Windows推出了相当长的一段时光里，黑色界面就不再出现了。
然则精确的说，实际上保存了一个主题功能；这个主题可以让用户设计用户界面的配色，从比较早期的Windows开端（忘了具体是哪个版本），Windows保存了高比较度的主题。
（固然这个后果真的…没办法接收）
可能也是因为没怎么走心吧…也可能它只是一个高比较度模式，微软对于容器和控件层级的解决办法，就是经由过程白线来瓜分；固然看起来异常没有质感，不敷优雅，然则切实其实能解决问题。
它从来没有真正风行过。然则可以看到，微软的设计师心中，也许照样为黑色主题留了一块地位的；成果过了一段时光，他们果真找到了偏向，在一款不入流的MP3上线实验了。
4. 深色中的曙光：Zune UI
在10多年前，iPod以及其夸大的风行度横扫全球的时刻，曾经冒出来各类“iPod杀手”；然则这些大年夜多半都是噱头罢了，并没有真正的对iPod造成影响。
然则有一款同样不入流的MP3，它固然依然没有对iPod市场造成影响，然则设计品德却尤其的高，并且极大年夜的影响了后代的UI设计，并且就是Zune。
Zune是2006年宣布的，它从来没有风行过，自身体系生态不可，还碰上了iPod这种魔鬼敌手；然则你很难想象如许的UI是在08年的时刻出现的，如斯扁平、现代、简洁又优雅。
这里展示一下我家收藏的Zune HD：
那时刻的Dark Mode，异常直白的用3D来表达了界面层级，甚至还有景深、视差滚动等十分大年夜胆的界面后果。
静态视觉上看起来异常扁平，然则加上动效后就很好的凸显了界面层级；背景的黑色，就似乎无尽的太空，而所有的组件都是在空中漂浮的，给人科幻的想象；加上动效和冷淡的线条，整体看起来异常酷。
5. 究极版的Zune UI：Windows Phone
是一个不入流的操作体系…然则这段汗青必定是软粉很熟悉的了；Windows Phone首发的时刻，我入手了台诺基亚的Lumia 800。
先不说这个和主流操作体系极端差别化的UI设计，这个暗色主题是真的很优良。
来，聊聊暗色主题??Lumia 800作为WP的首发机型，应用的是AMOLED屏幕。
这个带来了什么成果呢？就是屏幕的界线感几乎没有了；昔时还没有周全屏，手机边框还可以停航母，然则如许的UI设计切实其实让界线感变得很低了，看起来屏幕内容和机身加倍整体。
别的，它的动效也更流畅了，固然没有容器，然则依然可以经由过程酷炫的动效、视差滚动等极端有创意的方法来区分界面层级，真的是…（默默竖起大年夜拇指）。
可惜，这些视觉后果极佳的界面，可能照样比较浪费空间吧，后期在Windows Phone 10中也没有保存下来，也跟着Windows Phone的淡出退出了汗青舞台。
在那个时刻，照样白色UI的世界，无论是Windows，iPod优雅的All-white设计，大年夜家都在忙着给界面做上实体的质感，如许的设计必定是过于超前的。
超前一步是前锋，超前两步是先烈；微软在深色模式上的执着，就如许成为了汗青的先烈，一向没有进入主流的视野。
然则如许超前的设计理念，一向保存到了今天，并且后继有人了。
二、今天进入我们视野的深色模式
很神奇的是，对于深色模式，iOS和Android给出的规范确切是不合的偏向的；我想昔时早早的做了深色/黑夜模式的厂商，也没想到今天竟然会成长成如许吧。
深色模式是若何进入我们的视野的？
我们可以看到在以前的2年中，曾经出现过2个岑岭：
- 第一个岑岭是客岁WWDC，苹果第一次宣布了iOS13的测试版，并且最大年夜的特点就是支撑了深色模式。
- 第二个岑岭就是跟着iOS 13跟着iPhone 11系列正式宣布，大年夜量的App开端为深色模式适配。
为啥要做深色模式？大年夜概就4点：
专注内容：深色和淡色在空间关系的感知上，切实其实是有很大年夜差距的。
可以说，之所以深色UI带来最体验上的差别，就是让屏幕看起来更无界，更专注于内容；基于如许的需求，有些产品生成须要更多的专注力，一开端就是黑的；例如视频播放器、开辟对象、游戏平台、股票平台之类的产品。
别的，苹果应当照样异常欲望弱化跑马边框和刘海的存在感的；在淡色模式下，会加剧跑马边框和刘海的存在感，然则在深色模式下，界面UI就会立马和机身融为一体??这也是为何苹果也十分愿意拥抱深色模式的原因。
体验刷新：今朝有很多手机体系或者App供给了换肤的功能。然则这个换肤大年夜多都带有很强的个性和主题性，每个主题能射中的用户其实并不是很多；比拟之下，直接把全部体系变黑，新鲜感满满，接收度也很高。
降低界面刺激：在OLED的屏幕下，深色UI会使得像素点完全不发光，只保存有内容的成分，大年夜大年夜降低了屏幕的亮度，也降低的对眼睛的刺激；很多车用的界面一向是深色UI，就是为了防止夜间屏幕亮度对于驾驶员过于刺激了。
持久续航：最后，这个仅仅是在OLED屏幕上，深色模式切实其实能降低每个像素的发光量，从而达到节约功耗，晋升续航的后果。
2. 太难了，一上深色模式立时就被骂
深色模式固然好处多多，iOS 13正式上线也1年时光了，然则刚开端这段时光的很多多少App，每上线了深色模式，却被舆论推上了风口浪尖。
我认为因为不合的用户对于深色模式的预期不一样，有些用户的预期是一个低比较度的黑夜模式，有些用户只是想换个主题罢了；导致设计师两边不谄谀，有些产品的深色模式也是被骂的改了又改。
3. 暗黑模式 or 黑夜模式？
跟着iOS和Android体系级支撑，正式把深色模式带进了平常庶平易近家，不合的产品大年夜面积的开端适配深色模式。
如今的深色模式。和以往不合的是，这是近年来第一次深色GUI进入了主流视线，而今天的各类容器变得加倍多变，层级加倍丰富。
iOS应用不合的灰色和动效来表达界面层级，而Android重要经由过程暗影来表达，所以底色不克不及做成纯黑，不然暗影就表现不出来了。
所以这个真的是不合人的等待都是不一样的。
三、微云的深色模式落地
众所周知，微云为用户供给了异常强大年夜的照片和文件的备份功能，用户有异常大年夜的机会在夜间或者体系的深色模式下，查看文件和各类媒体。
所以，不管是仅仅刷个深色主题，照样降低视觉刺激，这两边的用户需求都是合理的，其实并不冲突；是以在真正设计深色模式的。
深色模式并不是简单的把全部界面反色了那么简单，照样要推敲到所有效户的需求，在设计启动前期就定义了适配原则。
体验一致：
- 操作体系内体验一致：参照iOS其他原生App体验建立设计原则；
- App内体验一致：从控件层面入手刷新体验。
内容聚焦
- 降低边框存在感：纯黑底色，充分发挥OLED屏幕的无界线的感触感染；
- 降低异形屏对内容容器边框的破坏：降低iPhone刘海存在感。
视觉柔和：
- 采取纯黑大年夜标题底色，上划时渐变出深色毛玻璃后果，并且降低标题栏的透明度；
- 实用非纯白字色，防止页面比较度过高导致夜间对眼睛的刺激太强；
- 从新核阅瓜分线的应用，对于瓜分容器用的瓜分线做了从新设计，改用色块来瓜分。
项目落地时，像微云如许的大年夜型项目，有着几百个页面，直接一个一个页面刷必定会出一些问题，所以须要从抽象到具体，逐渐落地成型。
1. 色板更新，留意Check比较度
在更新色板时，须要特别留意的就是比较度。
比较度这个器械，在阴郁模式下变得尤其为妙；假如品牌主色是一个比拟较较深的色彩，即使可能饱和度比较高，在深色模式下依然会导致比较度不足。
若何Check比较度是否相符请求呢？这里推荐一个网站可以参考：http://www.msfw.com/Services/ContrastRatioCalculator
当你输入两个色值后，会有个比较度的数值出来；推荐值是7:1是比较推荐的比较度，大年夜于4.5:1是可用，然则基于视觉柔和的原则，3:1算是一个最小极限值；然则假如大年夜面积的比较度过高，也不实用我们视觉柔和的原则。
2. 刷组件，输出典范页面，此时开辟可以并行开辟
因为在深色模式下，为了使界面看起来更浑然一体，各个容器之间的层级差别，深色模式加强了深色毛玻璃的应用；毛玻璃盖在内容上会展示出迷人的背景模糊后果，在一级界面中的导航栏都采取了如许的设计。
定义各个容器的高度，并将各个高度的容器付与同一的底色。
在定义了大年夜规矩后，就可以输出给开辟正式动工了。
3. 梳理所需的模块，并输出所有的一级页面
因为不是所有的规矩都是同一的，是以照样须要同步的输出很多典范的页面，这个输出页面量大年夜概是50+多个；然则因为在前期刷了组件，是以在这步并不太须要零丁去推敲每单个界面，大年夜概拼凑一下组件，碰到问题零丁处理就OK。
4. 经由过程持续的交付体验，弥补须要的资本
因为深色模式涉及的页面浩瀚，状况也比较多。有些比较深的页面，可能没有走查到；是以可以建立一份腾讯文档，日常体验过程中碰到的任何问题，可以在文档中记录，并且由开辟哥及时更新优化情况。
四、工程师视角的深色模式
深色模式中，为了深色模式的落地，开辟哥给了异常大年夜的支撑；我们采访了腾讯高等工程师Gemi，聊聊开辟视角的深色模式的适配。
1. 深色模式的适配中，欲望获得设计师的输出次序是怎么样的？
在这个项目中，起首欲望照样能获得一些最大年夜的规矩性的器械，例如导航栏是怎么变的，哪些控件是怎么变的，色彩都是怎么变的，如许我们可以先开端工作；如许可以完成大年夜部分的页面，等设计师给出了然后再去对比一个个页面，再对一些特别情况做特别处理。
2. 开辟层面，有什么前期的好习惯，会加倍有利于后期做深色模式的适配呢？
起首，欲望在设计上尽量应用同一的规范；因为在前期设计师给到适配规范的时刻，开端刷界面是比较快的，然则会发明有很多界面覆盖不到；这是因为前期设计用了太复杂的逻辑，或者做了特别逻辑；这种情况就须要个页面零丁处理，这个过程比较费时。
别的，因为微云在前期用了很多iOS的原生控件，这类控件在适配的时刻可以直接适配，不须要做其他额外的工作。
应用原生控件的好处就是??苹果会替你思虑很多问题，节约很多后期的工作量；假如前期有定义色板，并且这个规矩比较科学的话，那仅仅靠修改色板就可以解决很多问题。
3. 为了使开辟者快速兼容深色模式，苹果有做什么便利开辟者的工作？
我感触感染到的最直不雅的2件工作：
第一件工作是图片资本的支撑了深色模式：Xcode支撑在原有的图片资本基本上，附加一个深色模式的图片资本，就似乎2倍图和3倍图；只要直接把深色模式图片的资本拖入就行，并没有额外的工作量。
第二件工作是色彩：比如说白色，你可以指定这个白色在深色模式下直接变成黑色；假如产品体量不大年夜可以推敲这个快速适配的才能，不过这个功能在比较复杂的产品中不太好用，因为白色可能在深色模式下对应着不合的黑，这个时刻照样色板最稳妥。
五、结语
本文重要分4个部分：
- 第一章：聊了聊深色模式的汗青；
- 第二章：评论辩论了今天不合的用户对深色模式不合的等待，以及世界上OS大年夜厂的站队；
- 第三章：介绍了微云App在10月份的更新，适配深色模式的心路过程；
- 第四章：谈了一下开辟视角的深色模式适配。
在苹果等操作体系大年夜厂的推动下，加上业界对深色模式一通操作和评论辩论之后，浩瀚App兼容了深色模式。
本文从深色模式的汗青，规范，设计以及实现的角度浅浅的聊了一下深色模式，也迎接大年夜家畅所欲言。
本文由 @腾讯ISUX 原创宣布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协定。
