诺基亚主题模式(黑暗模式:你说的黑是什么黑)

在过去的一年里，随着iOS和Android相继支持黑暗模式，各个团队的一次性操作确实给用户带来了“眼前一黑”的体验，黑暗模式也成为了前阵子业界最热门的话题之一。

只有当设计师们看到无数关于深色图案的讨论；当无数产品跟进上线，黑暗模式；当无数app的黑暗模式被改了又改，回头看看你说的黑是什么意思。

一、我经历过的黑暗模式

虽然说我是近几年才真正开始做UI设计的，但是经历过很多深色的界面。甚至有很多产品，天生就是深色的。

可以发现史前黑暗图案要么是因为技术原因，要么是一些有特别注意和对比度要求的场景，也有可能是因为……微软的一些极客痴迷于黑暗蜜。

1.故事的开头其实是黑暗模式:命令行界面。

什么？这是黑暗模式吗？你说得对。要说黑暗模式是近几年才进入我们视野的，其实黑暗模式真的是很古老的东西，甚至比现在流行的“光明模式”还要古老。

那么，这个黑暗的图案是什么时候出现的呢？大约这个时候；毕竟那时候CRT显示器不是黑屏就是只有白点。这是唯一的办法。

但是当GUI出现时，界面变白；除了视觉上的变化，在交互方面，GUI和命令行最大的设计区别就是“容器”和“空层级”的概念。

不得不说GUI真的是一个伟大的发明。但是在白色界面下已经很好的解决了界面层次的问题，这恰好是今天做黑暗模式时界面上最被弱化的信息部分。

既然有“容器”，那就一定有底，而且大家都习惯了白纸黑字，所有界面都变成了白色，好像白色会给人一种更“包装”的感觉；从此黑界面的时代过去了，只存在于黑客电影里。

另一方面，计算机已经逐渐成为“白色家电”，与GUI设计风格融为一体。

2.移动黑暗模式的先锋:夜间手机阅读器

在2G时代，当PC在白色UI上一去不复返的时候，移动终端似乎在黑暗模式下找到了自己的场景:夜间阅读；UC浏览器/Opera/za ker/各种信息流阅读器。

因为在弱光下需要保持低对比度保护眼睛，所以陆续推出了暗读模式。这也是黑暗模式在GUI时代第一次进入大众视野。

3.不可接受的黑暗模式:Windows高对比度模式

Windows推出很久以后，黑界面就不再出现了。

但准确地说，它实际上保留了一个主题功能；这个主题允许用户设计用户界面的配色方案。从Windows的早期版本(哪个版本忘了)开始，Windows就保留了高对比度的主题。

(虽然这个效果真的是...不可接受)

可能是因为我没怎么在意…也可能只是高对比度模式。微软对于容器和控件级别的解决方案是用白线划分；虽然看起来很平淡，不够优雅，但确实能解决问题。

它从未真正流行起来。不过可以看出，在微软设计师的心目中，黑色主题可能还是有一席之地的。结果过了一段时间，他们真的找到了方法，在一个很烂的MP3播放器上做了实验。

4.深色黎明:Zune UI

10多年前，当iPod及其夸张的流行席卷全球的时候，各种“iPod杀手”出现了。但是，这些大的大多只是噱头，对iPod没有实质影响。

但是有一个同样烂的MP3，虽然依然没有对iPod市场造成冲击，但是它的设计质量特别高，而且极大的影响了后世的UI设计，它就是Zune。

Zune于2006年发布。一直不流行，自身系统生态不好，还遇到魔鬼对手iPod。但是你很难想象2008年出现了这样的UI，如此扁平化，现代，简洁，优雅。

这是我家的Zune HD系列:

在当时，黑暗模式非常直白地表达了3D中的界面层次，甚至还有景深、视差滚动等大胆的界面效果。

静态视觉上看起来很扁平，但是有了动态效果，界面层次就很好的凸显出来了。背景是黑色的，仿佛一望无际空，所有的组件都漂浮在空中，给人科幻的想象；加上动感的效果和冷冷的线条，整体看起来很酷。

5.终极Zune用户界面:Windows Phone

是个很烂的操作系统……不过这段历史软粉一定很熟悉；Windows Phone刚起步的时候，我用的是一台诺基亚Lumia 800。

先不说这个和主流操作系统有天壤之别的UI设计，这个暗黑主题真的很优秀。

来，我们来谈谈黑暗主题——Lumia 800作为WP的首款机型，采用了AMOLED屏幕。

这带来了什么？也就是屏幕的边界几乎没有了；那时候还没有全面屏，手机边框可以停航母。不过这样的UI设计确实让边界感觉很低，看起来屏幕内容和机身更融合了。

另外，它的动态效果更加流畅。虽然没有容器，但还是可以通过酷炫的动态效果、视差滚动等极具创意的方式来区分界面层次。真的是……(默默竖起大拇指)。

可惜这些视觉效果极佳的界面可能还是浪费空小时。他们并没有在后期的Windows Phone 10中生存下来，也随着Windows Phone的淡出退出了历史舞台。

那时候还是白色UI的天下，无论是Windows还是iPod优雅的全白设计，大家都忙着给界面赋予坚实的质感，这种设计一定太超前了。

领先一步是先锋，领先两步是先烈；微软对黑暗模式的坚持也因此成为历史的殉道者，从未进入主流视野。

但是这种先进的设计理念保留至今，后继有人。

二、今天进入我们视野的黑暗模式

神奇的是，对于黑暗模式，iOS和Android给出的规范确实是方向不同；那年年初我以为是暗夜/暗夜厂商，没想到发展到今天这样。

黑暗图案是如何进入我们的视野的？

我们可以看到，在过去的两年中，出现了两个高峰:

第一个高峰是去年的WWDC。苹果首次发布了iOS13的测试版，最大的特点就是支持黑暗模式。

第二个高峰是随着iOS 13随iPhone 11系列正式发布，大量app开始适应黑暗模式。

1.黑暗模式有什么好的？

为什么要做黑暗模式？大约4点钟:

重点:在空关系的感知上，深色和浅色确实差距很大。

可以说，深色UI之所以带来最大的体验差异，是为了让屏幕看起来更无界，更专注于内容；基于这种需求，有些产品自然需要更多的关注，一开始就是黑的；比如视频播放器、开发工具、游戏平台、股票平台等等。

另外，苹果应该还是非常希望弱化赛马边框和刘海的存在感；在浅色模式下，会加重赛车边框和刘海的存在感，但在深色模式下，UI会立刻与机身融为一体——这也是苹果也很乐意拥抱深色模式的原因。

刷新:目前很多手机系统或app都提供了换肤的功能。但这些换肤大多都有很强的个性和主题，能击中每个主题的用户并不多。相比之下，直接黑整个系统，新鲜感十足，接受度高。

减少界面刺激:有机发光二极管屏幕下，深色UI会让像素完全不发光，只留下内容成分，大大降低屏幕亮度，减少对眼睛的刺激；很多车载界面总是暗UI，就是为了防止晚上屏幕亮度对司机太刺激。

耐力:最后，这只是在有机发光二极管屏幕上。暗模式确实可以减少每个像素的发光量，从而达到节省功耗，提高续航的效果。

2.太难了。一进入黑暗模式就被骂。

虽然黑暗模式有很多优点，iOS 13已经正式上线一年了，但是这一时期初期的很多app每次上线黑暗模式都被舆论推上了风口浪尖。

我认为，由于不同用户对黑暗模式的期望不同，一些用户期望低对比度的夜间模式，而另一些用户只是想改变主题。结果设计师两边都不讨好，有些产品的深色图案也是一改再改，一骂就改。

3.黑暗模式还是夜晚模式？

随着iOS和Android的系统级支持，黑暗模式正式带入寻常百姓家，不同产品开始大面积适配黑暗模式。

现在是黑暗模式。与以往不同的是，这是近年来黑暗GUI第一次进入主流视野，如今的各种容器在上变得更加多变，层次更加丰富。

IOS用不同深浅的灰色和动画来表现界面层次，而Android主要通过阴影来表现，所以背景色不能做成纯黑色，否则阴影就体现不出来。

所以这真的是不同的人的期望是不同的。

第三，魏云的黑暗模式登陆

众所周知，魏云为用户提供了非常强大的照片和文件备份功能，用户在夜间或系统黑暗模式下有很大的机会查看文件和各种媒体。

所以，无论是只是刷一个黑暗主题，还是减少视觉刺激，双方用户的诉求都是合理的，但实际上并不冲突。所以在真正的黑暗模式设计中。

暗模式不是简单的反转整个界面的颜色那么简单，还要考虑到所有用户的需求，在设计启动初期就定义了适配原则。

体验一致性:

操作系统体验一致:参考iOS其他原生App体验建立设计原则；

一致的应用内体验:从控制层面刷新体验。

内容焦点

减少边框存在感:纯黑背景，充分发挥有机发光二极管屏幕的无边框感；

减少异形屏幕对内容容器边框的伤害:减少iPhone刘海的存在。

柔和视觉:

使用纯黑的标题背景色，绘制时逐渐改变深色毛玻璃效果，降低标题栏透明度；

应用非纯白的字色，防止页面的高对比度在夜间对眼睛造成太大的刺激；

重新审视分割线的应用，重新设计划分容器的分割线，用色块来划分。

项目落地的时候，像魏云这样的大型项目有几百页，直接一页一页刷会有一些问题，需要从抽象到具体逐渐成型。

1.样本更新，注意检查对比度

更新样本时，需要特别注意的是对比度。

黑暗模式下对比度特别好。如果品牌的主色调是相对较暗的颜色，即使饱和度可能较高，但在暗模式下对比度仍然会不足。

如何检查对比度是否符合要求？这里推荐一个网站供参考:http://www.msfw.com/Services/ContrastRatioCalculator.

当你输入两个颜色值时，会有一个对比度值；推荐值为7:1，这是推荐的对比度；如果大于4.5:1，可用，但基于软视觉原理，3:1是一个最小极限值；但是，如果大面积的对比度太高，我们的软视觉原理就不适用了。

2.刷组件，输出样本页面。这时候开发就可以并行开发了。

在黑暗模式下，为了让界面看起来更加无缝，因为容器之间的等级差异，黑暗模式加强了深色磨砂玻璃的使用；磨砂玻璃封面会在内容中呈现迷人的背景虚化效果，一级界面中的导航栏就采用了这种设计。

定义每个容器的高度，并给每个高度的容器统一的背景颜色。

大规则定义好之后，就可以导出到开发中，正式开始了。

3.整理出需要的模块，输出所有一级页面。

因为不是所有的规则都是统一的，所以还是要同步输出很多典型的页面，输出的页面数量大概在50+左右。但是因为前期刷的是组件，所以这一步没必要单独考虑每个单个接口。大会把组件拼凑起来，单独处理问题是可以的。

4.通过持续交付经验补充所需资源。

因为黑暗模式涉及的页面数量多，所以情况比较多。有些深页可能找不到；所以可以建立一个腾讯文档，日常体验中遇到的任何问题都可以记录在文档中，开发哥可以实时更新优化情况。

第四，工程师视角的黑暗模式

黑暗模式中，对于黑暗模式的落地，开发哥给予了极大的支持；我们采访了腾讯高级工程师Gemi，从开发的角度来谈谈黑暗模式的适应问题。

1.在黑暗模式的改编中，设计师的输出顺序是怎样的？

在这个项目中，首先希望得到一些最有规律的东西，比如导航栏怎么改，改了哪些控件，颜色怎么改，这样就可以先动手了；这样就可以完成大部分页面。设计师给了之后，我们可以一一对比，然后针对一些特殊情况做特殊处理。

2.在开发层面，前期有哪些好的习惯，会更有利于后期对黑暗模式的适应？

首先，希望在设计上尽可能使用统一的规格；因为前期设计师给适配规范的时候，开始刷界面比较快，但是你会发现有很多界面是覆盖不到的。这是因为以前的设计用了太复杂的逻辑或者做了特殊的逻辑；在这种情况下，需要单独处理一个页面，这很耗时。

另外，由于魏云前期使用了大量的原生iOS控件，这些控件在适配时可以直接适配，不需要任何额外的工作。

使用原生控件的好处是苹果会替你思考很多问题，省去了很多后期工作。如果前期有swatch的定义，并且这个规则是科学的，那么很多问题只要修改swatch就可以解决。

3.苹果做了什么让开发者快速兼容黑暗模式？

我最直观的感受是:

首先是图片资源支持黑暗模式:Xcode支持在原有图片资源的基础上增加一个黑暗模式图片资源，就像2x和3x图片一样；直接拖拽黑暗模式图片的资源就可以了，没有额外的工作量。

第二件事是颜色:比如白色，你可以指定这个白色在黑暗模式下会直接变成黑色；如果产品尺寸较小，可以考虑这种快速适应的能力，但是这种功能在复杂的产品中不好用，因为在黑暗模式下白色可能对应不同的黑色，这个时候swatch是最安全的。

动词 （verb的缩写）结论

本文主要分为四个部分:

第一章:讲述黑暗模式的历史；

第二章:讨论当今不同用户对黑暗模式的不同期待，以及世界各大OS厂商的站队；

第三章:介绍10月更新魏云App适应黑暗模式的心路历程；

第四章:从发展的角度谈黑暗模式的适应。

在苹果等操作系统大厂的推动下，经过业界对黑暗模式的运营和讨论，很多app都兼容了黑暗模式。