颜色是传递活力、提供视觉连续性、传达状态信息、响应用户行为提供反馈、帮助人们数据可视化的绝佳方式。在选择应用色调时，请查看系统的配色方案以寻求指南，无论颜色在浅色还是深色背景上、以独立还是组合的方式存在都很好看。
为了沟通，谨慎地使用颜色。当你谨慎使用颜色时，颜色就拥有了增强重要信息关注度的能力。例如，如果在应用的其他地方随意使用红色，那么作为警告重要问题的红色三角形的影响力就会被削弱。
在整个应用中使用互补颜色。应用中的颜色应该很好地协同工作，而不是相互冲突或分散注意力。例如，如果淡色对应用的样式至关重要，请使用一组协调的淡色。
通常，选择与应用 logo 协调的有限的色板。精妙的色彩使用是传达品牌的好方法。
请考虑选择主色以指示整个应用的交互性。在「备忘录」中，交互元素为黄色。在「日历」中，交互式元素为红色。如果定义表示交互性的色调颜色，请确保其他颜色不会与之冲突。
提供两个版本的色调配色，以确保它在浅色和深色模式下看起来都不错。当你使用系统颜色作为主色调时，你将获得对高对比度的自动支持。
避免交互元素和非交互元素使用相同的颜色。如果交互元素和非交互元素使有相同的颜色，则人们很难知道在哪里可以点击。
考虑图稿和半透明会如何影响附近的颜色。作品的变化有时需要改变周围的颜色，以此来保持视觉持续性，并防止界面元素变得过抢眼或被淹没。例如「地图」中，在使用地图模式时显示浅色配色方案，但在启用卫星模式时切换到深色配色方案。当放置在半透明元素后面或应用于半透明元素（如工具栏）时，颜色也可能显示出不同。
在各种光线条件下测试应用的配色方案。室内和室外的光线差异很大，具体取决于室内环境、一天中的时间、天气等。在现实世界中，应用的颜色并非一直与电脑上的颜色一致。始终在多种照明条件下（包括阳光明媚的室外）预览应用，以查看颜色的表现。如有必要，调整颜色以保证在大多数用例中提供最佳的浏览体验。
考虑「原彩显示」如何影响颜色。原彩显示通过环境光传感器自动调整显示屏的白点，以适应当前环境的照明条件。侧重于阅读、照片、视频和游戏的应用可以通过指定白点适应性样式，来增强或削弱这种效果。有关开发人员指南，请参阅 UIWhitePointAdaptivityStyle。
考虑其他国家和文化会如何看待你对颜色的使用。例如，在某些文化中红色表示危险；在另一些国家，红色具有积极的含义。确保应用中的颜色传达了恰当的消息。
避免在应用中使用让用户难以感知内容的颜色。例如，色盲人员可能无法区分某些颜色的组合，对比度不足会导致图标和文本与背景混合，使内容难以阅读。有关指导，请参阅颜色与对比度。
系统颜色
iOS 提供一系列系统颜色，可自动适应辅助功能设置的鲜明和变化，如增加对比度、降低透明度。系统颜色在浅色和深色的背景下、浅色和深色的模式下，不论单独还是组合形式，都看起来很棒。
不要在应用中硬编码系统颜色值。下面提供的颜色值，用于在应用设计过程中进行参考。实际颜色值可能会根据各种环境变量，每次发布都会进行调整。始终使用 API 来调用系统颜色；有关开发人员指南，请参阅 UIColor。
| 默认 | |||
|---|---|---|---|
| 浅色 | 深色 | 名称 | API |
| R 0 G 122 B 255 |
R 10 G 132 B 255 |
蓝色 Blue | systemBlue |
| R 52 G 199 B 89 |
R 48 G 209 B 88 |
绿色 Green | systemGreen |
| R 88 G 86 B 214 |
R 94 G 92 B 230 |
靛蓝 Indigo | systemIndigo |
| R 255 G 149 B 0 |
R 255 G 159 B 10 |
橙色 Orange | systemOrange |
| R 255 G 45 B 85 |
R 255 G 55 B 95 |
粉色 Pink | systemPink |
| R 175 G 82 B 222 |
R 191 G 90 B 242 |
紫色 Purple | systemPurple |
| R 255 G 59 B 48 |
R 255 G 69 B 58 |
红色 Red | systemRed |
| R 90 G 200 B 250 |
R 100 G 210 B 255 |
蓝绿色 Teal | systemTeal |
| R 255 G 204 B 0 |
R 255 G 214 B 10 |
黄色 Yellow | systemYellow |
| 辅助功能 | |||
|---|---|---|---|
| 浅色 | 深色 | 名称 | API |
| R 0 G 64 B 221 |
R 64 G 156 B 255 |
蓝色 Blue | systemBlue |
| R 36 G 138 B 61 |
R 48 G 219 B 91 |
绿色 Green | systemGreen |
| R 54 G 52 B 163 |
R 125 G 122 B 255 |
靛蓝 Indigo | systemIndigo |
| R 201 G 52 B 0 |
R 255 G 179 B 64 |
橙色 Orange | systemOrange |
| R 211 G 15 B 69 |
R 255 G 100 B 130 |
粉色 Pink | systemPink |
| R 137 G 68 B 171 |
R 218 G 143 B 255 |
紫色 Purple | systemPurple |
| R 215 G 0 B 21 |
R 255 G 105 B 97 |
红色 Red | systemRed |
| R 0 G 113 B 164 |
R 112 G 215 B 255 |
蓝绿色 Teal | systemTeal |
| R 178 G 80 B 0 |
R 255 G 212 B 38 |
黄色 Yellow | systemYellow |
iOS 13 还引入了六种不透明的灰度颜色，你可以在半透明效果不佳的罕见情况下使用。例如，相交或重叠元素，如网格中的线或条形，不透明的效果看起来更好。通常，对 UI 元素使用语义定义的系统颜色。
| 默认 | |||
|---|---|---|---|
| 浅色 | 深色 | 名称 | API |
| R 142 G 142 B 147 |
R 142 G 142 B 147 |
灰色 Gray | systemGray |
| R 174 G 174 B 178 |
R 99 G 99 B 102 |
灰色 Gray (2) | systemGray2 |
| R 199 G 199 B 204 |
R 72 G 72 B 74 |
灰色 Gray (3) | systemGray3 |
| R 209 G 209 B 214 |
R 58 G 58 B 60 |
灰色 Gray (4) | systemGray4 |
| R 229 G 229 B 234 |
R 44 G 44 B 46 |
灰色 Gray (5) | systemGray5 |
| R 242 G 242 B 247 |
R 28 G 28 B 30 |
灰色 Gray (6) | systemGray6 |
| 辅助功能 | |||
|---|---|---|---|
| 浅色 | 深色 | 名称 | API |
| R 108 G 108 B 112 |
R 174 G 174 B 178 |
灰色 Gray | systemGray |
| R 142 G 142 B 147 |
R 124 G 124 B 128 |
灰色 Gray (2) | systemGray2 |
| R 174 G 174 B 178 |
R 84 G 84 B 86 |
灰色 Gray (3) | systemGray3 |
| R 188 G 188 B 192 |
R 68 G 68 B 70 |
灰色 Gray (4) | systemGray4 |
| R 216 G 216 B 220 |
R 54 G 54 B 56 |
灰色 Gray (5) | systemGray5 |
| R 235 G 235 B 240 |
R 36 G 36 B 38 |
灰色 Gray (6) | systemGray6 |
动态系统颜色
除了色调颜色外，iOS 还提供语义定义的系统颜色，用于背景区域和前景内容（如标签、分隔符和填充）。这些颜色会自动适应浅色和深色 UI 模式。
iOS 定义了两组背景颜色：「系统」和「组别」，其中都包含一级、二级、三级变体，帮助你传达信息层次结构。通常，当具有分组表视图时，请使用「组别」背景颜色集，否则，请使用「系统」背景颜色集。有关开发人员指南，请参阅 UI 元素颜色。
使用两组背景颜色集时，通常使用以下列方式使用变体，来指示层次结构：
- 整体视图，使用一级色
- 整体视图中内容或元素的分组，使用二级色
- 二级元素中内容或元素的分组，使用三级色
对于前景内容，iOS 定义以下颜色：
| 颜色 | 应用 | API |
|---|---|---|
| 标签 | 包含主要内容的文本标签 | label |
| 二级标签 | 包含二级内容的文本标签 | secondaryLabel |
| 三级标签 | 包含三级内容的文本标签 | tertiaryLabel |
| 四级标签 | 包含四级内容的文本标签 | quaternaryLabel |
| 占位文本 | 控件或文本视图中的占位文本 | placeholderText |
| 分隔符 | 允许某些下层内容可见的分隔符 | separator |
| 不透明分隔符 | 下层内容不可见的分隔符 | opaqueSeparator |
| 链接 | 用作链接的文本 | link |
不要重新命名动态系统颜色的语义。为了给用户提供一致的体验，并确保界面在任何环境中看起来都很棒，请按预期使用动态系统颜色。
不要尝试复制动态系统颜色。动态系统颜色可能会根据各种环境变量，每次发布都会进行调整。不要尝试创建与系统颜色匹配的自定义颜色，请使用动态系统颜色。
颜色管理
将颜色配置文件应用于图像。iOS 上默认的色彩空间是标准 RGB （sRGB）。为确保颜色与该色彩空间正确匹配，请确保图像包含嵌入的颜色配置文件。
在兼容的显示器下，使用管色域来增强视觉体验。广色域显示器支持 P3 色彩空间，可以产生比 sRGB 更丰富、更饱和的颜色。因此，使用广色域的照片和视频会更加生动，使用广色域的视觉数据和状态指示器也更具影响力。在适当情况下，使用每像素 16 位（每个通道）的 P3 颜色配置文件，然后以 PNG 格式导出图像。请注意，设计广色域图像和选择 P3 颜色需要使用广色域显示器。
当体验需要时，提供特定颜色空间的图像和颜色变化。通常，P3 颜色和图像在 sRGB 设备上通常会按预期显示。但是，有时在 sRGB 中查看两种非常相似的 P3 颜色时，可能很难区分它们。使用 P3 频谱颜色的渐变有时也可能在 sRGB 设备上出现缺失。为了避免这些问题，你可以在 Xcode 项目的资源目录中提供不同的图像和颜色，以保证广色域设备和 sRGB 设备上的视觉保真度。
在实际的 sRGB 显示器和广色域显示屏上预览应用的颜色。根据需要进行调整，以确保在两种类型的显示器上获得同样出色的视觉体验。
提示 在具有广色域显示屏的 Mac 上，你可以使用系统颜色选取器来选择和预览 P3 颜色，并将其与 sRGB 颜色进行比较。
若有收获，就点个赞吧
0 人点赞
