Material Design & iOS 13黑暗模式总结探索

6.材质

在iOS中的材质是类似亚克力毛玻璃。iOS13中苹果提供了4个层级的材质，由轻薄到厚重，默认使用regular材质。

Vibrancy技术

在iOS13 中引入了Vibrancy的渲染技术，原理有些类似Photoshop中线性减淡和线性加深的渲染模式。与简单的透明度叠加相比，可以确保颜色叠加后依然足够鲜艳，即使背景本身对比度较低，依然可以保证良好的可读性。

第一排是固定色值的文字

第二排是使用Vibrancy技术的文字

可以看到固定色值的文字在背景颜色变亮后可读性明显下降

不同厚度材质在默认及黑暗模式下的示意对比

具体参数在sketch文件中查看

7.图片和图标

Launch Storyboard （故事启动图片）

iOS13新加入

引入黑暗模式后，原本启动图多以白色为主，这在晚上会严重影响体验。同时iOS当前需适配的屏幕尺寸非常多，在iOS13中之前的Launch Images（静态启动图片）方法已经被列入不再推荐。取而代之的是Launch Storyboard（故事启动图片）根据不同的深浅模式自动适配。

同时需要注意的是，线性的图标从默认模式直接拿到黑暗模式下会显得没有体积感，因为在浅色下，大脑会自动将镂空部分脑补成图形的一部分；但在黑暗模式下，这种效果消失。所以在黑暗模式下可以将线性图标调整为面型图标。但一切以实际情况考虑。

8.SF Symbols

iOS13新加入

由于黑暗模式的加入，原本的静态切图会导致图片数量翻倍。SF Symbols包含超过1500个图标，配合之前提到的基础背景层与架高层（动态颜色）、语义化颜色、Vibrancy技术等对颜色的动态处理方式、可以使图标在深浅模式都有完美的效果展示。 它集成在系统默认字体San Francisco系列里的，在App中像文字一样可以调整粗细大小，我们可以利用SF Symbols官方提供的SVG模板制作自定义的图标供App调用。

图片来源于http://developer.apple.com

通过分析两个系统对黑暗模式的不同指导，可以总结主要相同点及不同点。

「相同点」

1. 两个平台在黑暗模式的处理基本都是色彩去饱和度，提升整体的对比度。

2. 在调整文字层级都是通过调整透明度实现。

「不同点」

1. Android的黑暗模式是基于默认模式的Material Design色板自动推演黑暗模式色值，两种模式下的色彩差异比较大。

2. iOS为了保证深浅模式下有更高的视觉相似度，并没有为黑暗模式设计非常激进的色彩。

Tips

黑暗模式相关文件包含Android Q和iOS13 相关文件，其中Android中有Material Design官方推出的关于黑暗模式的插件。iOS的源文件查看，必须先安装SF-Symbols，不然界面中icon位置全部都为问号，安装SF-Symbols组件电脑系统必须更新到10.14.5.不然安装后显示不可使用状态。

对比度在检测网址

http://color.review/check/293845-FFFFFF

以上就是关于黑暗模式的思考与总结，希望与大家共同学习交流。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/