Considerações sobre tema de cores para celular

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 3 min. de leitura

    • Saiba como usar cores em seus aplicativos para celular para melhorar a experiência do usuário. O uso das cores certas para o seu ambiente pode ajudar a orientar os usuários pelo app e identificar rapidamente informações importantes.

    Usando cor

    Mantenha a consistência em suas decisões de cor em todo o app. 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 cores iguais ou semelhantes para applets relacionados. Por exemplo, selecionar azul para seus applets relacionados a incidentes e verde para applets de ordem de serviço pode ajudar seus usuários a acessar tarefas relacionadas rapidamente.

    Evite usar muitas cores. Desenhos 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 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 a medir o contraste de cores.

    Cores complementares 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 estar habilitado
    As variáveis de cor só entram em vigor quando Next Experienceestá 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​.
    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 Experienceestá habilitado e o valor da variável de cor foi 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 (HEXADECIMAL) é 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, Variable de cor de fundo é usado para Cor de fundo
    Configure 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 temas em seus componentes para celular.