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

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 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 por meio do app e identificar rapidamente informações importantes.

    Usando cor

    Mantenha a consistência em suas decisões de cor 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 miniaplicativos relacionados. Por exemplo, selecionar azul para seus applets relacionados a incidentes e verde para applets de ordem de serviço pode ajudar os usuários a acessar 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 de baixa visão e daltônicos. A conformidade com as diretrizes de acessibilidade de conteúdo da Web (WCAG) 2,0 requer uma taxa de contraste de pelo menos 3:1. Existem várias ferramentas online disponíveis para ajudar a medir o contraste de cores.

    Alto contraste, cores complementares 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 diretrizes a seguir.
    Next Experience deve ser habilitado
    As variáveis de cor só entram em vigor quando Next Experience 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 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​.
    As variáveis de cor substituem as propriedades de cor
    As variáveis de cor substituem as propriedades de cor não variáveis correspondentes se Next Experience está habilitado e o valor da variável de cor é 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 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, 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 das variáveis de cor é adicionar um Variável sufixo para as propriedades de cor existentes. ​
    Por exemplo, BackgroundColorVariable é usado para BackgroundColor
    Configure variáveis hexadecimais e de cor

    Suporte a variáveis de cor por componente

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