当你使用 Mac Catalyst 为你的 iPad 应用创建一个 Mac 版本时,使得你的应用可供新受众使用,同时让现有用户有机会在新环境下享受应用。
有关开发人员指南,请参阅为你的 iPad 应用创建 Mac 版本。
在你开始之前
大多数 iPad 应用都是极佳的候选适配应用,但有些依赖于 iPad 特性的功能在 Mac 上不存在。例如,如果你的应用的基本功能需要 iPad 中的陀螺仪、加速度计或后置摄像头、iOS 框架(如 HealthKit 或 ARKit)或应用的主要功能是类似导航的,那么它可能不适于 Mac。
对于不需要 iPad 特有功能的应用,确保应用在 Mac 上正常工作的最佳方法是确保它在 iPad 上正常工作。尤其是,你的应用需要:
- 支持多任务处理。能够很好地扩展界面以支持拆分视图、翻页和画中画的应用,也基本支持 Mac 用户期望的扩展窗口适配性的最终目标。
- 支持拖放。当你在 iPad 应用中支持拖放时,你可以免费在 Mac 上获得相同的支持。
- 响应键盘快捷键,包括常见的 macOS 快捷键。尽管 iPad 应用可能并不总是可以使用键盘,但 iOS 和 macOS 用户都喜欢使用键盘快捷键来简化与应用的交互。
为你的 Mac 应用规划优化增强
当你使用 Mac Catalyst 为 iPad 构建 macOS 应用时,你将自动获得对 Mac 基本功能的支持,例如:
- 系统首选项
- 键盘、触控板、鼠标和触控栏输入,包括关键字聚焦和键盘导航
- 窗口管理
- 丰富的文本交互,包括复制和粘贴以及用于编辑的上下文菜单
- 文件管理
此外,许多系统提供的 UI 元素会自动从 iOS 转换为 macOS。例如,你将获得以下 iOS 提供的 macOS 适用版本:
- 拆分视图
- 文件浏览器
- 活动视图
- 表单
- 上下文操作
为了确保你的应用为人们提供丰富的 Mac 体验,必须增强此基础,而不仅仅是在 macOS 窗口中显示 iOS UI。在深入了解和更新特定视图和控件之前,请熟悉平台之间的主要差异,以便在 Mac 上创建原生感觉的应用。(有关 macOS 应用的全面指南,请参阅 macOS 人机界面指南。)
iOS 和 macOS 各自定义了用户交互的设计模式和规则,这些模式和规则基于人们使用设备的不同方式。例如,iOS 的规则,如轻扫删除、操作表命令和屏幕底部的控件等,是针对手持设备的触摸交互进行了优化。同样,macOS 的规则,如专用键和键盘快捷键、菜单命令和窗口顶部的控件,是针对键盘、鼠标和触控板交互以及独立的显示进行了优化。
对适配影响最大的规则和设计模式可以分为四个关键方面。
导航。许多 iOS 和 macOS 应用以相似的方式组织数据,但它们使用不同的控件和视觉指示器来帮助用户了解和浏览数据。具体指南,请参阅采用 macOS 应用结构和导航规则。
用户输入和交互。尽管 iPad 和 Mac 都接受来自多种设备(如多点触控显示器、键盘、鼠标和触控板)的用户输入,但触摸交互反映了 iOS 的规则,而键盘和鼠标交互则源自 macOS 的规则。有关相关指导,请参阅支持 macOS 用户交互。
菜单。Mac 用户熟悉常驻型菜单栏,希望在菜单栏的菜单中找到所有应用命令。另一方面,iOS 没有常驻型菜单栏,iOS 用户希望在应用的 UI 中找到应用命令。有关相关指导,请参阅将应用命令放入菜单。
内容缩放。macOS 版本的 iPad 应用中的文本与 iOS 中的看起来相同,因为 SF 字体在两个平台上都可用。但是,iOS 中的基准字体大小为 17pt,而 macOS 中最常见的字体大小为 13pt。为了确保你的文本和界面元素与 macOS 显示环境一致,iOS 视图会自动缩减到 77%。有关相关指导,请参阅字体排印。
除了采用 macOS 交互和设计规则外,你还需要更新视觉设计和布局,以利用更宽的 Mac 屏幕,为 macOS 用户提供出色的体验。例如,你可以:
- 将单列内容和操作列划分为多列
- 在主内容旁边显示检查器 UI,而不是在弹出项中显示
- 同时显示应用的两个或多个结构级别
有关更多指导,请参阅视觉设计注意事项。
理想情况下,从 macOS 设计规则的角度出发去审视 iPad 应用,也可以提出改进 iOS 版本的方法。尽管你希望确保每个版本都遵守其平台的规则,但也可以借此机会重新审视原始应用的设计。特别是如果你的 iPad 应用起源于 iPhone,请考虑重新评估你的视图布局、控件,以查看是否有地方可以更好地利用 iPad 的大屏幕。
采用 macOS 应用结构和导航规则
精心设计的应用导航反映了数据的结构,并以遵循平台规则的方式,支持了应用的主要目标。为了帮助 macOS 用户在应用中感到宾至如归,你需要将 iOS 导航规则转换为相等同的 macOS 规则。
大多数 iPad 应用使用平面导航或分层导航,有些应用则使用两者的组合。平面导航将功能区域或数据类别作为始终可触达的同级别显示。例如,音乐和应用商店使用平面导航,给人们提供访问高级区域的常驻入口,如「收藏」、「为你」、「浏览」、「今日」和「游戏」。分层导航在类似树状组织中显示信息,人们通过在每个视图选择一个项目来导航,直到他们到达目的地。例如,在「设置」中,用户可以通过选择「通用」>「键盘」>「文本替换」来自定义文本替换。
通常,iPad 应用使用以下 UIKit 控件来实现导航:
- 选项卡栏。选项卡栏通过在屏幕底部的常驻栏中显示顶层类别来支持平面导航。
- 分页控件。分页控件在屏幕底部显示圆点,来指示当前页面在平面页面列表中的位置。
- 分段视图。分段视图通过在主视图(也称为总视图)和辅助视图(也称为详情视图)中呈现项和功能,来实现分层导航。当用户在主视图中选择项目时,分段视图将在辅助视图中显示与该项目关联的内容。
如果在 iPad 应用中使用选项卡栏,请考虑在分段视图控制器中使用分段控件或侧边栏背景样式。这两项都类似于 Mac 样式窗口中的导航规则。要在这些项目之间进行选择,请考虑以下事项:
- 分段控件和选项卡栏都适应类似的交互,例如相互排斥的选择,因此分段控件是简单适配的好选择。分段控件非常适合每个选项卡内没有大量层次结构的 iPad 应用,因为它可以与侧边栏配对,以便在选项卡内启用导航。
- 侧边栏显示顶级项目的列表,每项都可以展开子列表。使用侧边栏可以简化导航,因为你可以让人们通过侧边栏查看每个选项卡的内容。侧边栏适用于显示不经常更改的应用类别或自定义类别。例如,「新闻」边栏中的「订阅」和「推荐」类别不会更改,即使用户可以更改每个类别中的项目。
你还可以在应用中组合使用分段控件和侧边栏。例如,你可以使用分段控件来包含选项卡,使用侧边栏来显示每个选项卡的内容。 无论如何调整选项卡栏,请务必通过 macOS View 菜单让人们快速访问每个选项卡的内容。要了解有关菜单详细信息,请参阅将应用命令放入菜单。
如果你在 iPad 应用中使用分段视图,macOS 会自动将其转换为 Mac 版本中的分段视图。在这两个平台上,主视图是显示可变化的项目列表(如邮件中的邮箱列表)的最佳选择,因为它允许你包含标签和图标,并且支持排序和筛选。但是,如果内容层次结构比两个级别更深,则主视图和当前详情视图之间的中间级别在 Mac 样式窗口中不可见。为确保用户可以回溯其步骤,请在工具栏中添加一个后退按钮。
如果使用页面控件或其他方式进行横向导航,请为用户提供特定控件来查看页面。如果你支持这种类型的横向导航,则可以在工具栏中显示「前进/后退」按钮,并将导航命令添加到菜单栏的菜单中,帮助用户在 Mac 样式窗口中的浏览页面。例如,macOS 中的「股票」同时在工具栏中显示「后退」按钮、在「视图」菜单中显示「下一篇报道」和「上一篇报道」命令。
如果你的 iPad 应用支持多窗口,那么在 macOS 版本中也会支持多窗口。此外,许多 macOS 应用允许用户在新选项卡中打开文档或其他内容,而不是在新窗口中打开。例如,用户可以在 Safari 窗口的选项卡中打开不同网页,也可以在 Finder 窗口的选项卡中打开不同系统位置的文件。当用户使用「系统偏好设置」来首选选项卡而不是窗口时,系统会动态地将上下文菜单项添加到应用的菜单中,例如「视图」>「显示选项卡栏和窗口」>「显示下一个选项卡」。
支持 macOS 用户交互
选择持久性是 iOS 和 macOS 在用户交互方面的一个根本区别。由于许多 macOS 用户希望控制应用,且仅使用键盘来使用系统,因此对象的选定状态必须保留,以便人们可以使用一个按键序列来选择对象,使用第二个序列来对对象执行操作。相反,iOS 用户希望对对象执行操作时不必选择对象,因此对象不需要保留其选中状态。通常,iOS 应用不会针对键盘交互进行优化。
以下是一些影响用户体验的不同交互规则:
- macOS 用户通常希望「前进/后退」按钮代替 iPad 或触控板手势,例如在页面之间轻扫。
- 在 Mac 上,人们习惯使用「删除键」或在菜单中选择「删除」命令,因此通常不需要在 UI 中显示「删除」按钮。
- iOS 用户习惯于拉下视图来刷新内容。相反,Mac 用户希望使用菜单命令,如「检查新内容」。
当你将 iPad 用户交互模式转换为 Mac 交互模式时,重点应让人们以符合平台规则的方式操作对象。
键盘输入
准备好支持键盘规则,允许人们通过使用方向键或按字母/数字键来更改选择状态。
如果在你的应用中有作用的话,请充分利用 Mac 用户可以同时轻松使用键盘、鼠标或触控板这一事实。
如果你在 iPad 应用中使用 UIKeyCommand 来定义命令的键盘组合,那么应用的 macOS 版本会将这些快捷方式转换为菜单。例如,你应将每个主要视图区域(如每个选项卡)映射到键盘快捷键 ⌘1、⌘2 等,以便在应用的 macOS 版本的「视图」菜单中显示。
如果你的 iPad 应用的 UI 中有「删除」按钮,请考虑将其从 macOS 版本中删除,并允许用户改用「删除」键或应用的「编辑」>「删除」菜单命令。
手势
当你的 iPad 应用在 macOS 中运行时,大多数手势会自动转换。例如:
iPad 手势 | 转换为鼠标交互 |
---|---|
轻点 Tap | 左/右单击 |
触摸并按住 Touch and hold | 点击并按住 |
拖拽 Pan | 左击并拖动 |
iPad 手势 | 转换为触摸板交互 |
---|---|
轻点 Tap | 单击 |
触摸并按住 Touch and hold | 点击并按住 |
拖拽 Pan | 点击并拖动 |
捏合 Pinch | 捏合 |
旋转 Rotate | 旋转 |
开发者备注 捏合和旋转手势中的两个触控将被发送到指针下的视图,而不是每个触摸下的视图。
将应用命令放入菜单
在 Mac 上,屏幕顶部的菜单栏为控制系统、应用的命令提供了统一的位置。菜单栏包含当前应用提供的标准和自定义菜单,此外还有 Apple 菜单,该菜单列出了始终可用的系统级命令。Mac 用户希望每个 macOS 应用程序都能在菜单栏中提供所有命令。
开发者备注 你必须使用 > UICommand 来展示 iPad 应用中的每个命令,以便这些命令可以放入 macOS 菜单栏的菜单中。要支持命令的快捷键,请使用 > UIKeyCommand。
由于 iPad 应用使用控件在主 UI 中显示命令,因此为每个命令寻找符合逻辑的、直观的菜单栏位置是适配过程的关键部分。
要为应用的 macOS 版本设计菜单栏菜单,请首先列出用户可以执行的所有操作,并将其分组到标准菜单栏菜单定义的类别中。例如:
- 应用名称
- 文件
- 编辑
- 显示(视图)
- 窗口
- 帮助
备注 大多数 macOS 应用都有「显示」菜单和「窗口」菜单。虽然这两个菜单可能看起来相似,但它们有不同的用途。人们使用> 「显示」菜单自定义应用窗口的外观,并在不同功能区域之间移动,而使用> 「窗口」菜单来导航、组织和管理应用中的窗口集合。要了解更多信息,请参阅> 菜单栏菜单。
如果列表中的某些操作不适合归类到标准菜单栏菜单中,则可能需要添加自定义菜单。Mac 应用通常会为那些与核心应用对象或核心应用工作流关联的命令,添加自定义菜单栏菜单。例如,macOS 中的「邮件」使用「邮件」和「邮箱」菜单列出对这些基本应用对象进行操作的命令。相反,Keynote 使用「排列」菜单,列出在幻灯片组中,与核心工作流关联的排列对象的命令。
将应用的操作分组到菜单中后,你需要以有意义的方式对每个菜单中的项目进行排序。每个标准菜单都定义了项目的推荐顺序,因此,对于你支持的项目,遵循此顺序非常重要。例如,Mac 用户希望「文件」菜单按以下顺序显示项目:
- 新建
- 打开
- 最近打开
- 关闭
在自定义菜单栏菜单中,应根据重要性、使用频率或其他有意义的方案对项目进行排序。 菜单栏菜单还可以包含子菜单和分隔符,以帮助项目按符合逻辑的形式进行分组。要了解有关这些菜单组件的更多内容,请参阅菜单剖析。
此外,为菜单中的所有常见命令配以键盘快捷键也非常重要,这样使用键盘的 Mac 用户和 iPad 用户都可以受益。除了为标准菜单项启用快捷键外,你还可以为自定义项定义快捷键。如果你的应用中有自定义菜单项,请确保查看定义键盘快捷键中,关于创建自定义键盘快捷键的指南。
上下文菜单
上下文菜单可帮助人们在不打开菜单栏菜单的情况下,查看可对对象执行的操作。如果你的 iPad 应用中支持上下文菜单,系统会自动将它们转换为应用的 macOS 版本中的上下文菜单。
为了给 Mac 用户提供最佳体验,请查找其他支持上下文菜单的位置。例如,如果在应用中存在用户对对象执行的常见操作,请添加一个列有这些操作的上下文菜单。你还可以向代表对象的视图添加上下文菜单,例如,Finder 中的文件夹对象提供了「在新建选项卡中打开」、「重命名」和「复制」等操作的上下文菜单。
视觉设计注意事项
为了帮助你的 iPad 应用在 macOS 中能够有好的视觉呈现,请考虑以下视觉设计方面的平台差异。
布局
Mac 用户希望能够调节应用窗口大小,从全屏到应用程序允许的最小尺寸。为了支持这种无限可调节性,并利用 Mac 更大的显示效果,请使用常规类型的宽度、高度,必要的话,在并排排列时考虑重新排列窗口内容区域中的元素。
尽可能采用自上而下的布局。macOS 应用将最重要的操作和内容放置在靠近窗口顶部的位置。如果你的 iPad 应用在工具栏或导航栏中提供控件,在应用的 macOS 版本中,请将这些控件放的窗口工具栏中。
考虑将控件从 iPad 应用的主 UI 移动到 macOS 窗口的工具栏。此外,在 macOS 应用的菜单栏中列出与这些控件关联的命令。
备注 在 macOS 中,工具栏按钮始终可见,但当前上下文操作可能使其不可见;在 iOS 中,工具栏按钮始终可见,但当前上下文操作可能会将其从工具栏中删除。例如,如果你的 iPad 应用包含一个仅在一个选项卡中工作的工具栏按钮,则 macOS 版本会在所有其他选项卡中显示该按钮不可用。为了避免用户产生困惑,最好在工具栏中使用「齿轮」按钮,因为齿轮按钮菜单中的项目取决于当前应用部分。
在屏幕的左边缘或右边缘重新定位按钮。在 iPad 上,将按钮放在左中或右中屏幕边缘可以帮助人们触达它们,但在 Mac 上,这种符合人体工程学的考虑并不适用。你可能希望将控件重新定位到内容区域的顶部或下边缘,或将它们放在 macOS 窗口的工具栏中。
颜色
在两个平台上使用系统选择的颜色。通常,iOS 应用定义用于按钮和选项的颜色,但在 macOS 中,人们希望使用「系统偏好设置」来选择所需的选项和按钮的颜色。
专为 iOS 背景设计的动态系统颜色会自动映射到相应的 macOS 项,如下所示。
其他 iOS 定义的语义颜色,如系统颜色、标签和分隔符颜色,映射到类似命名的 macOS 颜色。有关指导,请参阅系统颜色(macOS)和动态系统颜色(macOS)。
不要为表格中的按钮着色。在 iPad 应用中,使用着色来显示表行中的按钮处于活动状态,但在 macOS 中,表格行中的有色按钮会看起来怪异。
字体排印
尽管系统执行的自动缩放提供了良好的效果,而无需在两个平台上指定不同的字体值,但你可能无法在所有情况下都获得最佳效果。
确保小字体在 Mac 上清晰易读。准备好增大 iPad 应用中使用的一些最小的字体大小,以便在 macOS 版本中保持清晰易读。此外,请注意 macOS 不支持动态字体。
自定义图标和字形
创建应用图标的 macOS 版本。出色的 macOS 应用图标与出色的 iOS 应用图标存在明显不同。例如,macOS 图标可以具有非矩形形状,并且经常偏斜和旋转。默认情况下,macOS 会将投影应用于 iOS 应用图标,以便在 Mac 上感觉更适应,但最好单独设计针对于 Mac 版本的应用图标。要详细了解如何设计 macOS 应用图标,请参阅应用图标。
如有必要,创建平台定制的字形。如果你的 iPad 应用参考平台特性,使用了自定义字形,在 Mac 上请创建新的字形来适配。在 iPad 应用中用于 macOS 特定的字形,Xcode 提供了单独的资产目录。
偏好设置
如果你在 iOS 「设置」中提供了应用设置,macOS 会自动在应用的 Mac 版本的首选项窗口中显示这些项目。默认情况下,macOS 会向 iOS 设置中的每个项目首选项窗口添加工具栏按钮,为它提供标准系统首选项图标、以及你在「设置」应用中用于对应视图的标题。
正如 Mac 用户所期望的那样,当他们在应用菜单中选择「偏好设置」菜单项时,会出现你的首选项窗口。但是,有几种方法可以优化设置项目的显示,并使应用的首选项体验感觉更像 Mac。
自定义每个项目的工具栏按钮的图标。由于 macOS 会自动为你的设置项目使用标准系统首选项图标,因此人们必须通过阅读每个工具栏按钮的标题才能区分多个项目。要改善此体验,应为每个设置项提供自定义图标。
让开关控件更易于 macOS 用户理解。与 iPad 应用不同,当某人在「系统偏好」中使用开关进行更改时,macOS 应用通常会显示确认弹窗。此外,iOS 设置中的开关可以附加少量文本,用以详细说明开关会如何影响用户体验。在应用的 Mac 版本中,你可以提供简短的说明来配合 macOS 开关,还可以在用户更改设置时,在确认弹窗中显示指定内容。有关开发人员指南,请参阅显示偏好设置窗口。