适用于移动设备的 Android 颜色设计

利用颜色来表现风格和传达意义。设置应用的颜色对于个性化、定义语义用途以及品牌身份当然至关重要。

断球数

  • 为确保无障碍,请采取以下措施:
    • 检查色彩对比度,并避免将色调相似的颜色搭配在一起。
    • 请注意,红色和绿色是常见的模式,但某些色盲用户无法访问它们。
  • 练习使用有意义的颜色:应用可以色彩鲜艳、富有表现力,但要坚持使用调色板。使用太多语义颜色扩展架构可能会令人感到困惑,而装饰颜色过多可能会让人不知所措。
  • 颜色可能会有模式,因此请重复既定的颜色模式。如果在应用中使用语义颜色,请使用一致的颜色。
  • 为了让应用能够在不同的上下文中正常运行,请构建浅色和深色配色方案(最好是对比主题)。
  • 使用令牌分配颜色以指示元素的颜色角色,而不是使用硬编码值。
  • 颜色可能来自各种动态和静态来源,但应避免在同一视图中混合过多颜色。
  • 使用动态内容颜色时,请尽量避免从多个内容片段中提取颜色。

Android 上的颜色空间

为了正确了解 Android 如何将颜色应用于界面,必须先识别颜色在设备上的显示方式。

设备上如何显示颜色

您的应用显示在背光屏幕上,该屏幕使用数字颜色,并遵循某些模型和规则,帮助我们的眼睛感知颜色。数字色彩是“累加色”,它通过“加入”或混合不同的光来创造出完整的色谱。人类感知不同屏幕颜色的方式可能会因设备的颜色校准、屏幕类型、设置和颜色空间而异。

在设计应用时,请考虑到使用颜色可能会因这些因素而不一致,更不用提个别用户的独特颜色感知。

颜色空间简介

颜色空间是使用颜色模型的颜色组织。RGB 是一种累加颜色模型,可通过红色、绿色和蓝色创建色谱,而用于打印的 CMYK 则是减法。因此,交互设计人员通常使用 RGB 或类似模型来选择颜色。

Material 3 (M3) 引入了 HCT,这是一种新的颜色空间,使用色调、色度和色调来定义相较于 HSL 等其他模型在感知上准确的颜色

如需详细了解 HCT 的颜色科学和发展,请阅读颜色和设计的科学

色调、色度和色调

图 1 :直观呈现的色相、色度和色调。

HCT 允许更个性化、更灵活地使用系统参数范围内的颜色。HCT 使用色调、色度和色调对颜色建模:

  • 色相:色相类似于个人用户用来描述颜色的形容词,例如“红色”或“电紫罗兰”。色相的 HCT 值介于 0-360 之间。
  • 色度:色度表示颜色的色彩性,从中性灰色到完整的鲜艳程度。在 HCT 颜色空间中,色度的最大值约为 120 左右。
  • 色调:色调是颜色的亮度或亮度。HCT 使用语气创建对比。在某些无障碍上下文中,无法使用设置为同一色调值的颜色。色调值越低,色调越暗,色调值越高,色调越亮。

颜色系统进程

M3 颜色基于 HCT 模型构建,以打造和谐的无障碍配色方案并帮助动态配色功能。M3 颜色系统从源颜色开始。此源颜色会转换为五种关键颜色:主色、辅色、第三色、中性色和中性变体。这五种关键颜色构成的调色板由每种关键颜色的色调递增组成。

在此处插入替代文本
图 2. 从一种源颜色生成方案时,系统会修改其 HCT 以创建五种关键颜色。然后,系统会将特定的色调值分配给某个配色方案。

如果您手动分配关键颜色,请注意输入的色度和色调,因为颜色的色调可能不是颜色角色的色调值。

在此处插入替代文本
图 3. 输入颜色,显示 HCT 值。 虽然色调保持不变,但输入颜色的色调为 86,因此它将接近主要容器输入,而不是主要容器。

M3 颜色系统由 Material 颜色实用程序 (MCU) 提供支持。MCU 是一组包含算法和实用程序的颜色库,可让您更轻松地在应用中开发颜色主题和方案。

以下视频介绍了如何派生配色方案。

颜色限制

颜色限制就是颜色的物理限制 - 无论是实际物理学上的限制、我们自己的生物视觉限制,还是屏幕上颜色渲染的局限性。例如,某些色调无法与某些色度或色调一起存在。颜色限制是浅蓝色或亮浅红色等颜色不太可行的原因。色调颜色映射必须在所有色调值之间保持一致。

图 4 :H105、H25 和 H285 值的色调映射图表。

上图显示了 H105、H25 和 H285 色调值的三种不同的色调映射图表。

  • 图表 1-色调 105(黄色)。指示可用的颜色。色度和色调的作用就像一个图表黄色色调在图表上的色度有限,具有某些色调,黄色在较低色调时没有广泛的明艳度。

  • 图表 2-色调 25(红色)。显示比色调 105(黄色)更多色度选项。 在此色调映射中,最高色彩对应的点位于较低的色调级别。

  • 图表 3-色调 285(蓝色)。该图显示在颜色更深的色调中,颜色最鲜艳。另一方面,色度容量会在色调较浅时丢失。

配色方案

配色方案是一组从特定色调衍生并分配给颜色角色的强调色和 Surface,这些角色随后会映射到界面元素和组件。颜色角色指的是颜色的用途,而不是颜色的色调。例如,使用 on-primary 而非 on-blue。

配色方案设计得和谐、确保文字清晰易读,并且能够区分界面元素和界面。颜色角色对(由容器和容器角色组成)具有可提供可访问的对比度的色调值。

图 5 :配色方案由源自特定调色板索引的多个颜色组和配对组成。

系统会创建浅色和深色方案,并且具有各自的特定色调分配。

Material 颜色系统和自定义方案提供颜色默认值,作为自定义的起点。

详细了解 M3 颜色系统

图 6 :M3 浅色配色方案。

如需了解可自定义的配色方案,请探索 Android UI Kit

将颜色应用到界面

界面颜色由强调色、语义颜色和 Surface 颜色组成。

  • 强调色是指通常属于 Android 品牌调色板的核心颜色。
  • 语义颜色(或 Material 3 中的自定义颜色)是具有特定含义的颜色。
  • Surface 颜色是指用于背景颜色的任何中性派生颜色。

强调色

强调色在界面中通常能够表现出最强烈的表现,无论是品牌宣传、突出显示操作、表达个人风格还是表达用户表达。

每种强调色(主色、辅色和第三色)都是由 4 到 8 种不同色调的兼容色提供的,用于配对、定义强调效果和视觉表现。

动态配色

强调色可以通过动态来源定义。

从 Android 12(API 级别 31)开始,动态配色允许系统从用户的壁纸或应用内内容(如 Keyart 资源)中提取源颜色。动态配色使用 MCU 算法和流程来创建方案,并毫不费力地实现这些方案。如需将动态配色应用于您的应用,请阅读允许用户在应用中对颜色体验进行个性化设置

试用可视化动态配色 Codelab,亲身体验动态配色。

图 7 :从单一源颜色派生的应用颜色。

静态

静态架构是具有不变(或相对)值的架构。创建静态配色的常见方法是使用品牌颜色,使主色、辅色和第三色与品牌的主调色板保持一致。

即使您使用的是动态配色,我们也强烈建议您在动态配色不适用于用户设备时创建静态方案作为后备方案。否则,系统将使用基准紫色配色方案。

借助 Material Theme Builder,您可以应用 MCU 颜色算法来生成静态的自定义主题。这样会生成您选择的颜色,但这些颜色与 M3 颜色系统令牌和和谐的无障碍原则保持一致。

您仍然可以创建完全自定义的静态架构。为此,请在颜色样式(color.ktcolor.xml)中分配不同的值,或在更新 Figma 样式属性后从适用于 Figma 的 Material Theme Builder 中导出主题文件。

在此处插入替代文本
图 8. 一个应用的颜色源自经过解释的关键颜色输入(左侧),以及完全自定义的静态方案(右侧)。

用法

Material 组件具有预先分配的颜色角色,但您可以在整个界面和自定义元素中使用颜色令牌。谨慎使用所有强调色,请注意人眼对鲜艳的颜色尤其吸引人。

在此处插入替代文本
图 9. 人类的眼睛将冷却鲜艳的色彩对象视为前景对象。

与类型一样,系统会在层次结构中应用颜色,为关键号召性用语 (CTA) 分配主要颜色及其各自的角色。我们建议让悬浮操作按钮 (FAB) 等组件担任主要角色。

在选择主要颜色时,最好为品牌分配主要颜色。或者,您也可以选择一种颜色来表示交互式组件,以便更谨慎地使用您的品牌颜色。次要和第三色继续沿着突出显示重要性的层次结构向下延伸。

在此处插入替代文本
图 10. 在主要控件中使用的应用中采用强调色。

过饱和外观可能导致仅使用主要、次要或第三色的基础颜色角色。为了有助于改善颜色层次结构,请应用配色方案,以包含不太鲜艳的容器颜色和轮廓角色。

为确保更好的用户体验,请使用更鲜艳的主色,以表示在应用视觉层次结构中更加显眼的操作。在下图中,第一张图片中的 FAB 采用柔和的颜色,具有与导航相同的色调和色度,因此能够与导航元素融为一体。第二张图片展示了一个 FAB,它使用鲜艳的原色吸引更多关注自身。

在此处插入替代文本
图 11. 一个具有柔和颜色且与界面融为一体的 FAB(左),以及一个使其突出的鲜亮颜色的 FAB(右)。

如需亲身体验动态配色,请参考自定义 Material 颜色 Codelab。

语义颜色

语义颜色是指被赋予特定含义的颜色。例如,Error 是一种语义颜色。

在此处插入替代文本
图 12. 红绿灯是语义颜色的一个示例。(属性:Jonny RogersUnsplash

与颜色的含义保持一致 - 如果您建立了一种模式,则在整个应用中重复该模式。例如,如果您确定了紫色来指示会员功能,请为此会员功能的所有实例使用紫色。

在以下示例中,应用使用红色来指示一个文本字段中存在错误,但在另一个文本字段中使用紫色来指示错误,这会导致用户浏览表单时感到困惑。

图 13 :文本错误颜色一致性不佳的示例。

虽然 Material 配色方案提供了语义 error 颜色,但其他语义颜色是通过自定义颜色创建的,以扩展您的配色方案。详细了解自定义颜色

在此处插入替代文本
图 14. 语义颜色应用:提醒用户紧急任务的应用

协调功能提供了一种方式,可将用户生成的动态颜色与应用内的自定义颜色对齐,从而打造出更协调的调色板。

Surface 颜色

Surface 颜色是专为组件容器、工作表和窗格等背景元素设计的,代表应用的大部分颜色。不要害羞,使用大量表面空间;人眼需要空间来放松。 Surface 还有助于包含内容并引导读取器。

M3 引入了色调 Surface 的概念,这意味着所有颜色都派生自色调调色板。色调可以产生深度和更高的对比度,以帮助无障碍。如需详细了解 surface 角色,请参阅 Surface 角色 M3 指南

在此处插入替代文本
图 15.在应用中使用 surface。

无障碍功能和颜色

根据视敏度的不同,人们看颜色的方式多种多样。由于某些阅读器具有色盲,因此您需要检查颜色组合,以确保界面元素不会混合在一起。虽然不透明度和粗细可能不是颜色的字面值,但它们对用户感知颜色的方式具有强大的视觉效果。

颜色对比度是前景元素和背景元素的亮度差,以比率格式表示。该比率标准用于评分。例如,测量按钮上的文字与其容器之间的对比度有助于确定文字的易读性。颜色对比度指南分为文本和非文本,每类都有自己的一套等级。如需了解详情,请阅读使用易于使用的颜色进行设计

切勿将颜色设为可用操作的唯一可供性或指示符。利用组件按钮、更改字体粗细甚至图标来帮助告知用户他们可以与该元素互动。

在此处插入替代文本
图 16.颜色对比度

实现颜色

词元是设计数据的小型可变语义表示法。它们可重复使用,并用不言自明的名称替换静态值(例如颜色的十六进制代码)。如需分配元素的颜色角色,请使用令牌,而不是硬编码的颜色值。

如需查看颜色角色映射的示例,请参阅 Now in Android Figma 示例

图 17 :已分配令牌的界面

颜色值是使用 Compose 在颜色文件 color.kt 中设置的(或者使用 color.xml 在 View 中设置)。这些作为样式设置的颜色是主题的一部分。如需了解详情,请参阅 Design for Android 移动设备主题

如需在 Android 上设置颜色值,请使用十六进制代码,以 6 位格式表示 RGB。如需拍摄不透明度,请将值附加到前面以生成 8 位代码。

使用 Material Theme Builder:

您可以使用 Material Theme Builder (MTB) 创建自定义浅色和深色配色方案。

MTB 可让您直观呈现动态配色、生成 Material Design 令牌,以及自定义配色方案。

您可以通过更新 Figma 检查器面板中的样式属性来完全自定义配色方案。系统会导出这些修改后的值。

图 18 :自定义样式属性并导出配色方案。(在设计套件的“设置”中启用状态层)。或者下载颜色文件,以便使用导出功能分配颜色值。