* 按钮

复选框、折叠控件、渐变按钮、帮助按钮、图像按钮、弹出按钮、下拉按钮、操作按钮、单选按钮、范围按钮、切换按钮、斜角按钮、圆形按钮

* 字段和标签

组合框、标签、搜索栏、文本字段、令牌字段

* 选择器

拾色器、日期选择器、图像选择器、路径控件、分段控件、滑杆、步进器

* 指示器

级别指示器、进度指示器

* 触控条

触控条概述、视觉设计、图标和图像、控件和视图

* 拓展功能

自动化动作、Finder同步拓展、附加菜单栏、通知中心小部件、第三方打开服务、共享拓展

九、按钮

1、复选框

复选框是一种让用户可以在两个相反的状态、操作或值之间进行选择的按钮类型。除非出现在清单中，否则其后会跟随一段标题。

1. 提供一个暗示两个相反状态的标题。如果找不到明确的标题，考虑使用一对单选按钮，以便用两个不同的标签来阐明状态。

3. 在视图中使用复选框而不是在窗口框架中。复选框不适用于工具栏和状态栏之类的窗口框架元素。

4. 当用户需要在两个以上状态之间进行选择时，使用单选按钮。

5. 如果多个复选框之间的关系不明显，考虑使用标签来说明。

6. 通常，垂直排列多个复选框。

7. 使用对齐方式和缩进方式将相关复选框分组。

8. 适当地启用和禁用复选框及相关控件。

10. 使用复选框全局启用和禁用多个子复选框时，当这些子复选框未全部处于同一状态，它应显示混合状态（用短划线表示）。

2、折叠控件

# 折叠按钮 #

折叠按钮显示和隐藏与特定控件关联的功能。

- 将折叠按钮靠近其相关控件。控件与单击按钮时出现或隐藏的扩展选项之间应该有明确的关系。

- 在单个视图中使用不超过一个折叠按钮。

# 折叠小三角 #

折叠小三角显示和隐藏与视图或列表相关的信息和功能。

当隐藏内容时，三角形指向右侧，而当内容可见时，三角形指向下方。

- 在对话框中使用显示小三角时，提供描述性标签。标签应标明显示或隐藏的内容，例如“高级选项”。例如，当披露三角形关闭时，标签可能显示为“显示高级选项”，而当披露三角形打开时，标签可能显示为“隐藏高级选项”。

3、渐变按钮

渐变按钮可启动与视图相关的立即操作，例如添加或删除表行。渐变按钮包含图标（而非文本），并且可以配置为操作按钮，切换按钮或弹出按钮。它们通常位于其关联视图的附近（旁边或内部）。

- 在视图中使用渐变按钮，而不是窗口框架。渐变按钮不适用于工具栏或状态栏。如果需要在工具栏中放置按钮，使用工具栏项。

- 使用系统提供的图标作为渐变按钮。

- 避免使用标签介绍渐变按钮。由于渐变按钮与特定视图紧密相连，因此通常不需要使用描述性文字。

4、帮助按钮

帮助按钮显示在视图中，并在单击时打开特定于应用的帮助文档。

1. 使用系统提供的帮助按钮来显示帮助文档。

2. 打开与当前操作有关的帮助内容。如果不显示特定主题不合适，则显示应用帮助文档的顶层。

3. 每个窗口最多提供一个帮助按钮。

4. 合理放置帮助按钮。- 带有关闭按钮的对话框（例如“确定和取消左下角，与关闭按钮垂直对齐。- 没有关闭按钮的对话框。左下角或右下角。- 首选项窗口或窗格。左下角或右下角。

5. 在视图中使用帮助按钮而不是窗口框架。帮助按钮不适用于工具栏或状态栏。

6. 不要使用标签来引入帮助按钮。帮助按钮的目的很明确，不需要其他描述性文字。

5、图像按钮

图像按钮出现在视图中，并显示图像或图标。图像按钮没有边框，可以配置为操作按钮，切换或弹出按钮。

1. 在视图中使用图像按钮而不是窗口框架。图像按钮不适用于工具栏和状态栏。如果需要工具栏中的图像按钮，使用工具栏项。

2. 整个按钮应该是可单击的，而不仅仅是图像部分。

3. 在图像和按钮边缘之间留出约10像素的间隔。即使用户点击了图像边缘，仍然可以正常点击。

4. 在图像按钮和其他控件之间留出足够的间距。

5. 将标签放置在图像按钮下方（如果有的话）。

6、弹出按钮

- 弹出按钮（通常称为弹出菜单）是一种按钮类型，单击按钮后显示一个包含互斥选项列表的菜单。

- 弹出按钮包括一个双箭头指示符，暗示着菜单出现的方向。菜单显示在按钮顶部。

- 像其他类型的菜单一样，弹出按钮的菜单可以包含分隔符和诸如复选标记的符号。菜单项显示后将保持打开状态，直到用户选择菜单项，在菜单外单击，切换到另一个应用或退出该应用；或直到系统显示警报为止。

1. 通常，使用标签来介绍弹出按钮。

3. 使用弹出按钮显示事物或状态列表，而不是功能命令。如果需要提供命令列表，使用下拉按钮。

5. 显示合理的默认选项。选择后后，弹出按钮将显示所选项目。

6. 将弹出按钮的菜单限制为单个级别。子菜单将选择隐藏得太深，难以浏览。

8. 使用弹出按钮显示互斥选项的静态列表。 如果需要提供命令列表或让用户选择多个状态，改用下拉按钮。

10. 如果对话框中包含六个或更多单选按钮，考虑使用弹出按钮。

12. 如果空间不受限制，考虑使用单列表格视图代替弹出按钮来显示12个以上的选项。表格视图支持滚动并且不会无意中被消除。

13. 使用复选框或下拉按钮代替弹出按钮进行多项选择。

15. 工具栏中使用弹出按钮时，请应用适当的样式。使用带渐变阴影的圆角矩形。

16. 可以在弹出按钮菜单的底部添加自定义选项。如果弹出按钮需要添加自定义选项，将其置于菜单底部分隔线下方。

17. 尽量使多个弹出按钮在视图中保持相同的宽度。

7、下拉按钮

下拉按钮（通常称为下拉菜单）是一种弹出按钮。下拉按钮包括一个单箭头指示符，暗示着菜单出现的方向。菜单通常显示在按钮下方。像其他类型的菜单一样，下拉按钮的菜单可以包含分隔符和诸如复选框之类的符号。菜单在屏幕上显示后，将保持打开状态，直到用户选择菜单项，在菜单外单击，切换到另一个应用或退出该应用；或直到系统显示警报为止。

- 使用下拉按钮显示功能命令列表或让用户选择多种状态。如果需要提供不是命令的互斥选项的列表，使用弹出按钮。

- 在下拉按钮中使用静态标题。标题可以是文本或图像，用于标识下拉按钮菜单的内容。弹出按钮的标题始终是当前所选菜单项的标题。如果将图像用作下拉按钮的标题，确保该图像清楚地说明了按钮的用途。

- 限制下拉按钮的长度。理想情况下，下拉按钮应包含三到十二个命令或状态。

# 设置按钮 #

设置按钮（通常称为设置菜单）是一种特定类型的下拉按钮，其操作类似于操作菜单，不能隐藏，可提供应用级或特定于表的命令。设置按钮包括一个收起时齿轮图标和一个向下箭头指示器。设置按钮通常用在工具栏中，但也可以用在表格视图下的视图的内容区域中。

1. 使用系统提供的设置图标，并且不需要介绍性标签。

2. 设置按钮为少于十二个的命令提供可见的快捷方式。

3. 使用工具栏中的设置按钮提供访问应用范围的操作菜单。

4. 在单列表下方显示一个操作按钮，以提供编辑命令。例如，“操作”按钮出现在“网络”偏好设置中的“网络服务”表下方。在此操作中的设置按钮应采用渐变按钮样式。除了显示在表格下方之外，操作按钮不应出现在窗口的内容区域内。

5. 设计设置按钮时，遵循所在菜单项的设计风格。避免显示键盘快捷键，并确保菜单栏中的每个菜单项都可用。

8、操作按钮

按出现在视图中，并启动特定于应用程序的即时操作，例如打印文档或删除文件。按钮包含文本（而不是图标），并且通常会打开单独的窗口，对话框或应用程序，以便用户可以完成任务。

1. 配置一个用户可能会选择作的默认按钮。默认按钮外观突出，当用户按下Return键时将自动执行其操作。每个视图中只能有一个默认按钮。

2. 在视图中使用按钮而不是在窗口框架中。按钮不适用于工具栏和状态栏。如果需要工具栏中的按钮，请使用工具栏项。

3. 在按钮中显示文本而不是图标。用户希望按钮包含描述性标题。如果要在按钮中显示图标，请改用图像按钮。

4. 调整按钮的宽度以适应标题。

5. 对按钮标题使用标题大小写。

6. 在按钮标题中使用动词。传达单击时发生的情况。由于按钮会立即启动操作，因此无需包括时间描述语（如马上）。

7. 指定单个项目时要具体。诸如“选择图片”之类的标题比“ 导入”更有用，因为它可以标识用户应选择的内容。

8. 当按钮打开另一个窗口，对话框或应用程序时，标题中应包含结尾的省略号。

9. 不要提供介绍性标签。

10. 将破坏性按钮与非破坏性控件保持足够的距离。用户必须做出有力的努力才能单击该按钮。

11. 当用户需要在两种状态之间选择时，使用复选框而不是按钮。

12. 需要显示选项列表时，使用弹出按钮。

13. 考虑启用弹簧加载。可以将按钮配置为支持带Force Touch触控板的系统上的弹簧加载。弹簧加载使用户可以通过将选定的项目拖动到按钮上方，然后强制单击（用力按压）。然后，用户可以继续拖动项目，以执行其他操作。

9、单选按钮

单选按钮是一个后随标题的小的圆形按钮。单选按钮通常以两到五个为一组，向用户提供一组相关但互斥的选择。

单选按钮还可以允许部分打开和部分关闭的混合状态（包含破折号的圆圈）。但是，当您的应用程序需要混合状态时，最好使用复选框。

1. 每个单选按钮的标题应清楚地描述选择它的效果。

2. 选择标准按钮代替单选按钮来启动操作。单选按钮向用户提供选项。

3. 在视图而不是窗口框架中使用单选按钮。单选按钮不适用于部分窗口框架，例如工具栏和状态栏。

4. 考虑使用标签来介绍一组单选按钮。将标签与第一个单选按钮标题的基线对齐。

5. 单选按钮水平排列时，使用一致的间距。

6. 当用户需要在两种状态之间进行选择时，考虑使用一个复选框。通常，大多数用户都清楚复选框的打开和关闭状态，并且该复选框所需的空间少于一组单选按钮。在极少数情况下，如果复选框不够清晰，则可能需要保证一组带有描述性标题的单选按钮。

7. 当用户需要同时选择多个选项时，使用一组复选框。除非在极少数情况下需要混合状态，否则单选按钮应该互斥。

8. 需要显示五个以上选项时，考虑使用一个弹出按钮。用户期望将大量选项整合到单个控件中。

10、范围按钮

范围按钮出现在视图上方的范围栏中。单击范围按钮可限制视图内内容的范围，例如搜索结果。范围按钮通常包含文本，也可以包含图标。

- 仅在范围栏中显示范围按钮。

- 将适当的边框样式应用于范围按钮。圆形边框保留用于启动操作或指定搜索条件的范围按钮。

11、切换按钮

切换按钮是两个互斥状态（打开和关闭）之间的切换。

- 在视图中使用开关，而不是窗口。

- 避免使用开关控制单个细节或次要设置。开关比复选框具有更强的视觉效果，因此它控制的功能比复选框更重要。

- 通常，不要用开关替换复选框。如果您已经在UI中使用了复选框，则最好继续使用它。

12、斜角按钮

斜角按钮有正方形或圆形的角以显示文本、图标或其他图像。

- 避免使用斜角按钮。斜角按钮不再在现代Mac应用程序中使用。而是使用按钮，复选框，弹出按钮，单选按钮或分段控件。

13、圆形按钮

圆形按钮包含一个小的中心图标，类似于帮助或单选按钮。

- 避免使用圆形按钮。不建议在现代应用程序中使用圆形按钮。而是使用按钮，帮助按钮或单选按钮。

十、字段和标签

1、组合框

组合框在单个控件中结合了文本字段和下拉按钮。用户可以在该字段中输入自定义值，或单击按钮从预定义值列表中进行选择。用户输入自定义值时，不会将其添加到选择列表中。

1. 在列表中用用有意义的默认值填充该字段。尽管该字段默认情况下可以为空，但最好是默认值暗示隐藏的选项。默认值不必是列表中的第一项。

2. 使用介绍性标签使用户知道预期的选项类型。

3. 用户希望能够输入自定义值，但也希望从选择列表中选择。

4. 提供独立的选择。组合框不允许进行多项选择。

5. 确保列表项的宽度不超过文本字段。

2、标签

标签是描述屏幕上的界面元素或提供短消息的静态文本字段。

1. 保持标签清晰易读。标签可以包含纯文本或样式文本。

2. 引入控件时使用冒号。当标签和控件共同组成一个句子时，不需要冒号。

3. 使用系统提供的标签颜色来传达重要性。macOS定义了四种标签颜色以表示不同的重要性级别。https://developer.apple.com/design/human-interface-guidelines/macos/fields-and-labels/labels/

4. 使有用的标签文本可选。用户应该能够复制有用的信息，例如错误消息，序列号或IP地址，以粘贴到电子邮件，文档或其他位置。

3、搜索栏

许多工具栏中都包含一个搜索栏，但是搜索栏也可以显示在窗口的主体区域中。

1. 使用搜索栏代替标准文本字段来实现搜索。

2. 避免提供介绍性标签。例外情况是在工具栏中放置搜索字段时，必须提供标签“搜索”，以便在用户将工具栏配置为仅显示图标和文本时显示。

3. 通常，启用取消按钮。删除该字段的内容并立即终止搜索。

4. 如有必要，在搜索字段中提供提示。搜索字段可以包含占位符文本。

5. 在适当的时间开始搜索。可以在用户开始输入内容立即开始搜索，也可以等到他们按Return键或Enter键。用户输入时进行搜索会导致结果随着输入文本变得更加具体而不断完善。如果在用户完成键入后进行搜索，考虑在用户键入时显示菜单，以便他们从常用搜索词或最近搜索中进行选择。

6. 在显示用户的搜索历史之前，考虑隐私。考虑提供范围栏，以帮助人们快速缩小结果范围。

# 范围栏 #

1. 与添加范围栏相比，改善搜索结果更为重要。

2. 如果合适，让用户完善范围界定操作。可以使用显示在范围栏下方的过滤器行来启用补充范围规则。

3. 在范围栏中使用适当的按钮外观。当用作切换按钮时，按钮应采用凹进样式，当用于启动动作或指定搜索条件时，按钮应采用圆角矩形样式。

4、文本字段

文本字段是一个用户可以在其中输入或编辑一行或多行文本的矩形区域。文本字段可以包含纯文本或样式文本。

- 标签是一个文本字段，显示静态文本

- 搜索栏是便于搜索的文本字段

- 令牌字段是一个文本字段，显示标记化文本

# 数据输入 #

1. 使用介绍性标签或占位符文本帮助传达目的。

2. 即时验证。

3. 使用数字格式器来辅助数字数据输入。

4. 相应地调整换行符。默认情况下，任何超出文本字段范围的文本都会被剪切。但可以将文本字段设置为在字符或单词级别将文本换行显示，或者在开头，中间或结尾处将其截断（用省略号表示）。

5. 询问敏感数据（例如密码）时，使用安全的文本字段。

6. 如果有意义，让用户调整文本属性。

7. 考虑使用扩展工具提示来显示已剪切或截断的文本的完整版本。

# 布局注意事项 #

1. 尽可能使文本字段的大小与预期文本的数量匹配。

2. 均匀间隔多个文本字段。

3. 通常，垂直堆叠多个文本字段。如果必须水平放置多个带标签的文本字段，在一个文本字段的末尾与下一个文本字段的标签之间留出足够的空间。

4. 使用一致的文本字段宽度来创建更有条理的布局。对多个字段使用相同的宽度有助于提高可读性，并提供一种对相关字段进行分组的方法。例如，地址表单上的名字和姓氏字段可能是一个宽度，而地址和城市字段可能是不同的宽度。

5. 在字段之间切换时，焦点应按逻辑顺序移动。系统会尝试自动实现此结果，因此仅在极少数情况下才需要自定义。

6. 使用组合框将文本输入与选项列表配对。不要试图通过将文本字段和弹出按钮配对来达到相同的效果。

5、令牌字段

令牌字段是包括令牌，可以轻松选择和操作的文本块的文本字段。

在邮件中编写新邮件时，地址字段是令牌字段。可以选择收件人令牌并将其拖动以重新排序，或者单独使用。

- 令牌字段可以配置为在文本输入字段时向用户显示建议令牌的列表。

- 单个令牌还可以包括由向下的V形字符表示的属性菜单。可以包括关于令牌或编辑选项的信息。

- 某些令牌字段随附有可用令牌的单独列表，可以选择这些列表并将其拖动到该字段中。

1. 使用属性菜单。

2. 如果可以，扩展调用令牌化的字符列表。默认情况下，每当用户键入逗号时，输入的文本都会被标记化。可以指定其他字符，例如回车符，它们也应触发此操作。

3. 在显示建议的令牌之前自定义延迟。默认情况下，建议会立即显示。但是，建议显示得太快可能会打扰您输入内容。如果使用令牌，考虑将延迟调整到合适的水平。

十一、选择器

1. 拾色器

拾色器让用户可以调整文本、形状、参考线和其他屏幕元素的颜色。

单击时颜色变暗以确认它是活动的。然后打开系统的颜色面板。

颜色选择器还支持拖放，用户可以将颜色从一种颜色选择器拖到另一种拾色器，以及从颜色面板拖到拾色器。

2、日期选择器

- 选择适合的样式。日期选择器有两种样式：文本和图形。当空间有限并希望用户进行特定的日期和时间选择时，选择文本样式。当要为用户提供浏览日历中的日期的选项，要让用户选择日期范围或表盘的外观适合界面时，图形样式很有用。

# 文字格式 #

Month, day, and year

Hour, minute, and second

在日期或时间字段中选择一个元素后，用户可以输入一个新值，或者按向上或向下箭头键分别增大或减小该元素的值。默认情况下，日期和时间字段包括一个步进器来递增和递减所选元素的值。如果合适的话，可以选择隐藏步进器。

文本日期选择器中显示的元素顺序会因用户的语言环境而异。例如，在大多数欧洲语言环境中，人们将以DD-MM-YYYY的顺序看到日期元素，而世界上其他人则可能会根据其位置使用YYYY-MM-DD或MM-DD-YYYY。用户可以在“系统偏好设置”>“语言和地区”>“地区”中更改其语言环境。

# 图形样式 #

使用图形日历时，人们可以选择一个特定日期或者一个日期范围。使用图形时钟，用户可以通过将指针拖到新位置来更改时间。

3、图像选择器

图像选择器支持的编辑操作：拖放、删、复制和粘贴

- 必要时还原为默认图像。

- 提供标准的复制和粘贴菜单选项。菜单选项告知用户支持复制和粘贴，提供替代方法来启动操作。

4、路径控件

路径控件显示所选文件或文件夹的文件系统路径。路径控件在窗口的主体区域。

- 标准路径。路径组件的线性列表。如果控件是可编辑的，则用户可以将新项目拖到控件上以选择该项目并在控件中显示其路径。

- 弹出路径。外观类似于弹出按钮。仅显示所选项目的图标和名称。用户可以单击此项目以显示包含根磁盘，父文件夹和选定项目的菜单。如果控件是可编辑的，则此菜单还包含“选择”命令。用户可以选择选择或将新项目拖到控件上以选择该项目并将其显示在控件中。

1. 在窗口主体而不是窗口框架中使用路径控件。路径控件不适用于工具栏或底栏中。

2. 仅当路径控件有用时才使用它。

5、分段控件

分段控件是两个或多个分段的水平集合，每个分段都可以是按钮-通常配置为切换按钮。分段控件提供了影响对象，状态或视图的相关选项。

- 与按钮一样，分段中可以包含文本或图标。

- 分段控件可以启用一个或多个选择。

1. 通常，保持分段宽度一致。尽可能使图标和标签的宽度也保持一致。

2. 考虑使用标签来增加清晰度。标签可用于分段控件并阐明其目的。当各个段包含图标时，可以在这些段下方放置标签以阐明图标的含义。如果应用程序包含帮助标签，为分段控件中的每个细分提供帮助标签。

3. 工具栏中的分段控件应具有与其他工具栏控件相同的圆形，纹理外观。

4. 在主窗口区域中进行视图切换时，使用选项卡视图，而不是分段控件。选项卡视图的外观类似于分段控件，并且旨在实现有效的视图切换。在工具栏或检查器窗格中使用分段控件时，它们是用于视图切换的合适选项。

5. 不要将分段控件用于添加和删除操作。如果需要在表或其他视图中添加和删除项目的方法，使用渐变按钮。如果需要在工具栏或窗口框架的其他部分中提供添加和删除操作，使用圆形的凸起按钮。

6. 使用名词或名词短语作为分段文本。如果分段控件包含文本，无需标记整个控件。

7. 避免在分段控件中混用文本和图标。

8. 使用系统图标。

9. 设计自定义图标时，参考系统图标，并努力实现类似的外观。

10. 根据控件的大小适当缩放自定义图标。

11. 如有必要，您可以调整文本的对齐方式和图标的位置。

12. 考虑启用弹簧加载。

6、滑块

滑块显示为水平或垂直轨道或圆形刻度盘，用户可以在范围内进行细致的选择。滑块包含一个滑杆，用户可以单击并拖动该控件在最小值和最大值之间移动。滑块还可以包含刻度线，使用户更容易查看范围内的特定值。

- 在没有刻度线的线性滑块中，滑杆是圆形的，最小值和拇指之间的轨迹填充了颜色。在带有刻度线的线性滑块中，滑杆是有方向性的（指向刻度线），并且轨道没有着色。线性滑块通常包括补充图标来说明了最小值和最大值的含义。

- 在圆形滑块中，滑杆显示为小圆圈。启用后，在滑块周围以均匀间隔的点显示。

1. 考虑在滑块的值变化时提供实时反馈。

2. 选择直观滑块样式。

3. 考虑使用标签介绍滑块。

4. 考虑用相文本字段和步进器来补充滑块。

5. 使用刻度线可以提高清晰度和准确性。

6. 考虑将标签添加到刻度线。最好提供一个帮助标签，当用户将鼠标悬停在其上时显示该拇指的值。

7. 不要反转滑块的方向。

8. 考虑使用图标来说明线性滑块中最小值和最大值的含义。

7、步进器

步进器使用户可以递增地增加或减少数字，日期或时间值。步进器位于显示其当前值的字段旁边，因为步进器本身不显示值。

十二、指示器

1、级别指示器

级别指示器以图形方式表示数值范围内的特定值。它的用途类似于滑块，但更直观，不包含滑杆，但支持在级别指示器本身上单击和拖动以选择值。级别指示器还可以包含刻度线。

- 在视图中而不是在窗口框架中使用级别指示器。级别指示器不适用于部分窗口框架，例如工具栏和状态栏。

# 容量指示器 #

容量指示器说明了与有限容量相关的当前水平。倾向于在短暂查看的对话框和首选项窗口中使用。

- 连续。水平的半透明轨道，用彩色条填充以指示当前值。通常会显示刻度线以提示。

- 分散的。均等大小的矩形段的水平行。段的数量与总容量匹配，并且段用颜色完全填充（永远不会部分填充）以指示当前值。

1. 更改填充颜色，以提醒用户注意有效值。两种容量指示器样式的默认填充颜色均为绿色。如果合适，可以在当前值达到特定水平时更改填充颜色。

2. 考虑将连续样式用于大范围。

3. 仅在连续样式中使用刻度线。

4. 如果使用刻度线，请至少标记第一个和最后一个刻度线。

# 等级指示器 #

等级指示器使用一系列水平排列的图形符号来传达等级。默认符号是星号。可以出于搜索，排序和创建智能播放列表的目的引用这些评级。

评级指示器不会显示部分符号，其值会四舍五入，以便仅显示完整的符号。

1. 促进有效的排名调整。当显示已排序项目的列表时，让用户直接调整单个项目的级别，而无需导航到单独的编辑屏幕。

2. 如果必须用自定义符号替换星号，请确保其目的明确。星星是非常容易识别的排名符号。其他符号不容易与评级量表相关联。

# 相关指示器 #

相关性指示器使用一系列竖线传达相关性。当对多个项目进行排序和比较时，它通常出现在搜索结果列表中以供参考。

2、进度指示器

- 条形指示器（通常称为进度条）

- 旋转指示器以圆形形式显示进度，可以是旋转器，也可以是随着进度继续而填充的圆圈。

用户不会与进度指示器互动；但通常带有用于取消相应操作的按钮。

1. 在视图而不是窗口框架中使用进度指示器。

2. 在统一的位置显示进度指示器。

3. 如果可能的话，让用户选择停止。如果人们可以在不引起负面影响的情况下中断某个过程，则包括一个“取消”按钮，当用户按下Esc（退出）键时会触发该按钮。如果进程中断可能导致负面影响，提供“停止进度”图标按钮而不是“取消”按钮。

# 可量化的进度指示器 #

确定的进度指示器显示发生变化的条形或圆形，以显示任务的进度。

1. 为持续时间明确的任务使用确定的进度指示器。

2. 始终准确地报告进度。

3. 考虑自定义进度指示器的外观以匹配应用。

4. 完成进度后，隐藏进度指示器。在关闭指示器之前，请务必完成加载。如果过早取消，会怀疑该过程是否真的完成了。为避免这种情况，可以在进度完成时播放系统声音。

5. 如果有帮助，请添加带有确定进度指示器的标签。避免使用诸如“ 加载”或“ 身份验证”之类的模糊术语。以省略号（...）结尾，以强调该过程的持续性质。

# 不可量化的进度指示器 #

1. 主要使用旋转进度指示器来传达后台操作的状态或空间受限时的状态。很小且不显眼，对于异步后台任务（例如从服务器检索消息）很有用。也可用于在小区域内（例如，在文本字段内）或特定控件（例如，按钮）旁边传达进度。

2. 如果可能，请从不确定的进度栏切换到不确定的进度栏。

3. 不要从旋转进度指示器过渡到进度条。

4. 保持不确定的进度指示器移动，以便人们知道正在发生的事情。人们将固定指示器与停滞的过程或冻结的应用程序相关联。如果某个过程由于某种原因而停滞不前，请向用户提供反馈，以帮助他们了解问题及其解决方案。

5. 旋转进度指示器不应贴标签。

十三、触控条

1、概述

触控栏是Retina显示屏和输入设备，位于受支持的MacBook Pro型号的键盘上方。触摸栏中的动态控件使人们可以与主屏幕上的内容进行交互，并可以基于当前操作快速访问系统级和特定于应用程序的功能。

# 配置和定制 #

触摸栏右侧的Touch ID传感器支持指纹身份验证。

默认情况下，触摸栏的右侧会显示一个称为“ 控制条”的可扩展区域，其中包括用于执行系统级任务（例如，调用Siri，调整主显示屏的亮度以及更改音量）的控件。可以将特定于应用程序的控件放在控制栏左侧的应用程序区域中。在触摸栏（第一代）中，Esc按钮或其他系统提供的按钮可能会出现在应用程序区域的左侧。

- 人们可以配置触控栏以适应他们的需求。

- 可以让用户添加和删除项目，从而在应用区域内支持其他自定义。

1. 通常，让用户自定义应用程序的Touch Bar。为重要的常用功能提供合理的默认值，让用户进行调整以支持不同的工作风格。

2. 为触摸栏控件提供文本标签。 VoiceOver可以在听觉上描述控件，从而使视力障碍者的导航更加轻松。

# 手势 #

- 点按

人们点击以激活控件（如按钮），或在分段控件中选择诸如表情符号，颜色或细分的项目。

- 触摸并按住

触摸并按住手势可启动控件的辅助动作。例如，在邮件中，点击“标记”按钮会在邮件中添加一个标记，但是触摸并按住该按钮会显示一个模式视图，使人们可以更改标记的颜色。

- 水平滑动或平移

人们使用水平滑动或平移来拖动元素（例如滑块），或浏览内容（例如日期列表或洗涤器中的一组照片）。

- 多点触摸

尽管触控栏支持多点触控手势（例如捏合），但是这种手势对于人们执行而言可能很麻烦。通常，最好少使用Multi-Touch手势。

# 设计基础 #

1. 触摸栏与主屏幕上的当前操作相关。

2. 使用触控栏作为键盘和触控板的扩展，而不是用作显示器。触摸栏不应显示警报，消息，滚动内容，静态内容或其他会分散人们注意力的主屏幕。

3. 力求与物理键盘的外观相匹配。在可能的情况下，旨在设计类似于物理键盘中按键大小和颜色的触摸栏控件。

4. 避免仅在触摸栏中提供功能。

5. 在全屏情况下，考虑在触摸栏中显示相关控件。

6. 首选可立即产生效果的控件。

7. 对Touch Bar交互做出响应。

8. 可能的话，应该能够在触摸栏中启动和完成任务。

9. 避免将触控栏用于与知名键盘快捷键相关的任务。

10. 准确反映同时出现在触摸栏和主屏幕上的控件的状态。

11. 响应用户交互时，请避免在触摸栏和主屏幕上显示相同的UI。

2、视觉设计

- 动画

避免动画。触摸栏是键盘的扩展，人们不希望键盘上有动画。此外，过多或多余的动画可能会使人们分心。

- 颜色

1. 最好使用标准控件和系统图标。

2. 尽量少用色彩。使触控栏的外观类似于物理键盘。单色效果最好。

3. 颜色可以吸引人注意重要的控件。将蓝色保留为默认控件，将红色保留为破坏性控件。

4. 如果使用颜色，选择与应用协调的有限调色板。色彩的巧妙运用是传达品牌的一种方式。

5. 使用Display P3颜色配置文件，每像素16位（每个通道），并以.png格式导出图稿。

6. 在配备了彩色显示屏的Mac上，使用系统颜色选择器选择和预览P3颜色，并将它们与sRGB颜色进行比较。

# 系统颜色 #

macOS提供了一系列标准系统颜色，这些颜色会根据环境光和键盘背光亮度等因素自动响应系统白点变化。

- 不要复制系统颜色。

# 动态系统颜色 #

macOS定义了一系列系统颜色，这些颜色与标准界面控件（例如按钮和标签）的配色方案动态匹配。

# 触控栏区域 #

系统在区域之间强制执行16pt的分隔。

- 触摸栏（第二代）显示屏包含两个区域：应用区域和控制栏。尽管第二代Touch Bar不包括系统按钮区域，但是可以在应用区域内显示系统按钮。

- 触摸栏（第一代）显示包括三个区域：系统按钮区域，应用程区域和控制条。

1. 假定默认控制条是可见的。尽管人们可以重新配置控制条，减小其大小或完全隐藏它，但不要在设计中依赖此空间的可用性。

# 定位应用控件 #

1. 逻辑和直观地定位控件。如果应用提供的控件可以在不同的模式中持续存在，则可以很好地将控件放在应用程序区域的左侧。

- 引起人们注意的主要控件（例如警报或QuickType栏中的建议项）最好在应用程序区域的中心位置，左侧具有次要选项。使用应用程序工具栏中的控件顺序来通知应用程序区域中的触摸栏控件的顺序。

2. 构造灵活的布局。应用程序区域的宽度（8、16、32pt）根据控制条和设备的配置而有所不同，因此请考虑在有更多空间可用时允许某些控件（例如滑块和滑动器）伸展。

3. 力争保持一致的间距。

4. 使用灵活的空间和分组以帮助对齐。项目之间的灵活空间将左侧的项目推向触摸栏的左侧，将右侧的项目推向触摸栏的右侧。分组使您可以一次放置多个控件。

5. 避免自动重新放置控件。

6. 避免在从右到左的语言环境中手动反转控件。

# 通用布局样式 #

由于配置选项，各种控件大小以及应用运行的设备等因素，触摸栏的布局因应用而异，差异很大。

1. 具有一个主要项目的布局。触摸栏的中心包含单个大型控件。左侧还有其他控件，例如按钮和分段控件。

- 在Touch Bar（第2代）中，主要候选项列表控件通常相对于设备居中，而其他类型的主要控件在某些情况下可能会偏离中心。

2. 具有两个主要项目的布局。触摸栏的中心包含两个大小一致的控件。其他控件在左侧。

3. 具有三个主要项目的布局。触摸栏的中心包含三个大小一致的控件。其他控件在左侧。

4. 流体布局。此布局包括大小一致的控件。

3、图标和图像

# 图像尺寸和分辨率 #

为出现在触摸栏中的所有图稿提供比例系数为@ 2x的高分辨率图像。

# 自定义图标 #

- 设计可识别的图标。

- 保持图标简单。最好的图标通过轮廓传达含义，并且只包含很少的内部细节。使用抗锯齿可使图标的轮廓保持清晰。不要使用阴影。

- 保持图标一致。

- 使用系统图标作为参考。

- 准备将图标作为模板图像。模板图像是具有透明背景和Alpha通道的黑色图像。当在触摸栏中显示模板图像时，系统会对其进行反转，并自动应用适当的颜色。模板图像还根据环境光和键盘背光亮度等因素对系统白点变化做出响应，并自动对用户交互做出反应。

- 始终一起预览图标，并适当地预览它们，以正确评估其外观。确保模板图像在被系统反转后按预期显示。

1. 尺寸

尽管可以生成扩展到触摸栏整个高度的图标，但是图标的高度通常不应超过44像素（圆形图标的高度不超过36像素）。

- 使图标保持视觉居中。

- 对角线元素最好为45度角。

2. 颜色和填充

- 不要使用颜色来交流打开和关闭状态。

- 为大多数图标提供100％的不透明度填充。如果需要更改以提高可读性，请结合使用70％不透明度填充和100％不透明度填充。仅将中间调用于提高可读性和平衡性。

3. 描边

为了匹配物理键盘的样式，请为大多数图标设置2px的笔触。如果您的设计需要更大的视觉重量，请尝试使用3px的笔触。

4. 圆角

要匹配系统图标的样式，请为带有2px笔划的图标使用方形角，为带有3px笔划的图标使用半径为1px的圆角，为实体形状使用为4px半径的圆角。

# 系统图标 #

https://developer.apple.com/design/human-interface-guidelines/macos/touch-bar/touch-bar-icons-and-images/

1. 首选系统图标。

2. 不要重新定义系统图标的预期功能。

3. 仅使用专为触摸栏设计的系统图标。

4. 某些系统图标（例如“返回”和“前进”）会在从右到左的语言环境中自动反转方向

4、控件和视图

# 按钮 #

按钮可启动应用程序特定的操作，并且可以包含图标和标题。

- 优先使用图标而不是标题。力求设计清晰的图标，这些图标可以独立显示而不支持文本。

- 保持标题简短。冗长的标题可能会挤满触控栏。

- 如有必要，自定义按钮的边框颜色。系统提供的按钮挡板看起来类似于物理键盘按钮，有助于提供统一的视觉体验。如果应用程序需要自定义边框颜色，考虑使用深色，在触摸栏中看起来会很好。

1. 切换

拨动开关在打开和关闭状态之间切换。

- 让背景指示切换的状态。系统会在关闭状态下自动更改按钮的背景外观，因此无需使用颜色，文本或其他图标来指示状态。

- 使用切换开关代替复选框和单选按钮。如果需要让人们在两种状态之间进行选择的控件，请使用切换按钮。

# 候选列表 #

候选列表在文本输入期间提供自动完成建议。人们可以点击建议以接受并将其插入主屏幕上的活动文本字段或文本视图中。人们还可以扩展或折叠候选列表。扩展的候选列表将替换扩展区域中的其他控件。

# 字符选择器 #

打开一个弹出窗口，其中包含特殊字符列表，例如表情符号。人们可以在选择器中点按一个字符，以将其插入主屏幕上的活动文本区域。

# 拾色器 #

按预期使用图标。使用笔划颜色选择器图标选择笔划颜色。使用文本颜色选择器图标选择文本颜色。对于其他颜色选择方案，请使用颜色选择器图标。

# 标签 #

- 通常，避免使用标签。

- 补充复杂的图标时，标题优先于标签。如果控件图标的含义本身不清楚，请考虑在控件中包含一个简短的标题以提示。

# 弹出按钮 #

- 谨慎使用弹出窗口。

- 避免嵌套弹出窗口。

- 保留触摸并按住即可弹出。主要使用触摸和按住来显示覆盖，该覆盖包括一组简单的选项（例如单个分段控件），人们可以从中进行选择。

- 当展开的弹出框包含选项列表时，折叠状态应显示当前选定的选项。

- 提供明显的退出路径。确保人们始终知道如何折叠弹出窗口并返回上一组控件。

# 洗涤塔 #

让人们左右滑动以浏览诸如日期列表或一组照片之类的内容。可以高度自定义-但应保持其外观在Touch Bar中不会感觉不适。

1. 固定式洗涤器

固定的洗涤器可以与一组安排好的内容（例如打开的Safari标签）进行流畅，连续的交互。当人们在洗涤器上滑动时，手指下面的项目会突出显示。根据洗涤器的配置，人们可以通过将手指移到项目上或从洗涤器上抬起手指来进行选择。如果内容量超过固定洗涤器的大小，则当手指靠近控件边缘时，洗涤器会自动滚动以显示其他项目。在固定的洗涤器中，人们用手指移动选择内容而不是内容。

2、自由式洗涤器

以滚动列表的形式显示内容，例如日历日期列表，人们可以滑动滚动列表。根据洗涤器的配置，人们可以通过将其移动到特定位置（例如洗涤器的中心）或在洗涤器静止时点按该项目来选择一个项目。

- 使用可预测的逻辑顺序值。当自由洗涤器中的可滚动列表固定时，某些值可能会被隐藏。如果列表以遵循明显顺序的逻辑顺序显示项目，则人们可以预测隐藏的值并快速浏览列表。

- 值列表应尽可能短。

# 分段控件 #

- 限制段数以提高可用性。较宽的细分受众群更易于挖掘。

- 优先使用图标而不是标题。

- 尝试保持段内容的大小一致。

- 保持标题简短。

- 对于边框颜色的更改，最好选择较深的颜色。系统提供的挡板的外观类似于物理键盘按钮。如果您的应用需要自定义边框颜色，则建议使用深色。

# 共享服务选择器 #

点击共享服务选择器时，它将显示一个包含共享按钮的弹出窗口。

- 仅在有要共享的内容时启用共享服务选择器。如果人们没有选择文本，图像或其他可共享内容，则应禁用共享服务选择器。

# 滑块 #

- 自定义滑块的外观以匹配您的应用并增加价值。

- 当空间狭窄时，请考虑使用步进器而不是滑块。

- 提供左右图标来说明最小值和最大值的含义。

# 步进器 #

- 在中心视图中显示项目的当前值。默认情况下，步进器使用文本显示当前值。可以使用格式化程序为文本设置样式-例如，在允许人们选择日期的步进器中，您可以将今天的日期设置为红色。在某些情况下，使用图像而不是文本可能很有意义，但是创建传达逻辑进展的图像可能很棘手，人们可以据此预测当前值之前和之后的值。例如，控制标记工具的线宽的步进器可以使用一组厚度不同的图像，以帮助人们了解增加和减少值的效果。

- 当人们很可能对物品的价值进行较大的调整时，请避免使用步进器。由于步进器每次滑动或轻击都会以不连续的步长更改项目的值，因此人们将不得不多次滑动或轻击才能进行较大的值更改。

十四、拓展功能

1、操作拓展

操作拓展使用户启动特定于内容的任务。通常，通过将指针放置在某些类型的嵌入式内容上来访问动作拓展。人们还可以在由共享工具栏按钮或扩展程序的自定义工具栏按钮显示的菜单中扩展程序。

- 查看器：提供一种自定义的查看方式，但不能修改当前内容。显示所选文本翻译的Action扩展是查看器Action扩展的示例。

- 编辑器：启用对当前内容的编辑。用户确认编辑后，扩展名将原始内容替换为编辑后的版本。系统提供的标记扩展是编辑器动作扩展的示例。

系统仅提供可以与当前内容类型一起使用的Action扩展。例如，当当前内容是视频时，不显示支持文本的Action扩展。

1. Action扩展程序不是迷你应用程序。它执行与当前上下文相关的范围狭窄的任务。例如，标记扩展允许人们编辑所选的图像，但不允许他们复制，重命名或移动图像。

2. 不要假设Action扩展程序可用。用户可以在“扩展”系统首选项窗格中启用和禁用操作扩展。

3. 仅在必要时提供接口。例如，“标记”操作扩展允许用户在不离开应用程序的情况下向文本添加图像，在图像上签名或在图像上签名。您提供的界面应该可以识别并且感觉像是应用程序的自然扩展。

4. 简化并限制交互。最好的扩展程序使人们仅需几个步骤即可执行任务。

5. 使用应用图标的模板图像版本来表示操作扩展图标。模板图像使用遮罩创建图标。要创建动作扩展图标，请先创建应用图标的模具版本。使用透明度和抗锯齿；不要包含阴影。如果应用程序提供多个Action扩展，创建一系列图标，这些图标共享与应用程序图标相关的常见视觉元素。

2、工作流

通过构建工作流来做耗时且重复的任务。

1. 考虑至少提供一组基本的自动化操作。通过提供操作，使用户简化流程，并以独特的方式将应用程序与系统和其他应用程序集成。

2. 保持动作简单，可以确保将它们以多种有用的方式进行组合。

3. 使操作可配置。通过让人们配置操作以满足他们的特定需求，以放大操作的实用性。

4. 考虑让人们在运行时配置设置。定义明确的工作流程也常常需要灵活性。为了提供多功能性，可以将许多操作配置为在运行时显示在屏幕上，以便进行即时调整。

5. 当某个动作设置为忽略设置时，工作流应继续运行。例如，如果您的操作无法找到要接收的文档以供输入，则工作流应该不会失败。相反，工作流将跳过您的操作并继续执行下一个操作。

6. 当操作之一产生非标准输出时，提供转换操作。大多数操作都接受并产生常见的信息类型，例如文件，图像，PDF和文本。Automator尝试通过尽可能执行自动数据转换来确保动作之间的兼容性。

7. 在花费时间来填充动作的界面时传达进度。有时，动作必须收集数据以填充其界面。

# 工作流设计 #

1. 提供明确的动作标题。

2. 创建包含两个到五个单词的动作标题。

3. 如果添加了操作，需添加应用名称。

4. 提供有关动作的足够描述性信息。Automator包括一个描述区域，该区域显示有关所选动作的详细信息。每个动作应提供由一个或多个句子组成的详细描述，以清楚地描述该动作的目的。此外，每个操作都应详细说明其输入和结果类型，要求，选项，注释，警告，相关操作，版本和版权信息。

5. 最小化工作流高度。由于屏幕的尺寸大于高度，因此应考虑最大程度地减少动作对垂直空间的使用。例如，即使只有两个选择，也可以使用弹出按钮代替一系列单选按钮。通常，使用较小的控件和10磅的边距。确保整个动作适合屏幕显示，而无需滚动。

6. 不要包含重复动作标题或描述的标签。

7. 不要使用框。动作不需要在框中分隔或分组控件。

8. 避免显示可见的标签视图。而是使用隐藏的标签视图在不同的控件集之间切换。

3、Finder同步扩展

同步本地和远程文件的应用应包括Finder Sync扩展程序。

- 在Finder中显示标志，以指示项目的同步状态。

- 提供执行文件和文件夹管理任务（例如收藏和添加密码保护）的自定义属性菜单项。

- 提供执行全局操作（如强制执行同步操作）的自定义工具栏按钮。

1. 最小化徽章。为避免使用徽章使Finder窗口混乱，请考虑对未同步的项目（而不是每个项目）进行标记。

4、附加菜单栏

系统会隐藏菜单栏其他内容，以便为应用程序菜单腾出空间。同样，如果菜单栏多余的东西太多，系统会隐藏一些菜单栏以避免拥挤。

1. 使用模板图像来额外显示菜单栏。

2. 当用户额外单击菜单栏时，显示菜单（而不是弹出窗口）。

3. 让人们决定是否启用附加菜单栏。但是，为确保可发现性，考虑在设置过程中为人们提供额外启用菜单栏的选项。

4. 不要依赖菜单栏附加功能。系统会定期隐藏和显示菜单栏附加功能，并且您无法确定用户选择显示哪个其他菜单栏附加功能，或者无法确定菜单栏附加功能将放置在菜单栏中的位置。

5. 也可以考虑以其他方式显示特定于应用程序的功能。例如，您可以提供Dock菜单。用户可以隐藏或选择不额外使用菜单栏，但是当您的应用程序运行时，Dock菜单不可用。

5、通知中心小部件

窗口小部件具有高度可定制性，可以包含按钮，文本，布局定制，图像等。

1. 设计一目了然的体验。使用小部件来获取简短的更新并执行非常简单的任务。不支持在小部件内平移和滚动。

2. 快速显示内容。人们在Notification Center中花费的时间很少，因此您不想让他们等待内容加载。在本地缓存信息，以便始终可以在获取更新时显示最新信息。

3. 提供足够的边距和填充。避免将内容扩展到小部件的边缘。通常，使用通知中心提供的默认边距。如果可能，将图标和按钮的网格限制为每行四个。

4. 适应能力强。小部件显示的高度和信息取决于它是折叠还是展开（并非所有小部件都支持扩展）。扩展小部件的高度最好不超过屏幕的高度。折叠时，小部件应显示可以独立存在的基本信息。展开后，小部件应显示可增强主要信息的其他信息。如果窗口小部件中需要表格视图，确保使用不包含滚动视图的表格视图。

5. 避免自定义窗口小部件的背景。系统提供的浅色，模糊的小部件背景旨在保持一致性和易读性。尽可能使用它。

6. 通常，对文本使用系统字体和系统颜色。

7. 如果合适，让用户跳转到您的应用以做更多的事情。但是，如果人们有时可能需要做的事情比您的窗口小部件所提供的更多，请简化操作。不要包含会占用您内容空间的Open App按钮。而是让人们单击内容本身以在您的应用程序中查看或编辑它。

8. 切勿使用小部件打开其他应用程序。

9. 选择一个好的小部件名称。每个小工具内容上方都会显示一个应用程序图标和一个标题。通常，小部件的名称应与您的应用程序的名称匹配。如果您使用自定义标题，请考虑为其加上应用名称的前缀。

10. 如果当某人登录到您的应用程序时您的窗口小部件提供了其他功能。例如，当他们没有登录时，一个显示即将到来的预订的应用程序可能包含一条消息，内容为“登录到应用程序名称以查看您的预订”。

11. 尽可能让人们在Notification Center中配置您的窗口小部件。强迫人们离开Notification Center来配置窗口小部件会造成断开连接的体验。

6、第三方打开服务

提供服务的应用会宣传其可以对特定类型的数据执行的操作。然后，系统会智能地在应用程序菜单中以及在按住Control键并单击文本，文件和其他类型的数据时显示的上下文菜单中公开其服务。

1. 给每个服务一个简短的，有重点的标题，以准确描述其功能。如果有两个或两个以上具有相同名称的服务，则在每个服务之后会自动显示应用名称，以区分它们。

2. 避免提供“在我的应用程序中打开”服务。

3. 如果人们会经常使用某项服务，请为其分配键盘快捷键。

4. 使用共享扩展程序而不是服务来与其他应用程序和社交服务共享用户内容。共享扩展名可以显示一个视图，该视图允许用户编辑内容，或者切换到其相应的应用程序并执行任务，例如导入。

5. 考虑为您的应用程序提供的服务包括工作流操作。

7、共享扩展

1. 公开一个集中的共享任务。

2. 系统提供的合成视图很适用，并在整个系统中提供一致的共享体验。

3. 共享扩展应该在启动共享后立即关闭。耗时的共享活动应在后台继续，您的应用程序应提供某种方式来检查这些任务的状态。

4. 不要以为一定可以使用共享扩展。用户可以在“扩展”系统首选项窗格中启用和禁用共享扩展。

5. 共享扩展程序会自动使用您的应用程序图标，使用户确信扩展程序实际上是由您的应用程序提供的。