视觉设计之 Color

Color 颜色

色彩是传递活力的好方法，提供视觉的连续性，传达状态信息，反馈用户的行为，帮助人们可视化数据。在系统的颜色方案中，当你选择颜色的时候，在光线和黑暗的背景下看起来都很好。

color_1.png

Use color judiciously for communication.
明智地使用颜色进行交流。
当使用较少的时候，颜色的力量唤起人们对重要信息的关注。例如，一个红色三角形警告人们，在应用程序中使用红色时，关键问题会变得不那么有效。

Use complementary colors throughout your app.
在你的应用中使用互补色。
你的应用程序的颜色应该配合得很好，而不是冲突或分散注意力。例如，如果彩色粉笔对你的应用程序的风格很重要，那就使用一套协调的彩色粉笔。

In general, choose a limited color palette that coordinates with your app logo.
一般来说，选择一个有限的调色板与你的应用标志。
微妙地使用颜色是一个很好的方式来传达你的品牌。

Consider choosing a key color to indicate interactivity throughout your app.
考虑选择一种关键颜色来表示整个应用程序的交互性。
在Notes中，交互元素是黄色的。在日历中，交互元素是红色的。如果你定义了一个关键的颜色，表示交互性，确保其他颜色不与它竞争。

Avoid using the same color for interactive and noninteractive elements.
避免在交互和非交互元素中使用相同的颜色。
如果交互和非交互元素具有相同的颜色，那么人们很难知道在哪里可以使用。

color_2.png

Consider how artwork and translucency affect nearby colors.
考虑一下艺术品和半透明如何影响附近的颜色。
艺术品的变化有时会使附近的颜色发生变化，以保持视觉的连续性，并防止界面元素变得过于强大或平庸。例如，地图在使用地图模式时显示了一种浅色方案，但当卫星模式被激活时，它会切换到暗色调模式。当放置在半透明的元素后面，或者应用到一个半透明的元素(比如工具栏)时，颜色也会出现不同。

Test your app’s color scheme under a variety of lighting conditions.
在各种光照条件下测试你的应用程序的配色方案。
室内和室外的照明都有很大的变化，根据房间的气氛、时间、天气等等。当你的应用在现实世界中使用时，你在电脑上看到的颜色并不总是相同的。经常在多种光照条件下预览你的应用，包括在晴天的户外，看看颜色是如何出现的。如果需要的话，调整颜色以提供大多数用例中最好的观看体验。

Consider how the True Tone display affects color.
考虑一下真正的音调是如何影响颜色的。
真正的色调显示使用环境光传感器自动调整显示的白点以适应当前环境的照明条件。主要关注阅读、照片、视频和游戏的应用程序可以通过指定白点自适应风格来增强或减弱这种效果。
开发人员请参考 Information Property List Key Reference.

Be aware of colorblindness.
注意色盲。
例如，许多色盲的人很难分辨红色和绿色(或者灰色的颜色)，或者橙色的蓝色。避免使用这些颜色组合作为区分两个状态或值的唯一方法。例如，您可以使用红色方块和绿色圆圈，而不是使用红色和绿色圆圈表示脱机和联机。一些图像编辑软件包括可以帮助你证明色盲的工具。

Consider how your use of color might be perceived in other countries and cultures.
考虑一下你的颜色在其他国家和文化中是如何使用的。
在某些文化中，红色代表危险。在另一些国家，红色具有积极的含义。确保应用程序中的颜色发送适当的信息。

Use sufficient color contrast ratios.
使用足够的颜色对比度。
你的应用程序的对比度不足会让所有人都难以阅读。例如，图标和文本可能与背景混合在一起。一个在线颜色对比计算器可以帮助你准确分析你的应用的颜色对比，以确保它符合最优标准。争取最小对比度为4.5:1，尽管7:1是首选，因为它符合更严格的可访问性标准。

Color Management 颜色管理

Apply color profiles to your images.
将颜色配置文件应用于图像。
iOS中默认的颜色空间是标准RGB (sRGB)。为了确保颜色正确匹配这个颜色空间，请确保您的图像包含嵌入的颜色配置文件。

Use wide color to enhance the visual experience on compatible displays.
使用更宽的颜色来增强兼容显示器的视觉体验。
宽颜色显示支持P3颜色空间，它可以产生比sRGB更丰富、更饱和的颜色。因此，使用宽颜色的照片和视频更加逼真，使用宽颜色的视觉数据和状态指示器更有影响力。在适当的时候，使用显示P3颜色配置文件16位每像素(每个通道)和导出图像。png格式。请注意，要设计宽颜色的图像并选择P3颜色，需要使用宽颜色显示。

Provide color space-specific image and color variations when the experience calls for it.
当需要时，提供颜色空间特定的图像和颜色变化。
一般来说，P3的颜色和图像在sRGB设备上往往会出现。然而，有时在sRGB设备上出现两种非常相似的P3颜色时，可能很难区分。在P3频谱中使用颜色的渐变有时也会出现在sRGB设备上。为了避免这些问题，您可以在Xcode项目的资产目录中提供不同的图像和颜色，以确保在宽颜色和sRGB设备上的视觉逼真度。

Preview your app’s colors on actual sRGB and wide color displays.
在实际的sRGB和宽颜色显示器上预览应用程序的颜色。
根据需要进行调整，以确保在两种类型的显示器上都有同样出色的视觉体验。

TIP
在mac上使用宽颜色显示器，你可以使用系统颜色选择器来选择和预览P3颜色，并与sRGB颜色进行比较。

免责声明：以上内容均来自官方文档 iOS 设计指南 ，在 有道翻译 的基础上进行修改整理，仅用于个人学习。因个人水平有限，如果存在错误，请读者谅解并指出，非常感谢！