Lições da equipe do Chrome

Postado por Rebecca Gutteridge, engenheira de relações com desenvolvedores no Android

Introdução

Com o lançamento de Android 12 e Subject matter Vocêfornecemos documentação e orientação sobre bases de cores dinâmicascomo implementar cores dinâmicas em Composição do Jetpack e um iniciando codelab. Mas criar um aplicativo escalável, personalizado e acessível com cores dinâmicas pode parecer uma tarefa assustadora. Conversamos com designers e desenvolvedores no Google Chrome e eles se ofereceram para compartilhar algumas dicas sobre como abordaram isso em escala para seu aplicativo Android. Veja o que eles sugerem se você estiver pensando em adotar cores dinâmicas em seu aplicativo.

Onde começar

Comece revisando todas as suas telas atuais em seu aplicativo e identifique suas cores, temas e superfícies atuais. O Chrome iniciou uma revisão de design e avaliou seu esquema de cores. O Subject matter 3 incentiva designers e desenvolvedores a usar tokens de cores que permitem flexibilidade e consistência em um aplicativo, permitindo que os designers atribuam a função de cor de um elemento em uma interface do usuário, em vez de um valor definido. Isso é particularmente poderoso ao considerar o design para temas claros e escuros e cores dinâmicas.

Figura 1 : Uma superfície de exemplo para o Chrome, o Tab Switcher, identificando o token de cor para cada elemento

Seu aplicativo pode já ter um sistema de token de cores, portanto, revisar como o novo esquema de cores ativado por cores dinâmicas do Subject matter You corresponde à sua convenção de nomenclatura anterior é um exercício importante. A engenharia deve se alinhar ao UX para revisar o novo sistema de token de cores com seus mocks. Esta é também uma boa oportunidade para rever a sua precise colours.xml, subject matters.xml e kinds.xml.Em specific, verifique se seu aplicativo diferencia corretamente entre Estilos e Temas bem como estender corretamente a partir de temas básicos. Também vale a pena revisar se há cores redundantes em seu esquema existente ou uma oportunidade de criar um esquema de cores mais consistente em todo o aplicativo. Implementação de cores dinâmicas com Compor também está disponível.

Acessibilidade

Garantir que o sistema de cores do seu aplicativo seja acessível é basic para projetar para todos e criar produtos que sejam inclusivos para o público mais amplo possível. A cor dinâmica está comprometida em garantir que o modelo de seleção de cores tenha requisitos de acessibilidade integrados. Os esquemas de cores do Subject matter 3 são definidos por tonalidade em vez de matiz ou valor hexadecimal, esse sistema de paletas de heaps é basic para tornar qualquer sistema de cores acessível por padrão. O uso de uma dispersão mínima de 60 luminâncias nos pares de cores fornece contraste suficiente para garantir os padrões de acessibilidade.

Figura 2 : A combinação de cores com base na tonalidade, em vez de valor hexadecimal ou matiz, é um dos principais sistemas que tornam qualquer saída de cor acessível.

Abordagem de fase

Ao analisar a implementação, considere essa atualização como uma abordagem em fases, se necessário, visando primeiro as superfícies primárias e aproveitando que a cor dinâmica pode ser aplicada em um nível de atividade. Foi assim que o Chrome conseguiu atualizar seu aplicativo e o usou como uma oportunidade para migrar alguns de seus componentes de compatibilidade de aplicativo de interface do usuário mais antigos para os componentes modernos do Subject matter 3, como Barra de aplicativos awesome.

Como oferecer suporte a cores personalizadas

Seu aplicativo pode ter cores personalizadas ou cores de marca que você não deseja alterar de acordo com a preferência do usuário. Estes podem simplesmente ser adicionados à medida que você está construindo seu esquema de cores. Alternativamente, você pode importar cores adicionais para estender seu esquema de cores usando o Construtor de Temas de Materiais para criar um sistema de cores unificado. O construtor de temas inclui um recurso de harmonização de cores que altera o tom de uma cor personalizada para garantir que o equilíbrio visible e o contraste acessível sejam alcançados quando combinados com cores geradas pelo usuário.

Figura 3: Entenda como harmonizar cores personalizadas com o Orientação de materiais.

Para o Chrome, aqui está um mergulho profundo em dois exemplos de onde as cores protegidas são importantes para eles e como eles abordaram isso.

Cores do editor

É importante que o Chrome permita que as marcas mantenham suas cores conhecidas e não afetem essa funcionalidade ao adotar cores dinâmicas.

Os editores podem definir uma cor de editor usando um metadados elemento em seu html. A barra de ferramentas awesome é controlada usando uma árvore de decisão para determinar programaticamente a cor da barra de ferramentas e a cor do ícone com base em uma série de regras em cascata:

• O modo de navegação anônima tem a prioridade mais alta. Se o modo de navegação anônima estiver ativado, as cores da barra de ferramentas e do ícone seguem a paleta de linha de base escura.
• Para o tema noturno, as cores da barra de ferramentas e dos ícones seguem o tema dinâmico escuro em vez da cor do editor para garantir uma IU consistentemente escura.
• Para o tema do dia, a cor da barra de ferramentas é definida para a cor do editor, a cor do ícone é branca ou cinza, dependendo se a cor do editor é escura ou clara by way of método útil.
• Se a cor do editor for muito clara ou não for especificada, o Chrome usará como padrão o tema dinâmico claro.

Incógnito

No modo de navegação anônima, o esquema de cores cinza escuro tem importância semântica e segurança para os usuários. O Chrome decidiu preservar e aproveitar seu sistema de cores existente e não alterá-lo dinamicamente.

Figura 4: O modo de navegação anônima permanece o mesmo

Para conseguir isso, o Chrome definiu cores não adaptáveis que mapeiam para valores hexadecimais e cores adaptáveis que mapeiam para diferentes cores não adaptáveis ​​para o modo dia/noite. Para o modo de navegação anônima, o Chrome u.s.a. as cores escuras não adaptáveis, pois são facilmente reconhecidas pelos usuários como anônimas. Com essas cores adaptáveis, o Chrome criou um tema básico.

A tabela abaixo mostra a aparência das cores de fundo após a aplicação de cores dinâmicas:

Temas e sobreposições de temas

Uma coisa a considerar para aderir às práticas recomendadas do tema é aproveitar as sobreposições de tema corretamente. A equipe do Chrome aproveitou essa oportunidade para refatorar seus temas e aproveitou o poder das sobreposições de temas para uma determinada atividade. Às vezes, o Chrome viu que temas completos estavam sendo usados ​​onde um ThemeOverlay seria mais apropriado. A cor dinâmica e o Material3 incentivam uma melhor higiene do código.

Dê uma olhada neste exemplo, anteriormente o tema para diálogos em tela cheia herdados de um tema completo. Isso substituiu todos os atributos do tema da atividade, desfazendo as cores dinâmicas ou quaisquer substituições aplicadas no nível da atividade. Com o trabalho dinâmico de cores, a equipe tornou-se mais deliberada em como definir e usar seus temas.

Anteriormente:

    <taste title="Base.Theme.Chromium.Fullscreen" mum or dad="Theme.BrowserUI.DayNight">
    <merchandise title="windowActionBar">true</merchandise>
          <merchandise title="colorPrimary">...</merchandise>
          <merchandise title="colorAccent">...</merchandise>
    </taste>

Agora:

    <taste title="Base.ThemeOverlay.BrowserUI.Fullscreen" mum or dad="">
    <merchandise title="android:windowContentTransitions">false</merchandise>
    </taste>

Recomendações de designers do Google Chrome

Esta seção compartilha algumas lições importantes que os designers do Chrome aplicaram para criar com sucesso um tema intencional e unificado

• Crie um sistema de design unificado: O subject matter 3 e a cor dinâmica oferecem a oportunidade de conciliar os temas do seu aplicativo. Para o Chrome, isso significava reconciliar seu tema claro e escuro e remover a fragmentação com base na elevação.
• Identificando como migrar o sistema de cores existente: Entenda a função do seu sistema de cores e tokens atuais, se aplicável, e como eles são mapeados no fichas de cores M3.
• Use cores de destaque de forma significativa: Os tokens de cores acentuadas do Subject matter 3 são incrivelmente poderosos e úteis, iterando sobre a melhor forma de usá-los.
• Abordagem em fases: Concentre-se em algumas superfícies primeiro. A cor dinâmica é cada vez mais parte da expectativa do usuário em relação ao dispositivo, portanto, descubra quais superfícies fazem sentido adotar primeiro e depois itere e expanda para mais superfícies.
• Trabalhe em estreita colaboração com seus engenheiros desde o início: Compartilhe projetos assim que os tiver com seus engenheiros. Os designers do Chrome fizeram perguntas para entender como o Chrome foi criado para que pudessem estabelecer como a cor seria aplicada e quais componentes poderiam ser afetados. Isso ajudará você a tomar decisões mais bem informadas sobre quais superfícies/componentes são atualizados, pois pode haver muitas dependências em seu aplicativo.
• Crie tokens personalizados: Se você precisar usar cores dinâmicas que não fazem parte do sistema de cores pronto para uso, crie um token de cor personalizado que estenda seu tema de cores.

Recomendações dos desenvolvedores do Google Chrome

Esta seção compartilha algumas lições importantes que os desenvolvedores do Chrome aplicaram para migrar com sucesso

• Tenha uma higiene rigorosa do código do tema: Crie um conjunto básico de cores sem dinâmico para instâncias em que a cor dinâmica não é aplicada, por exemplo, modo de navegação anônima e, em seguida, estende-se com tema e sobreposições de tema.
• Entenda como usar cores de superfície: As superfícies são tratadas com “elevação” para permitir a diferenciação do plano de fundo e elementos em camadas, como barras de aplicativos e outros elementos de navegação; isso pode ser uma mudança de paradigma para alguns aplicativos. As cores da superfície são calculadas em pace de execução, portanto, não há recurso/cor/macro para recuperá-las atualmente. O Chrome decidiu criar um método utilitário para calcular cores de superfície usando `ElevationOverlayProvider`. No entanto, isso só está disponível para uso programaticamente, enquanto também precisávamos implementar cores dinâmicas para muitos layouts em massa. Para isso, criaram um desenhável personalizado que pode desenhar uma cor de superfície com base em um valor de elevação fornecido. Uma desvantagem dessa abordagem é que uma versão legada de cores pré-dinâmicas de cada drawable deve ser mantida para compatibilidade com versões antigas do Android.
• Importância de usar o contexto de atividade: é importante usar o contexto da atividade para inflar as visualizações, pois a atividade tem o tema com a sobreposição de cores dinâmica aplicada.
• Escolha do método para obter cores: O uso de ‘Assets#getColor(int)’ generation muito comum na base de código do Chrome porque eles precisavam oferecer suporte a versões mais antigas do Android. No entanto, para suportar cores dinâmicas, o método `#getColor` deve ser capaz de resolver os recursos de cores em relação ao tema. Então, o Chrome migrou as chamadas `Assets#getColor` para `Context#getColor`.
• Macros: o Chrome u.s.a. nomes de cores semânticas para ter um sistema de cores unificado em todo o aplicativo. Antes da adoção de cores dinâmicas, uma cor semântica seria algo assim:

  @colour/default_text_color_light: Cor usada para o texto most important

  → @colour/default_text_color_dark/@colour/default_text_color_light (adaptável ao modo noturno)

  → @colour/modern_grey_900/@colour/modern_white

  → #1F1F1F / #FFFFFF

  Seu aplicativo já pode ter um sistema de cores semânticas e, portanto, a migração adiciona considerações adicionais. Para o Chrome, eles queriam preservar suas cores semânticas. Em colaboração com a UX, eles traduziram a paleta de cores existente para as funções/atributos de cores do subject matter. A primeira ideia deles foi apontar esses atributos a partir das cores semânticas existentes. Por exemplo, @colour/default_text_color do exemplo acima ficaria assim: <colour title="default_text_color">?attr/colorOnSurface</colour>. No entanto, o @colour recurso não pode apontar para um ?attr. A próxima idéia foi converter todos os `@colour`s semânticos para `?attr`s com os mesmos nomes. Essa abordagem também causou problemas, pois eles precisavam adicionar todos os atributos aos seus temas e há muitas atividades, temas e pontos de entrada no Chrome, portanto, seria difícil manter. Finalmente, eles adotaram o recém-introduzido <macro> marcação. As macros são muito parecidas com as macros C/C++, mas para recursos do Android: elas são substituídas pelo que elas apontam no momento da compilação. Então cores semânticas se tornaram macros semânticas, por exemplo, <macro title="default_text_color">?attr/colorOnSurface</macro>. Isso tornou possível implementar cores dinâmicas em massa. Uma limitação das macros é que elas não podem ser acessadas programaticamente, mas o Chrome adicionou métodos utilitários estáticos para contornar isso. A tag de macro agora está disponível no Android Studio Canary.

A cor dinâmica está chegando a mais telefones Android 12 globalmente, incluindo dispositivos da Samsung, OnePlus, Oppo, Vivo, realme, Xiaomi, Tecno e muito mais! À medida que você trabalha com cores dinâmicas em seu aplicativo, adoraríamos receber seus comentários por meio do Subject matter rastreador de problemas do Android. Feliz colorir!