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

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


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

写给设计师的指南:如何为即将到来的Dark Mode做好准备mp.weixin.qq.com图标

然而在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平台的设计都可以利用这种思维,这也会对我们设计师与开发者之间如何交付产生非常深刻的影响。

发布于 2019-06-20

文章被以下专栏收录