产品设计师们不得不知的iOS13——暗黑模式

2019年WWDC全球开发者大会上，苹果正式公布了iOS 13。虽然截止到目前 iOS13 才出了第三个测试版，但有心的产品设计师们已经开始提前做准备喽！

墨墨姐这次很开心联系到来自台湾的 Samuel，获得授权转载他的这篇关于「为 iOS13 设计」的文章。

注：为了适应大陆读者的语言习惯，墨墨姐修改了原文中的几处用词。

👇👇

Hello，我是 Samuel，目前在「Hahow 好学校」担任 Product Owner & Software Developer。新版本的 iOS 对于产品设计师而言算是带来了几个有趣的挑战。透过这篇文章，希望能够带各位产品设计师们认识即将正式发布的 iOS 13 ，并且提早开始进行规划！

在这篇文章会和大家介绍两个主题：

1. Dark Mode（暗黑模式） 马上就要来了，在设计上需要注意些什么？
2. iOS 13 Design System 中的 Materials 是什么？难道是 Google 的设计规范吗？

Dark Mode 马上就要来了，在设计上需要注意些什么？

先别急，在开始介绍 Dark Mode 之前，我们先来看看这支在 WWDC19 中潮到不行的影片，这样等读完文章之后可能比较不会崩溃（笑）：

苹果官方介绍 iOS 13 暗黑模式！

有在关注 Apple 的朋友大概都知道，iOS 13 会在系统内支持「 Dark Mode 」主题，而所有系统内建的 App （备忘录、提醒事项、通讯录等）也都会同步支持在 Dark Mode 底下的操作介面，系统将会在屏幕（Screen）、视图（View）、菜单（Menu）和各种控制元件（Controls）上套用 Apple 新定义的「darker color palette」。

这套 Color Palette 的主要目的， 在于透过调整颜色的明度 & 透明度做出视觉层级，提升颜色的对比性，让所有元件能够清楚的在 Dark Mode 中进行操作。

听起来很简单，但有经验的设计师们应该都知道……这一切肯定没有那么简单（泪）……

基于 Dark Mode 进行的介面设计并不是一个颜色调整一下就可以快速解决的任务， 由于暗色系的一些特性，原本用来建立视图层级（例如阴影）或者色彩对比（白底黑字）的概念都需要被重新设计， 设计师们需要抱着全新介面的思维去应对视觉上的每个细节；也因为 Dark Mode 这大幅度的改动，Apple 也耗费心力重新定义了自家 Design System 的数个项目，除了强调设计师们应该「更专注于内容」，更提出 5 个原则基于原有的设计（Light Mode）进行调整：

• 维持操作上的熟悉性
• 维持平台上的一致性
• 清楚的信息层级
• 无障碍操作
• 保持简单 — Keep it simple

两种模式下的介面区别

重点补充：在 iOS 13 当中，使用者将可以设置 Dark Mode 做为预设模式，或者可以设定当环境变暗时（室内、晚上）自动转换成 Dark Mode 的切换模式；这两种状态整合起来意味着…身为设计师的我们或多或少都该考虑些 Dark Mode 的使用场景。

iOS 的 Human Interface Guideline 中针对 Dark Mode 有不少的说明，有兴趣的伙伴可以花些时间阅读，在这边我们先来简单看看在 Dark Mode 的影响下，iOS 系统上做了哪些调整。

首先， iOS 13 中支持了所谓「Semantic Color」 ；还记得我们以前在进行介面设计时会使用所谓的「系统蓝」或者「系统红」吗？

系统蓝：返回，选中等

为了应对 Light / Dark Mode 两种模式，现在 iOS 中内建了这些「系统颜色」提供开发者 / 设计师使用，这些颜色会根据 Light / Dark Mode 自动进行切换，让你不需要耗费心力重新设计，如下图：

不论有没有使用到这些系统色，在 iOS 13 正式改版之前，各位产品设计师们请记得 3件重要的事情 ：

如果自家开发者原本是使用像是 #123456 这种 Hex 色码设定系统颜色的（应该都是啦🙄），记得统一修改成使用 UIColor.systemBlue 这种 Semantic Color 的宣告型态。iOS 13 其实内建了非常多的 Semantic Color，也包含像是 systemBackground 背景色、各类型的文字、icon Tint Color，如下图：

如果原本产品中使用各式各样的自定义色彩，可以考虑开始使用 Semantic Color ，借此同步支持 Light / Dark Mode，或者透过 Color Asset （不知道是什么的话可以问你家开发者 🤣）自己来定义产品的 Dark Mode Color Palette。

如果你的产品有使用「系统的原生元件」，例如 Switch、Tab bar、Navigation Bar 之类的（图二），假如使用者切换到 Dark Mode 的话，这些元件将会自动「将颜色套用 Dark Mode Color Palette」。

也就是说，如果完全不调整的情况下，你的 App 画面可能会变得黑黑白白一团糟啦哈哈哈哈哈哈，就类似下图图一中的介面， Tabbar 已经被转成 Dark Mode 的样式，但画面上方的元件、文字因为都是自定义颜色、样式的关系，并没有随着模式切换而自动调整，这也让整个画面看起来上下似乎不太协调。

但不用担心！如果真的很痛苦，就是不想要（没有时间）支持 Dark Mode ，可以请开发者帮你在 App 的 Info.plist 里面加上一个参数说明「只支持 Light or Dark Mode」，就可以摆脱 Dark Mode 的梦魇了（笑）。

系统元件自动转化

那么，在规划 Dark Mode Color Palette 时有什么特别需要注意的吗？

有的！ 我们需要特别注意在不同模式底下的 Color Contrast Ratio（色彩对比） ，简单来说就是在不同背景下，由于文字 / Symbol 的颜色对比值会严重影响它的易读 / 可辨识性，设计师应该针对不同模式进行调整，而非直接套用一个「乍看之下」可以兼容的色彩，以下图的橘色为例：

iOS 13 所说的 Material 是什么？是 Google 的设计规范吗？

在开始介绍 Material 之前，我们先来聊聊 Apple 在 Session 中介绍的 「Base and Elevated」 概念，Apple 之所以提出这样的概念，主要是由于「 阴影 」的效果在 Dark Mode 底下相对不明显，因此 Apple 透过灰阶的调整建立出视图的层级：

Apple 也建议设计师们也都应该透过明暗程度来建立视图的阶层， 如果完全没有概念的伙伴，iOS 13 中内建的 System Gray（系统灰）会是设计师们可以先尝试看看的颜色（同时支持 Light / Dark Mode）：

来到正题！iOS 13 提供了「Materials（材料）」的设计，某种程度其实非常类似 iOS 7 导入的毛玻璃（模糊）效果，但早期并没有那么多层（笑）。

iOS 13 透过 Materials，不同程度的模糊、透明效果来建立画面上 视觉的阶层深度 （Depth），Material 借由让背景模糊来让画面上的「背景」和「前景」拆分开来，背景的颜色由于透明的关系能够穿透到前景，但又因为模糊的设计并不容易影响前景的辨识性（当然也要搭配文字的对比啦🤣）。

iOS 13 支持四种深度（Thick、Regular、Thin、Ultrathin）的 Material 效果，透过下图应该可以清楚地看到 Thick 的 Material 效果可以提供视图更多的文字、图片对比性，而这些效果现在都可以请开发者轻松的通过程式直接设置：

如果允许的话，Apple 建议设计师们在「自定义的视图（Custom View）」上也能够套用类似的规范；除此之外，基于这些 Material 效果上的文字色彩也被重新定义，透过调整效果的 Vibrant 类型，在 iOS 13 中会自动产生如下图的文字色彩：

当然，在 iOS 13 中除了颜色可以进行调整之外，所有的图片也都可以根据 Light / Dark Mode 进行变更哦 ！

喝口水，光 Dark Mode 就有这么多要注意的重点了！如果各位伙伴有兴趣了解在设计上 iOS 13 到底还改了些什麽，除了这篇文章之外也可以参考 2019 WWDC Session ，文章中的截图也都是来自 WWDC Session 提供的 Keynote 简报 😎

本文转自墨刀公众号，已允许转载。