[首发] 苹果iOS 13 新设计规范全面解析

静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。在这里静电结合WWDC 2019的官方视频与苹果官方资料，花了一整天的时间翻译整理，为大家带来最全面细致的iOS 13交互设计指南及规范解析。赶紧转发收藏吧！

文章末尾提供了相关的文档和资料下载。

这次的规范重点讲解了iOS 13的Dark Mode，也就是黑暗模式，另外还有一些新的菜单及设计改动。共涵盖了这几点Keypoint：1.黑暗模式 （Dark Mode） 2.模态面板（Modal Presentations） 3.情境菜单（Contextual Menu）。

黑暗模式（Dark Mode）

模态面板（Modal Presentations）

情境菜单（Contextual Menu）

1

黑暗模式（Dark Mode）

为什么要使用全新的黑暗模式呢？原因有以下几点：

1. 查看照片等媒体内容会更加清晰，生动
2. 在夜晚等光线较暗的模式下可以更舒适的浏览
3. 很多用户觉得深色模式很酷

苹果的新规范有如下五个设计目标：

1.熟悉的感知

2.平台级别保持一致性

3.清晰的信息层级

4.辅助功能

5.保持简单

关于如何设计黑暗模式，苹果也给出了几点建议。在iOS 13.0及更高版本中，人们可以选择采用称为黑暗模式外观。在暗模式下，系统为所有屏幕，视图，菜单和控件使用较暗的配色，使前景内容在较暗的背景下突出。黑暗模式支持所有辅助功能。

人们可以选择暗模式作为其默认界面风格，并且他们可以使用设置功能，使设备在环境光线较低时自动切换到黑暗模式。

专注并聚焦内容: 暗模式将焦点放在界面的内容区域，这样会使内容区域更区别于背景，将重要内容凸显出来。

在明亮和黑暗的外观下测试您的设计: 了解您的界面在两种界面中的外观，并根据需要调整您的设计以适应每种外观。在一个外观中运行良好的设计可能在另一个外观中不起作用，你可能要重新设计它。

调整对比度和透明度辅助功能设置时，请确保在黑暗模式下的内容保持清晰易读。在黑暗模式下，您应该单独测试，并一并打开“增加对比度”和“降低透明度”来测试您的内容。您可能会在深色背景上找到暗文本不易辨认的地方。您可能还会发现在暗模式下启用“增加对比度”会导致暗文本和深色背景之间的视觉对比度降低。尽管具有强烈视力的人仍然可以阅读较低对比度的文本，但对于有视力障碍的人来说，这样的文本可能难以理解。请务必注意。

001.具有语义化的颜色（Semantic Color）

颜色是一种传递活力，提供视觉连续性，传达状态信息，响应用户操作提供反馈以及帮助人们可视化数据的好方法。 在选择浅色和深色背景下单独和组合的应用色调颜色时，请查看系统的配色方案以获得指导。

明智地使用颜色进行交流：当谨慎使用时，提高注意重要信息的颜色力量会增强。例如，当出于非关键原因在应用程序中的其他地方使用红色时，警告人们关键问题的红色三角形变得不那么有效。

在整个应用中使用补色：应用中的颜色应该很好地协同工作，而不是冲突或分散注意力。例如，如果粉彩对于应用程序的样式至关重要，请使用一组协调的粉彩。

通常，选择与您的应用徽标协调的有限调色板：微妙地使用颜色是传达品牌的好方法。

考虑选择色调颜色以指示整个应用程序的交互性：在Notes中，交互元素为黄色。在日历中，交互式元素为红色。如果您定义表示交互性的色调颜色，请确保其他颜色不与之竞争。提供两种版本的色调，以确保它在明暗模式下都很好看。当您使用系统颜色作为色调时，您可以自动支持高对比度。

避免对交互式和非交互式元素使用相同的颜色：如果交互式和非交互式元素具有相同的颜色，则人们很难知道在哪里挖掘。考虑艺术品和半透明度如何影响附近的颜色。艺术品的变化有时需要改变附近的颜色，以保持视觉连续性并防止界面元素变得过于强大或不足。例如，地图在使用地图模式时会显示浅色方案，但在激活卫星模式时会切换为深色方案。放置在半透明元素后面或应用于半透明元素（如工具栏）时，颜色也会显得不同。

在各种照明条件下测试应用程序的配色方案：根据房间的氛围，时间，天气等，室内和室外的照明都有很大差异。当您的应用在现实世界中使用时，您在计算机上看到的颜色看起来并不总是一样。始终在多种光照条件下预览您的应用，包括在晴天户外，以查看颜色的显示方式。如有必要，调整颜色以在大多数用例中提供最佳的观看体验。

考虑True Tone显示如何影响颜色： True Tone显示器使用环境光传感器自动调整显示器的白点，以适应当前环境的照明条件。主要关注阅读，照片，视频和游戏的应用可以通过指定白点适应性样式来增强或削弱此效果。

考虑如何在其他国家和文化中看到您对颜色的使用：例如，在某些文化中，红色表示危险。在其他人看来，红色具有积极的内涵。确保应用中的颜色发送相应的消息。

避免使用让人们难以察觉应用内容的颜色：例如，色盲人可能无法区分某些颜色组合，而对比度不足会导致图标和文本与背景混合并使内容难以阅读。有关指导，请参阅颜色和对比度。

暗模式中的调色板包括较暗的背景颜色和较浅的前景色，经过精心挑选以确保对比度，同时保持模式之间的一致感。

使用适应当前外观的颜色：语义颜色（如分隔符）会自动适应当前外观。 当您需要自定义颜色时，将颜色集资源添加到应用程序的资产目录中，并指定颜色的浅色和深色变体，以便它可以适应当前的外观模式。 避免使用硬编码的颜色值或不适应的颜色。

例如，在浅色模式下，用RGB色（255.255.255）100%的不透明度来作为背景颜色，那么在深色模式会使用RGB色（255.255.255）100%的不透明作为背景颜色。这两个颜色都会被称为背景色，打包写在代码中。系统只需按照不同的场景来使用这两种颜色即可。

苹果设计师为我们提供了4组的语义化文字样式颜色。无论在深色或者浅色模式，都能呈现出良好的对比度。如下图所示。

同样的，iOS 13也提供了三种默认的背景色供我们选择，包含系统背景，二级和三级背景。设计师可以在三种层级颜色中搭配来表达更好的层次效果。

苹果还给我们准备了一套更适合列表区域的颜色组合效果。

在填充色，分隔线和系统色中，建议大家使用各种透明度的颜色来处理，确保在黑暗模式和白色模式下，这些颜色都能很好的适配。

当然，不是所有的颜色都可以用透明色，比如下面这种。此时我们可以根据情况使用不透明的纯色代替。比如下面两张图片：

iOS 13系统引入了六种不透明的灰色，你可以在上述半透明效果不佳的极少数情况下使用它们。 例如，交叉或重叠元素（例如网格中的线条或条形）在不透明度方面看起来更好。 通常，为UI元素使用语义定义的系统颜色。上下两图分别为默认颜色和无障碍颜色：

系统级别的颜色，在苹果的设计文档中也有详细的描述，如下图两图，分别为默认颜色和无障碍颜色：

确保所有外观都具有足够的色彩对比度：使用系统定义的颜色可确保前景和背景内容之间的对比度。 对于自定义颜色，目标是对比度为7：1，尤其是对于较小的文本。 对比度越高，深色背景下颜色就越浅，浅色模式下就会颜色越深。

在使用设计师自己指定的颜色的时候，要确保在两种模式下的对比度都足够强，如下图点睛色指定了橙色，黑暗模式下使用白色，浅色模式下使用黑色文字，则对比度必须要拉大，确保应用的可读性足够好。

在下图中，我们可以体会下黑色模式和浅色模式下，同一种颜色对于用户视觉的影响，是不一样的，要保证在两种模式下都有更好的对比度和可读性，需要设计师更严谨的配色。

柔化白色背景的颜色。 如果您必须在暗模式下使用白色背景作为内容，请选择稍暗的白色，以防止背景对周围的暗色内容太刺眼。比如可以为白色背景加一些透明度，这样舒适性更好。

002.基本层与浮出层（Base & Elevated）

很多时候我们都会用到这样的设计形式，比如在背景上方叠加一层具有阴影的模块。这样页面就具有了3维的层次感。比如下图这样：

但是在深色模式下，这种具有阴影的设计就失效了（静电注：我们总不能把阴影做成白色吧？）所以，在深色模式下，我们就退而求其次，直接使用比背景稍微浅一点的颜色作为浮层，而不用考虑阴影了。

可以上图这个简单的操作来理解基本层和浮出层。常规情况下，打开通讯录，那么这个界面使用了纯黑色背景，但是当我们从电话应用中打开这个联系模块时，此时它的背景色就成为了稍浅一点的颜色。

同样，在iPad的邮件应用中，侧推弹层使用了稍浅一点的颜色作为背景色。

但是当使用分屏模式的时候，左右两侧的设计都使用了浮层的颜色作为背景色。因此，在不同的情况下，浮出层的用法是不一样的，这一点必须注意。

003.材质（Materials）

通过下图，我们可以理解，材质主要可以理解为内容区块背景叠加到基础色上所呈现的透明度。如下图所示，有四种：Thick，Regular，Thin，Ultrathin。透明度分别递增。

在黑暗模式下同理

每种厚度的材质，苹果设计师都为我们提供了不同的配色方案。

（对于设计师来说，我们不需要完全严格遵循这些色值，只需要保证在不同厚度下的透明度能达到基本的对比度要求即可，比如右边的两个设计方案，可读性就非常差，不建议使用-静电注）

004.控制条与导航栏（Control & Bars）

对于这些基础的组件，苹果建议我们使用系统内置的设计，因为他们都使用了语义化的颜色，能更好的适配白色模式和深色模式。

而对于Bar来说，大的Title文字则得到了普及，得益于手机屏幕的纵向长度提升，大的Title字体会让页面内容更加醒目，更加优雅。

005.SF字体符号（SF Symbols）

众所周知，圣弗朗西斯科字体是苹果内置的英文字体，如今的圣弗朗西斯科字体内置了1500多个符号（icon）。如果各位小伙伴对图标难以把握，或者想偷个懒，可以借助于SF字体中的符号来进行设计，更加方便快捷。因为这些符号通过输入法可以直接打出来。

它们也会随着系统字体的粗细发生变化。

如果你想一览SF Symbol的全貌，也可以下载苹果提供的应用“SF Symbols”，找到名称后粘贴到设计软件中，即可使用该符号。

很可惜，静电的电脑系统版本不够高，被SF Symbols华丽丽的鄙视了

要下载SF Symbols应用，可以在静Design公众号聊天窗口回复“SF”，即可得到这款工具的下载地址。

2

模态展示（Modal Presentations）

模态我们可以理解是一种弹层的形式，这种弹层具有强制性。它已经存在很久，对于模态场景，大家不要乱用，必须谨慎。（静电注）

从页面下方划入这样的一个弹层，覆盖90%左右的屏幕区域，这就是模态的一种（Modal View），还有一种则是提示框（Alert）。

下图是Modal View交互效果的动画展示

另外，模态必须提供关闭按钮，没有关闭按钮是不被允许的。

请注意，千万不要滥用模态，因为他们仅仅是用到两种状态之间的切换，不要对用户造成困扰。（在任何时候，模态都要慎用，请注意。iOS 13 中的日历应用是一个经典的例子。）

3

情境菜单（Contextual Menu）

在iOS13及以后的版本中，你可以使用情境菜单（Context Menus）让用户访问与屏幕项目关联的其它功能而不用切换界面。

情景菜单类似于Peek（预览）和Pop（弹出），但有两个主要区别：情境菜单可在运行iOS 13及更高版本的所有设备上使用；Peek和Pop仅适用于支持3D Touch的设备。 情境菜单立即显示上下文相关的命令；Peek和Pop需要向上滑动才能查看命令。 （请注意：iOS 13中 3D touch的交互方式与此情境菜单的交互逻辑不太一样，情境菜单的交互方式是长按，而不是重压。你可能需要一段时间来适应这个交互的变化，就iOS 13 Beta版本来说，静电觉得很痛苦。）

对于情境菜单的交互设计，请遵循以下建议：

始终采用情境菜单： 如果您为某些地方的项目提供情境菜单而不是其它地方的项目，人们将不知道他们可以在哪里使用该功能，并且可能认为您的应用程序存在问题。

仅包括适用于该项目的最常用命令：例如，在邮件消息的上下文菜单中，包含用于回复和移动邮件的命令是有意义的，但包含格式或邮箱命令没有意义。 列出太多命令可能会让人无所适从。

使用子菜单来管理复杂性：子菜单是一个情境菜单项，显示逻辑相关命令的二级菜单。 为子菜单提供描述其内容的直观标题，以便人们可以预测子菜单的命令而不会泄露它们。 简洁，以行动为导向的标题还允许人们跳过他们在当前环境中不需要的子菜单。

将子菜单保持在一个级别：虽然子菜单可以缩短情境菜单并阐明人们可以执行的命令，但是多个子菜单级别使得体验变得复杂并且人们难以导航。

将最常用的项目放在菜单的顶部：当人们打开情境菜单时，他们的焦点位于该菜单的顶部区域。 将最常见的项目放在菜单顶部可以帮助人们找到他们正在寻找的项目。

使用分隔符对相关菜单项进行分组：创建可视分组可以帮助人们更快地扫描菜单。 例如，您可以使用分隔符对与编辑项目相关的操作进行分组，使用另一个分隔符对与共享项目相关的操作进行分组。 通常，不建议情境菜单中有三个以上的组。

避免为同一项目提供情境菜单和编辑菜单： 当人们为同一个项目启用这两个功能时，系统很难检测到意图，这可能会让人感到困惑。

避免提供打开项目预览的操作按钮： 人们可以点击打开他们正在预览的项目，因此通常不需要提供明确的“打开”按钮。

4

相关资料下载

SF Symbols应用下载

请在静Design微信公众号

聊天窗口回复“SF”

iOS 13 Sketch设计模板及配色方案下载

请在静Design微信公众号

聊天窗口回复“黑暗”

本文部分内容参考文档

https://developer.apple.com/videos/play/wwdc2019/808/

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/