iPad 设计

（你好 2020 全球开发者大会） 你好 欢迎参加 2020 全球开发者大会

（专为 iPad 设计） 欢迎参加为 iPad app 设计的讲座 我是 Grant Paul 来自 Apple 设计团队 今天我们想展示一些 iPadOS 14 中的 新功能和新变化 以及这些对你的 app 有何意义 还会展示打造优秀 iPad app 的通用技巧 凭借自动布局、Mac Catalyst 和通用购买等技术 许多 app 能继续拓展到更多设备和平台 人们正在拥有更多机会 能在自己喜欢的设备中使用喜欢的 app 从而充分享受便利 我们作为设计师和开发者 就意味着需要专注于最适合平台的内容 确保每台设备和每个平台 都能打造优质体验 一方面 你拥有 Mac Mac 有最大的屏幕 最精准的输入法… （桌面和便携式键盘和鼠标输入 包含高阶功能） …Mac OS app 能支持所有最高阶用例 同时也易于所有人使用 另一方面 你有 iPhone iPhone app 着重于在你出行的时候 能通过多点触控迅速轻松地访问 最重要的功能 所以对这二者而言 app 的设计方向十分明晰 但是 iPad 的方向是什么？ iPad 处于二者中间 不意味着它就是 Mac 和 iPhone 之间 高不成低不就的存在 一个出色的 iPad app 需要专注于 iPad 的独一无二和卓尔不群 正如那些 app 专注于 iPhone 和 Mac 的 独特和优秀之处一样 那就是我们今天要讲的 我们会向你展示一些 在 iPadOS 14 的 app 中应用的设计原则 我们会讲到你能如何将这些同样的原则 用于自己的 app 我们先来讲讲如何更新你的 app 的布局 从而充分利用 iPad 的大屏幕

之后 我们会介绍 如何最好地支持 iPad 上所有不同的输入

然后会由 Vince Lane 来详细讲解 今年的 iPadOS 中一些新用户界面组件 比如我们新的 Split Views 和超赞的侧边栏导航条 （布局 输入 侧边栏） 最后 我们会介绍一些变化 关于如何使用工具栏来定位按钮和动作 iPad 最重要、最突出的特点 自然是它的大屏幕 那么 如果你正在制作 iPad app 首先就应该利用这个屏幕 来充分展现 你的内容和用户界面 咱们用自己的 app 来举例 我要介绍的第一个技巧 是扁平化你的 app 导航条 避免大的全屏过渡 以便一次更新屏幕的一部分 咱们来看一个例子 这是 iOS 13 中照片 app 的一部分 你可以选择一个相簿或媒体类型 比如人像模式的照片 这样就会侧拉出整个屏幕显示该内容 简单、熟悉 在 iPhone 上效果一流

在 iPad 上我们采用了同样熟悉的 全屏过渡导航结构 不过在 iPad 上 这就导致屏幕右侧留下太多空白 所以我们在 iPadOS 14 中 更新了照片 app 来用新的侧边栏导航条 屏幕没有了大片空白 而是用你想看的内容 即你的照片填满 左侧还有导航控件 它利用那个空间来显示有用信息 不过在导航的时候显示内容 在别的方面也有帮助 例如 你若想在照片库的不同部分中切换 切换到相簿或到所有照片 现在只需轻轻一点 （快速导航） 它能提升拖放功能的速度 因为一旦开始拖动 你的投放目标 即你想放置照片的相簿 就已经显示在屏幕中了 好了 我想介绍的下一个原则 是展示更多内容 这是个很简单的理念 你在 iPad 上有了更大的屏幕 所以就需要更多内容来填充 但若想做得恰到好处 就需要精心设计 iOS 12 iPad 中的主屏幕是这样的 可以看到图标之间的距离相对较远 它们比较分散 我们在 iPadOS 13 中加了横纵两列图标 如今在 iPadOS 14 中 我们添加了新的窗口小部件 图标还是挺大的 你也能一次看到更多 这样就更好地利用了空间 再来举个例子 这是 iPadOS 13 中的文件 app 这个挺有意思 因为屏幕右侧全都是文件 文件之间没有间隙 没有大的空白

但仔细看会发现它一次只显示12个图标 我们认为可以有所改进

所以在 iPadOS 14 中 文件现在使用明显更小的图标 人们依然能够看到、阅读和点击这些图标 所以这个 app 同样好用 不过这是个好例子 说明了稍微调整排列密度如何能 让人觉得你的 app 更高效、更强大 只要更善加利用现有屏幕空间即可

现在这个新布局 意味着文件显示出三倍多的图标 你能相信吗？ 只要能正常阅读你的文字 你也该试试能否在 app 中 显示更多到屏幕上 刚才是讲显示更多内容 （处在上下文中） 我们的下一个技术是添加更多上下文 在 iPhone app 中 你通常会着重于一个特定的东西 因为小屏幕能显示的空间只有那么多 但是在 iPad 上 你有更多空间发挥 一次可以显示更多内容 咱们来看看要如何应用

在 iPadOS 13 中给文件 app 重命名时 是这个样子的 重点突出 除了你正在重命名的文件外 你看不到任何别的东西 但是你就失去了文件之下的所有上下文

我们在 iPadOS 14 中调整了文件重命名

即便是在给特定文件重命名 处在上下文中也能让剩下的屏幕派上用场 你可以使用文件夹中其他文件的名称 比如作为你要输入的名称的参考 当你覆盖或遮住部分屏幕时 看看能否让人们处于上下文中 这会让人觉得你的 app 更轻盈 同时也更强大 另一个例子是气泡弹出框 气泡弹出框很好用 在你显示内容来源处的上下文时 例如这个地方 你在查看或编辑 日历中的特殊事件时 气泡弹出框中的箭头 帮助指出那一天中该事件的内容所在 不过 看看 iPadOS 13 日历中的弹出框吧 我们的这一个是直接采用的 iPhone 同款屏显 这个气泡弹出框和 iPhone 的屏幕等宽 所以很容易转译 不过看看这个气泡弹出框 箭头指向一个名为“日历”的按钮 并没有给到你什么有用的上下文 所以在 iPadOS 14 中 我们将日历菜单移到和日程同一层级 现在即使是在更改日历的可见性时 你也可以看到这些日程 并与之互动 结果会立刻显示在右侧 所以看一看你的 app 看看是否存在模态页面或气泡弹出框 看看这些模态页面和气泡弹出框 是否能给人们有用的上下文 或者是否挡住了 app 的其他部分 看看如果你的控件在同一层级 而非覆盖 是否会更好 当然 若你的 app 在 Mac OS 中也能用 避免模态框和被覆盖也会效果拔群 模态界面在 Mac OS 中 比在 iPadOS 中用得更少 因为 Mac 拥有更大的屏幕和窗口 另一方面 在 iPhone 这种紧凑型设备中 可能没有足够空间一次显示多个内容 你就不应该强行尝试 不应该试图 将多个用户界面的内容挤进一个屏幕中 空间不足以在同一层级显示所有内容时 模态框依然是专注于特定内容的理想选择 （打造沉浸式体验） 最后我想讲讲深入一个特定的内容 一些最神奇的 iPad 体验 来自于显示屏已经不再是一块玻璃 感觉整个设备正在变成内容的一部分 比如在图书中翻页、在 Apple TV 看视频 或用 Apple Pencil 在备忘录中画草图 下面是照片 app 的另一个例子 你去编辑照片时会用到定制的沉浸式布局 这是专为 iPad 量身设计的 你能看到所有控件都列在屏幕两侧 所以拿着 iPad 时就便于两手使用 在大屏幕上 你可以尽情欣赏优质大图 编辑控件不必遮挡 编辑中的照片的任何部分 再举个例子 这是 iPadOS 14 中的新特色 在音乐中 正在播放页面变成满屏显示 你就能专注于正在播放的音乐和歌词 现在对比 Mac 这种专注于单个内容的能力 是 iPad 所独树一帜的 此软件能让人觉得硬件几乎消失了 仿佛它变成了内容的一部分 让人觉得你的 app 不是一堆功能的拼凑 这就是规划显示效果的指南 iPad app的下一个关键部分在于交互 当然了 iPad 是一款触控优先的设备 不过最根本上 它是能支持多种输入方式的 从最初的键盘到现在的 Pencil 和触控板 最优秀的 iPad app 要为所有这些不同的输入方式 提供一流的支持 它们得善用每一种输入方式 （从触控开始） 不过 你当然始终应该从多点触控开始 iPadOS 中的一切 皆由大且友好的轻触目标 和快速流畅的手势构成 你的 iPad app 也应该 一直从这些触控交互开始 即便要支持额外输入方式 在那之前 你也需要确保 你的 app 已经具备卓越的触控体验 （采用系统功能） 多点触控的下一步 是使用 iPadOS 内置的功能 来支持所有其它这些输入方式 对于使用妙控键盘或其他键盘的人们 你应该确保在你的 app 中 为所有指令动作添加快捷键 有些人真的会用到大量的快捷键 你添加的快捷键的会让他们感激不尽 但这些快捷键 不会妨碍别的人使用你的app 如果你还在犹豫是否应该添加快捷键 那我建议你添加为好 若要用 Mac Catalyst 将你的 app 带入 Mac OS 所有这些快捷键也会被转译过去 人们也会觉得它们一样的好用 除了键盘 iPad 现在还支持触控板 大部分触控板支持会自动实现 因为 iPadOS 中所有的内置控件 已经支持触控板了 你还可以扩展指针 以支持你想添加的任何类型的自定义控件 或自定义交互 如需详细了解 触控板行为和你能进行的定制 我真心推荐你来看看这场讲座 《专为 iPadOS 指针设计》 最后 你应当确保支持 用 Apple Pencil 进行涂文字 如同指针支持 在你使用系统文本输入控件时会自动获得 不过 你如果有自定义控件 你就会想确保它们也支持涂文字 因为使用涂文字的人 会期待其设备中的所有 app 都有此功能 那就是在 iPadOS 中 使用所有输入方式的内置功能 关于这些输入方式非常独到的一点 就是它们都能同时运作 你还能做的一件非常特别的事情 它别具一格 且只存在于 iPad 就是能将多个输入方式整合到单个交互中 它能促成一些出类拔萃的交互 这是其它设备所不具备的 一个很好的例子是将键盘和 Touch 结合 例如在 Safari 浏览器中 你可以在新的选项卡中打开链接 轻点的同时按住 Command 键即可 或按住“Option”并轻点链接下载文件 抑或按住“Ctrl”并轻点 以获得更多选项 在你的 app 中 你应该支持将修改键与所有输入相结合 比如 Touch 和触控板 你可以支持标准的系统行为 比如按住“Option”并拖动条目 来制作备份 或按住“Shift”并拖动条目 将其选入一个群组 Pencil 和 Touch 也是一个好的输入结合 这是一个很棒的动画应用程序 Loom Loom 结合了 Pencil 和 Touch 输入 能快速勾勒出画面 你在左边可以使用 Touch 的拨盘 选择你要绘制动画的哪一帧 然后在屏幕右侧 我能用 Apple Pencil 绘制实际画面 我能在帧与帧之间切换 然后绘制下一帧

你能看到通过结合 Touch 输入 和 Apple Pencil 实现这种出色的交互后 能多迅速地画出很酷的动画

这是些方法 能让你的 app 输入更强大 最后我想讲的技巧是 让你的 app 感觉很快 让人觉得它快的一个关键方法 是确保它始终能响应 无论屏幕上在运行什么 无论是播放动画、进行过渡或处理程序 它都应该始终能响应 这意味着全程对输入作出回应 这是 iPadOS 14 的新下拉菜单的例子 即使是在菜单正在运行的时候 你也可以用一个手势跳到你想要的条目 想象一下若你得轻点 等待菜单完成显示 再轻点条目来选择 你就会觉得太慢了 觉得设备的运行 不如你想得那么快 咱们再来看一个例子 当你打开下拉菜单时 点击菜单外的区域就得能关闭它 这就不会将这个触控传递到下面的 app 不过其他手势不一定冲突 所以在 iPadOS 14 中 你用一个手势即可 在菜单外开始滚动来立即关闭菜单 同时滚动下方内容 此 app 会尽可能地保持响应 这种小交互看上去不起眼 不过用对了就能锦上添花 人们可以树立信心 无论在 app 中的何处 当他们和屏幕交互 特地触控屏幕或使用触控板时 此 app 会响应他们给出的输入 有时候人们抱怨 觉得动画太慢了 或者过渡耗时太久 他们不得不等到完事 不过 当你的 app 始终能响应时 这些动画就能有助于给予人们上下文 而非成为阻碍 因为人们能随时和你的 app 交互 现在交给 Vince 来介绍侧边栏 谢了 Grant 为了优化 iPad 布局 iPadOS 14 的一个关键新功能就是侧边栏 咱们来看看侧边栏内置的一些新功能吧 随后探讨在你的 app 实现侧边栏的策略 这是 iPadOS 13 上的家庭 如果仔细看看选项卡 就会注意到有很多空白的水平空间 这块美丽的12.9英寸屏没有得到充分利用 导航至特定房间需要几个步骤 你得先轻点房间选项卡 打开房间气泡弹出框 找到你要的房间 最后点击开关 有点繁琐 尤其是在一片漆黑中想开灯的时候 这是 iPadOS 14 中的家庭 在选项卡处配备了新侧边栏 充分提升了对这块大显示器的利用 现在轻轻一点就能跳转至屋里的任何房间

你还能轻松地通过拖放来重新安排房间 好了 咱们来看看更多侧边栏的示例 团队也给音乐添加了侧边栏 能更迅速地导航至你的整个乐库 在文件中 新的 iPadOS 14 侧边栏 让导航和定制变得前所未有的简单 新的侧边栏支持编辑模式 能简单地展示、隐藏和重新排列内容 还能轻松地为最重要的内容创建快捷方式 将条目拖放至侧边栏即可 让人们编辑侧边栏的内容 来满足自己需求的操作 变得十分容易 侧边栏甚至支持弹簧加压式文件夹 所以用一只手指就能重新排列内容 我们也给照片添加了侧边栏 实现简单快速的导航 内容被安排到可折叠的分组中 例如你可以折叠媒体类型 迅速跳至下方其他相簿

如果轻点顶部的侧边栏开关按钮 侧边栏就会隐藏起来 让照片布满屏幕 要召回侧边栏 从左侧轻扫即可

从左侧轻扫能拉回侧边栏 覆盖在照片上 将侧边栏用作覆盖有利于迅速流畅的交互 这意味着你需要的时候 侧边栏会一直在 不过你一旦开始与内容互动 侧边栏就会重新收起 你就能继续看照片 当然 如果不想让侧边栏自动隐藏 只需再次轻点侧边栏开关按钮 将其拉回 无需覆盖行为

现在我们看看在竖屏中的效果 侧边栏在竖屏中自动切换为覆盖 这是为了确保给内容留下足够的水平空间 不过 只用轻点或从左侧轻扫 即可随时轻松拉回查看

在 iPad 中进行多任务处理时也是一样的 在这种分屏浏览的情况下 没有足够的空间留给侧边栏或内容 所以侧边栏切换为覆盖展示 现在咱们来看看邮件 iPad 中邮件的一大亮点 就是它支持三列布局 这对邮箱和消息层级结构的可视化而言 极为有用 不过在 iPadOS 13 中 只有在最大的 iPad Pro 设备中 才用得了三列布局

较小的 iPad 仅限于两列布局 新 iPadOS 14 侧边栏改变了这一点 我们在所有 iPad 上实现了三列布局 从左侧轻扫就能拉出第三列 现在能够并排查看邮箱和消息了 侧边栏用完后 布局折叠回两列 给内容腾出空间

侧边栏作为覆盖显示时 都能使用三列布局 同样只需从左侧轻扫拉出侧边栏 如果需要前往第三列 继续拉就可以 这就有了 非常方便 现在所有运行 iPadOS 14 的 iPad 上都有了 你在 iPadOS 中内置的侧边栏 转换成了 Mac OS 中的侧边栏 所以这也是为你的 Catalyst app 创建导航结构的理想选择 那就是全新的 iPadOS 14 侧边栏 咱们来简要回顾一下新侧边栏的特色 它为 iPad 提供优化的 app 布局 支持模态和非模态编辑 用户就能快速导航至对自己最重要的内容

支持拖放 能进行多窗口和多 app 交互 内容能被安排进可折叠分区 能用作覆盖 从而随时可用 却不会碍事

你能用流体轻扫手势与之交互 所以拉出来查看 或隐藏回去 都迅速又简单

最后 它还将三列布局惠及所有 iPad 咱们现在来探讨 将侧边栏添加至 app 的一些策略 先来快速看一下 app 导航的 尤其适合侧边栏的两种风格 扁平化和层级化 扁平化的导航 顾名思义 是对类似权重的顶层内容 使用一种相对扁平的结构 即便其中一或两个分区的内容会更深入 但首要目标还是倾向于相似权重 在这种 app 中 一般使用选项卡来浏览分区 比如照片或音乐这种 app 层级化导航 在那种更注重组织和遍历 潜在的深层内容的 app 中较为常见 比如邮件或备忘录这种 app 除非你的 app 像游戏那样让人身临其境 不然它就可能属于这两种分类之一 二者和新的侧边栏都能相得益彰 好的 咱们从哪儿说起？ 如果你已经有选项卡了 那就是理想起点 选项卡是实现简单导航的最有用工具之一 所处位置和能去的地方都一目了然 iPad 和 iPhone 用户对它们非常熟悉 所以人们初次使用你的 app 时 也不用在摸索中适应 它们清楚地表达了 app 中最重要的位置 所以无论你的 app 有多复杂 选项卡都能为 app 提供易于理解的结构 当你开始考虑并入侧边栏时 我们建议采用现有选项卡 将其置顶 将侧边栏顶部的这个空间 当作选项卡的等同物 无论放什么 这里都会被诠释为 app 中最重要的地方 不过别彻底放弃选项卡 侧边栏只适合常规宽度的布局 如果你已经有了选项卡 就应该继续用于紧凑型的布局中 在 iPhone 中同样如此 确保在侧边栏和选项卡中 拥有相同的顶层条目 这会确保无论尺寸类别 你的 app 都会给人熟悉的感觉 现在你准备决定侧边栏的其他内容了

考虑一下你的 app 中的所有内容

我们发现最适合放在侧边栏的东西 通常是较长的内容列表 若这些内容是用户以某种方式生成的 就尤为如此 比如照片中的相簿 或音乐中的播放列表 把这些条目放在主导航下面

往侧边栏中添加内容时 请将其嵌套在可折叠的导航栏下 这样会确保维持住 顶层目标和下方内容之间的正确层级 若最终创造出两种方式来获得相同的内容 这也没问题 也许是通过其中一个顶层条目 和通过下方的文件夹 这也完全没问题 把你放进侧边栏的条目 当作前往人们最重要的内容的快捷方式 你可以选择添加额外内容 但要克制住把整个 app 展示出来的冲动 如果侧边栏装了太多东西 需要滚动好多次和展开分区来查找 它就发挥不出快捷起点的作用了 最后 若你的侧边栏内容是用户能配置的 那么包含添加按钮就是个好主意 将其放在每个配置分区的底部 这就让人们可以整齐地创建内容 创建在他们会使用该内容的相同位置 如果你的 app 的导航更接近层级化样式 请在侧边栏的顶部展示出顶层内容 在此处可能堆叠了多个内容树的顶层条目 没关系 举个例子 比如邮件这种 app 这里可能放置了多个邮箱 然后在下面将快捷方式添加到 你的 app 中最重要的位置 然而要记住 侧边栏不适合浏览深度嵌套的层级化结构 这里的整个内容树不应该被挤进侧边栏 如果那是你的 app 请用内容区域替代导航层级结构 侧边栏应当被保留为一个起点 前往该层级结构中最重要的位置 在你推进第一个侧栏时 我们用一些快速提示来总结一下 首先 有一些不该做的事 请勿将侧边栏用于紧凑型屏幕 例如 iPhone 在紧凑的屏幕中 侧边栏应该转换为 选项卡或标准表行 在相同视图中 请勿混淆侧边栏和选项卡 侧边栏和选项卡应该是 相同内容的两种不同呈现方式 混淆二者就会产生令人困惑的导航结构 最后 请克制住 将整个 app 展示到侧边栏的冲动 好的 现在来看看推进第一个侧边栏时 应该做的事情的提示清单 将主导航置顶 这是 app 的侧边栏中最明显的位置 用户会指望在 app 的这个地方 浏览关键分区

在紧凑型布局中将侧边栏转换为选项卡 如果你的 app 在紧凑型布局中有选项卡 你的用户会期待在侧边栏和选项卡中 找到相同的关键位置 我们还建议在侧边栏中使用轮廓式字体 不过选项卡还是用填充式字体吧

考虑向侧边栏添加额外内容时 请确保从对用户最重要的内容开始 始终将其置于主导航下方 列表风格的内容和用户生成的内容 都是理想选择 确保将这些条目嵌套至可折叠导航栏下方

支持编辑模式 让用户能自定义侧边栏 满足具体需求 确保支持拖放

你的用户会期望能将条目 拖放至侧边栏的文件夹中 他们还会期望能够将内容 直接拖进侧边栏 来创建快捷方式

很好 侧边栏介绍完了 咱们来快速看看工具栏 这是我们优化 iPadOS 14 的另一个方式 为了更好地利用 iPad 屏幕空间 在 iPadOS 13 中 有一些工具栏 不必要地占用了空间

和我们之前看到的空空如也的选项卡类似 这种工具栏似乎没有充分利用空间 所以我们在 iPadOS 14 中 将很多工具栏条目移到了顶部

这种布局更好地利用了这款大屏幕 然而 在空间较少的情况下 例如在紧凑型布局中 这些工具栏条目就留在底部

你在 iPad app 中设计工具栏时 请记住几个小技巧 默认将工具栏按钮放在 iPadOS 的顶部 这并非始终可行 不过对于一个、两个 或三个按钮的工具栏而言 通常可行 在紧凑布局的顶部放不下工具栏条目时 可使用替代布局将其放在底部 很好 以上就是对 iPadOS 14 的 侧边栏和工具栏的介绍 继续让 Grant 简要回顾今天探讨的内容 谢谢 Vince 如果说今天这番演讲有一个主题的话 那就是 制作一个优秀的 iPad app 并非不费吹灰之力 你需要专门为 iPad 设计 app 你可以将导航扁平化 让内容填充屏幕 展示更多内容 让用户有更多上下文 这意味着支持所有 iPad 的输入方式 触控板、键盘、Pencil 当然还有多点触控 让它们协作 打造卓越的交互体验 这意味着使用侧边栏 而非选项卡 来实现快速导航 包括侧边栏的顶层内容 在你的 app 中只需轻轻一点 即可使用 这还意味着将你的动作和控件 放进顶层导航栏 而非底部的工具栏 从而更好地利用 iPad 的显示屏 这就是我们要介绍的 如果你有兴趣了解更多 我真心推荐来看看这个讲座 关于 iOS 14 中的新控件 （使用 iOS 选择器 菜单和动作进行设计） 这些新控件在 iPhone 上效果拔群 在你的 iPadOS 和 Mac Catalyst app 中 也会大放异彩 你也能凭借 《iPad 专属开发》讲座 来深入了解如何让这些功能融入你的 app 它会展示如何在代码中使用所有这些 真诚期望看到你制作的优秀 iPad app 谢谢 （2020 全球开发者大会）