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 简报 😎

关于 iOS13 中「全新的SF Symbol」，「Modal 的新类型 Sheet」，「iPad UI」等，会在墨刀的下次推送中分享哦！