重磅！iOS应用黑暗模式设计终极指南（附套件下载）

在本指南中，我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp，基于Apple的人机界面指南。

在WWDC 2019大会上，苹果公布了iOS 13的所有新功能。在所有超级令人兴奋的功能中，关于黑暗模式的部分最让我兴奋。对于那些在社交媒体上关注我的人，您可能知道我是“黑暗模式”的忠实粉丝。使用iOS 13后，人们可以选择采用深色系统外观。这意味着打开黑暗模式时，iPhone上的所有应用程序都将具有黑暗外观。

因此，作为设计师和开发人员，为您的应用程序设计和实现黑暗模式非常重要。苹果已经发布了为您的应用程序设计暗模式的人机交互指南。但是，与Google的《物料设计指南》不同，该指南非常简短。因此，唯一了解更多有关准则的地方就是Mike Stern 的演讲。

如果您现在已经准备好，那就开始吧！

01

免责声明

目前没有硬性规定要求您一定遵循Apple提供的准则。这些只是指导原则，因此您可以为应用程序app自定义黑暗模式。请注意，不要生搬硬套。

02

层级结构

与Google的层次基于颜色和阴影的差异不同，Apple仅将界面中的层次视为颜色。

准则提供了4种可用于显示层级的颜色。它们被称为“系统背景色”。

03

系统背景色

根据准则，iOS的背景始终具有＃000000的纯黑色。Google 则更喜欢深灰色，值为＃121212。

苹果将此背景称为“ 系统背景”。系统背景分为3个级别，即主要，次要和第三级。每个按钮都有不同的颜色，iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高的层级或与众不同（或分组）内容的元素。

需要注意，黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。必须为所有元素分配一组单独的颜色，也就是说，你必须重新设计它们。

如下所示，在明亮模式下纯白色不会在黑暗模式下转换为纯黑色。所以，不要在深色模式下反转颜色。

04

语义化颜色

接下来我们谈谈语义化颜色（语义化颜色是针对开发工程师的，设计师可以简单看一下）。

语义化颜色，听起来像个高级名词。但是语义颜色的概念非常简单。以我们以前面讨论的Base元素为例。在亮色模式下，颜色为纯白色#FFFFFF。但是在黑暗模式下，颜色是纯黑色＃000000。

实现此效果要对其进行单独编码开发。这基本上意味着您需要为屏幕上的每个元素分配2种颜色。是的！每个元素！这将是一场噩梦。

那么解决方案是什么？对，这就是语义化颜色。除了给每个元素提供颜色之外，您还可以给它提供一种语义颜色，该语义颜色会同时具有两种模式的两种颜色。

我要说的是，如果您为每个元素分配语义颜色，例如'SystemBackground'或'LabelColor'或'FillColor'“，则操作系统将根据模式知道自动显示哪种颜色。

不必告诉它在明亮模式下显示白色，而在黑暗模式下显示黑色。系统会自动判定。

如果要在暗模式下为元素显示自定义颜色怎么办？

当然，你可以轻松地做到这一点。为每种模式分配自定义颜色即可。

例如，如果您不希望基准色是纯黑色，而是深灰色，则可以轻松地在代码中分配自定义颜色。瞧！这就是与开发人员进行“和谐”对话所需的全部知识。

05

填充颜色和灰色

iOS的准则提供了4种填充颜色（也为灰色）和6种其他灰色可供选择。它们是界面上所有元素的理想选择，例如字形（图标），UI控件等。那么，填充色和灰色之间有什么区别？

填充色具有一定的透明度，而灰色则完全不透明。因此，理想情况下，您可以只使用填充色或灰色，也可以混合使用。显然你可以根据需要选择自己的自定义灰色。

这里有一个很小的例子，说明如何在用户界面中使用它们。

在上图中，您可以看到相机和笔图标触摸目标，我使用了灰色。对于搜索栏，我使用了填充色。

那么，是否必须以这种方式使用这些颜色？不。如前所述，你可以随意使用所有10种颜色（4种填充+ 6种灰色）。

06

分隔线颜色

iOS规范为我们提供了分隔线的2种变体。一个是不透明的，另一个是透明的。

你随意使用它们之一。最好使用不透明的分隔线。但是没有硬性规定。

07

标签颜色

标签颜色用于文本，并且基于视觉层次有4种颜色。分别从一级到四级（Primary, Secondary, Tertiary and Quarternary）。

第三级标签颜色用于占位符文本，例如搜索栏。四分之一标签颜色用于禁用的文本。但是，会有一些偏差。如果您查看UIKit，会发现搜索栏占位符文本使用“第二”标签颜色，而不是“第三”标签颜色。（静电说：所以，这里并没有那么严格对吧？）

08

强调色（Tint Color）

Apple提供了9种不同的强调颜色，可在整个应用程序中使用。它们可用于文本，图标或形状。我将下面的强调色改为不同颜色，你会发现他们会变成这样的:

但是，这9种颜色在亮模式和暗模式下略有不同。如果您选择使用这些系统强调颜色，则该应用程序将自动将亮模式色调颜色更改为暗模式色调颜色。

你会发现亮模式和暗模式下的颜色是稍有差异的，请务必注意。后者比前者要亮一点。

但是，是否我们必须只能用这9种颜色，还是说我们也可以使用其它颜色呢？是的，当然你可以使用其它颜色。但是如果你要自定义颜色，你必须把黑暗模式和亮色模式的颜色都定义出来才行。这里有一些需要注意的事项：

1. 尝试选择一种在亮模式和暗模式下均能正常工作的颜色（相同的RGB值）。
2. 或者您可以选择2种不同的颜色，一种用于亮模式，另一种用于暗模式。

无论您选择哪种颜色，两种颜色都必须通过可访问性对比度测试。请注意，颜色需要的最小对比度4.5：1

Sketch或者Figma等都有这类的对比度测试插件，你可以进行尝试。

如图所示，此处使用的颜色通过了4.5：1的对比度测试。这两种颜色的比例为4.6：1。

在上图的示例中，对比度为5.57：1，它也通过了对比度测试。

另一个例子，如上图，对于明暗模式，同一文本具有两种不同的颜色。有时很难在两种模式下都选择通过对比度测试的相同颜色。因此，您可以为两种模式选择2种不同的颜色。

10

材质（Material）

如果任何元素同时具有透明度和“背景模糊”效果，则它将成为材质。该准则为我们提供了4种材质可供选择。但是，还有一种神秘的“第五种”材质，在指南里，不将其视为材质，但是在技术层面它确实是“材质”。

观察顶部导航栏和底部标签栏。尽管准则不将其视为材质，但它们显然可以称之为“材质”。

由于透明度值非常高（94％），您可能看不到条形内容的模糊。但这会产生非常微妙的效果。

那么，这些元素必须是材质吗？我可以使它们完全不透明，且不透明度为100％吗？

当然，让我们看一个例子。

两个导航栏都应用了背景模糊。左边的那个不是完全不透明的。但是正如您所看到的，它们几乎没有任何区别。另外，下面的内容也不会模糊。

请注意下图，不同的材质所产生的视觉效果是不一样的：

接下来看一下底部的Tabbar：

顺便说一句，材质还用于诸如通知和模态之类的组件。这是模态中使用的材质的示例：

11

控件或组件

对于控件（Tab），滑块，搜索栏，开关等元素，请尝试使用UI套件中的组件。当然，您当然可以使用自己的颜色，但是为什么要浪费时间从头开始制作它们。

永远要记住一点，你在设计上花的时间越多，开发人员所开发的时间也会越多。

文章作者：Chethan KVS

原文链接：https://blog.prototypr.io/designing-a-dark-mode-for-your-ios-app-the-ultimate-guide-6b043303b941

翻译：静电@静Design

本文翻译已获得作者许可，见下图