Considerações do tema de cores para dispositivos móveis

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 3 min. de leitura

    • Saiba como usar cores em seus aplicativos para celular para melhorar a experiência do usuário. Usar as cores certas para o seu ambiente pode ajudar a orientar os usuários na aplicação e identificar rapidamente informações importantes.

    Usando cores

    Mantenha a consistência em suas decisões de cores em todo o app. Associar tarefas ou fluxos de trabalho específicos a cores ajuda os usuários a saber quando não estão no lugar certo. Considere usar cores iguais ou semelhantes para applets relacionados. Por exemplo, selecionar azul para os applets relacionados a incidentes e verde para os applets de ordem de serviço pode ajudar os usuários a realizar as tarefas relacionadas rapidamente.

    Evite usar muitas cores. Designs simples de duas a três cores resultam em um layout mais limpo e acessível.

    A cor pode ser usada para fornecer contraste para maior legibilidade. Em áreas onde o texto aparece, certifique-se de que o texto e o plano de fundo tenham um alto nível de contraste para acomodar usuários com baixa visão e daltônicos. A conformidade com as Diretrizes de acessibilidade para conteúdo da Web (WCAG) 2.0 requer uma taxa de contraste de pelo menos 3:1. Existem várias ferramentas on-line disponíveis para ajudar na medição do contraste das cores.

    Cores complementares e de alto contraste podem orientar o foco do usuário. Use essas cores para destacar áreas de suas aplicações que precisam da atenção do usuário.

    Diretrizes gerais para variáveis de cor

    Antes de começar a usar variáveis de cor, tenha em mente as seguintes diretrizes.
    Next Experience deve ser habilitado
    As variáveis de cor só têm efeito quando Next Experience está habilitado. Caso contrário, as variáveis de cor serão ignoradas
    As cores disponíveis para variáveis estão na tabela Propriedades do tema de UX

    As variáveis de cor usam cores definidas na tabela Propriedades do tema de UX [sys_ux_theme_property].

    Variáveis de cor são propriedades aditivas
    As propriedades de cor existentes (usando cores codificadas) continuarão funcionando se as novas variáveis de cor não estiverem configuradas. No entanto, as propriedades de cor não podem mudar dinamicamente a cor dos elementos com base no tema​.
    Variáveis de cor substituem propriedades de cor
    As variáveis de cor substituem as propriedades de cor não variáveis correspondentes se Next Experience estiver habilitado e o valor da variável de cor for encontrado.
    Por exemplo, dada esta configuração de ação de regra de IU:
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    e um mapa de cores da web com esta configuração:
    {“--now-color-primary-0": “#22ff00”}
    A cor de fundo resolvida para esta ação de regra de IU será #22ff00.
    As propriedades de cor serão usadas se uma variável não for encontrada ou não tiver valor
    A variável de cor não substituirá se a variável estiver vazia ou o valor da variável de cor não for encontrado. Nesses casos, a propriedade de cor (HEX) é usada.
    Por exemplo, com esta configuração:
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    O valor da cor é #3f2c11.
    Dada esta configuração: 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    e um mapa de cores da web com esta configuração: 
    {“--now-color-primary-1": “#1134a1”}
    O valor da cor de fundo é #3f2c11.
    As variáveis de cor usam uma convenção de nomenclatura
    A convenção de nomenclatura de variáveis ​​de cor é adicionar um sufixo de variável às propriedades de cor existentes.
    Por exemplo, BackgroundColorVariable é usado para BackgroundColor
    Configurar variáveis hexadecimais e de cor

    Suporte de variável de cor por componente

    Use esses links para saber como usar variáveis de cor para mudar o tema em seus componentes móveis.