近一年，随着iOS和安卓陆续支持了深色模式，各个团队的一通操作，也的确为用户带来“眼前一黑”的体验。深色模式也成为了前阵子业界最火的话题之一。只是当设计师看了无数的关于深色模式的讨论；当无数产品跟进上线了深色模式；再当无数App的深色模式被骂的改了又改，回头来看看，你说的黑，到底是什么黑。
虽然说，我真正开始做UI设计是近年，但是曾经还是体验过很多深色模式的界面的。甚至有很多产品，天生就是深色模式。可以发现，史前的深色模式，要s R t / f d I么是$ R t因为技术原因，要么就一些对注意力和对比度需求比较特殊的场景，还有可能是因为…微软的Geek们一些对深色的一些蜜汁执着吧…
1. 故事的开始其实都是深色模式：命令l s F . C行界面
啥？这也算深色模式？你说的对。要说深色模式是个近年来才进入我们视野的话，其实深色模式真的是一个古老的东西，甚至比现在大行其道的“浅色模式”历史更悠久，所以，这个深色模式，要追溯到什么时候呢？大概就是这个时候吧。毕竟那个时候，CRT显示器要不就是黑屏，要不就只显示白点，那只能这样了。
但是F 2 p ! P 等到GUI出现之后，界面就变成了白色。除了视觉上的变o K e p & U &化，& d ; P ` * r v d在交互上，其实GUI和命令v 8 ]行最大的设计上的区别，是产生了“容器”和“空间层级”的概念。
不b ? 9 N _ k Y得不说，GUI真B + + :是一个伟大的发明呀。可是界面层级的问题，在白色界面下得到了很好的解决，这个也恰好是今天在做深色模式的时候，界面上最大程度被削弱的信息部分。
既然有一个“容器”，那必须得有个底，而且大家都习惯于白纸黑字，所有的界面都变成了白色了，好像白色会给人一种更加被“包装好”的感觉。从此以后黑色界面的时代就过去了，只存在于黑客电影中。
而电脑，也逐渐成为了“白色家电”，和GUI设计的风格融为一体。
2. 移动深色模式的先驱：夜间手机阅读器
2G时代，当PC正在白o s F ; q o色UI上一去不复回时，移动端似乎在深色模式上找到了属于自己的场景：夜间阅读。UC浏览器 / Opera / Zakj 7 5 o T b ; #er / 各类信息流阅读器。因为在低光照下需要保持低对比度来护眼，所以陆续推出了深色阅读模O R S !式。这也是深色模式在GUI时代第一次走进了大众的视野中。
3. 让人无法接受的深色模式：Windows高对比度
模式在Windows推出了相当长的一段时间里，黑色界面就不再出现了。但是准确的说，实际上保留了一个主题功能。这个主题! # L ? _ Q f I可以让用户设计用户界面的配色，从比较早期的WindoS n ] [ h ^ 5 O )ws开始（忘了具– – : T W f T s )体是哪个版本）。WindZ B X j 8 ` E y Yows保a ^ ` n留了高对比度的主题。
（虽然这个效果真的…没办法接受）可能也是因为没怎么走心吧…也可能它只是一个高对比度模式，微软对于容器和控件层级的解决办法，就是通过白r – j L线来分割…虽然看起来非常没有g 7 1质感，不够优雅，但是的确能解I v J 9决问题。
它从来没有真正流行过。但是可以看到，微软的设计师心中，也许还是为黑色主题留了一块位置的。结果过了一段时间，他们果然找到了方向，在一款不入流的MP3上线实验了。
4C t H. 深色中的曙光：Zune UI
在10多年前，iPod以及其夸张的流行r + U ~ } z 8 5度横扫全球的时候，曾经冒出来各种“iPod杀手”，但是这些大多数都是噱头而已，e 4 r e & S并没有真正的对iPod造成影响。
但是有一款同样不入流的MP3，它虽然依然没有对iPod市场造成影响，但是设计品质却尤其的高，并且极大的影响了后代的UI设计。并且就是Zune。
Zune是2006 + ? z q [ o年发布的。它从来没有流行过m u K。自身系统生态不行，还碰上了iPod这种魔鬼对手。但是你很难想象这样1 p S F ] 8 – $的UI是在08年的时A { K A k 5 6 j候出现的。如此扁平、现代、简洁又优雅。
(这里展示一下我家收藏的Zune HD
那时c 9 ^ d ~ / C候的Dark Mode，非常直白的用3D来表达了界面层级，甚至还有景深，视$ W – = d q =差滚动等十分大胆的界面效果。静态视觉上看起来非常扁平，但是加上动效后就很好的凸显了界面层级。背景的黑色，就好像无尽的太空，而所有的组件都是在空中漂浮的，给人科幻的想象，加上动效和冷酷的线条，整体看起来非常酷。
5. 究极版的Zune UI：WindU t !ows Phone
是一个不入流的操作系统…但是这段历史一定是软粉很熟悉的了。Windows PhoneJ 8 _ q首发的时候，我入手了台诺基亚的Lumia 800。
先不说这个和主流操作系统极度差异化的UI设计，这个暗色主题是真b – O C –的很优秀。
来，聊聊暗色主题。Lumia 800作为WP的首发机型，使用的是AMOLED屏幕Y ` e d 2 l N B 2。这个带来了什么结果呢？就是屏幕的边界! d 4 s T K感几乎没有了。当年还没有全面屏，手机边框还可以停航母，但是这样的UI设计的确让边界感变得很低了，看起来屏幕内容和机身更加整体。
另外，它的动效也更流畅了，虽然没有容器，但是依然可以通过酷炫的动效K ~ d /、视差滚6 G 1 t 4 b M动等极度有创意的方式来区分界面层级，真的是…（默默竖起大拇指）
可惜，这些视觉效果极佳的界面，可能还是比较浪费空间吧，后期在Windows Phone 10中也没有保留下来，也随着Windows Phone的淡出退出了历史舞台。
在那个时候，还是白色UI的天下，无论是Windows，iPod优雅的Ab Z q [ @ All-white设计，大E x r L家都在忙着给界面做上实体的质感，这样的设计必然是过于超前的。超前一步是先锋，超前两步是先烈…微软在深色模式上的执着，就这样成为了历史的先烈，一直没有进入主流的视野。
但是这样超前的设计理念，一直保留到了B D ] g h ^ { C /今天，并且后继有人了。
很神奇的是，对于深色模式，iOS和Android给u * w m Z . r )出的规范确实是不同的方向的。我想当年早早的做了深色/黑夜模式的厂商，也没想到今天竟然会发展成这样吧。$ Z ` X 2 # h
深色模式是! 4 1 @ # W如何进入我们的视野的？我们可以看到在过去的2年中，曾经出现l c % d N u过2个高峰。第一个高峰是去年WWDC，苹果第一次发布了iOS13的测试版，并且最大的特性就是支持了深色模式。第二个高峰就是随着iOS 13随着iPhone 11系列正式发布，大量的App开始为深色模式适配。
1. 深Q C H _ M & p色模式到底有啥好的？
为啥要做深色模式？大概就4点：
专注内容：深色和浅色在空间关系的感知上，的确是有很大差距的。可以说，之所以深色UI带来最体] E 3 Z验上的差别，就是让屏幕看起来更无界，更专注于内容。基于这样的需求，有些产品天生需要更多的专注力，一开始就是黑的。+ , ! H @ )例如视频播放器，开发工具，游戏平台，– f j B C M ( B w股票平台之类的产品。
另外，苹果应该还是非常希望弱] N N I _化跑马边框和刘海的存在感的。在浅色模式下，会加剧跑马边框和刘海的存在感，但是在深色模式下，$ | j @ n : o ;界面UI就会立马和机身融为一体。这也是为何苹果也十分乐意拥抱深色模式的原因。
体/ U M Q E验刷新：目前有很多手机系统或者App提供了换肤的功能。但是这个换肤大多都带有很强的个性和主题性，每个主题能命中7 B 8 m } U =的用户其实并不是很多。相比之下，直接把整个系统变5 p o N黑，新鲜感满满，接受度也很高。
降低界面刺激：在OLED的屏幕下，深色UI会使得像素点完全不发光，N = v * D 2 L { 7只保留有内容的成分，大大降低了屏幕的亮度，也降低了对眼睛的刺激。很多车v a I 8 x 2 y y用的界面一直是深色UI，就是为了防止夜间屏幕亮度对于驾驶员过于刺激了。K @ Q 9
持久续航：最后，这个仅仅是在OLED屏幕上，深色模式的确能降低每个像素的发光量，从而达到节约功耗，提升续航的效果。
2. 太难了…一上深色模式马上就被骂
深色模式虽然好处多多，iOS 13正式上线B # C E f ] K也1年时9 ! 8 & E e间了，但是刚开始这段时间的好多App，每上线了深色模式，却被舆论推上了风口浪尖。
我认为由于不同的用户对于深色模式的预期不一样。有些用户的预期是一个低对比度的黑夜模式，| 7 8 @ ^有些用户只是想换个主题而已。导R u a致设计师两边不讨好，有些产i k : ~品的深色模式也是被骂的改了又C i $ x 7改。
3. 暗黑模式 or 黑夜模式？
随着iOS和Android系统级支持，正式把深色模式带进了寻常百姓家。不同的产品大面积的开始适配深色模式。
现在的深色模式。和以往不同的是，这是 Z l L 1 = 9 ! L近年来第一次深色T K V TGUI进入了主流视线，而今天的各种容器变p n A : q ~ 9 J得更加多变，层级更加丰富。iOS使用不同的灰色和动效来表达界面层级，而$ C dAndroid主要通过阴影来表达，所以7 1 +底色不能做成纯黑，不然阴影就体现不出来了。
所以这个真的是不同人的期待都是不一样的。
众所周知，微云为用户提供了非常强大的照片和文件的备份功能，用户有非常大的机会在夜间或者系统的深色模式下，查看文r T : { g ) M件和各种媒体。
所以，不管是仅仅刷个深色主题，还是降低视觉刺激，这两边的用户需求都是合理的= c d r，其实并不冲突。因此在真正设计深色模式的。深色模式并不是简单的把整个界面反色了那么简单，还是要考虑到所有用户的需求，在设计启动前期就定义了适配原则。
1. 体验一致
- 操作系统内体验一致：参照iO= C ] 2 / &S其他原生App体验建立设计原则p ` [ 1 ! ( r，
- A% @ X ppp内体验一致：( 4 j d 3 3从控件层面入手刷新体验。
2. 内容聚焦
- 降低边框存在感：纯黑底色，充分发挥OLED屏幕的无边界的感受，
- 降低异形屏对内容容器W & ~ $边框的破坏：降低iPhone刘海+ S v + @ )存在感。
3. 视觉柔和
- 采用纯黑大标题[ d X 7 n [ R i 9底色，上划时渐变出深色毛玻璃效果，并且降低标题栏的透明度
- 适用非纯白字色，防止页面对比度过高导致夜间对眼睛的刺激太强
- 重新审视分割线的运用，对于分割容器用的分割线做了重新设计，改用色块来分割
项目落地时7 K O X，像微云这样的m } 5 $ 0 !大型项目，有着几百个页面，直接一个一D X P l个页面刷一定会出一些问题，所以需要从抽象到具体，逐渐落地成型。
4. 色板更新，注意Check对比度
在更新色板时，需要特别注意的就是对比度。
对比度这个东西，在黑暗模式下变得尤其为妙。如果品牌主色是一个相对比较深的颜色，即使可能饱和度比较高，在深色模式下依然会导致对e ^ 3 X L比度不足。
如何Check对比度是否符合要求呢？这里推荐一个网站可以参考：
http://www.msfw.com/Services/ContrastRatioCalculator
当你输入两. % ] N个色值后，会有个对比度的数值出来。推荐值是7:1是( 2 / 4比较推荐的对比度，大于4.5:1是o S V 6 x ; l 4可用，但是基于p [ { / m 2 9 l视觉柔和的原则，3:1算是一个最小极限值。但是如果大面积的对比度过高，也不适用我们视觉柔和的原则。
5. 刷组件，输出范例0 w 6 L ( z 3页面，此时开发可以并行开发g d I P q =
由于在深色模0 ` v式下，为了使界面看起来更浑然一体，各个容器之间的层级差异，深色模式加强了深色毛玻璃的运用。毛玻璃盖5 Q x r Z l在内容上会展示出迷人的背景模糊效果。在一级界面6 6 N w & J @中的导航栏都采用了这样的设计。
定义各个容器的高度，并将各个高度的容器^ a Z 9赋予统一的底色。
在定义了大规则后，就可以输出给开发正式动工了。
6_ S | : b k , 5 E. 梳理所需6 t 5 l y K的模块，并输出所有的一级页面
由于不是所@ p V有的s D r规则都是统一的，因此还是需要同步的输出很多典型的页面。这个输出页面量大概是50+多个。但是由于在前期刷了组件，因此在这步并不太需要单独去考虑* S e l 2 # i单个界面，大概拼凑一下组件，遇( } 3到问题单独处理就OK。
7. 通过持续的交付体验，补充需要N M L的资源
由于深色模式涉及的页面众多，状况也比较多。有些比较深的页面，可能没有走查到，因此可以建立一份腾讯文档，日常体验过程中遇到的任何问题，可以在文档中记录，并且由开发哥实时更新优化情况。
深色模式中，为了深色模式的落地$ 2 n T X y，开发哥给了非常大的支持。我们采1 Y m b 2 o l访了腾讯高级工程师Gemi，聊( . y聊开发视角的深色模式的适配。
Q1：深色模式Y ; x p的适配中，希望得到设计师的输出顺序是怎么样的？
A1：在这个项目中，首先希望还是能– Y U得到一些I 9 R ` &最大的规则性的东西，例如导航栏是怎么变的，哪些控件是怎么变的，颜色都是怎么变的。这样我们可以先] | ( r (开始工作。这样可以完成大部分的页面f R & ? ! C ,，等设计师给出了然后再去对照一个个页面，再对一些特殊情况做特殊处理。
Q2：开发层V : , l m面，有什么前期的好习惯，会更加有利于后期做深色模式的适配呢？
A2：首先，希望在设计上尽量使用统一的规范。因为在前期设计师给到适配规范的时候，开始刷界面是比较快的% d 9，但是会发现有很多界面覆盖不到。这是由于前期设计X K [ c : y Q I用了太复杂的逻辑，或者做了特殊( m W % F逻辑。这种情况就需要个页面单独处理，这个过程比较费G ^ /时。
另外，因为微云在前期用了很多^ c u ]iOS的原生控件，这类控件在适配的时候可以直接适配，不需要做其他额外的工作。使用原生控件的好处就是，苹果会替你思考很多问题，节约很多后期的工作量。如果前期有定义色板，并且这个规则比较科学的话，, u E Y i那仅仅靠修改色板就可以解决很多问题。
Q3：为了使开发者快速兼容深色模式，苹果有做什么方便开发者的事情？
A3：我感受到的最直观的2件事情。
第一件事情是，图片资源的支持了深色模式。Xcode支持在原有的图片资源基础上，附加一个深色模式的图片资源，就好像2倍| o 1 9 K /图和3倍图，只要直接把深色模式图片的资源拖入就行，并没有额外的工作量。
第二件事情是颜色。比如说C B J w Y N 6 o d白色，你可以指定这个白色在深色模式下直接变成黑色。如果产品体量不大可以考虑这个快速适配的能力，不过这个功能在比较复杂的产品中不太好用，因为白色可能在深色模式下对应着不同的黑，这个时候还是色板最稳妥。
本文主要分4个部分：
- 第一章：聊了聊深色模式的历史；
- 第二章：讨论了今天不同的用户对深色模式不同的期待，以及世界上OS大厂的站队；
- 第三章：介绍了微云App在10月份的更新，适配深色模式的心路历程；
- 第四章：谈了一下开发视角的深色模式适配。
在苹果等0 i 1 – ! I ! 操作系统大厂的推动下，加上业界对深色模式一通操作和讨论之后，众多App兼容了深色模式。本文从深色u F N模式的历史，规范，设计以及实现的角度浅浅的聊了一下深色模式，也欢迎大家各抒h * 0 q Y ~ (己见。
欢迎关注作者微信公众号：「腾讯Ih ) b mSUX」
