Inventario de las últimas especificaciones de diseño de Material Design 3

prefacio

En 2014, Google lanzó Material Design (MD para abreviar), que se convirtió en un lenguaje de diseño de interfaz de usuario unificado para los productos de Google. Hoy, MD ha tenido dos actualizaciones importantes, Material Theming (Material Design2, M2 para abreviar) lanzado en 2018 y Material You (Material Design3, M3 para abreviar) recientemente lanzado en 2021 . Este artículo lo llevará a contar las actualizaciones y cambios de M3 en comparación con M2.

Combinación de colores personalizada

La característica más importante de M3 es el énfasis en la personalización, al igual que el nombre "Usted". Una expresión concentrada es la combinación dinámica de colores (Dynamic Color). Los dispositivos compatibles con M3 (como los teléfonos de la serie Pixel equipados con Android 12) pueden cambiar dinámicamente el tema de la aplicación o el widget según el color del fondo de pantalla.

A través de las herramientas proporcionadas por Google, puede experimentar el efecto dinámico de combinación de colores basado en el fondo de pantalla: https://material-foundation.github.io/material-theme-builder/#/dynamic

La combinación dinámica de colores se basa en ColorScheme, y el sistema extrae y actualiza ColorScheme del fondo de pantalla actual a través de algoritmos. duyamicColorSchemePodemos observar este cambio en la aplicación y aplicarlo automáticamente. Tomemos el código Compose-M3 como ejemplo:

val dynamic = Build.VERSION.SOK_INT >= Build.VERSION_CODES.S
val colorScheme = if (dynamic) {
    
    
    val context = LocalContext.current
    // 使用 dynamicLightColorScheme 函数创建具有浅色动态值的 ColorScheme 实例
    // 或使用 dynamicDarkColorScheme 创建具有深色动态值的实例
    // 传入 Context 以便从 Android 系统获取动态配色资源
    if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)
} else {
    
    
    // 使用 lightColorScheme 或者 darkColorScheme
}

¿Qué ColorSchemees ? Lo veremos más adelante en la introducción del sistema de color.

Adaptación de múltiples tamaños de pantalla

Con el aumento de varias tabletas y dispositivos de pantalla plegable, cada vez más aplicaciones deben considerar el efecto de ejecutarse en múltiples tamaños de pantalla y pueden responder dinámicamente a los cambios en el tamaño de la pantalla.

Un principio de diseño importante de M3 es que la interfaz de usuario se adapta a diferentes tamaños de pantalla, lo que brinda un diseño más razonable. M3 brinda muchas reglas detalladas para el diseño de pantallas cruzadas, como colocar la barra de menú, cómo mostrar la lista de detalles en la misma pantalla e incluso la animación de transición para cambiar de diseño, etc., pero la base de todo esto es para dar un conjunto de estándares de tipo de pantalla. Cualquier tamaño de pantalla se puede dividir en Compact//MediumExpanded

De esta forma, todas las especificaciones se clasifican en estos tres tipos, y no es necesario definirlas por separado según los diferentes tamaños de pantalla. Tomando el código de Compose-M3 como ejemplo, cuando cambia el tamaño de la pantalla, se activa la reorganización del diseño y se obtiene el último windowSizeClassdiseño :

enum class WindowSizeClass {
    
     Compact, Medium, Expanded }

@Composable
fun MyApp(windowSizeClass: WindowSizeClass) {
    
    
    // Select a navigation element based on window size.
    when (windowSizeClass) {
    
    
        WindowSizeClass.Compact -> {
    
     /* Bottom bar */ }
        WindowSizeClass.Medium -> {
    
     /* Rail */ }
        WindowSizeClass.Expanded -> {
    
     /* Persistent drawer */ }
    }
}

MD tiene tres especificaciones principales, Color (Color), Forma (Forma) y Fuente (Tipografía). Cuando estas especificaciones se implementan en el código, son las constantes correspondientes definidas en MateriaTheme para que las hagamos referencia en el proyecto. A continuación, observe los cambios de M3 desde estos tres aspectos.

Color

El sistema de color de M3 es consistente con la idea general de M2, ambos usan la ranura de color (ColorRule) para clasificar las escenas de color en la aplicación, pero hay algunos ajustes y adiciones en la definición de la ranura de color. Hay 25 ranuras de color definidas en M3, como se muestra en la siguiente tabla. Muchas ranuras de color se heredan de M2, y la parte del marco verde es el contenido recién agregado de M3.

En la tabla de franjas cromáticas, clasifícalas verticalmente según los escenarios de uso y la importancia, así como hay protagonistas y papeles secundarios en una actuación, las obras con claros primarios y secundarios son más bellas. Según el escenario se pueden clasificar en tres categorías:

• AccentColor (color de énfasis) : incluidos Primar, Secundario, Terciario, estos son los actores en el escenario, seguidos por el actor principal, el segundo y el tercer actor. Podemos asignar estos colores según la importancia de los componentes de la interfaz de usuario, y Primario se usa para aquellos componentes con las funciones más importantes o el área más grande.
• NeutralColor (color neutro) : incluye el fondo y la superficie, que son el entorno y el escenario del escenario, que se pueden utilizar como color de fondo del componente para resaltar la interpretación del papel principal.
• AdditonalColor (color suplementario) : son algunos accesorios especiales que solo aparecen en escenas especiales, como Error, etc.

La tabla de ranuras de color es horizontal y cada conjunto de colores consta de cuatro tonos que se pueden usar juntos dentro del componente.

Tome la ranura de color primario como ejemplo:

• Primario y OnPrimary : heredado de M2. Primario es el color base de este grupo de colores, y OnPrimary se usa para mostrar el contenido sobre Primario en contraste con él. 1 y 2 en la imagen de arriba
• PrimaryContainer & OnPrimaryContainer : las definiciones recién agregadas de M3, sus colores son más claros y se pueden usar en componentes que son menos importantes que Primary&OnPrimary, como se muestra en las Figuras 3 y 4 anteriores. Parece ser similar al propósito del Secundario, y todos se seleccionan de acuerdo con la importancia de los componentes. La diferencia es que están en el mismo sistema de color que el Primario, y son adecuados para formar componentes más grandes con el Primario. , que es más coordinado.

Los diferentes tonos de un mismo grupo se toman de la paleta de colores, la siguiente es la paleta Primaria, la paleta consta de 13 colores, cuanto mayor es el número, más claro es el color, y viceversa, más oscuro es el color. Los temas claros/oscuros también se seleccionan de la paleta.

ColorScheme se usa en M3 para definir un conjunto de esquemas de ranuras de color. Por ejemplo, un ColorScheme en Compose-M3 se define de la siguiente manera

class ColorScheme(
    primary: Color,
    onPrimary: Color,
    /*..省略..*/
    
)

Establezca el color del tema configurando ColorScheme en Theme

import androidx.compose.material3.MaterialTheme
 
@Composablefun MaterialTheme (
    colorScheme: ColorScheme,
    typography: Typography,
    // 更新 Shape 的功能即将到来
    content: @Composable () -> Unit
)

forma

En términos de forma, en primer lugar, el método de clasificación de la forma ha cambiado entre M3 y M2.

M2	M3

M2 se clasifica según el tamaño del componente en sí: Pequeño/Mediano/Grande, mientras que M3 se divide en siete categorías según el radián de la esquina redondeada del componente: de Nonea a Fullhaciendo la interfaz de usuario más expresividad.

Tipografía de personajes

Además del color, el texto también es una de las especificaciones de MD. En términos de definición de fuente, M2 tiene 6 tipos de títulos (Título 1 _{6), 2 tipos de subtítulos (Subtítulo 1} 2), 2 tipos de títulos de texto (Cuerpo 1~2), botones, líneas generales y otras fuentes de estilo. M3 es relativamente más regular en clasificación, ya no usa clasificación digital, sino según Small/ Medium/ Largeclasificación

M2	M3

Arriba, el color, la forma y el texto son las tres especificaciones básicas de MD, y los componentes predeterminados del sistema forman un estilo visual único al aplicar estas especificaciones. Los componentes de la interfaz de usuario de M3 presentan dos características visuales principales, una es más redondeada y la otra es un área más grande, lo que hace que el área de clic sea más obvia en los dispositivos actuales con pantallas grandes. A continuación, eche un vistazo a los cambios específicos en el diseño de varios componentes básicos:

Botón flotante FAB

• La forma cambia de círculo a rectángulo redondeado
• Se agregó un FAB de gran tamaño de Grande (96 dp), M2 solo tiene dos tamaños de Predeterminado (56 dp) y Mini (40 dp) de forma predeterminada
• El color de fondo predeterminado se cambia de Color primario a Contenedor primario
• La altura de Extended Fab está alineada con la Fab, y la visión es más unificada.En M2, la altura de los dos es ligeramente diferente.

botón botón

• La forma básica cambia de un rectángulo redondeado a un semicírculo.
• El botón de texto ya no está todo en mayúsculas, sino que distingue entre mayúsculas y minúsculas
• Aumentar altura (36dp > 45dp)

etiqueta de chip

• El semicírculo se convierte en un rectángulo redondeado (parece que M3 y M2 han intercambiado esquinas circulares<>redondeadas en la forma del componente...)
• Ajuste de los tipos de funciones, el chip de tipo acción se divide en tipos de asistencia y sugerencia
• De forma predeterminada, no queda ninguna sombra (elevación = 0). El componente M3 cancela muchos elementos de sombra al profundizar el contraste de color del borde y debilita el estilo skeuomorphic en su conjunto.

barra de título TopAppBar

• La sombra se cancela de forma predeterminada y la sombra se agregará al desplazarse (Elevación = 2)
• La altura aumenta y la fuente se vuelve más grande.
• La definición de variante principal en M2 se eliminó en M3, que se usó originalmente en StatusBar para tener un color más oscuro que Primay, y M2 StatusBar también es principal, creando una barra de título envolvente.

interruptor interruptor

• Área más grande, mayor altura
• Cancele la sombra, y el cuasi-objeto se vuelve plano.
• Agregue gráficos identificables, como marcas de verificación, que son más amigables para el daltonismo

barra de navegación barra de navegación

• En primer lugar, el nombre cambia, M2 se llama Navegación inferior y M3 se llama Barra de navegación uniformemente
• Eliminación de sombras y aumento de altura.
• M2 expresa el estado seleccionado a través de la transparencia del color, y M3 agrega Contorno

Cuadro de diálogo de diálogo

• Aumentó el tamaño de fuente del título
• Acolchado aumentado
• Esquinas redondeadas más grandes

A excepción de los componentes anteriores, los estilos de otros componentes no han cambiado mucho, la mayoría de ellos cancelan sombras, aumentan el área, etc., por lo que no los repetiré aquí.

por fin

A través de la introducción de este artículo, creo que todos tienen una comprensión profunda del estilo de M3. Aunque las aplicaciones domésticas de Android rara vez siguen las especificaciones de diseño de MD para unificar el estilo con iOS, pero si usted es un desarrollador individual, MD tendrá Ayudarle a desarrollar productos más profesionales y hermosos.