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

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

    • Aprenda a 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 cor

    Mantenha a consistência em suas decisões de cores em toda a aplicação. A associação de 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 as mesmas cores ou cores semelhantes para applets relacionados. Por exemplo, selecionar azul para os applets relacionados a incidentes e verde para 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 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 de 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, lembre-se das 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].

    As variáveis de cor são propriedades aditivas
    As propriedades de cor existentes (usando cores codificadas) continuarão a funcionar 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 será substituída se estiver vazia ou se o valor da variável de cor não for encontrado. Nesses casos, a propriedade de cor (HEX) é usada.
    Por exemplo, dada 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 estes links para saber como usar variáveis de cor para mudar o tema em seus componentes móveis.