Material Design es el sistema de diseño expresivo y adaptable de Google que incluye principios de diseño, componentes y herramientas que permiten prácticas recomendadas en el diseño de interfaz de usuario. Material Design es de código abierto y proporciona una gran biblioteca de componentes personalizables para una variedad de necesidades de estilo y marca, lo que ayuda a su equipo a crear experiencias digitales de alta calidad en Android, Flutter y la web.
En I/O 2021 , mostramos una evolución audaz y expresiva de Material Design. Basado en los colores primarios y secundarios de Material Design, Material Design 3 presenta colores terciarios y ranuras de color adicionales para verificar la accesibilidad y garantizar la armonía de la pantalla. En este artículo, le mostraremos más sobre la concordancia dinámica de colores de Material You, incluido qué es la concordancia dinámica de colores y cómo implementarla en su aplicación.
Si prefiere ver esto a través de un video, haga clic aquí para verlo.
Coincidencia dinámica de colores
Material You redefine el color en una experiencia más personalizada con combinación dinámica de colores. Entonces, ¿qué es la combinación dinámica de colores? Android 12 puede seleccionar valores de color a través de un algoritmo de extracción de coincidencia de color dinámico. Basado en la coincidencia de color dinámica, puede generar una paleta de colores personalizada basada en el color del fondo de escritorio del usuario. Los esquemas dinámicos de luz y oscuridad se pueden implementar en toda la interfaz del sistema de usuario, así como en algunas aplicaciones. Estos esquemas se cambiarán o ajustarán según las preferencias del usuario y las necesidades visuales. La combinación dinámica de colores es un sistema algorítmico que admite una experiencia de color personalizada al tiempo que respeta los colores que encarnan la identidad de la marca o tienen significados tradicionales, como el verde para "Ir" y el rojo para "Alto".
△ La combinación dinámica de colores puede extraer el color principal del fondo de pantalla
El principio de la combinación dinámica de colores.
Primero, extrae un color de origen del fondo de pantalla del usuario, infiere cinco colores clave y luego convierte cada color clave en una paleta de 13 tonos. A continuación, asigna un conjunto específico de roles y valores al color elegido de la paleta y mapea esos roles y valores a los componentes que llamamos "esquemas".
△ Extrae colores clave del fondo de pantalla
△ Generar paleta a partir de colores clave
esquema de color
Se puede pensar en un esquema de color como un conjunto de tonos relacionados unidos, en lugar de un conjunto de valores fijos. Cada tono genera un conjunto de esquemas claros y oscuros que se cambiarán o ajustarán según las preferencias y necesidades visuales. Los colores de error también se asignan automáticamente a las ranuras de color correspondientes. Cada rol de color que necesita una interfaz pasa por este proceso: derivado de los colores clave a través del contraste apropiado entre los elementos. Estos roles de color son lo que desea asignar en su diseño.
△ Combinaciones de colores claros y oscuros de diferentes colores
Es posible que ya esté familiarizado con las ranuras de 12 colores actuales, como los tonos Primario y En primario. En Material Design 3 (o M3 para abreviar), introdujimos nuevas paletas de colores y roles en el esquema de diseño, puede usar los colores del contenedor y sus correspondientes colores en el contenedor para las interfaces que no necesitan tanto énfasis como los elementos que no son del contenedor. . Además, la nueva paleta de colores Terciary se utiliza para brindar una gama más amplia de expresión de color a sus productos.
△ Ranuras de color contenedor y terciario añadidas
Simbólico
El uso de coincidencia de color dinámica significa que necesitamos construir la interfaz con valores que cambian en tiempo de ejecución, lo que requiere que nos refiramos a los colores basados en la semántica en lugar de valores codificados. Entonces, ¿cómo hacer esto posible? La forma es usar Token. Basado en los roles de color de Material Design 2, Token proporciona una ranura de color de estilo global, que puede ayudarlo a cambiar las asignaciones de roles de acuerdo con las cascadas de colores.
△ Usando Token en la interfaz
Token 可以有多种类型，它可以与某个值配对或引用另一个 Token。在使用了 M3 后，我们就有了调色板、色彩引用和系统 Token 三个概念。您创建的颜色角色是系统 Token，它们可以继承我们在调色板中引用的 Token，包括 Primary、Secondary、Tertiary、Neutral、Neutral Variant 以及 Error 颜色。
设计 Token 使得整个产品更具灵活性和一致性，它允许设计师们为界面中元素指定颜色角色，而非设定一个用于实现的值。生成设计 Token 时可通过确定一个单一事实来源，来节省开发者和设计师的时间。例如，开发者可以引用设计 Token 文件以映射到 Compose 中的主题对象；而如果您在代码中更改了 Token，则可以与设计师共享这些更改，以便设计师在其设计中更新这些值。
△ 使用 Token 为界面元素指定颜色角色
通过使用 Token 替代颜色和排版的硬编码值，您可以更轻松地对设计进行迭代。色调调色板中的颜色可通过设计 Token 映射到浅、深色彩方案中，同时颜色方案的值也可以被重写，以便继承自定义颜色或其他色彩引用的 Token。
△ 色值、调色板及系统颜色 Token 间的映射关系
您可以利用这些带有 Token 的颜色映射，将用户生成的颜色转变为动态且富有表现力的界面。当系统颜色在运行过程中发生变化时便会更新调色板以及配色方案，而后者便是您映射到主题背景和组件的配色方案。在相应的组件上使用正确的颜色规则，以确保可以无障碍访问和风格的连续性，这是至关重要的一点。
△ 相同的 Token，不同的色值
无障碍访问
但是这些 Token 本身如何确保色彩的无障碍访问？由于配色方案是由调色定义的，而非色调或十六进制值，所以，为了使任何配色方案在默认情况下均可满足无障碍访问，颜色组合要基于亮度来满足无障碍使用的标准。
△ 颜色组合需要基于亮度来满足无障碍访问
如下图所示，在亮度接近时，尽管两种颜色的色调并不相同，但调色却非常相似。这样的色彩组合使得对比度过低，而对于有一定程度色盲的人来说更是如此。如果对组件应用这样的色彩组合，则会导致无法满足无障碍访问。因此，为了保证颜色在无障碍层面的可及性，所有成对颜色均存在 60 的亮度差。
△ 色调、亮度对于对比度的影响
自定义扩展
动态配色让个人设备变得更为个性化。一旦您在产品界面中加入个性化设置，用户将比以往任何时候都能更好地控制他们的设备。通过使用动态配色和 M3 配色方案，用户壁纸将能够影响应用的配色方案，您的应用颜色会自动适应与集成用户的壁纸颜色。
这对于您应用的配色来讲，也许是一种全新思维方式。但我们如今所创建的数字化产品，会反映出现实生活中的产品趋势，这意味着更多个性化的色彩、图案和元素。在我们需要一套配色时，如果您觉得自己的调色板不合适或缺少可用资源时，动态配色可为您提供用户喜欢的、现成的、可无障碍访问的调色板。
我们充分理解，您可能需要品牌配色方案成为用户瞩目的焦点，所以最新的配色系统可以在支持无障碍访问的同时融入应用的颜色背景。您可以使用自己的品牌和设计系统颜色创造出和谐的、可无障碍访问的调色板。M3 支持自定义参数的系统化应用，这有助于您定义和维护品牌。在 Android 应用上，自定义配色方案也可以作为禁用动态配色后的备用方案。不过，无论是使用动态配色，还是自定义配色，要将您的 Android 应用迁移并使用 Material 3，您首先需要迁移到基础颜色或 M3 自定义方案来访问新的 Token。
△ M3 基础颜色角色
我们始终鼓励您利用 Material Design 并根据需要进行扩展。M3 的颜色系统可以与自定义组件和品牌风格相结合，通过自动处理关键调整，满足无障碍访问的颜色对比度，保障易读性、交互状态和组件结构。
迁移至 Material 3
接下来向您介绍如何将应用迁移至 Material 3。迁移的第一步是引用新 Token 并将其与应用中的组件连接。Material 3 的排版、形状和颜色文件与 Material 2 十分类似，请您确保获取到最新基础颜色或自定义品牌方案并设置值。
Material Theme Builder
M3 中有一些新的 Token 需要注意，例如 Primary、Secondary、Tertiary Container 以及 On Variants 系列颜色。对您来说，管理这些颜色可能非常费力，因此我们创建了一个名为 Material Theme Builder 的工具来为您生成这些内容。您可在网页中打开它并点击 "Custom"，然后点击 "Export for Compose"。
如您有自定义颜色，可将其添加为扩展颜色。我们可以打开该工具并切换到 "Custom" 标签页，在 Material Theme Builder 中您可以识别并输入一种或多种品牌颜色，这些颜色将用于定义调色板，通过添加特定颜色可确定每个调色板的生成方式。如下图所示，您可在左侧输入品牌的关键颜色，每种颜色都会分配到相应的关键颜色角色，具体情况视其在界面中的用途而定。如果您有现成的应用，您可以使用 Material 2 中的颜色配置 Primary 和 Secondary 颜色。随后，您可以点击右上角的导出代码菜单，然后在下拉列表中选择 "Compose"。
△ 自定义颜色方案
最后，您可将这些文件直接放入 Android Studio，并在必要时更新软件包。这一操作将更新颜色、排版和主题背景文件，更新代码后您即可运行应用来查看组件映射的新品牌主题背景。
使用动态配色
您可使用上述的网页工具，预览基于源颜色或图像生成的各种方案。接下来，我们将讨论如何基于用户所选图像所生成的颜色更新应用。请您打开 Kotlin 文件 theme，并添加检查来查看您是否有使用动态配色，然后您可以根据条件返回由系统调色板创建的深浅方案颜色。
val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colorScheme = if (dynamic) {
val context = LocalContext.current
if (dark) dynamicLightColorScheme (context) else dynamicDarkColorScheme (context)
} else {
// 使用 lightColorScheme、darkColorScheme 等
}
复制代码添加上述代码后，即可在设备上运行应用并更改壁纸，此时将显示用户生成的用于主题背景的颜色。您可添加一个切换开关，以便用户在动态或自定义的主题背景之间进行切换，这两种方案都提供了深色和浅色两种方案供用户选择。
您可以有选择地应用动态配色，并与品牌配色方案同时生效。例如，个人资料或帐户界面可展示个人的用户颜色，使重要的时刻变得个性化；如果您有语义颜色，则不必将其排除在外，而是可以将其包含在准备实现的其他颜色之内。这意味着您可为应用的主要主题、语义上的扩展颜色，甚至品牌颜色使用动态配色；或者您使用自己丰富的颜色库。
△ 配色方案随用户设置的壁纸变化
结语
凭借动态、品牌化的主题，Material You 能够体现用户对于颜色的选择，帮助您构建出色且富有表现力的应用；同时设计 Token 也有助于开发者和设计师的协作。我们十分期待看到您构建的应用！有关动态配色的更多信息，请使用 Material Theme Builder 或安装 Figma 插件，该插件可与更新的 M3 设计工具包配合使用。您可通过浏览 Figma 社区获得该插件，从而实现动态配色的可视化，并创建自定义配色方案。
欢迎您 点击这里 向我们提交反馈，或分享您喜欢的内容、发现的问题。您的反馈对我们非常重要，感谢您的支持！