近一年，随着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。
Zune2006发布的。它从流行过。自身系统态不行，还碰了iPod这种魔鬼对手。但很难象这样的UI08的时候出的。如此扁平、、简洁又优。
(这展示一下家收藏的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开始为深模式适。
1. 深模式到底有啥的？
为啥要做深模式？大概就4点：
注内容：深和浅在空间关系的感上，的确是有很大差距的。以说，之所以深UI带来最验上的差别，就是让屏幕看来更无界，更注内容。基样的需求，有产品天生需要更的注力，一开始就是黑的。例视频播放器，开工具，游戏平台，股票平台之类的产品。
另外，苹果应该还是非常希望弱化跑马边框和刘的存在感的。在浅模式下，加剧跑马边框和刘的存在感，但是在深模式下，界面UI就立马和机身融为一。也是为何苹果也分乐意拥抱深模式的原因。
体验刷新：目很多手机系统或者App提供了换肤的功能。但这换肤多都很强的性主题性，每主题能命中的用户其实并不很多。相比之下，直接把整系统变黑，新鲜感满满，接受度也很高。
降低界面刺激：在OLED的屏幕下，深色UI会使得像素点完全不发光，只保留有内容的成，大大降低了屏幕的亮度，也降低了对眼睛的刺激。多车用的界面一直是深色UI，就是为了防止夜间屏幕亮度对于驾驶员过于刺激了。
持久续航：最后，这个仅仅是在OLED屏幕上，深色模式的确降低每个像素的发光量，从而达到节约功耗，升续航的效果。
2. 太难了…一上深色模式马上就被骂
深色模式虽然好处多多，iOS 13正式上线1年时间了，但是开始这时间的好多App，每上线了深色模式，却被舆论推上了口浪尖。
我认为由于同的户对于深色模式的预期一样。有些户的预期是一个低对的黑夜模式，有些户只是想换个题而已。导致设计师两边讨好，有些产的深色模式是被骂的改了又改。
3. 暗黑模式 or 黑夜模式？
随着iOS和Android系统级支持，正式把深色模式带进了寻百姓。同的产大面积的开始适配深色模式。
现在的深色模式。和以往不同的是，这是近年来第一次深色GUI进入了主流视线，而今的各种容器变得更加多变，层更加丰。iOS使用不同的灰色和动效来表达界面层，而Android主要通过阴来表达，所以底色不能做成纯黑，不然阴就体现不出来了。
这个真的是同人的期待都是一样的。
众所周知，云为用户提供了非常大的照片和文件的备功能，用户有非常大的机会在夜间或者系统的深色模式下，查文件和各种媒体。
，管是仅仅刷个深色题，还是降低视觉刺激，这两边的户需求都是合的，实并冲突。因此在真正设计深色模式的。深色模式并是简单的把整个界面反色了那么简单，还是要考虑到有户的需求，在设计启前期就定义了适配原则。
1. 体验一致
- 操系统内验一致：参照iOS其他原生App验建立设计原则，
- App内体验一致：从控件层面入手刷新体验。
2. 内容聚焦
- 降低边框存在：纯黑底色，充发挥OLED屏幕的无边界的受，
- 降低异形屏对容容器边框的破坏：降低iPhone刘海存在感。
3. 视觉柔
- 采用纯黑大标题底色，上划时渐变出深色毛玻璃效，并降低标题栏透明度
- 适用非纯白字，防止页面对比度高导致夜间对眼睛的刺激太强
- 重新审视分割线的运用，对于分割器用的分割线了重新设，改用色块分割
项目落地时，像微云样的大型项目，有着几百个页面，直接一个一个页面刷一定出一问题，所以需要从抽象到具，逐渐落地成型。
4. 色板更新，注意Check比度
在更新色板时，需要特注意是比度。
对比度个东西，在黑暗模式下变得尤其为妙。果品牌主是一个相对比深的颜，即使能饱和度比高，在深模式下依导致对比度不。
如何Check对比度否符合求呢？这里推荐一网站可以参考：
http://www.msfw.com/Services/ContrastRatioCalculator
你输入两个色值后，会有个比度数值出来。荐值是7:1是比较荐比度，大于4.5:1是可用，是基于视觉柔和原则，3:1算是个最小极限值。是如大积比度过高，也不适用我们视觉柔和原则。
5. 刷组件，输出范例页，此时开发可以并开发
由于在深色模下，为了使界看起来更浑然体，各个容层级异，深色模加强了深色毛玻璃运用。毛玻璃盖在内容上会展示出迷背景模糊效。在级界导航栏都采用了这样设计。
定义各个容高度，并将各个高度容赋予统底色。
在定义了大规则后，可以输出开发正动工了。
6. 梳理所需模块，并输出所有级页
由于不是所有规则都是统，此是需要步输出很多典型页。这个输出页量大概是50+多个。是由于在前期刷了组件，此在这步并不太需要单独去考虑单个界，大概拼凑下组件，遇到问题单独处理OK。
7. 通过持续的交付体验，补充需要的资源
由于深色模式涉及的页面众多，状况较多。有些较深的页面，可没有走查到，因此可建立一份腾讯档，日体验过程中遇到的任何问题，可在档中记录，并且由开发哥实时更优情况。
深色模式中，为了深色模式的落地，开发哥给了非常大的支持。采访了腾讯高工程Gemi，聊聊开发视角的深色模式的适配。
Q1：深色模式的适配中，希望得到设计师的输顺序是怎么样的？
A1：在这个项目，首先希望是能到些最大规则性东西，例如导航栏是怎么变，哪些控件是怎么变，颜色都是怎么变。这样我们可以先开始工作。这样可以完成大部分页，等设计师出了然后再去照个个页，再些特殊情况做特殊处理。
Q2：开面，有什么前期的习惯，更加有期做深模式的适呢？
A2：首先，希望设尽使用统一的规范。因设师给到配规范的时候，始刷界面比较的，但会发很多界面覆盖不到。这由于设用了太复杂的逻辑，或者了特殊逻辑。这种况就需页面单独处理，这过程比较费时。
另外，因为云在前期用了多iOS的生控件，这类控件在适配的候可以直适配，不需要做其额外的工作。使用生控件的好就是，苹果会替你思考多问题，节约多后期的工作量。如果前期有定义色板，并且这个规则比较科学的话，那仅仅靠修改色板就可以解决多问题。
Q3：为了使开发者快速兼容深色模式，苹果有做么方开发者的事情？
A3：我感受到最观2件事情。
一件情是，图资源的支持深模式。Xcode支持在原有的图资源基础上，附加一个深模式的图资源，就像2倍图和3倍图，只要直接把深模式图的资源拖就行，并没有额外的工量。
第二件事颜色。比如白色，可以指这白色深色模式下直接变黑色。如果产品体不可以考虑这速配的能力，不过这功能比较复杂的产品中不太好用，因白色可能深色模式下对应不同的黑，这时候还色板稳妥。
本文主分4部分：
- 一章：聊聊深模式的历史；
- 第二章：讨论了今天不同的用户对深色模式不同的待，以及世界OS厂的站队；
- 第三章：介绍了云App在10月的更新，适配深色模式的心路历程；
- 第章：谈了一开发视角的深色模式适配。
在苹果等操作系统大厂的推动下，加上业界对深色模式一通操作和讨论之后，众多App兼容了深色模式。本文从深色模式的历史，规范，计以及实现的角度浅浅的聊了一下深色模式，也欢迎大家各抒见。
注作者微信公众号：「腾讯ISUX」
浙公网安备33011002017549号