设计适用于 Mac 的 iPad App

大家好

很高兴能够回到 WWDC 的舞台

我非常高兴能和你们谈谈 为 Mac 设计的 iPad App 如今 你们在场的很多人 已经为 iPad 创建了 非常棒的 App 这些 App 可以帮助人们提高工作效率 提高创造力 娱乐大众 教育受众 并帮助人们 相互联系和沟通

我们希望让你们能轻松地 将这些精彩的体验带到 Mac 上

用键盘 鼠标 或触控板输入 人们能以更高的精度 和更快的速度工作 灵活的窗口可以实现 高效 流畅的多任务 工作流程 更大的显示尺寸使 你们的 App 一次性呈现更多信息和操作 成为可能

当然 一些 iPad App 在 Mac 上 是不合理的

某些用例如导航 或增强现实技术 并不适合不便移动的计算机 另外 依赖 iPad 硬件功能的 App 如 Gyroscope 或后置摄像头 在 Mac 上也不会有意义 但是 对于你们中的其他人来说 使用 Mac 是一种很好的方式 来为使用你们 App 的用户提供 更高效 更沉浸式的体验 将 iPad App 带到 Mac 的第一步 是从坚实的 基础部分开始 你的 iPad App 应支持 多任务 拖放以及 自动布局等功能

众所周知 Mac 窗口可以 任意调整大小

在 iPad App 中可以完全支持 自动布局功能 你的界面 将能在 Mac 上调整大小

同样 如果你的 App 支持拖放 那么你就更加接近 拥有一款出色的 Mac App 我们希望 Mac 上的基本所有内容 都可以拖动和放置

昨天 我们介绍了 iPad App 具有多个窗口 的功能 例如拖放 将文档打开到 自己的窗口 正是我们在 Mac 上所期望的

如果你们的 App 支持此功能 你们也将自动 在 Mac 上获得多个窗口支持 这会带你们进入下一个话题 自动的东西 不需手动去做很省事 对吧 为了更轻松地完成 Mac 的任务 许多 iOS 界面和交互 将自动调整为 macOS 的等效项

iOS 拆分视图 将在 Mac 上绘制为拆分视图 系统提供的 UI 如文件浏览器和活动视图 将重新映射到 平台相应的等效项 编辑菜单和 iOS 上下文菜单 将自动显示为 Mac 上的上下文菜单 复制和粘贴 富文本编辑 和按键焦点都已附带上 现在在所有这些情况下 iOS 和 macOS 之间的映射 相对直接简单

但是 macOS 和 iOS 之间 存在一些关键性差异 设计一个适合每个平台的 App 需要了解并解决 App 中的这些差异 最大和最关键的是 iOS 专为触屏而设计 但 Mac 则专为 键盘和鼠标输入而设计 触屏设计涉及提供 更大且更容易访问的 触摸目标 尤其是当你们在走路 或四处移动时

在 Mac 上 使用触控板或鼠标 可提供实际的稳定性 以及更好的控制 而且因为指针很小 人们可以更精确地定位 和操作界面对象

较小的控件还使得 Mac UI 具有更高的信息密度 或更高的控制密度 00:04:26.956 --> 00:04:28.446 A:middle 所有 iOS 设备都支持平移

旋转和捏合等 多点触摸手势 某些 Mac 设置 没有多点触控输入 因此 如果你的 App 中 存在任何交互或 依赖于手势输入的操作 你就必须找到 Mac 中的替代方案

当用一只手 纵向握住 iPhone 时 将控件放在屏幕的中间 或底部可能 会使它们更容易被触及 因此 -- 对于横向使用 iPad 也是如此 人们往往倾向于抓住两侧 因此在左侧或右侧放置控件 可以使他们 更容易触及那里

显然 在 Mac 上 人们在使用它们时 不会抓住或随意摆动它们 沿底部 左侧或右侧边缘 放置控件 不会提供任何 符合人体工程学的好处

屏幕的每个区域 都与其他区域一样容易碰到

而且 谈及显示器 你就需要考虑 Apple 在 1x 非视网膜显示器上的外观 必须特别注意 确保文本中的字形 看起来清晰易读 听着 我知道 我们基本上都懂 触控设备与台式电脑不同

但可能不清楚的是 iOS 和 macOS 之间的交互模型 和设计模式有何不同 这些差异是 成功将 iPad App 设计转换为 macOS App 的关键

因此 考虑到这一点 让我们深入了解 如何为 Mac 设计 iPad 上的 App 如你们所见 我们有很多 要涵盖的内容 做一些笔记 可能会对你们有帮助 好 我们继续吧 对于 App 的设计而言 没有什么比它的架构 更重要了 一个有逻辑的和直观的 App 结构 可以帮助人们找到 他们正在寻找的东西 并简化导航 iOS App 倾向于以 以下三种方式之一构建

某些 App 使用标签页 将信息组织到 少量顶级部分中

有些在表格视图中 显示了顶级部分的列表

另外一些以文档为中心的 App 它们使用文件/文件夹比喻 可能在顶层 有文档浏览器 UI 你们的 App 一般与 这三种原型中的一种匹配 简单的路径是找到 最接近的 macOS 等效项 然后使用它

对于选项卡式 App 你们可以在工具栏中 使用分段控件 如果你们的最高级导航 是主列表 则你们 无法执行任何操作 它将在 Mac 上显示 与文档浏览器 UI 相同

将你们 App 的结构从 iOS 直接转换为 macOS 可能是正确的方法 它提供了一个关键的好处 它将使已经熟悉 你们 iOS App 的人们 立即熟悉 你们 App 的 Mac 版本

另一方面 你们可能错过了 简化导航的重要机会

在 Mac 上 侧边栏是一个功能强大的导航工具 它们可以轻松容纳 大量可以分组和标记的选项 以帮助提供 额外的语境 并使其更易于被扫描 因此 如果你们当前有 标签式 App 你们就可以在 分段控件中显示这些选项卡 或者可以将它们 放入侧边栏

现在 这显然看起来不太好 它并不是一个非常有效的 屏幕空间使用 但是 如果这四个选项卡 有子部分 你可以按顺序呈现 这些子部分 这极大地压缩了 App 的层次结构 并允许人们 在子部分之间直接移动 它甚至可以让人们 根据自己的需要定制这些项目

正如我们之前看到的 如果你们的 App 具有用于在不同部分之间导航的 最高级列表或表视图 则可以直接进行转换 拆分视图是在 Mac 上 获取侧边栏的方法 你只需启用 半透明背景就可以了

最后 如果你们的 iOS App 在顶层显示文档浏览器 你们可以使用侧边栏提供 对文件夹的持久访问 或显示已保存的搜索

如果你们使用侧边栏 请记住两件事

首先 侧边栏提供对 App 或 文档集合中的位置的访问 它们并不是真正用来 直接显示文档或 展示其他类型的内容

其次 侧边栏在帮助人们 了解哪个窗口 或 App 具有按键焦点方面 起着重要作用 当前窗口处于活动状态时 字形 选择突出显示 侧边栏背景本身 会被设计为半透明 当窗口变为非活动状态时 此效果消失 知道哪个窗口 将响应键盘输入是 非常重要的 要支持此效果 请使用半透明背景 不要用纯色或 图像 或图案 或类似的东西 填充侧边栏 对于选择要点 请使用系统选择颜色 而不是自定义颜色 或类似 App 色调 另外通常 除非必要 否则一概应使用 应用了活力效果的模板图像 而不是全彩色图像

好的 接下来 我们来谈谈工具栏 工具栏在 Mac 上很常见 很有可能 你会想要为你的 App 使用一个工具栏 将控件放入工具栏使它们 更容易被发现 它可以带来 更稳定的用户体验 工具栏创建 自上而下的信息流 这是 Mac App 的标准 如果你的 iPad App 有任何位于 屏幕底部边缘的操作 那么在 Mac 窗口中执行相同操作 可能会非常有问题 Mac 窗口是可拖动的 Mac 窗口的底部边缘 可能会被拖出你的屏幕 或拖停在程序坞下方

显然 这会导致一些 可用性问题

请记住 工具栏的内容不会 根据某人所在 App 的某个区域而改变 如果他们无法在 App 的某个区域使用 则会被禁用

但是 如果没有为他们 选择任何操作 工具栏操作 应该只会被禁用 因此 如果操作仅与 你们 App 的特定区域相关 则它们可能不应位于工具栏中

也就是说 你们可以在操作菜单中 提供与语境相关的操作 操作菜单可以根据 当前视图或选择动态更改 例如 在访达窗口中选择文件时 操作菜单包括 可对文件执行的操作 如果未选择任何内容 则操作菜单包含 可在我们正在查看的 当前文件夹上执行的命令 现在 行动菜单 并不意味着成为什么都包含的东西 所以要对你 输入的内容进行选择

好 接下来我们来谈谈布局

Mac 窗口比 iPad 更加大 你将有更多的空间 可以运用发挥 特别是在全屏幕上 但是利用所有这些空间 需要一个针对 iPad 优化的布局 现在 一些 iPad 布局只是 放大版的 iPhone 界面 在 iPad 上看起来非常糟糕 在 Mac 上看起来更糟糕 特别是在全屏幕上

优化 iPad 和 Mac 的布局 需要特别考虑 对于这两种设备 可读的内容边距 使文本行不会太长 让它们仍然具可读性 将内容分成多列 可以是最大化 信息密度的好方法 使用拆分视图 或主细节视图是 利用更宽显示的好方法

分屏浏览通过同时显示 对象列表和 有关该对象的详细信息 来简化导航 从而减少导航 进出 App 层次结构的需要 如果你的 App 中有 一个分屏浏览 它将在 Mac 上运行良好 无需修改

现在 这可能听起来有点奇怪 但是在 Mac 上使你的布局工作得很好 可能是识别和 解决 Mac 布局问题 和 iPad 布局的最佳方法 好 来说说打字的部分

在 macOS 上 基础字体大小为 13 磅 大多数控件和标签 使用该字体大小

在 iOS 上 基础字体大小为 17 磅 在 Mac 上显示具有 17 磅类型的 iOS App 看起来完全不合适 那样文字就太大了 因此 为了保持 Mac App 之间的一致性 系统会将内容区域 缩小 77％ 当然 大家都知道 百分之七十七 我甚至都不知道 我是否指出了这一点 等于十七分之十三啊

主界面中的所有内容 都将统一缩放 这个方法意味着 你不必为 macOS 重新设计 或重新编码每个屏幕

但它确实在设计方面 引入了一些复杂性 在创建 iPad App 的实体模型时 你们需要重新创建 之前的 77% 的比例 例如 在 Photoshop 中 你们可以将整个内容区域 放入智能对象中 并将其缩小到 77％ 你还可以在 Sketch XD 和其他设计工具中 做类似的事情

在 macOS 上 App 往往只使用几种不同的字体大小 在 iOS 上 文本样式则更加显著 文本样式 iOS 的排版系统 它们提供多种尺寸选项

使用一些最小的尺寸 如脚注 标题一 标题二 会使文本 在 Mac 上难以阅读

即便是迷你 Mac 尺寸 也通常太小

所以 只是 你们可能会发现需要 稍微放大文本 才能使其在 Mac 上保持清晰

并且 关于类型的最后一个注释是 macOS 不支持动态类型 我们将始终使用大尺寸设置 它只缩小 77％

好 现在使用 iOS 每个 App 都有颜色 用于显示元素何时是交互式的 或突出显示所选项目 一些 App 通过 着色内容区域 或条形背景进一步 在 Mac 上 情况有所不同 人们常常在这些窗口中 放置大量内容 桌面上有大量文件和文件夹 如果 macOS 使用 像 iOS App 那样的颜色 用户体验将会非常碎片化 也会过度繁杂

Mac 界面应该更加中性 它们不应该与 它们向人们展示的内容相冲突

人们真正感兴趣的东西

同时 半透明的特点 将你的 App 集成到 Mac 生态系统中 我们都喜欢自定义 我们的桌面图片 和透明度 影响 App 的外观 它还将它们完全融为 一致的体验

同样 在 Mac 上 突出显示颜色是一种个人偏好 如果你们的 App 使用不同的颜色 来突出显示所选项目 那么它会感觉非常不合适 对于使用你们 App 的人来说 这也将是 彻头彻尾的混乱 值得指出的是 iOS 在颜色方面 变得有点更像 macOS

通过多任务处理 我们可以更频繁地看到 App 一致的视觉外观 提供统一的用户体验 在深色模式下 人们希望能够更好地控制 App 在设备上的外观 不满足 个人偏好的 App 会让人感觉不合适

而且 淡色也起着 较小的作用 过去常被着色的步进器和 分段控件现在 在 iOS 13 中是中性的

好的 关于颜色的最后一点评论 正如你们中的一些人 可能已经听过的那样 iOS 上的系统颜色已经被彻底改变了 如果你们在 iOS App 上 使用这些颜色 它们将重新映射到明暗模式的 macOS 等效项

好 我们再来说说手势 UIKit 手势将 自动重新映射到触控板 或鼠标事件 00:18:06.636 --> 00:18:08.726 A:middle 单击将与

按下鼠标事件相同

长按将与按住鼠标相同 移动将与拖动鼠标相同 并且滑动手势将被重新 映射到正确方向的拖动

在触控板上 夹紧和旋转将起作用 但它们的行为会略有不同

在 iPad 上 捏合和旋转使用触摸 到目标对象之间的 中间点或使旋转和 缩放操作居中 在 Mac 上 光标的位置将用于这些目的 由于显而易见的原因 屏幕边缘滑动不会被重新映射 另外 根据你如何使用手势 你可能还有一些工作要做 有些手势不能 很好地转化到 Mac 上 例如 拉动滚动视图 以刷新其内容 在 Mac 上无法很好地转换 对于由手势输入 触发的任何操作 你们将需要找到 执行该操作的替代方法 你们可以使用工具栏中的 许多条形菜单 上下文菜单 或按钮或上述所有按钮

最后一条关于 Mac 的说明 你们能够接收鼠标悬停事件 你们可以使用 它来显示指针所在的 其他信息

因此 例如 在 iOS 上的股票 App 中 按股票图表可显示 特定时间点的价格 在 macOS 上 滚动股票图表 会显示相同的信息 你一定要利用 悬停状态 有一个很好的方法 人们无需改变选择 即可获得信息

你们还可以在 Mac 上 为 iPad App 创建触控条 触摸条是显示上下文 相关信息的绝佳方式 你们可以根据 App 人员 所在的区域 或者甚至是选择的内容 显示不同的触控条 大多数触摸条 组件和控件都可供你们使用 其实 触摸条值得 我们详细地讨论 能讨论的内容有太多 但是你们可以在 macOS HIG 中了解 有关触摸条的更多信息 好 接下来 App 图标 Mac App 图标是你们 App 的图标 它们有助于将你们的 App 与人们可能安装的数十个 或数百个其他 App 区分开来 它们遍布整个地方 在程序坞中 在 App 切换器中 在启动台上 在 App 文件夹中等

默认情况下 你们的 iOS App 图标 会按原样左右显示 这是一个被连续曲线形状 遮盖的方形图像

一个微妙的点滴状阴影应用起来 以便与其他 Mac App 图标更好地匹配 你们可以选择在此停留 或者你们也可以往前再发展一些 其实我鼓励你们继续 因为 Mac App 图标会更加明显 而拥有一个好的图标 会很有好处

Mac 图标与 iOS 图标具有 不同的设计特征 它们不仅仅是带有圆角的 正方形 Mac App 图标具有独特的轮廓 可与其他 App 图标分开 在较小的尺寸下 这些轮廓可以帮助 保持图标易于彼此区分 而且 就尺寸而言 在 1x 显示器上 访达中的 App 图标只有 16 像素高宽 在这个尺寸下 每个像素都很重要 因此 以最小的 App 图标大小 创建像素提示图标 是个好主意

当然 Mac App 图标可以 精确描绘客观存在的 真实世界的物体 许多图标在 3D 软件中渲染 因此它们具有逼真的 照明和实质效果 如果你们选择这条路线 我们有很多关于 HIG 中的 摄像机视角和光源的信息 可供你们参考 行 我们快要成功了 我知道内容很多 我们要说的倒数第二个是 上下文菜单 上下文菜单是 Mac App 界面的无名英雄 它们让人们知道可以对 对象执行什么操作 并且它们对指针执行操作 从而完全消除 鼠标的麻烦

在 Mac 上 人们基本上期望 到处都是上下文菜单 因此 从逻辑上讲 你们应该为所有内容 添加上下文菜单 App 中的任何对象都应 具有与之关联的上下文菜单 他们中包含 最常执行的操作

如果你们为 iOS App 添加了 上下文菜单 它们将自动转到 macOS 上下文菜单 编辑菜单也是如此

无论你们是从 macOS 还是从 iOS 设计上下文菜单 都适用相同的基本规则 这里有六个快速提示 请记住 首先 避免让用户 有过多的选择 太多的选项使人们 更难找到他们想要的东西 另外这也导致 菜单需要很长时间才能被扫描 只要专注于最有上下文特征

接下来就简单了 单字标签通常就足够了 在编写标签时 传达动作 使用动词或动词短语来表明 动作执行时的结果 此外 命令的顺序 十分有意义 将最重要的东西放在顶部 然后将相关项目 组合在一起 更进一步 使用分隔符 使命令之间的关系显式化

将命令组合在一起是 非常有意义的 它可以帮助人们跳过整个命令集 当他们从第一个 或第二个命令构想时 它们与当前需求无关

最后 使用子菜单 来控制菜单长度 并隐藏不相关的操作 子菜单是一个渐进式呈现的 典型例子 它们通过降低复杂性 简化决策制定

好 那么 我今天要讨论的 最后一个 主要考虑因素是菜单栏

每个 App 都有一个菜单栏 菜单栏是 Mac 体验的核心 相关历史可以一直追溯到 1984 年 菜单栏是使计算机 易于使用的关键

设计 App 的菜单栏从这个 超级有趣的练习开始

你写下用户可以 在你的 App 中执行的所有操作 我确实是指所有的操作 然后你记下这些操作会影响的 一个对象或多个对象

这项练习不仅 非常有趣 同时也是必要的

人们应当可以从菜单栏中 找到可能在你们的 App 中 执行的每个操作 这使它们更容易被发现 并让人们为这些操作 分配键盘快捷键 使用全键盘访问权限的人往往 更容易访问它们 一旦你分列出所有这些操作 你就需要为他们找个地方安置 macOS 包括一组 标准菜单项 -- 菜单选项 如用于在 App 上执行命令的 App 菜单 用于操作文件的命令的文件菜单 用于操作文件中内容或者 对象的命令的 编辑菜单 用于格式化文本的格式菜单 用于自定义窗口外观的 视图菜单 用于在窗口上操作的命令的 窗口菜单 帮助菜单用于 获取帮助并在其他菜单中查找命令

现在 对于你们的许多 App 这些标准菜单将是 你们实际需要的所有内容 但是 通常需要提供 其他自定义菜单 如果你们的 App 中有 几个关键对象类型 并且具有特定于对象的操作 你们则应考虑为它们 添加一个或两个顶级菜单 因此 例如 在邮件 App 中 有两种主要对象类型 邮箱和邮件 可以对这些对象 执行许多操作 并且不能对 其他类型的对象 执行这些操作 因此 为每个对象 设置一个菜单按钮是有意义的

在其他时候 通过他们所服务的更大工作流程 来组织操作才是有益的 在 Keynote 讲演中 我们可以将各种不同的对象类型 添加到幻灯片中 并且有一整套操作 用于对齐和分发 锁定它们 对它们进行分组 向前或向后移动它们 并且因为所有这些操作 都以类似的方式 影响所有这些对象 所以根据它们所服务的工作流程 将它们放入单个菜单中是有意义的

一旦确定要在菜单栏中 包含哪些自定义菜单 你们就需要创建 菜单本身了 我刚刚与你们分享的 上下文菜单的所有提示都 适用于此处添加的一个重要内容 菜单栏菜单的 结构稳定 启动 App 后 不会添加或删除命令 与工具栏操作类似 它们会在无法执行时 禁用

稳定的菜单系统可以 帮助人们了解命令的位置 即使这些命令 当前不可用 而且 当有人看到一个 禁用的命令时 他们会知道它执行的 操作目前是不可能的 这实际上是非常有用的信息 还有一个关于 菜单栏的事情 为最常用的命令 分配键盘快捷键 主要使用键盘的用户会 在 Mac 和 iPad 上感谢你 你们的键盘快捷键 将适用于两者

选择键盘快捷键时 请始终遵循先例 你们可以在键盘页面的 macOS HIG 中找到 一长串标准键盘快捷键

听着 当我们来到一个我们 从未使用的 App 时 我们都很感激 使用我们已经知道的 键盘快捷键并能获得我们 预想中的结果 我是对的呢还是我是对的呢 我想我是对的

所以你必须做点什么 才能实现这一目标 其实 关于菜单栏的内容很多 但我想关注它们 是因为它们是 macOS 体验的核心 需要充分被考虑 好 现在让你们的 iPad App 在 Mac 上运行应该非常简单 但这只是第一步 Mac 为你们提供了 增加 App 功能 实用性和效率的机会 但意识到这个机会 需要一些周到的设计选择 和一些努力

好了 我知道我们今天 已经涵盖了很多方面 对于那些没有做笔记的人 替你们丢人哦 但是 不要担心 我只是在开玩笑 不要感觉糟糕 我们在 Human Interface Guidelines 中为你们提供了专门的页面 它包含了很多有用的提示 和关于我今天所介绍的 一切的信息 等等 我强烈建议 下载 macOS Apple Design Resources （Apple 设计资源） 它们适用于 Sketch Adobe Photoshop 和 Adobe XD 你们可以在 developer.apple.com/design 上找到所有这些内容

此外 你们还应该查看 这些关于将你们的 iPad App 提升到 更高级别和字体管理 以及各种有关字体管理 的好东西的 精彩会议

非常感谢你们的参与 我真的很期待你们的创作 [掌声]