iOS 设计的新增内容

有了 iOS 13 我们 设计和构建 App 的 方式将会发生一些细微但重要的改变

深色模式为我们如何 处理颜色 图像和文本提供了 一种新的方法 新的卡片样式表不仅以 不同的方式来呈现模态演示 而且还改变了我们 和它的交互方式 新的语境菜单控件 可以轻松快速地 访问语境相关的功能 关于这三个主题 我们有很多内容要讲 所以现在让我们了解一下深色模式

去年我们在 macOS 上 推出了深色模式 它非常受欢迎 多年来 照片和视频 App 一直都使用深色用户页面 因为它们能让人们 清晰地看到照片和视频

深色用户页面对深色 照明页面来说非常有用 我们的眼睛更容易适应 黑暗的屏幕和 周围的世界 而且 撇开功能上的原因不谈 有些人偏爱深色用户页面 只是出于个人喜好

iOS 上的深色使用 纯黑色背景来使 文本和其他前景元素 形成最大对比 黑色背景与硬件边框 无缝地融合在一起 从而使用户界面 看起来更广阔并与 硬件本身融合

一般来说 你所有的 App 都应该支持深色模式 当使用你 App 的用户 把他们的设备设置为 深色模式时 他们也会期待 看到 App 发生改变

目前 支持深色模式 需涉及到升级的 iOS 设计系统 iOS 13 已经进行了全面检修 现在 为了让我们都在 同一个页面上 设计系统 基本上就是一组部件 如颜色 字体和 符号 保持逻辑 一致一同运行

一个条理清晰 抱歉 和协调一致的设计系统 能帮助我们轻松地学习和使用 通过与 iOS 设计 系统的整合 人们 会更熟悉也更容易 操作这个 App 在讨论所有细节之前 我想先分享一些指导 设计团队工作的 关键设计目标

首先 他们希望 iOS 能 保持熟悉和直观的特点 iOS 设计系统已经 被彻底改造 但它最终 仍然是 iOS

他们试图让内部设计 更加一致 所有的内置 App 都经过重新设计 使它们彼此之间顺次运行 这使用了我们今天要 讨论的所有组件

他们还希望新的设计 系统包括一系列的 颜色选项来成功 阐明信息层级结构 从而让最重要的元素 成为最强大的元素 而不那么重要的 元素则退居二线

他们还将可访问性与 其他目标放在同等的地位 新系统完全能支持 粗体文本和增强的对比度 访问模式

最后 他们希望新的 设计系统简单 直观 易于实现 好了 现在让我们聊一聊细节

我们好像应该从颜色开始比较好

每个 App 都有一个背景 大多数 App 都有文本和符号 一些 App 有分隔线 和分组框来帮助 组织全部的内容

现在 当我们描述这些颜色时 可以很自然地通过 它们的值来对其进行讨论 文本是黑色的 背景是白色的等等 现在 随着界面变得 越来越复杂 这个调色板 的长度就会扩展 但这些其实都不算什么 然而 当你添加对 独立外观的支持时 就有了 两组并行的颜色以便 彼此保持同步并便于进行管理

在这一点上 用一种 更抽象的方式来看待颜色 会比较有帮助 这就是语义颜色的由来

语义颜色描述 颜色的意图 而不是 颜色的值

因为语义颜色是 从它们的确切外观中提取 出来的 所以它们可以同时工作 它们是动态的 所以 背景色可以是 黑色的深色模式和白色的 浅色模式 因此 你不必为浅色 和深色模式分别维护 两个颜色列表 你可以将系统调色板中的 语义颜色应用到 UI 元素 它们的外观将自动 适应浅色模式 和深色模式 这非常方便

iOS 13 里有一个语义颜色 调色板供你使用

这些颜色中有许多具有 初等 次级 三级 和四级值 这些变体用于 表示信息层级结构 标签颜色与背景的 对比度最大 所以 它会提前进入前台 吸引你的注意力 它应该用于 主要元素中 如标题 副标题 第三位符文本 第四行禁用的文本

同样的基本原理也适用于 背景颜色 系统背景是一个主要的 背景颜色 在浅色模式下 是纯白色 在深色模式下是纯黑色 二级和三级系统 背景颜色允许你来 安排信息层级 还有一组用于组表 视图的并行背景颜色 现在 如果你仔细观察 你会注意到这些颜色 并不是简单地在浅色 和深色模式之间倒转 表行背景在这两种情况下 颜色都比较浅 它们一致选择了 一种能确保对比度 的调色板 同时让 App 在浅色模式 和深色模式之间保持相似

当你在设计深色模式时 可以想象灯光被调暗了 而不是所有的颜色 全都反了过来 这通常是很有帮助的 新的系统调色板包括 填充色和分隔色 所有的填充色 和分隔色都是 半透明的 这有助于 它们与各种背景色 形成良好的对比

新的调色板包括六个 完全不透明的灰色值 当透明度产生的结果 不能令人满意时 最好 使用这些颜色 因此 比如在绘制 交叉网格线时 重叠的半透明颜色 会让人产生视觉错觉 而且 如果元素重叠了 纯色就非常有用了 它可以防止元素看起来 被禁用或损坏

这些颜色几乎在整个 系统中都有使用 我们鼓励大家在自己的 App 中使用这些颜色 首先 你可以在 Apple Design Resources 和 Human Interface Guidelines 里查看完整调色板 我会在最后展示 更多的相关信息

和以前一样 我们将继续 为你提供着色颜色 作为 你 App 的着色颜色 这些色调是动态的 这意味着它们有浅色 和深色模式的变量

每种色调都有 高对比度的变量 当它们对比度增加时 就会启用可访问设置

浅色在深色模式下变浅 而在浅色模式下变深

现在 如果你选择浅色 请试着选择在两种 模式下都很棒的颜色

然而 在浅色模式下 显色出色的颜色 在深色模式下可能 会对比度不足 反之亦然 即便你觉得颜色 在两种模式下都能 完美显示 最好还是使用 在线颜色对比计算器 来检查一下你的颜色 现在 因为色调颜色可以 是动态的 你可以选两种 稍微不同的颜色 来用于浅色和深色模式 当你选择这些颜色时 目标对比度是 4.5 比 1 或是更高

强烈的颜色对比可以 提高 App 的辅助性和可用性 系统调色板应该 基本上涵盖了你的大部分需求 当然 你也需要 定义自己的颜色 也许你有用户可选择的 标签颜色或状态指示器 和浅色一样 任何颜色都可以是动态的 考虑到对颜色的感知 会受到显示背景 的影响 你将需要 进行一些调整 以帮助在模式之间 让这些颜色值 看起来保持相似 或者确保在两种模式中 都有足够的对比度

一直以来我都在 讨论浅色和深色模式 大家可能知道 这有点过于简单化了 实际上有两组 背景色 分别叫做 base 和 higher

顾名思义 这些背景的 颜色是关于分层接口

当两个浅色界面 分层时 一个简单的漫射 阴影就可以在两者之间 创建视觉上的分离效果 对于深色界面来说 阴影效果稍差一些

系统背景颜色将为 背景 App 或界面 使用较深的或基本的值 为前台中的 App 或界面使用较亮 较高的值 以 Contacts App 为例 它使用一组自己 绘制的基本颜色值 但当手机 App 的 模态表示中出现 相同的界面时 它则使用更亮的背景颜色 好 让我们来看一个 稍微复杂一点的例子 这是运行在 iPad 上的邮件 邮件本身是使用基本的 背景颜色集绘制的

当我们在导入 联系人时 可以看到 它是用加亮的 背景颜色绘制的 现在 联系人的浅色外观 可以使它在邮件中 更加突出 并将其推进到前台 当联系人在需要 处理的邮件中以多任务 并排显示时 它们都是用 加亮的背景颜色绘制的 这有助于和中间的 分隔器形成对比 以防止两个 App 混到一起 当我们在邮件中撰写电子邮件时 它会以表格的形式出现 这也是用加亮的 背景颜色绘制的 但主要的 App UI 邮件 看起来有点暗 因为模态 显示其绘制了 一个覆盖层来模糊 背景内容 并投下了 一点阴影 现在 当你的 App 被加亮时 背景颜色会发生变化 你必须注意你 可能会使用的一些 较深的颜色 甚至是 系统调色板里的颜色 可能它的 对比度不太好 当你的设计处于加亮状态时 你总是要检查它们

同样 半透明的填充色 和分隔色也会 对你大有助益 它们很好地适应了 底层和外层背景

好了 我们继续来讲材料

iOS 13 对其进行了 较大的改变和提高 现在有四种材质 可供你选择 它们具有 不同的半透明级别 厚 普通 薄和超薄

这些材料设计精良 在各种背景下 都能出色运行 它们的外观会根据用户 是在浅色模式 还是深色模式来 做出动态变化 你可以基于你想要 多少背景分离 你认为 多少是最合适的来选择 你想要的材质

默认的材质是常规的 并且在大多数情况下 都能良好运行 但是如果你用这种 需要更多对比的 材料来呈现内容 你可以使用更厚的材料

对于更轻量级的交互 可能包含更简单的内容 选择 thin 和 ultra-thin 可能会比较好 哪一种材质更适合 你的 App 取决于 它所显示的内容 说到这一点 浅色和 深色材质都有 一组标签填充和 分隔颜色的振动值 振动是贯穿 iOS 和 Apple 其他平台的 一种视觉效果 对于系统材质 一般最好使用 vibrancy 而不用纯色 因为根据背景语境 纯色会变得 很模糊 这会引起一些 严重的清晰度问题

无论背景是什么 vibrancy 都有助于保持这种对比

iOS 最新的视觉设计 系统还包括对控件和 条形图的更改

像形状和颜色这样的 视觉属性被引入到更大的顺次 运行结构中 以获得内部一致 控件现在可使用 语义颜色进行绘制 这样它们就可以更好地 适应浅色和深色模式

如果你使用 UIKit 控件 你可以免费使用所有这些功能

如果你想花时间用 自定义控件重新创建 UIKit 免费提供的东西 我不知道怎么说 但请不要那样做了

重新创建 UIKit 免费提供给你的东西 需要很多努力和时间 也很难做对 对你来说也没什么好处

当然 自定义控件 通常是必要的 UIKit 不会提供 所有你需要的东西 例如 UIKit 不提供评级指标 所以 当你制作自定义 控件时 应该使用系统调色板 这样你就不需要对浅色 和深色模式进行两种 不同的颜色处理

导航栏也已经更新 默认情况下 它们现在 是为没有背景和阴影的 大标题绘制的

这可以让标题与它所 标记的内容无缝连接 当内容滚动到 导航栏下方时 背景和阴影将会淡入

现在 大标题栏 导航栏在这种 视觉处理中特别好用 但它也可以应用于 默认导航栏 例如 在设置 App 主视图的导航栏 使用了一个大标题 它没有背景或阴影 标准导航栏会经过 程式化来进行匹配

虽然现在衔接的导航栏 看起来很棒 但它并不总是合适 这个背景是完全 透明的 如果你把 任何东西塞到 导航栏下面 它都 直接显示出来 不过可能看起来不太好 所以不要这样处理 如果你有一个非常 密集的界面 在内容区域 旁边有很多控件和导航栏 那么阴影提供的 清晰视觉描述 会非常有用

好 那么在我们继续讲解之前 我想和你们讨论 一个和深色模式相关的 更为重要的功能 iOS 总是为表行 和工具栏等 提供一些符号

在黑暗背景下显示时 之前的一组符号并不能 很好地表现出来 他们看起来有点太单薄了 因此 设计团队重新了 设计了系统中的所有符号 最棒的是 正如有些人 已经知道的那样 我们让 所有这些符号都能够 和 SF 符号一起使用

SF 符号包含超 1500 个符号 这不仅只是一组新的 符号 这代表了一种 全新的方式来 思考和设计符号 顾名思义 SF 符号 的设计是为了配合 San Francisco 的视觉设计特点 iOS 和 Apple 其他平台的系统字体

它们可以按字面意思输入 以便与文本内联显示 它们嵌入了基线值 以确保其相对于文本 能顺次运行 每个 SF 符号都提供了 相对于当前大小的小型 中型和大型变量 来应用于不同的语境

每个符号都有 9个权重 就像 SF 字体一样 因为 SF 符号是基于向量的 所以当和动态类型一起使用时 SF符号可以与文本一起缩放 通过提供多个权重 SF 符号在启用粗体文本 辅助功能设置时 会变得更加醒目

现在 当你设计你 App 的 comp 时 你可以使用新的 SF 符号 App 浏览或搜索符号 复制你想使用的符号 到你的设计 comp 然后只要把它粘贴到 一个文本层就可以了 更新的 iOS Apple Design Resources 已经 设置好可以和符号一起使用 例如 要为这个标签栏 交换符号 只需选择标签栏 转到检测器上 并将其在按键上粘贴替换

我已经使用这个 功能几个月了 我必须告诉各位 这是一个颠覆性的改变

如果我们提供的 1500 个符号还不够 那你其实可以用 SVG 生成一个模板 然后进入 Illustrator 或 Sketch 来修改并设计你自己的符号 并能获得我刚才 所说的所有好处 这非常了不起

好 我们现在继续进行模态展示

我们通常称模态演示 为工作表 因为它们在 屏幕上向上滑动的方式不同 这个动画告诉我们 它们已经从一种模式切换到了 另一种模式 或者切换到了 App 的新模式

在 iOS 13 中 工作表 有一个新的卡片状外观 整个系统中都在使用它 这个程式现在是默认的 它的好处是 它能让你看到 背景中有什么 这样的提醒非常有用 比如有一个不同的 UI 它能适应不同的任务或模式 比如 App 仍然在背景里 使用全屏模式工作表 有时候可能会让你忘记 自己之前在做什么 卡片样式的模式表可以 通过向下滑动屏幕上的 任何位置来取消 而那个取消手势 通常比点击导航栏中 的按钮更容易

与滑动返回一样 下拉取消操作 方便单手操作 这在屏幕更大的 设备上尤其方便

现在 你可能想知道 屏幕滑动是如何运行的 当内容区域被滑动时 向下滑动会 将其滑回顶部 当滚动到顶部时 继续滑动将 取消显示模态

但是任何时候 你都可以 从顶部边缘向下拉来解锁

现在 如果这个手势 由于某种原因出现了问题 比如你在内容区域里 有一个与垂直滑动兼容 的控件 它是可以被阻止的

当模态演示本身 需要强制执行时 也可以避免这种情况 例如 这里我们 要么取消 要么添加

如果我们向下拉 它就会立刻弹回来 在某些情况下 我们必须 在离开模态语境之前 做出决定 你可以阻止 该取消手势 并显示一个 询问希望如何继续 的动作表单 这实际上非常方便

现在可以告诉大家 我刚才描述的 并不表示你不再 需要模态卡的按钮 按钮是十分重要的 他能让人们 知道他们可以关闭相应模态

出于对辅助功能的考量 按钮十分必要 人们可能还不熟悉 或不想使用这个手势 当内容区域被 向下滑动时 点击按钮 可能会更方便

同样 在屏幕顶部 看到否定和 肯定动作对时 要让人们知道他们必须 在这个模态演示中 做出什么选择 采取什么行动 现在，我们认为新卡片 风格非常棒 这就是为什么 它现在是 iOS 的默认设置 但它们并不总是合适的 对于有些任务 比如编辑 图片或标记屏幕截图 你确实需要最大化 屏幕空间并 最小化视觉干扰 对于这样的工作流 你应该使用 可选的全屏显示 最后一个关于模态演示的 的要点是 模态是 用于切换模式的 不要仅仅因为你喜欢 它们的动画或视觉风格 就使用它们

关于模态表使用有一个 很好的例子 日历 日历有两种主要模式 在网格或列表中查看事件 然后创建或编辑事件

查看日历包括快速 浏览日历中的 所有事件然后选择 它们来查看细节 因为我们仍然处于查看 模式 所以使用子视图 来显示这些细节 顾名思义 子视图 是原视图的扩展 子视图应该是 在原视图中启动的任务 或工作流的延续 当创建或编辑一个 事件时 一个模态工作表 向使用日历的人发出信号 他们已经切换到 一个新的不同的工作流 好 最后一个 iOS 设计主题是语境菜单 随着几年前 3D Touch 的引入 出现了一种新的 交互方式叫做 Peek and Pop Peek and Pop 主要是 为了获得更多的内容预览

如果可用 可以通过 向上滑动预览来访问操作

语境菜单会稍微改变一些内容 并把焦点放在操作上

然后相应操作就会立即被呈现出来 语境菜单也适用于所有设备 Peek and Pop 只支持 3D Touch 所以不能在 iPad 和个别的 iPhone 产品上使用 3D Touch 让语境 菜单显示得更快 而获取语境菜单的手势 是轻点并按住 你可以在 任何支持它的设备上体验 语境菜单由两部分组成 命令菜单 它可以在 一个项目或 选择中执行 另一个是 所选项目的可选预览 也会受到影响 预览可以有效地 提醒你哪些项目将受到 这些命令菜单的影响

语境菜单的实际外观 将根据设备大小 和方向而变化 在 iPhone 上 预览和手机 是纵向堆叠的 而在 iPad 上 只有在三个或 更少的命令时 才会如此 否则 菜单和预览 将会并排显示 语境菜单将直接 出现在它们所影响的对象 上方 或者尽可能靠近它

和 macOS 语境菜单一样 你可以选择菜单命令的顺序 最好把最常用 或最常访问的 命令放在顶部 以便更容易访问 否则 你就应该 对命令进行分组 因为它们彼此关系密切 因此 剪切 复制和粘贴的 彼此之间联系紧密

你还可以使用分隔符 来创建视觉上不同的分组 iOS 语境菜单可以 是层次化的 这意味着 其中的一些选项可能会 进入二级子菜单

iOS 上的语境菜单 还包括符号 帮助人们 更快地找到要找的东西 而且你可以通过 红色标记警告人们 注意破坏性行为 你应该尝试在 App 的 每个对象中添加语境菜单

大家想想 macOS 你期望每个 App 中的 每个对象都有一个语境菜单 它们是学习如何 执行操作的好方法 iOS App 添加的 语境菜单越多 人们就越希望每个 App 都支持语境菜单

好 最后一个关于语境菜单的要点 它们包含的操作 应该仍然可以在主界面 的其他地方使用 语境菜单功能十分强大 且方便 但可能用户 并不总会经常性用到它们 现在 我迫不及待地 想看大家如何使用 深色模式 更新的模态演示 和新的语境菜单 更多信息和资源 请访问 developer.apple.com/desig 在那里你可以找到更新的 SF 字体 SF 符号 App 以及更新的 iOS 设计资源 Adobe Photoshop 和 Adobe XD 将在今年夏天晚些时候发布 此外 有关我今天所介绍的 所有内容的更多细节 请查看 Apple Human Interface Guidelines

好的 非常感谢各位的宝贵时间 [掌声]