* 视觉设计

动画、颜色、深色模式、半透明、字体

* 图标和图像

图像尺寸和分辨率、应用程序图标、自定义图标、多项目拖动图标、系统图标

macOS的视觉设计

一、动画

如果要为应用程序设计自定义动画，以用户的感受为主，提供清晰的反馈以响应用户操作，并引起人们对屏幕上特定位置的注意。

1. 追求现实主义。逼真的动画可以帮助人们了解事物是如何运作的。

2. 避免将动画用于频繁发生的交互中。通常让人们认为效率低下。

3. 增强反馈和可理解性。例如，最小化窗口时，它可以从屏幕流畅地移动到Dock，以便用户确切知道它的去向。

4. 在控件状态之间平滑过渡。

5. 暗示结果。通过暗示操作结果来建立信任并减少操作失误。例如，当将一个项目拖到Dock时，其他项目会移到一边，显示放置新项目时将其驻留的位置。

6. 确保全屏模式过渡动画流畅。

7. 不要为了使用动画而使用动画。过多或不必要的动画会使人感到困惑或迷茫，特别是在无法提供沉浸式体验的应用程序中。

8. 使动画效果可选。当首选项中启用减少动画选项后，应用程序应最小化或消除应用程序动画。

二、颜色

颜色是提供状态信息、提供操作反馈和可视化数据的好方法。

1. 明智地使用颜色。例如，出于非关键原因在应用程序中的其他位置使用红色时，向人们发出警告的红色三角形会变得无效。

2. 考虑在其他国家和文化中如何使用颜色。

3. 避免使用让用户难以区别的颜色。

4. 在非中性或半透明的背景上显示时，或在非常明亮，彩色的图像附近使用时，颜色可能会失去其影响。

5. 在各种光照条件下测试应用的配色方案。

6. 使用标准颜色面板进行用户自定义颜色更改。标准颜色色板可以使用为自定义颜色，并允许用户保存颜色到常用色板。

# 色彩管理 #

1. 将颜色配置文件应用于图像。标准RGB（sRGB）颜色空间可在大多数显示器上产生精确的颜色。

2. 使用较宽的颜色以增强兼容显示器上的视觉体验。宽彩色显示器支持P3色彩空间，与sRGB相比，它可以产生更丰富，更饱和的色彩，以每像素16位（每个通道）使用Display P3颜色配置文件，并以PNG格式导出图像。

3. 在需要时提供特定于颜色空间的图像和颜色变化。可以在Xcode项目的资产目录中提供不同的图像和颜色，以确保在彩色显示器和sRGB显示器上的视觉保真度。

4. 在实际的sRGB和宽彩色显示器上预览应用的颜色。调整以确保两种类型的显示器具有同等的视觉体验。

5. 在具有宽彩色显示屏的Mac上，可以使用标准颜色面板来选择和预览P3颜色并将它们与sRGB颜色进行比较。

# 系统颜色 #

macOS提供了一系列标准系统颜色，可以自动适应半透明背景以及可访问性设置的更改和环境的变化。

1. 始终使用系统颜色，不要在您的应用程序中对系统颜色值进行硬编码。以下系统颜色的实际的颜色值会根据各种环境变量在而改变。

https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/

# 动态系统颜色 #

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

1. 不要重新定义动态系统颜色的语义含义。为确保一致的体验并适应将来macOS的系统外观变化，请使用动态系统颜色。

2. 不要尝试复制动态系统颜色。

三、深色模式

1. 深色模式应专注于界面的内容区域。

2. 用户可以选择深色模式作为其默认界面样式。

3. 分别在浅色和深色模式中测试界面视觉效果。

4. 半透明效果可增强前景色和背景色之间的对比度，适应这种效果使前景内容更加突出。

# 颜色 #

深色模式下的调色板包括较深的背景色和较浅的前景色。这些颜色不一定是它们对应的颜色的反转。例如，浅色和深色模式都使用深色线条作为分隔线颜色。

1. 当您需要自定义颜色时，可将颜色集资产添加到应用程序的资产目录中，并指定该颜色的明暗变体。

2. 自定义前景色和背景色时，争取7：1的对比度。此比率可确保您的前景内容从背景中脱颖而出，包括启用“桌面着色”时。它还可以确保内容更符合的可识别性原则。至少要确保颜色之间的对比度不低于4.5：1。

3. 柔化白色背景的颜色，可选择稍深的白色。

# 桌面着色 #

深色模式下运行的应用程序得益于桌面着色。“桌面着色”使窗口背景从用户的桌面图片中拾取颜色。帮助窗口与周围的内容更和谐地融合。

1. 在自定义控件颜色中包括一些透明度。透明度可让您的控件拾取由窗口背景和桌面着色赋予的颜色，即使改变桌面背景。

# 图像，图标和字形 #

系统在深色模式下通常使用模板图像。模板图像是具有透明度，抗锯齿并且没有使用蒙版的单色图像。深色模式还使用了许多优化了对比度的全彩色图像。

1. 尽可能使用模板图像。模板图像可适应深色和浅色模式的界面，并且可以充分利用半透明效果。自定义的全彩图像的自适应性难以确定。

2. 必要时使用不同的字形以适应浅色和深色模式的界面。在浅色模式下使用空心轮廓的字形，在深色模式下使用心填充形状会更好。

3. 如果在浅色和深色模式上看起来都不错，请使用相同的组件。如果只适应其中一种，那么更改图像或创建独立的深色和浅色的组件。

# 文字 #

利用饱和度和增强的对比度来保持深色模式时文本的可读性。

1. 使用系统提供的文本标签颜色。主色，次色，三级和四级标签颜色会自动适应浅色和深色模式的界面。

2. 尽量使用系统控件填写静态文本。系统视图和控件中的文本在所有背景上看起来都不错，并可以自动调整。

四、半透明

macOS应用程序通过使用视图和控件来提示位于背景的内容，并使用半透明和模糊来体现深度感。还可以使用动态模糊效果，即通过谨慎地使用明暗技术来动态融合前景色和背景色的效果。这种效果有助于使前景内容在任何背景下都能脱颖而出。

1. 准备使用动态模糊效果。动态模糊会影响所有应用程序，因为默认情况下某些功能（例如菜单）是动态的。

2. 适当时在应用中启用和禁用动态模糊。对于自定义视图和控件，可以选择是否允许使用动态模糊。

3. 首选系统提供的元素和颜色。有些视图根据其颜色自动适应动态模糊。

4. 使用模板图像。

5. 半透明和动态模糊需在视图层次结构中展现视觉效果。

# 背景混合模式 #

1. 窗口后混合。这种混合模式允许窗口后面的内容显示出来。某些界面元素（例如菜单，工作表和侧边栏表）会自动采用此模式，尽管您可以在必要时将其禁用。

2. 窗口内混合。驻留在窗口上的元素采用此混合模式，并允许该元素后面的窗口内容显示出来。工具栏通常实现此模式，并提示滚动在工具栏下方的窗口内容。

# 材质 #

系统提供的材料定义了应用于界面的半透明，模糊和动态值。

1. 材料名称反映了它们的用途，因此请按预期用途使用材料。

2. 使用系统颜色和系统材料。使用系统提供的颜色时，无需担心在不同环境中颜色看起来太暗，明亮，饱和或对比度低。

五、字体

SF是macOS的系统字体，提供合适的可读性，清晰度和一致性。

1. SF Pro Text用于文本19点或更少，SF Pro Display用于文本20点或更大。当您在按钮和标签之类的标准控件中使用SF作为文本时，macOS会根据点大小和用户的可访问性设置自动应用最合适的变体。

2. 使用字体的粗细、大小和颜色强调重要信息。

3. 尽量使用单个字体的变体和大小。

4. 确保自定义字体清晰易读，如在品牌推广或游戏沉浸式体验中。

5. 使用标准的“字体”面板更改用户字体。“字体”面板是人们熟悉的，并且包含用于选择字体和调整属性（如字体，大小和颜色）的控件。

6. 动态系统字体变体使您的文本具有与标准系统提供的控件中显示的文本相同的外观。使用这些变体可获得与平台上其他应用程序一致的外观。

macOS的图标和图像

一、图像尺寸和分辨率

标准分辨率的显示器具有1：1像素密度（或@ 1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度和2.0的比例因子（称为@ 2x）。因此，高分辨率显示器需要有更多像素的图像。

# 设计高分辨率作品 #

1. 以所需的最大尺寸制作插图，然后按比例缩小以缩小尺寸。

2. 使用8px x 8px的网格。网格可以使线条保持清晰，不需要太多的修饰和锐化，确保所有尺寸的内容都尽可能清晰。将图像边界对齐到网格以最小化缩小时可能出现的半像素和模糊细节。

3. 始终以较低的分辨率预览高分辨率图像，在低分辨率时进行修改。

二、应用程序图标

美观、吸引人的启动图标是macOS用户体验的基本组成部分，并且传达应用程序的主要目的。

1. 考虑为您的应用程序图标提供逼真的，独特的形状。可以使用圆形来绘制图标，避免使用与iOS应用程序图标类似z的圆角矩形。

2. 设计一个识别性高的图标。

3. 简化图标并 谨慎添加细节。

4. 设计带有单个中心点的图标，该图标可以立即引起注意并具有清晰的标识性。

5. 如果要创建iOS应用程序的macOS版本，请重新设计macOS版本的应用程序图标。

6. 明智地使用颜色。不要只是为了使图标更明亮而添加颜色,平滑的渐变通常比锐利的颜色轮廓更好。

7. 避免混合实际文本，假文本，波浪线来暗示文字。如果想在图标中加入文字，但又不想把注意力吸引到文字上，那就用实际的文字，通过缩小文字来提高阅读的难度。这种方法仍可以在高分辨率显示器上显示更清晰的细节。如果应用程序是本地化的，那么在特定的语言中，最好选择伪文本或波浪线而不是实际文本。

8. 避免包含照片，屏幕截图或界面元素。如果要将图标基于照片，屏幕截图或界面元素，请设计理想化的版本，以强调您希望人们注意到的特定细节。

9. 不要使用Apple硬件产品的副本。Apple产品受版权保护，不能在您的图标或图像中复制。硬件设计会经常更改，使图标显得过时。

# 透视和纹理 #

1. 设计具有适当角度和逼真的阴影的图标。通过面对对象，位于中心正下方并稍微向上倾斜的相机查看。摄像机的位置应足够远，以使图标接近等轴测图，而不会出现失真。要获得逼真的阴影，想象一个也面向对象但位于中心上方且稍微向下倾斜的光源。

2. 在渲染后旋转图标。少量旋转可以帮助人们将您的应用程序图标与文档和文件夹区分开。旋转9度往往效果很好。

3. 在图标的阴影仅使用黑色。在深色背景下显示时，如果图标的投影使用黑色以外的颜色，则投影看起来更像发光。

4. 准确地描绘真实的物体。逼真的图标应准确地复制织物，玻璃，纸张和金属等物质的特性，以传达物体的重量和感觉。

5. 考虑在图标的边缘内部添加一点光晕。如果应用程序图标包含深色反射表面（例如玻璃或金属），添加内部辉光以使图标突出，并防止其看起来溶解在深色背景中。

# 应用程序图标属性 #

格式：PNG

颜色模式：sRGB

像素：@1x and @2x

形状：方形画布、适当添加透明度

1. 不要以ICNS或JPEG格式提供应用程序图标。

# 应用程序图标大小 #

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

1. 简化较小的尺寸的图标。删除较小的图标中的不必要的特征并夸大主要特征，以保持识别性。任何变化都应该是细微的，以便不同的大小的图标在视觉显示时保持一致。

三、自定义图标

如果你的应用程序包含的任务或模式不能用系统图标表示，或者系统图标与你的应用程序风格不匹配，你可以创建自定义图标。

1. 简洁的，可识别的设计。过多的细节会使图标看起来很粗糙或难以阅读。争取设计一个大多数人能正确理解并且不会觉得冒犯的设计。

2. 保持图标在视觉风格上的一致性。

3. 避免在图标中包含文本。如果需要显示文本，请在图标下方显示文字标签，并放在适当的位置。

4. 不要使用Apple硬件产品的副本。

5. 提供图标名称的替代文本标签。替代文本标签在屏幕上不可见，但是它们可以让VoiceOver以听觉方式识别内容，从而使视力障碍者轻松的导航。

6. 考虑将图标创建为模板图像。模板图像是具有透明性、抗锯齿，未使用蒙版来定义形状的阴影的单色图像。模板图像会根据操作和用户交互自动显示适当的外观，包括着色，高亮显示，包括按钮、分段控件、侧栏和工具栏。

7. 系统会自动缩放基于PDF的图标以显示高分辨率，因此您无需提供高分辨率版本。仅对于需要诸如阴影，纹理和高光之类的效果的复杂设计，才建议使用PNG格式。

8. 如果您的图标为PDF格式，则仅需要@ 1x大小。如果您的图标为PNG格式，则同时需要@ 1x和@ 2x大小。

# 分段控件图标 #

控制尺寸 图标大小（@ 1x） 图标大小（@ 2x）

标准 17px×17px 34px×34px

小 14px×13px 28px×26px

微型 12px×11px 24px×22px

# 侧边栏图标 #

1. 设计具有透明度和适当详细程度的侧边栏图标。侧边栏图标应该是精简的小型模板图像，比工具栏和控件图标具有更多内部细节和真实感。

图标大小（@ 1x） 图标大小（@ 2x）

16px×16px 32px×32px

18px×18px 36px×36px

32px×32px 64px×64px

# 工具栏图标 #

- 工具栏中使用统一的控件图标或独立图标，不能同时使用两者。

- 大多数工具栏中首选控件图标。独立式图标在首选项窗口工具栏中往往更为常见。

- 设计简洁且易于识别的工具栏图标。最好的图标使用熟悉的视觉隐喻，这些隐喻与它们发起的动作直接相关。当图标描述了一个可识别的、现实世界的对象或可识别的应用程序任务时，它会向首次使用它的用户提供有关其功能的线索，并帮助有经验的用户记住它。

- 使工具栏图标清晰且协调。如果图标很容易识别的话，人们会很快记住它的功能和位置，通常以形状和图像的变化作为主要差异因素。整个图标集中保持相似的透视图，大小和视觉权重。

1.  工具栏控件图标

- 尽可能使用系统提供的控制图标。

- 设计具有透明度和适当详细程度的控制图标。控件图标应为精简、流畅轮廓的小型图像。根据需要使用直观透视，抗锯齿和透明度来绘制。

最大大小（@ 1x） 最大大小（@ 2x）

19px×19px 38px×38px

2. 独立的工具栏图标

- 由于独立图标不需要放在控件内，因此您有更多空间来表达概念。保持轮廓清晰并使用合适的颜色（不必统一），根据需要使用直观透视、抗锯齿来绘制。

- 尽管通常应该对独立的工具栏图标使用直接的透视图，但不要重新设计知名界面的工具栏控件。

- 提供PNG格式的全彩独立图标。包括@ 1x和@ 2x版本。

图标大小（@ 1x） 图标大小（@ 2x）

32px×32px 64px×64px

四、多项目拖动图像

通常，显示系统通用的多项目拖动图像，但您应该用适合本应用的设计风格的自定义图像替换它。

1. 理想情况下，应显示拖动内容的实际堆叠效果。

五、系统图标

1. 按图标定义使用系统图标。

2. 提供图标的替代文本标签。

3. 如果找不到满足您需求的系统提供的图标，设计一个自定义图标。

# 控件图标 #

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

1. 仅在带边框的控件中使用控件图标。

2. 通常，使用系统API而不是进入全屏模式和退出全屏模式图标来支持全屏模式。

# 系统功能控制图标 #

以下图标代表系统权限，例如网络和用户的计算机。在大多数情况下，这些实体没有相关的动作。但是，如果您需要表示一个动作（例如创建智能文件夹），则可以在智能文件夹图标上添加加号。

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