从设计的角度聊聊我眼中的「暗黑模式」

如果你是一个有极客精神的果粉，相信前几天的WWDC足够让你回味很久，这次WWDC苹果不仅带来了全新的ios13也带来了我们期盼已久的「暗黑模式」，今天我们就来聊聊，即将引领设计潮流的Dark Mode。

为什么会有暗黑模式？

其实「暗黑模式」的出现早已不是啥新鲜的事情，只是这次苹果把Dark Mode做到了极致，所以一下在圈内引起了极大的轰动效应。那么作为设计师的我们，应该掌握哪些Dark Mode的设计技巧呢？

在分享Dark Mode的设计技巧之前，我们先来详细了解一下，为什么会有「暗黑模式」的出现。

在移动互联网十分普及的今天，智能手机成为了人们日常使用频率最高的电子产品之一，几乎占据了一天里面的70%的时间，尤其是我们互联网的从业者，所以为了降低长时间使用屏幕带来的疲劳感，「暗黑模式」的出现可以说是一场及时雨，不仅解决了用户的疲劳感，也把全面屏带来的沉浸式体验带到了一个新的维度。

其次「暗黑模式」的出现大大解决了手机电池续航的痛点，现在主流的智能机屏幕越做越大，屏幕越做越亮 OLED、AMOLED 都成了耗电大头，而手机却越做越薄，电池在本身技术蓄电量不能跳跃式发展的前提下只能为轻薄机身做让步，所以手机续航能力的问题也日益严峻。 即使是评价口碑领头羊的iPhone系列也不免要为提升续航寻找最优解决方案，可以降低设备耗电速度的 Dark Mode 优势突显出来（由于OLED屏幕中每个像素都是自主发光，所以在显示深色元素时像素所消耗的电流更低，尤其在纯黑颜色时像素点可以完全关闭达到省电的效果）

设计师应该如何设计？

说完了「暗黑模式」存在的原因，接下就是干货分享的时候了，作为设计师的我们应该如何开始「暗黑模式」的设计呢？

让我们从颜色说起，我们先来看看下面这张图。（左图为高亮模式，右图为暗黑模式）

从图中我们不难看出，ios13的「暗黑模式」的颜色要比「高亮模式」下的颜色饱和度有所降低，整体色调也略微偏向于冷色调。

从而我们得出第一条结论：在「暗黑模式」下的设计，颜色饱和度不易过高，应当尽量配合黑色的背景来进行设计。

说完了颜色的使用，我们再来说说字体的使用。老样子，继续看图。

同理，我给大家列出了「高亮模式」和「暗黑模式」的两种字体规范，分别展示了从「一级标签」到「四级标签」的字重以及字色的使用（本次ios13采用的字体为SF PRO Display）。

最后聊聊适配？

关于「暗黑模式」的适配想必大家也是非常关心的，但由于ios13现有的设计规范还是略少，所以在这里我暂且用「网易云音乐」来作为例子，来给大家对比一下，两种模式下的icon不同。

我们可以从图中大致了解到，网易云的「高亮模式」和「暗黑模式」所运用的icon是两种完全不同配色的icon，特别是首页5个入口的tab，风格迥然不同，这也就意味着在即将来临的ios13适配中，设计师输出两种不同风格的素材在所难免，而且加上现在很多混合App的出现，所以这次「Dark Mode」的适配工作将给开发的同学带来极大的考验。