O sistema de cores expressivas do Material 3 para Wear emprega três camadas de destaque (primária, secundária, terciária) para os principais componentes e duas camadas de superfície neutras. Cada função oferece uma variedade de valores com contraste consistente, permitindo combinações de cores expressivas e acessíveis para uma experiência unificada em qualquer tema.
O que são papéis de cores?
As funções de cor são como os "números" em uma tela de pintura por números. Eles são o tecido conjuntivo entre os elementos da interface e a cor que vai para onde.
- As funções de cor são associadas a componentes do Material Design:você vai usar essas funções de cor, seja usando o esquema de valor de referência estático ou a cor dinâmica. Se o produto tiver componentes personalizados, eles precisarão ser mapeados corretamente para esse conjunto de papéis de cor.
- As funções de cor oferecem suporte à acessibilidade:o sistema de cores é criado com combinações de cores mais acessíveis. Esses pares de cores oferecem um mínimo de contraste de cores de 3:1.
- As funções de cor são tokenizadas:as funções são implementadas no design e no código por meio de tokens. Um token de design representa uma decisão de design pequena e reutilizável que faz parte do estilo visual de um sistema de design.
Termos essenciais
Confira os principais termos que você vai encontrar nos nomes das funções de cor:
- Superfície:uma função usada para planos de fundo e áreas grandes e de baixa ênfase da tela.
- Primário, secundário, terciário:funções de cor de destaque usadas para enfatizar ou desenfatizar elementos em primeiro plano.
- Contêiner:funções usadas como cor de preenchimento para elementos em primeiro plano, como botões. Eles não devem ser usados para texto ou ícones.
- Ativado:as funções que começam com esse termo indicam uma cor para texto ou ícones acima da cor pai correspondente. Por exemplo, "on-primary" é usado para texto e ícones em relação à cor de preenchimento primária.
- Variante:papéis que terminam com esse termo oferecem uma alternativa de ênfase menor ao par não variante. Por exemplo, a variante de contorno é uma versão menos enfatizada da cor do contorno.
Papéis principais
As funções principais são usadas para os principais componentes da interface, como os botões de contorno, botões em destaque, estados ativos e ícones nos estilos de botão tonal.
Principal
- Principal
- No primário
Use a função principal para as ações mais importantes na interface, como botões principais ou calls-to-action. Essa cor precisa se destacar e ser reconhecida instantaneamente para guiar o usuário para as interações principais.
Primary-Dim
- Principal-Dim
- No primário
Os papéis de escurecimento geralmente são usados para elementos que precisam ser visualmente distintos da ação principal, mas não exigem a atenção ou interação imediata do usuário.
Primary-Container
- Primary-Container
- On-Primary-Container
Aplique o contêiner principal para elementos de plano de fundo, como cards ou modais, para destacar seções ou estados selecionados. Ele ajuda a chamar a atenção para conteúdo importante ou atividades em andamento na interface.
Funções secundárias
As funções secundárias são usadas para componentes importantes da interface, que não são tão importantes quanto a função principal, mas ainda precisam se destacar. Os elementos primário e secundário podem ser usados juntos em layouts para criar diferenciação e foco.
Secundário
- Secundário
- On-Secondary
Use a função "Secundário" para oferecer suporte a ações em áreas com interface densa, como botões secundários ou ações complementares. Ele mantém a visibilidade sem ofuscar os elementos principais em layouts complexos.
Dim secundário
- Dimensão secundária
- Secundário
O papel secundário-dim oferece um contraste atenuado para elementos passivos em áreas densas. Ele complementa a cor secundária e adiciona profundidade sutil, mantendo a interface limpa e ajudando os usuários a navegar.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Use o Secondary-Container para organizar elementos secundários em layouts densos. Ele cria estrutura e separação, garantindo que o conteúdo secundário seja distinguível mas não dominante.
Papéis terciários
As funções terciárias são usadas para dar destaque a contrastes que podem ser usados para equilibrar cores primárias e secundárias ou chamar a atenção para um elemento, como um campo de entrada. As funções terciárias também podem ajudar a indicar quando o conteúdo muda ou precisa se destacar, como quando uma meta é alcançada.
Terciário
- Terciário
- Terciário
O papel terciário é usado para chamar a atenção para elementos importantes. As funções terciárias são particularmente eficazes para componentes que precisam se destacar, como selos, adesivos ou elementos de ação especiais.
Dim terciário
- Tertiary-Dim
- Terciário
Use a função Tertiary Dim para botões ou ações relacionadas a ações terciárias, mas que não exigem foco imediato.
Contêiner terciário
- Tertiary-Container
- Contêiner terciário
Aplique o contêiner terciário para planos de fundo que agrupam conteúdo relacionado, como coleções de selos ou adesivos. Ele enfatiza elementos terciários, mantendo o equilíbrio e a estrutura na interface.
Funções semânticas
O vermelho é usado para indicar problemas críticos, como erro, exclusão e qualquer coisa relacionada a emergência. Ele foi projetado para chamar a atenção imediatamente para problemas ou avisos, garantindo que os usuários possam identificar rapidamente as áreas que precisam de correção. O tom de vermelho de erro precisa manter um contraste suficiente em relação aos planos de fundo para atender aos padrões de acessibilidade, garantindo que ele seja claramente visível e distinguível de outras cores de status, como avisos ou mensagens de sucesso.
Erro
- Erro
- On-Error
Um vermelho semântico, mas com uma leve tonalidade do tema, que indica ações de remover, excluir, fechar ou dispensar, como "Deslizar para revelar". Adicionada como uma alternativa de contêiner que é um pouco menos alarmante e urgente do que a cor de erro esmaecida.
Error-Dim
- Dim de erro
- On-Error
Um vermelho semântico, mas com uma leve tonalidade do tema, que indica erros de alta prioridade ou ações de emergência, como alertas de segurança, falhas de sobreposições de caixa de diálogo ou botões de parada.
Error-Container
- Error-Container
- On-Error-Container
Cor de contêiner menos proeminente, para componentes que usam o estado de erro. Também pode indicar um estado de erro ativo que parece menos interativo do que um estado preenchido, como um botão ou cartão de compartilhamento de emergência ativo ou em uma caixa de diálogo de falha.
Contêineres e elevação da superfície
Os contêineres de superfície são essenciais para definir profundidade e elevação na interface, oferecendo estrutura e hierarquia por meio da cor, ajudando a diferenciar componentes com base na importância e na interação deles.
Surface-Container-Low
- Surface-Container-Low
- On-Surface
- On-Surface-Variant
Ótimo para um contêiner expandido que precisa ficar abaixo do contêiner de superfície, como um card expandido na notificação. Também pode ser usado para cards não interativos, em que o conteúdo ainda se beneficia da contenção.
Surface-Container
- Surface-Container
- On-Surface
- On-Surface-Variant
A cor do contêiner padrão para a maioria dos elementos. Ele oferece uma elevação neutra e moderada, tornando-o adequado para componentes gerais de interface.
Surface-Container-High
- Surface-Container-High
- On-Surface
- On-Surface-Variant
Ideal para componentes de alta ênfase que precisam ficar sobre ou em combinação com o contêiner de superfície. Essa cor ajuda a trazer foco e hierarquia para áreas críticas da interface.