UI设计人机界面准则，UI设计交互设计必看的UI设计标准

作为UI设计师，最重要的就是接触iOS的设计规范。苹果拥有引领世界的设计能力，iOS影响着一代又一代的设计师，所以这篇文章主要是来翻译和解析一下iOS的设计规范。这个规范算是所有移动设计师必看的内容了。

本文为翻译内容，来自苹果官方人机界面准则
推荐访问英文原文地址：人机界面准则
翻译： 张洪Heo（转载注明出处）
非原创内容须知

• 该文章为系列内容：
  UI设计人机界面准则：交互
  UI设计人机界面准则：应用架构

iOS

IOS设计主题。

作为一名应用程序设计师，你有机会交付一款登上App Store排行榜榜首的非凡产品。要做到这一点，你需要满足对质量和功能的很高期望。

IOS有别于其他平台的三个主要主题：

清晰。在整个系统中，文字在任何大小下都是清晰的，图标是精确和清晰的，装饰品是微妙和合适的，对功能的突出关注激发了设计的灵感。负空间、颜色、字体、图形和界面元素巧妙地突出重要内容并传达交互性。

直观。流畅的运动和清晰、美观的界面帮助人们理解内容并与之互动，而不会与之互相争抢眼球。内容通常会填满整个屏幕，而半透明和模糊通常会暗示更多内容。最小限度地使用边框、渐变和投影使界面保持明亮通风，同时确保内容至高无上。

深度。清晰的视觉层次和逼真的动作传达了层次感，赋予了活力，并促进了理解。触感和可发现性增加了愉悦感，使你能够在不丢失上下文的情况下访问功能和其他内容。当你在内容中导航时，过渡效果提供了一种深度感。

设计原则

为了最大限度地扩大影响和覆盖范围，在想象应用程序的设计时，请牢记以下原则。

完整

审美完整性代表着一款应用程序的外观和行为与其功能的整合程度。例如，一款帮助人们执行严肃任务的应用程序可以通过使用微妙、不显眼的图形、标准控件和可预测的行为来保持他们的注意力。另一方面，身临其境的应用程序，如游戏，可以提供迷人的外观，承诺有趣和刺激，同时鼓励创新。

一致

一致的应用程序通过使用系统提供的界面元素、众所周知的图标、标准文本样式和统一的术语来实现熟悉的标准和范例。这款应用以人们期待的方式融合了各种功能和行为。

直观

对屏幕内容的直接操作吸引了人们的注意力，并促进了理解。当用户旋转设备或使用手势来影响屏幕内容时，他们会体验到直接的操作。通过直接操纵，他们可以看到他们行动的即时、可见的结果。

反馈

反馈确认行动并显示结果，让人们随时了解情况。内置的iOS应用程序可以根据用户的每一个动作提供可感知的反馈。点击时会短暂突出显示交互元素，进度指示器传达长期运行操作的状态，动画和声音有助于阐明操作结果。

隐喻

当应用程序的虚拟对象和动作比喻熟悉的体验时-无论是植根于现实世界还是数字世界，人们学习的速度都会更快。比喻在iOS中很管用，因为人们与屏幕进行了身体上的互动。它们将视图移开以显示下面的内容。他们拖拽和滑动内容。它们切换开关、移动滑块和滚动拾取器的值。他们甚至在书本和杂志上翻来翻去。

控制

在整个iOS系统中，控制一切的是人，而不是应用程序。应用程序可以建议行动方案或警告危险后果，但让应用程序接管决策通常是错误的。最好的应用程序在支持用户和避免不想要的结果之间找到了正确的平衡。一款应用程序可以让人们感觉自己掌控着一切，保持互动元素的熟悉度和可预测性，确认破坏性的行动，并使取消操作变得容易，即使这些操作已经在进行中。

MAC Catalyst

当你使用Mac Catalyst创建iPad应用程序的Mac版本时，你可以让新用户使用你的应用程序，同时让现有用户有机会在新环境中使用它。

在你开始之前

大多数iPad应用程序都能很好的放到mac上，但有些应用程序依赖于Mac上没有的iPad功能。例如，如果你的应用程序的基本功能需要像陀螺仪、加速计或后置摄像头这样的iPad功能，需要像HealthKit或ARKit这样的iOS框架，或者应用程序的主要功能是导航之类的，那么它可能不适合Mac。

对于那些不需要iPad独有功能的应用程序，确保你的应用程序在Mac上运行良好的最好方法就是确保它在iPad上运行良好。特别是，你的应用程序应该：

支持多任务处理。那些在缩放界面以支持拆分视图、滑动和画中画方面做得很好的应用程序，接近了支持Mac用户所期望的广泛的窗口大小调整的终极目标。
支持拖放。当你在iPad应用程序中支持拖放时，你就可以在Mac上免费获得同样的支持。
响应键盘快捷键，包括常见的MacOS快捷键。尽管你的iPad应用程序可能并不总是提供键盘，但iOS和MacOS用户都喜欢使用键盘快捷键来简化他们与你的应用程序的交互。

为你的Mac应用规划增强功能

当你使用Mac Catalyst创建iPad应用程序的Mac版本时，你将自动获得对基本Mac功能的支持，例如：

• 系统偏好。
• 键盘、触控板、鼠标和触摸栏输入，包括按键聚焦和键盘导航。
• 窗口管理。
• 富文本交互，包括复制和粘贴以及用于编辑的上下文菜单。
• 档案管理。

此外，许多系统提供的用户界面元素会自动从iOS转换为MacOS。例如，你可以获得以下iOS提供的项目的MacOS版本：

• 拆分视图。
• 档案浏览器。
• 活动视图。
• 表格表。
• 上下文操作。

为了确保你的应用程序为人们提供丰富的Mac体验，有必要加强这一基础，而不仅仅是在MacOS窗口中显示你的iOS用户界面。在你深入研究和更新特定的视图和控件之前，先熟悉这两个平台之间的主要区别，这样你就可以创建一个在Mac上感觉宾至如归的应用程序。(有关MacOS应用程序的全面设计指南，请参阅MacOS人机界面指南。)。

IOS和MacOS各自定义了用户交互的设计模式和规范，这些设计模式和规范植根于人们使用设备的不同方式。例如，iOS规范(如滑动删除、操作单命令和屏幕底部的控件)针对手持设备上的触摸交互进行了优化。同样，MacOS规范(如专用键和键盘快捷键、菜单命令和窗口顶部的控件)针对键盘、鼠标和触控板交互以及单独的显示进行了优化。

对适应影响最大的规范和设计模式可以分为四个关键领域。

导航。许多iOS和MacOS应用程序以相似的方式组织数据，但它们使用不同的控件和视觉指示器来帮助人们理解和浏览数据。有关具体指南，请参阅采用MacOS应用程序结构和导航规范。

用户输入和交互。虽然iPad和Mac都接受来自一系列设备的用户输入–例如多点触控显示器、键盘、鼠标和触控板–但触控交互告知iOS规范，而键盘和鼠标交互开创了MacOS的规范。有关相关指南，请参阅支持MacOS用户交互。

菜单。Mac用户熟悉持久菜单栏，并期望在菜单栏菜单中找到所有应用程序命令。另一方面，iOS没有持久的菜单栏，iOS用户希望在应用程序的用户界面中找到应用程序的命令。有关相关指南，请参阅将应用程序命令放入菜单。

内容缩放。MacOS版本的iPad应用程序中的文本看起来与iOS中的文本相同，因为SF字体在这两个平台上都可用。然而，iOS中的基线字体大小是17磅，而MacOS中最常见的字体大小是13磅。为了确保你的文本和界面元素与MacOS显示环境一致，iOS视图会自动缩小到77%。有关相关指导，请参阅排版。

除了采用MacOS的交互和设计惯例外，你还需要更新你的视觉设计和布局，以利用更宽的Mac屏幕，给MacOS用户带来极好的体验。例如，你可以：

• 将单列内容和操作划分为多列。
• 在主内容旁边显示检查器用户界面，而不是在弹出窗口内。
• 同时显示应用程序层次结构的两个或多个级别。
  有关更多指导，请参见视觉设计注意事项。

理想情况下，从MacOS设计惯例的角度来看你的iPad应用程序也能为改进iOS版本提供建议。尽管你想确保每个版本都符合其平台的规范，但还是要抓住这个机会重新审视一下你的原始应用程序的设计。尤其是如果你的iPad应用起源于iPhone，那么你可以考虑重新评估视图和控件的布局方式，看看有没有地方可以更好地利用iPad的大屏幕。

采用MacOS应用程序结构和导航规范

设计良好的应用程序导航反映了数据的结构，并以遵循平台规范的方式支持应用程序的主要目的。为了让MacOS用户在你的应用中有宾至如归的感觉，你需要将iOS导航规范转换为同等的MacOS规范。

大多数iPad应用程序要么使用平面导航，要么使用分层导航，有些则两者兼而有之。平面导航将功能区域或数据类别显示为始终可用的对等组。例如，Music和App Store使用平面导航，让人们可以持续访问诸如Library、for You、Browse、Today和Games等高级区域。分层导航以树状组织形式呈现信息，人们通过每个视图选择一个项目来导航，直到到达目的地。例如，在“设置”中，人们可以通过选择“常规”>“键盘”>“文本替换”来自定义文本替换。

通常，iPad应用程序使用以下UIKit控件来实现导航：

• 选项卡栏。选项卡栏通过在屏幕底部的持久栏中显示顶级类别来支持平面导航。
• 页面控件。页面控件在屏幕底部显示圆点，指示当前页面在平面页面列表中的位置。
• 拆分视图。拆分视图通过在主视图和次要(或详细)视图中显示项目和功能来实现分层导航。当用户在主视图中选择项目时，拆分视图将在次视图中显示与该项目关联的内容。

如果你在iPad应用程序中使用标签栏，可以考虑在拆分视图控制器中使用分段控件或侧边栏背景样式。这两个项目都类似于Mac风格窗口中的导航规范。要在这些项目之间进行选择，请考虑以下事项：

• 分段控件和选项卡栏都支持类似的交互–例如相互排斥的选择–因此分段控件对于简单的调整来说是一个很好的选择。分段控件对于每个选项卡中没有太多层次结构的iPad应用程序来说是理想的，因为它可以与侧边栏配合使用，以实现选项卡内的导航。
• 侧边栏显示顶级项目的列表，每个项目都可以公开一个子项目列表。使用侧边栏可以简化导航，因为你可以让人们在侧边栏中查看每个选项卡的内容。侧边栏是显示应用程序定义的或用户定义的类别的一个很好的选择，这些类别不会经常更改。例如，新闻侧边栏中的以下类别和建议类别不会更改，即使用户可以更改每个类别中列出的项目。

你也可以在你的应用程序中组合一个分段控件和一个侧边栏。例如，你可以使用分段控件来包含选项卡，使用侧栏来显示每个选项卡的内容。无论如何调整选项卡栏，一定要让用户通过MacOS查看菜单快速访问每个选项卡的内容。要了解有关菜单的更多信息，请参阅将应用程序命令放入菜单。

如果你在iPad应用程序中使用拆分视图，MacOS会自动将其转换为Mac版应用程序中的拆分视图。在这两个平台上，主视图是显示可以变化的项目列表(如Mail中的邮箱列表)的一个很好的选择，因为它允许你包括标签和图标，并且它支持排序和过滤。但是，如果内容层次深度超过两层，则主视图和当前细节视图之间的中间层在Mac样式的窗口中不可见。为了确保人们可以回溯他们的脚步，在工具栏中包括一个后退按钮。

如果使用页面控件或其他方式启用横向导航，请为用户提供查看页面的特定控件。如果你支持这种横向导航，你可以通过在工具栏中显示下一步/上一步按钮并向菜单栏菜单中添加导航命令来帮助用户在Mac风格的窗口中导航页面。例如，MacOS中的股票在工具栏中显示“后退”按钮，在“视图”菜单中显示“下一篇文章”和“上一篇文章”命令。

如果你的iPad应用程序支持多个窗口，那么在MacOS版本中也可以支持多个窗口。此外，许多MacOS应用程序允许用户在新选项卡中打开文档或其他内容，而不是在新窗口中打开。例如，人们可以在Safari窗口中按选项卡打开不同的网页，或在Finder窗口中按选项卡打开不同的文件系统位置。当人们使用系统首选项来偏好选项卡而不是窗口时，系统会动态地将相关菜单项添加到应用程序的菜单中，如查看>显示选项卡栏和窗口>显示下一个选项卡。

支持MacOS用户交互。

选中是iOS和MacOS之间用户交互的一个根本区别。由于许多MacOS用户希望仅使用键盘来控制应用程序和系统，因此对象的选定状态必须保持不变，以便人们可以使用一个按键序列来选择一个对象，并使用第二个按键序列对其进行操作。相比之下，iOS用户希望在没有选择对象的情况下对其进行操作，因此对象不需要保持其选定状态。一般来说，iOS应用程序不会针对键盘交互进行优化。

以下是不同交互约定可能影响用户体验的一些方式：

MacOS用户通常想要下一步和上一步按钮，而不是iPad或触摸板手势，比如在页面之间滑动。
在Mac上，人们希望使用Delete键或在菜单中选择Delete命令，因此通常没有必要在用户界面中显示Delete按钮。
IOS用户习惯于拉下视图来刷新内容。相比之下，Mac用户希望使用菜单命令，如检查新内容。
在将iPad用户交互模式转换为Mac交互模式时，重点放在让人们以遵循平台约定的方式操作对象。

键盘输入

准备好支持键盘约定，让人们通过使用箭头键或按字母和数字键来更改选中。

如果这在你的应用程序中是有意义的，那就利用Mac用户可以很容易地同时使用键盘、鼠标或触控板这一事实。

如果你在iPad应用程序中实现UIKeyCommand来定义命令的键盘序列，你的应用程序的MacOS版本会将这些快捷键翻译成菜单。例如，你应该将每个主要视图区域(如每个选项卡)映射到键盘快捷键⌘1、⌘2等，以便在应用程序MacOS版本的视图菜单中显示。

如果iPad应用程序的用户界面中有删除按钮，可以考虑将其从MacOS版本中移除，让用户使用Delete键或应用程序的编辑>删除菜单命令。

手势

当你的iPad应用在MacOS上运行时，大多数手势都会自动转换。例如：

开发人员注意事项

捏和旋转手势中的两个触摸将在鼠标指针当前位置响应，而不是在触摸下的视图响应。

将App命令放入菜单

在Mac电脑上，屏幕顶部的菜单栏为人们提供了一个一致的位置，显示控制应用程序和系统的命令。菜单栏包含当前应用程序提供的标准菜单和自定义菜单，此外还有苹果菜单，该菜单列出了始终可用的系统级命令。Mac用户希望每个MacOS应用程序都能在菜单栏中提供所有命令。

开发人员注意事项

你必须使用UICommand来表示iPad应用程序中的每个命令，这样才能将这些命令放入MacOS菜单栏菜单中。要支持命令的键盘快捷键，请使用UIKeyCommand。

由于iPad应用程序使用控件在主用户界面中显示命令，因此为每个应用程序命令找到一个逻辑和直观的菜单栏位置是适配过程的关键部分。

要为MacOS版本的应用程序设计菜单栏菜单，首先要列出人们可以执行的所有操作，并将它们归类到标准菜单栏菜单定义的类别中。例如：

• 应用程序名称
• 文件
• 编辑
• 视图
• 窗口
• 帮助

注

大多数MacOS应用程序都包括一个视图菜单和一个窗口菜单。虽然这些菜单看起来很相似，但它们有不同的用途。人们使用View菜单来定制应用程序窗口的外观，并在不同的功能区域之间移动，而他们使用Window菜单来导航、组织和管理应用程序中的窗口集合。要了解更多信息，请参阅菜单栏菜单。

如果列表中的某些操作在标准菜单栏菜单中没有意义，则可能需要添加自定义菜单。Mac应用程序通常会为与核心应用程序对象或核心应用程序工作流关联的命令添加自定义菜单栏菜单。例如，MacOS中的Mail使用Message和Mailbox菜单列出在这些基本应用程序对象上操作的命令。相比之下，Keynote使用排列菜单列出与在幻灯片幻灯片中排列对象的核心工作流关联的命令。

在将应用程序的操作分组到菜单中之后，你需要以一种有意义的方式对每个菜单中的项目进行排序。每个标准菜单都定义了项目的推荐顺序，因此对你支持的项目遵循此顺序非常重要。例如，Mac用户希望文件菜单按以下顺序显示项目：

• 新建..
• 打开..
• 最近打开
• 关闭

在自定义菜单栏菜单中，你应该根据重要性、使用频率或其他在你的应用程序中有意义的方案对项目进行排序。菜单栏菜单还可以包含帮助以逻辑方式对项目进行分组的子菜单和分隔符。要了解有关这些菜单组件的详细信息，请参见菜单解剖。

此外，支持菜单中所有常用命令的键盘快捷键也很重要，这样使用键盘的Mac用户和iPad用户都能受益。除了启用标准菜单项的快捷方式外，你还可以定义自定义项的快捷方式。如果自定义菜单项在你的应用程序中有意义，请务必查看定义键盘快捷键中有关创建自定义键盘快捷键的指南。

上下文菜单

上下文菜单帮助人们发现他们可以在不打开菜单栏菜单的情况下对对象执行的操作。如果你在iPad应用程序中支持上下文菜单，系统会自动将它们转换为MacOS版本的应用程序中的上下文菜单。

为了给Mac用户提供最佳体验，请寻找其他支持上下文菜单的地方。例如，如果用户可以对应用程序中的对象执行常见操作，请添加列出这些操作的上下文菜单。你还可以向表示对象的视图添加上下文菜单-例如，Finder中的文件夹对象支持上下文菜单，这些菜单提供诸如在新选项卡中打开、重命名和复制等操作。

视觉设计注意事项。

为了让你的iPad应用程序在MacOS上运行时看起来很棒，考虑到以下视觉设计方面的平台差异。

布局

Mac用户希望将应用程序窗口的大小调整到几乎任何大小，从全屏到应用程序允许的最小尺寸。为了支持这种无限的大小调整–并利用Mac更宽的显示屏–使用常规宽度和常规高度大小类，并考虑在必要时将窗口内容区域中的元素重排为并排排列。

尽可能采用自上而下的布局。MacOS应用程序将最重要的操作和内容放在窗口顶部附近。如果你的iPad应用程序在工具栏或导航栏中提供控件，请将这些控件放在你的应用程序MacOS版本的窗口工具栏中。

考虑将控件从iPad应用程序的主用户界面移动到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上有宾至如归的感觉。Xcode提供了一个单独的资源目录，你可以在你的iPad应用程序中为MacOS特定的字形使用。

偏好

如果你提供的应用程序设置出现在iOS设置应用程序中，MacOS会在Mac版本的应用程序的首选项窗口中自动显示这些项目。默认情况下，MacOS会在iOS设置中的每个项目的首选项窗口中添加一个工具栏按钮，为其提供标准的系统首选项图标和你在设置应用程序中查看项目时使用的标题。

正如Mac用户所期望的那样，当他们选择应用程序菜单中的首选项菜单项时，你的首选项窗口就会出现。然而，有几种方法可以优化设置项的显示，让你的应用程序的首选项体验感觉更像Mac。

自定义每个项目的工具栏按钮的图标。因为MacOS会自动使用标准的系统首选项图标来设置项目，所以人们必须阅读每个工具栏按钮的标题才能区分多个项目。要改善此体验，请为每个设置项提供一个自定义图标。

让MacOS用户更容易理解开关控件。与iPad应用程序不同，MacOS应用程序通常会在有人使用开关更改系统首选项时显示确认警报。此外，iOS设置中的交换机可以包含少量文本，提供有关交换机如何影响用户体验的更多信息。在Mac版的应用程序中，你可以为MacOS切换机提供简短的描述，还可以指定在人们使用它更改设置时在确认提醒中显示的内容。有关开发人员指南，请参见显示首选项窗口。

界面要点

大多数iOS应用都是使用UIKit的组件构建的，UIKit是一个通用界面元素的编程框架。这个框架让应用程序在整个系统中实现一致的外观，同时提供高度的定制。UIKit元素灵活且熟悉。它们具有很强的适应性，让你可以设计一款在任何iOS设备上都很棒的应用程序，当系统引入外观变化时，它们会自动更新。UIKit提供的界面元素分为三大类：

栏。告诉人们他们在你的应用程序中的位置，提供导航，并可能包含用于启动操作和交流信息的按钮或其他元素。

视图。包含人们在你的应用中看到的主要内容，如文本、图形、动画和交互元素。视图可以启用滚动、插入、删除和排列等行为。

控制器。启动行动并传达信息。按钮、开关、文本字段和进度指示器都是控件的示例。

除了定义iOS的界面，UIKit还定义了你的应用程序可以采用的功能。例如，通过此框架，你的应用程序可以响应触摸屏上的手势，并启用绘图、辅助功能和打印等功能。

IOS还与其他编程框架和技术紧密集成，如Apple Pay、HealthKit和ResearchKit，使你能够设计出功能强大的应用程序。