使用 iOS 选择器、菜单和操作进行设计

（你好 WWDC 2020） （你们好 欢迎参加 WWDC）

使用 iOS 选择器、菜单和操作进行设计 欢迎观看 WWDC 关于 iOS 选择器、 菜单和操作的演讲视频 我是 Cas Lemmens 来自 Apple 设计团队 我非常高兴 介绍 iOS 14 新添加的三个组件 你可以在 iPhone 和 iPad app 中使用 接下来我们先介绍菜单 日期和时间选择器 以及全新的颜色选择器 首先来看菜单 现在你可以在 iOS 14 中 通过任意按钮显示菜单 看起来是这样子的

你可能注意到它们 和 iOS 13 中 上下文菜单里添加的操作不一样

那么我们为什么添加这些新菜单呢？ 在 iOS 13 中 菜单 通过 iPhone 中的 action sheet 来显示 或者通过 iPad 上的气泡弹出框

从 iOS 最初的版本起 这些组件就一直存在 给我们带来了很多功能 但是随着 iPhone 屏幕逐渐变大 iPad app 内容变多 质量逐步提高 Action sheet 和气泡弹出框开始出现一些缺点 它们出现时 背景会变暗 造成速度过慢 特别是像 iPad 这种较大的屏幕 列表中的操作幅度相当大 即便标签通常很短

而且操作也很有限 例如 我不能用它们进行其他选择 特别是在用 iPhone 的时候 我经常需要移动手指到屏幕的另一端 就是为了选择某个操作或取消

iOS 14 中的新菜单 解决了许多这样的问题 首先 你的手指点到哪里 菜单就出现在哪里 这样手指就不用划很久才能选择某个操作 过渡非常快且轻便 虽然显示长度变短了 不过依旧很流畅 不像原来那样一出现就把背景给调暗了 菜单中的项目比原来小而且更简洁 但是仍然可以轻松点击 此外 对于更长的字符串 它们支持多行显示

iOS 13 中的菜单只能用于当前操作 而这些菜单还可以 用来进行其他选择和导航 这些我们过会儿会讲到 菜单中显示的内容 非常类似于上下文菜单中现有的操作

所有操作在左边都有一个标签 右边是可选图标 可以是 SF 符号 或者自定义图片

可以添加标题 这样可以明白需要进行的选择 还可以添加分隔符 创建层次

点击任意按钮都能弹出菜单 例如 音乐中这里的“排序”按钮

我可以轻触并长按该按钮进行选择 手指划到我想要的选项 然后松开

或者我直接轻触按钮 点击我想选择的操作 任何时候 我都能在菜单之外的区域轻触进行取消 这样菜单就会隐藏 返回后保持原状 因此 不需要为菜单添加 额外的取消选项

直接在菜单之外的区域轻触就能取消

而且 菜单只能专注于前进的操作 这里只能选择排序选项

菜单支持辅助功能设置 在 iOS 和 iPad OS 中可以使用 比如旁白、增加对比度 减少运动及更大的文本 可以看到我的演示

菜单的使用多种多样 接下来我们介绍 iOS 14 中最常见的使用案例 消除歧义 导航 选择 和二级菜单的显示 首先来看消除歧义 菜单可以 在适当的时候帮助你消除选择的歧义 下面我们来举例讲解 这里有一个非常清晰的操作 意图也很清楚 当你选中这个操作时 菜单会弹出 消除歧义 它会询问更具体的问题 例如 照片中 左上角有一个清晰的“添加”按钮 轻触它之后 弹出的菜单会询问你具体想要添加什么

在备忘录中 有一个明显的操作可以用来添加图片

轻触后 它会询问你想要添加什么样的图片

再比如 照片中 当我编辑视频时 会有一个“完成”按钮 用来保存我编辑好的视频 轻触后 它会询问我想以怎样的方式来保存 这些例子都很好地 说明了如何使用菜单消除歧义

菜单也可以用来导航 例如 在 Safari 浏览器中 我可以轻触并长按“返回”按钮 显示我在本视频中访问过的所有网站清单

同样地 不同导航栈中的“返回”按钮 会调出相似的菜单

菜单还可以用来选择 例如 在带有“排序”按钮的播客中 用来选择的菜单在选中的项目旁边 会有一个打勾标记

最后 菜单可以 把一系列二级操作放在一起 视图中一个简单的“更多”按钮 就能很好地显示包含多个操作的菜单

这些操作通常因为不那么重要 而没有被放在显眼位置 但是仍然可以轻松访问它们 这样做真的可以使设计更简洁 方便你专注于真正重要的设计 例如 这里的文件夹 视图完全侧重在你的内容上

相比之下 iOS 13 的文件夹 有许多操作分散在视图的各个部分 这不利于将注意力放在你的内容上 因此 通过把它们组织好放在一个菜单中 app 的使用就变得简单多了

整个 iOS 14 中都是这种类似的菜单 比如信息中的菜单

那既然这样的菜单可以使视图更简洁 你们可能就会问了 为什么不更进一步呢？

为什么不在导航栏加一个“更多”按钮 把所有操作都收在里面呢？ 当你轻触它时 会弹出一个包含所有这些操作的列表？

我们当然不鼓励 把所有操作隐藏在按钮中

这样一来 基本的操作都需要额外轻触一下 而且你不能清楚地明白 视图可以为你做些什么 所以在基本操作 和二级操作之间寻找恰当的平衡 有助于决定在菜单中放置哪些可能的操作 以及哪些操作应该放在显眼位置 在信息中 我们保留了信息编辑的按钮 因为它非常重要而且你可能要经常用到它 额外选项 并不总是一定得放在“更多”按钮中 他们也可以通过不同的手势来显示 例如 在 Safari 浏览器中 通过轻触右上角按钮 我可以管理选项卡 但是轻触并长按相同按钮 我可以看到 与这些选项卡相关的一系列操作

有关二级操作要提的最后一点是 破坏性操作 例如 在提醒事项中删除列表 之前提到过 这些新菜单避免 移动手指到屏幕底部 去选择某个操作 不过有些时候这一手势很实用

破坏性操作经常 会造成已经输入的信息丢失 所以我们想确保这中间有一定的阻力 而在不同的 OS 中 我们始终询问进行确认

为避免不小心删除某些东西 确认操作和删除操作 需要分开放 因此 这里当我轻触删除操作时 Action sheet 在视图底部弹出 询问要求确认 我就不得不 移动手指到底部进行确认或取消 这样做花费的时间和精力 就相当于是阻力 避免意外删除列表

即便是 iPhone 中菜单之外的破坏性操作 我们也建议保留 action sheet 的使用 以及 iPad 中的气泡弹出框 在邮件中 当你取消草稿时 会需要再次确认 它会询问你是保存还是删除草稿

为此 我们不能使用菜单 因为太容易一不小心就删除草稿了

而 action sheet 和气泡弹出框 需要更多的手指运动 有助于防止意外删除草稿 因此 在你觉得可以去掉所有 action sheet 时 在某些情况下 我们还是需要保留一些

我们在菜单方面的所有改进 很大程度上基于 多年以来它们在 Mac 上的工作机制 现在可以看到 这些按钮能在多种类似情况下使用 比如消除歧义和导航

以上是关于 iOS 14 菜单的总结 它取代了 iPhone 中的 action sheet 和 iPad 中的气泡弹出框 你可以使用它们消除歧义 通过清晰的操作询问更具体的问题 导航 提供页面列表用于导航

还可以进行选择 提供列表用于选择项目 或者通过“更多”按钮显示二级操作 又或者轻触并长按某个操作

破坏性操作始终需要确认 对此 我们还是 使用 action sheet 和气泡弹出框 此外 新菜单使得 app 在 iPad 和 Mac 之间转译更容易

好 以上是关于菜单的内容 接下来让我们学习 全新的日期和时间选择器 以前的日期和时间选择器是这样子的 你必须逐个滚动选择 日期或时间 在整个 iOS 14 中 你会注意到它们已被以下新的设计所取代 这是新的日期选择器 和新的时间选择器 以及上述两者的结合 下面我们来看下它们的工作方式

提醒事项是一个很好的例子 用来说明如何使用新日期和时间选择器 例如 我在添加一个日期 用来提醒我 可以看到 新的日期选择器出现了

注意 天、周和月 有了更好的展现方式 月份之间的快速切换很容易 只需要左右滑动即可 你可以前后快速切换时间 只需要轻触当前月份 选择不同的月和年

在提醒事项中 你也可以选择具体时间 用来提醒你 这里也是 你可以看到全新的时间选择器

无需使用滚轮操作 我现在可以直接输入想要的时间 因此 新设计让日期或时间选择更容易 可以以任何方式输入 轻触、铅笔、键盘或者光标 现在如果 你把这些全新的日期和时间选择器 放在视图中显示 效果真的非常好 比如提醒事项中的效果 不过这并不总是可行的 特别是对于那些使用起来困难的情况 iOS 14 提供了 全新的方式来显示这些选择器 我们称之为紧凑

当你要求 UIKit 提供 紧凑模式的日期选择器时 你会看到这样子的按钮 在一个 light platter 上 显示日期 颜色和 key 一致 轻触该按钮 弹出新的日期选择器 不过它显示在视图上的 modal 模块中

对于时间选择器

日期和时间选择器也是一样

下面我们看个例子

正如之前提到的 当不能在视图内部显示选择器时 紧凑选择器是很好的选择 例如 联系人中 这些按钮分很多行显示 我可以为联系人添加生日

轻触按钮 在视图之上显示新的日期选择器 我可以随意多次改变日期 找到日期后 我直接在选择器之外轻触进行确认

像所有新组件一样 它们当然也支持辅助功能设置 比如大点的字体 可以看到我的演示

而且有了新设计 iPad 和 Mac 之间的同位检查也更出色 因为它们都显示相同的信息 因此 和菜单一样 这有助于 app 在 iPad 和 Mac 之间进行调整 好 以上是新日期和时间选择器的介绍 选择日期和时间方面进行了改进 提供了更好的展现方式 你可以在视图内部使用他们 或者当内部显示有困难或不可行时 使用全新的紧凑日期和时间选择器 这样 app 在 iPad 和 Mac 之间 转译更容易 因为这两种设备都显示相同的信息

好 新日期和时间选择器先讲到这里 接下来我们继续介绍颜色选择器

iOS 14 推出了 一个全新的颜色选择器供你使用 你可以通过四种不同的方式选择颜色 你可以通过网格 色谱 输入 RGB 值

或者从屏幕上选择颜色 为此 轻触左上角的吸管 放大镜出现之后 你可以把放大镜拖到想要的颜色位置 松开之后 颜色会被选中

选中的颜色始终出现在左下角 你也可以把颜色保存到调色板 所有 app 上都能使用

所以通过新颜色选择器 你可以选择 任何想使用的颜色 例如 这里 我在 iPad 上使用铅笔

就像菜单及日期和时间选择器一样 新设计可以实现 iPad 和 Mac 之间的同位检查 好 以上是新颜色选择器的简单介绍 它是 iOS 14 中的全新组件 你可以通过四种不同方式选择颜色 包括网格、色谱、RGB 值输入 以及屏幕选择颜色

包含不同颜色的调色板 可以在不同 app 中共享 新的选择器有助于实现 app 在 iPad 和 Mac 之间的对齐

好 以上是 iOS 14 三个全新组件的介绍 我们添加这些组件 是为了让你的 app 速度更快 更轻量级、反应更灵敏 它们提供了急需的功能 支持辅助功能 和本地化

通过使用这些新组件 app 相对 iPhone 和 iPad 来说会更原生 并且节省很多时间 确保你的 app 适用范围更广 满足世界各地所有用户的需求 我们非常开心 你在 app 中使用它们 我们期待它们出现在你 app 中的那一刻 关于选择器、菜单和操作就讲到这里 感谢大家观看本次视频 下次见

（你好 WWDC 2020）