写给设计师的指南：iOS 13 Dark Mode 深度解析

不出所料，在上周WWDC上发布的iOS 13，苹果终于带来了期待已久的Dark Mode，前一篇文章已经分析了Android系统与苹果macOS中的Dark Mode，为大家总结了一些普适性的Dark Mode设计原则和需要注意的地方。

详情请戳这里☝︎

然而在iOS 13正式发布以后，苹果对iOS平台的Dark Mode又推出了一些特殊的特性。下面我们来一起探究下针对iOS平台具体有哪些设计规范，和Android与macOS平台又有哪些不同。

设计原则

上篇文章已经提到为什么我们需要Dark Mode：

1.让用户更好的Focus于App内展现的内容2.在暗光环境下减少用户视觉疲劳，减少对周围他人影响3.OLED屏幕可以大幅降低屏幕耗电量4.用户对深色UI的热衷5.在不大刀阔斧的改动UI界面的前提下，为用户带来耳目一新的视觉体验

基于此，iOS的设计团队为Dark Mode设立了以下五点设计原则：

1.保持视觉风格的熟悉感2.平台一致性3.清晰的信息架构4.辅助功能5.易于开发者采用

层级

由于Dark Mode下，阴影对界面层级的区分作用被大大削弱，所以我们使用由深到浅的几级灰度背景色配合阴影来强化层级区分，处在越上层的层级有着越浅的背景色。不过在iOS 13的Dark Mode中有一点与Android以及macOS中非常大的不同，就是对Base层（基底层）的定义。

Android和macOS中默认的系统基底层并非纯黑，而是较深的灰色。这样可以使阴影更好的发挥作用，且可以避免用户视觉感受上过于压抑。然而iOS中，也许是出于省电，或许是为了隐藏近几年苹果都躲不开的刘海屏，苹果选择了#000的纯黑作为基底层。 

在Dark Mode下，iPhone XS的刘海被几乎完全隐藏

Base and Elevated (基底层与架高层)

为了让纯黑底色下更好的体现层级，苹果在Dark Mode中引入了“Base and Elevated（基底层与架高层）”的动态层级概念。对于层叠出现的两层界面，在浅色模式下，只需要阴影就可以营造视觉区分，但在深色模式中阴影就不够用了。

iOS会根据界面所处的层级自动适配基底层或架高层的颜色，这意味着同样的App、同样的界面，当它处于基底层或架高层的不同状态时会有着不同的视觉表现。比如当通讯录App在它自己的界面里，和在信息App中作为选择联系人的“模态界面”弹出时，背景颜色就由基底层切换为了架高层。

由于iPad中还存在多任务模式，允许多个不同App同时叠加出现，在iPad上会更显复杂：

1.当App以全屏模式独立运行时，使用#000的纯黑作为基底层。2.当App以叠加悬浮窗形式运行时，App的底色自动变为较浅的架高层，而全屏运行的主App则保持基底层不变。3.当App以左右分屏形式同时运行时，由于需要呈现调整左右分屏比例的“控制柄”，所以此时左右两侧的App均以架高层状态显示。4.当模态视图弹出的时，处于顶层的模态视图成为新的架高层，投射下阴影，而底层的界面则被黑色的透明度遮罩遮盖。

由于界面的底色是动态变化的，因此在iOS的Dark Mode中需要谨慎使用灰度很小的浅色，在界面变为架高层时这些颜色可能导致很差的可读性。

颜色

在浅色背景下原本合适的颜色在深色背景中的对比度会变差，且较高饱和度的颜色在深色背景会产生抖动效应，因此各平台的都为深色模式准备了一套不同的色板。Android的深色模式是基于浅色模式的Material Design色板自动推演深色模式色值，两种模式下的色彩差异比较大。苹果为了保证深浅模式下有更高的视觉相似度，并没有为深色模式设置非常激进的色彩，不过总的原则也是在深色模式下对色彩去饱和，提升对比度。如果选择使用自定义颜色，则需要检查色彩对比度。

Semantic Color（语义化颜色）

由于Dark Mode的引入，界面当中的所有元素都会出现两套不同的颜色，继续使用固定的色值来描述颜色将会使颜色的管理成本剧增，因此iOS引入了语义化颜色的概念。

语义化颜色顾名思义，指的是我们描述颜色不再使用固定色值，而是以颜色所使用的目的来描述颜色，而每套颜色都在系统层面为其配置两套适合各自模式下的色值。比如，iOS中定义SystemBackground（系统背景色）在浅色模式下是#000，在深色模式下则是#FFF。

界面各处的颜色都可以以这种语义化的形式来描述，比如分割线颜色(SeparatorColor)、文本标签色(LabelColor)、系统背景色(SystemBackground)、表单群组背景色(SystemGroupedBackground)、填充色(FillColor)等。

iOS为文本标签、背景色都提供了多个层级，只需要使用”Secondary-”, ”Tetirary-“, ”Quaternary-”这样的前缀配合基础的颜色名称就可以调用，比如：

1.LabelColor 一级文本2.SecondaryLabelColor 二级文本3.TertiaryLabelColor 三级文本4.QuaternaryLabelColor 四级文本

通过语义化定义，颜色可以自动匹配深浅两种外观，并且对系统级的特性可以更好的适应。比如系统背景色和文本标签色都是对应纯黑与纯白这两个颜色，但在Dark Mode中当界面位于架高层时，调用系统背景色(SystemBackground)可以自动匹配为架高层的背景色。

iOS默认提供了9个彩色色板(TintColor)，在iOS 13中为了保证深色模式下的对比度效果，每个TintColor都新增了深浅模式两种版本，在调用时也应使用语义化的颜色名称，比如SystemBlue，在浅色模式下指的是#007AFF，在深色模式下则是#0A84FF。

开发者可以直接使用语义化颜色名来调用所有的这些颜色，而设计师为了确保设计效果图一致，可以参考苹果提供的最新iOS 13 UI Sketch组件库

 ➝点击这里下载

使用系统提供的语义化颜色还有几点隐性好处，比如iOS系统提供的高对比度模式辅助功能选项，可以自动启用比默认颜色更高对比度的色值，在浅色模式下颜色变的更深，在深色模式下颜色则变得更浅。同时随着iOS的更新迭代，这些具体的色值还可能会被优化微调，使用系统提供的语义化颜色可以确保你App中的色彩始终符合iOS标准。

自定义颜色

如果你打算使用自定义颜色，也应该参考TintColor，为每个颜色定义一个语义化的名称，并为它定义深浅模式下的两个色值。在自定义颜色时应注意检查颜色的对比度是否满足WCAG 2.0 AA级标准，与背景的对比度至少应该达到4.5:1。

Color Review - 色彩对比度检查工具

同时不得不再提一次：Dark Mode不是夜间模式，Dark Mode不仅仅只适用于夜晚的暗光环境，无论是Android、Mac还是iOS在设计Dark Mode规范时都充分考虑到了用户长期使用深色外观时的体验。因为设备的环境光感器配合深色界面足以保证在暗光下，系统可以自动达到在暗光下完美的视觉效果，避免不同App间不统一的对比度，反而需要让用户频繁地手动调整设备屏幕亮度。因此界面当中的整体配色一定要以正常日光环境下的可读性为准。

材质(Material)

说到Material我们往往想到Android的Material Design，其实iOS里面也有自己的Material，只不过不同于Android基于现实世界中纸的材质，iOS中的材质更类似亚克力毛玻璃。iOS 13中苹果提供了4个层级的材质，由厚重到轻薄，默认使用Regular材质。这些材质在iOS中主要应用于一些悬浮于主界面内容之上的元素背景，比如导航栏、通知、下拉菜单、底部菜单等。iOS 7之后苹果一直崇尚这种毛玻璃般的透明材质以映射UI界面与设备屏幕的关系，也可以使用户更好的感知上层元素与下层内容之间的关系，界面也不会过于枯燥乏味。

Vibrancy(鲜亮化)

由于透明材质不确定的背景，我们通常会为其上的内容增加透明度，然而苹果在这里的解决方案并不那么简单。

直接使用白色或黑色的的透明度叠加在彩色背景上，虽然确实可以使内容颜色呈现一定的色倾，但内容的颜色往往会变灰，且当底层内容颜色变化较大时，较低的透明度层级可读性还是会受到比较大的影响。

图中，第一排文字为固定色值，第二排文字采用了Vibrancy渲染模式，固定色值的文字在背景颜色变亮后几乎变得不可见

为了解决这个问题，苹果在iOS中引入了Vibrancy（鲜亮化）的渲染技术，原理有些类似Photoshop中线性减淡的渲染模式，与简单的透明度叠加相比，可以确保颜色叠加后依然足够鲜艳，且即使背景本身对比度较低，依然可以保证一定的可读性。

Vibrancy模式应该与材质相配合使用，同时苹果已经在iOS、macOS、watchOS、tvOS等所有平台中将Vibrancy效果作为一个通用标准铺开。

图片与图标

引入深色模式后，如果界面中用到的图片资源亮度过于刺眼或者对比不足，理想的方法是为每种模式匹配不同的图片资源。iOS支持了为每处图片资源设置两套素材自动匹配不同的外观，不过iOS中也增加了一些新特性可以帮助设计师减少处理图片的工作量。

1. 启动屏

在Dark Mode下，启动图也应调整为深色的外观，否则如今常见的白底为主的启动屏很可能会让用户在晚上亮瞎眼。同时由于iOS目前适配的屏幕尺寸已经非常多，并且引入Dark Mode后启动图数量还会翻倍，在iOS 13中苹果已经不在推荐使用LaunchImage(静态启动图片)这种方法，并会在明年4月之后在App Store审核中全面禁止这种方法，却而代之的是使用LaunchStoryboard，将启动屏当成UI界面的一部分来处理动态的布局和深浅模式适配。

2. SF Symbols

SF Symbols 是iOS 13中引入的一项非常重要的新特性，由于Dark Mode下所有图标都会需要两套颜色，使用静态的图片切图会让图片素材数量激增，因此苹果干脆做了这一整套1500多个图标的矢量图标库，配合iOS中的基底层与架高层、语义化颜色、Vibrancy（鲜亮化）等动态的颜色处理，使用SF Symbols可以在深浅模式中都能自动获得完美的展示效果。

Mac中的SF Symbols应用，可以快速检索Symbols名称，并以Unicode字符形式复制出来

SF Symbols的原理和Iconfont很类似，都是将SVG矢量图形以Unicode字符的形式打包在字体文件中。SF Symbols是内置集成在苹果目前的系统默认字体San Francisco字体系列里的，开发者只需引用Symbol的名称就可以迅速调用出SF Symbols提供的图标。同时设计师也可以利用SF Symbols官方提供的SVG模板制作自定义的图标共App调用。

Web中的Dark Mode

现在大多数厂商的操作系统都已经支持了全局的Dark Mode，那么Web上的内容又该怎么办呢？其实多数流行的浏览器新版本都已经支持了“prefers-color-scheme”参数来检测系统当前的外观是浅色还是深色模式。配合利用类似Semantic Color的方法来定义网页样式表中同一个颜色在深浅两种模式下的色值，Web内容也可以获得同原生App一样的自动适配深浅模式效果。

利用prefers-color-scheme，为网页配置自动适应的两套外观颜色配置，颜色均以语义化方式命名

在iOS 13下经过适配的Web内容随着系统深浅模式切换自动变化

结语

iOS 13开始Dark Mode成为了系统级的配置，因此我们在做App适配时应尽可能确保App能同时支持深浅两种外观，否则当用户在深色模式下大多数App都是深色界面时，突然切换到你的App被亮瞎了眼很容易招致用户反感。

Dark Mode为设计师带来的最重要的一点应该说就是语义化颜色思维，其实这种思维在开发层面一直都在应用，但设计师们普遍对这一概念并不熟悉，不仅仅是iOS的设计，Web和Android平台的设计都可以利用这种思维，这也会对我们设计师与开发者之间如何交付产生非常深刻的影响。

BorderDesign交流群，加微信号： qawsedr0125   备注交流群