使用颜色来表达风格和传达含义。设置应用的颜色对于实现个性化、定义语义用途,当然还有定义品牌形象至关重要。
要点总结
- 为确保无障碍使用,请执行以下操作:
- 检查颜色对比度,避免搭配色调相似的颜色。
- 请注意,红色和绿色是常见的图案,但对于患有某些类型色盲的用户来说,它们不可用。
- 练习有意义地使用颜色:应用可以色彩鲜艳且富有表现力,但应坚持使用一种配色方案。使用过多语义颜色来扩展方案可能会造成混淆,而装饰性颜色过多可能会让人眼花缭乱。
- 颜色可以有图案,因此请重复已建立的颜色图案。如果在应用中使用语义颜色,请使用一致的颜色。
- 为了让应用能够在不同的情境中正常运行,请构建浅色和深色配色方案(最好是对比主题)。
- 使用令牌分配颜色以指明元素的颜色角色,而不是使用硬编码值。
- 颜色可以来自各种动态和静态来源,但避免在同一视图中混合使用过多颜色。
- 使用动态内容颜色时,请尽量避免从多个内容片段中提取颜色。
Android 上的色彩空间
为了正确了解 Android 如何将颜色应用于界面,请务必先了解颜色在设备上的显示方式。
设备上的颜色显示方式
您的应用会显示在背光屏幕上,该屏幕使用数字颜色,并遵循有助于我们的眼睛感知颜色的特定模型和规则。数字颜色是加色法颜色,通过“添加”或混合不同光线来创建完整的色谱。人眼对不同屏幕颜色的感知方式可能差异很大,具体取决于设备的色彩校准、屏幕类型、设置和颜色空间。
在设计应用时,请考虑由于这些因素,所使用的颜色可能不完全相同,更不用说各个用户的独特色彩感知。
颜色空间简介
颜色空间是使用颜色模型对颜色进行的组织。RGB 是一种加色模式,可通过红色、绿色和蓝色来创建颜色光谱,而用于打印的 CMYK 则是一种减色模式。因此,交互设计师通常使用 RGB 或类似模型来选择颜色。
Material 3 (M3) 引入了 HCT,这是一种新的颜色空间,它使用色相、色度和色调来定义颜色,与 HSL 等其他模型相比,感知上更准确
如需详细了解 HCT 的颜色科学和发展,请参阅颜色与设计科学。
色相、色度和色调
HCT 可让您在系统参数范围内更个性化、更灵活地使用颜色。HCT 使用色调、色度和色相来对颜色进行建模:
- 色调:色调类似于个人用户可能用来描述颜色的形容词,例如“红色”或“电光紫”。色相的 HCT 值介于 0 到 360 之间。
- 色彩饱和度:色彩饱和度表示颜色的鲜艳程度,范围从中性灰色到完全鲜艳。在 HCT 颜色空间中,色度值的最大值约为 120。
- 色调:色调是指颜色的亮度。HCT 使用色调来营造对比度。设置为相同色调值的颜色在某些无障碍环境中无法访问。值越低,色调越深;值越高,色调越浅。
色彩系统流程
M3 颜色基于 HCT 模型构建,可派生出协调且易于使用的配色方案,并有助于实现动态配色功能。M3 颜色系统从源色开始。此源色会转换为五种关键颜色:主色、辅色、第三色、中性色和中性色变体。这五种关键颜色可用于创建色调调色板,其中每个关键颜色由色调递增组成。
如果您手动分配主色,请记下输入的色度和色调,因为颜色的色调可能不是颜色角色的色调值。
M3 颜色系统由 Material 颜色实用程序 (MCU) 提供支持,这组颜色库包含算法和实用程序,可让您更轻松地在应用中开发颜色主题和配色方案。
以下视频介绍了如何派生配色方案。
颜色限制
颜色限制是指颜色的物理限制,无论是实际的物理限制、我们自身的生物视觉限制,还是屏幕上颜色渲染的限制。例如,某些色相无法与特定的色度或色调搭配使用。由于颜色限制,我们无法提供浅蓝色或亮浅红色等颜色。色调颜色映射必须在所有色相值中保持一致。
上图显示了 H105、H25 和 H285 色相值的三种不同色调映射图表。
图表 1 - 色调 105(黄色)。指示颜色的可用性。色度和色调的运作方式类似于图表。黄色色相在图表中具有特定色调的色度有限,在较低色调下,黄色没有广泛的鲜艳度。
图表 2 - 色相 25(红色)。比色相 105(黄色)显示更多色彩选项。 在此色调映射中,色彩最丰富的点位于较低的色调级别。
图表 3 - 色相 285(蓝色)。显示在更深的色调下,色彩饱和度最高。另一方面,色调越浅,色度容量就越小。
配色方案
配色方案是一系列派生自特定色调并分配给颜色角色的强调色和表面色,这些颜色角色随后会映射到界面元素和组件。颜色角色是指颜色的用途,而不是颜色的色相。 例如,on-primary 而非 on-blue。
配色方案旨在营造和谐的视觉效果、确保文本易于访问,并使界面元素和 Surface 彼此区分开来。颜色角色对(由容器角色和容器内角色组成)具有可提供方便轻松查看的对比度的色调值。
系统会创建浅色和深色方案,并为其分配各自的特定色调。
Material 颜色系统和自定义方案为颜色提供了默认值,可作为自定义的起点。
详细了解 M3 颜色系统。
如需使用可自定义的配色方案,请探索 Android 界面套件。
为界面应用颜色
界面颜色由强调色、语义色和 Surface 颜色组成。
- 强调色是指通常属于 Android 品牌配色方案的核心颜色。
- 语义颜色(或 Material 3 中的自定义颜色)是具有特定含义的颜色。
- Surface 颜色是指用于背景颜色的任何中性派生颜色。
强调色
强调色通常在界面中最具表现力,无论是用于品牌宣传、突出显示操作、个人表达还是用户表达,都是如此。
每种强调色(主色、辅色和第三色)都会提供四到八种不同色调的兼容色,以便进行配对、定义强调效果和视觉表现。
动态配色
您可以从动态来源定义强调色。
从 Android 12(API 级别 31)开始,借助动态配色功能,系统可以从用户的壁纸或应用内内容(例如关键海报素材资源)中提取源颜色。动态配色使用 MCU 算法和流程来创建方案,并轻松实现这些方案。如需向应用应用动态配色,请参阅让用户在您的应用中自定义颜色体验。
试用直观呈现动态配色 Codelab,以便动手了解动态配色。
静态
静态方案是指值不变(或相对不变)的方案。创建静态配色方案的常用方法是使用品牌颜色,将主色、辅色和第三色与品牌的主调色板保持一致。
即使您使用的是动态配色,如果用户设备不支持动态配色,我们也强烈建议您创建静态配色方案作为后备方案。否则,系统会使用基准紫色配色方案。
使用 Material 主题构建器,您可以应用 MCU 颜色算法来生成静态自定义主题。这样,系统会生成您选择的颜色,但这些颜色符合 M3 颜色系统令牌和协调的无障碍原则。
您仍然可以创建完全自定义的静态架构。为此,请在颜色样式 (color.kt
或 color.xml
) 中分配不同的值,或者在更新 Figma 样式属性后,从 Material Theme Builder 中导出适用于 Figma 的主题文件。
用法
Material 组件具有预先分配的颜色角色,但您可以在整个界面和自定义元素中使用颜色令牌。谨慎使用所有强调色,并注意人眼对鲜艳色彩的特别偏好。
与类型一样,系统会以层次结构的形式应用颜色,主色及其各自的角色会分配给关键号召性用语 (CTA)。建议让悬浮操作按钮 (FAB) 等组件充当主要角色。
选择主色时,最好指定品牌的主色。或者,您也可以选择一种颜色来表示交互组件,以便更谨慎地使用品牌颜色。辅色和第三色在突出显示重要性层次结构中继续向下排列。
过饱和的效果可能会导致仅使用主色、辅色或第三色的基本颜色角色。为了帮助您确定颜色层次结构,请应用配色方案,以包含不太鲜艳的容器颜色和轮廓角色。
为了确保提供更好的用户体验,请在应用的视觉层次结构中使用更鲜艳的基本色来表示更重要的操作。在下图中,第一个图片中的 FAB 采用与导航栏相同的色调和色相的柔和色彩,使其融入其中。第二张图片显示了一个 FAB,它使用鲜艳的原色来吸引更多注意力。
如需动手了解动态配色,请试用自定义 Material 配色的 Codelab。
语义颜色
语义颜色是指被赋予特定含义的颜色。例如,错误就是一种语义颜色。
颜色含义应保持一致 - 如果您确定了一种模式,请在整个应用中重复使用该模式。例如,如果您已确定使用紫色来表示会员功能,请对此会员功能的所有实例使用紫色。
在以下示例中,应用使用红色来指示一个文本字段中的错误,但使用紫色来指示另一个文本字段中的错误,这会在浏览表单时造成混淆。
虽然 Material 配色方案提供了语义 error 颜色,但您还可以通过自定义颜色创建其他语义颜色,以扩展配色方案。详细了解自定义颜色。
协调提供了一种方法,可将用户生成的动态颜色与应用中的自定义颜色保持一致,以创建更协调的调色板。
Surface 颜色
表面色专为背景元素(例如组件容器、工作表和窗格)而设计,代表了应用的大部分颜色。不妨大胆使用大量表面空间;人眼需要空间来放松。 Surface 还有助于容纳内容和引导读者。
M3 引入了色调 Surface 的概念,这意味着所有颜色都派生自色调调色板。色调可营造深度感并提高对比度,从而提高易用性。如需详细了解 Surface 角色,请参阅 Surface 角色 M3 指南。
无障碍功能和颜色
根据视敏度的不同,人们看颜色的方式有所不同。由于部分读者是色盲人士,因此您需要检查颜色组合,以确保界面元素不会混合在一起。虽然严格来讲不透明度和粗细可能不是颜色的色相,但它们对用户感知颜色具有很强的视觉影响。
颜色对比度是前景元素和背景元素的亮度差值,以比率格式表示。此比率标准定义了等级。例如,测量按钮上的文本与其容器之间的对比度有助于确定文本的易辨性。颜色对比度参考值分为文本和非文本两个方面,每个方面都有自己的一组等级。如需了解详情,请参阅采用易于使用的颜色进行设计。
切勿将颜色作为可用操作的唯一提示或指示器。 利用组件按钮、更改字体粗细,甚至使用图标,帮助用户了解他们可以与元素互动。
实现颜色
令牌是设计数据的小变量语义表示法。它们是可重复的,并会将静态值(例如颜色的十六进制代码)替换为一目了然的名称。如需为元素分配颜色角色,请使用令牌,而不是硬编码的颜色值。
如需查看颜色角色映射示例,请参阅 Now in Android Figma 示例。
颜色值是在颜色文件 color.kt
中使用 Compose(或使用 View 的 color.xml
)设置的。设置为样式的这些颜色属于主题的一部分。如需详细了解,请参阅设计 Android 移动主题。
如需在 Android 上设置颜色值,请使用十六进制代码,该代码以 6 位数的格式表示 RGB。如需捕获不透明度,请将该值附加到前面,以形成一个 8 位数的代码。
使用 Material Theme Builder:
您可以使用 Material Theme Builder (MTB) 创建自定义浅色和深色配色方案。
借助 MTB,您可以直观呈现动态配色、生成 Material Design 令牌,以及自定义配色方案。
您可以通过更新 Figma 检查器面板中的样式属性,完全自定义配色方案。系统会导出这些经过修改的值。