Diretrizes de cores do tema para dispositivos móveis

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

    • Saiba como as cores selecionadas em seus temas para celular são aplicadas em seus aplicativos para celular.

    Importante:
    Use os temas móveis legados em instâncias Tokyo e anteriores ServiceNow®. Para Utah e versões posteriores, consulte Temas do Next Experience para dispositivos móveis.

    Considerações sobre a escolha de cores

    Considere as seguintes informações ao selecionar cores para seus aplicativos para celular:
    • Como suas opções de cores aparecem com cores em outras partes do aplicativo, como ícones de tela e estilos de IU. Evite usar muitas cores. Designs simples de duas a três cores resultam em um layout mais limpo e acessível.
    • Como suas escolhas de cores aparecem com cores em outros elementos que podem ser exibidos em seu app. Elementos como artigos de conhecimento e páginas do portal de serviços podem aparecer em seus apps. Evite esquemas de cores que não funcionam bem com os elementos existentes.
    • Como cores complementares e de maior contraste podem guiar o foco do usuário. Use a seleção de cores para destacar áreas de suas aplicações que exigem a atenção do usuário.
    • Como a cor pode ser usada para fornecer contraste para maior legibilidade. Em áreas onde o texto aparece, certifique-se de que as cores do texto e do plano de fundo tenham um alto nível de contraste para acomodar usuários com baixa visão e daltônicos.
    Importante:
    Atualmente, os aplicativos ServiceNow® Mobile Android não são compatíveis com o uso da notação #RGB para especificar cores de tema para os aplicativos. No entanto, a notação #RRGGBB é compatível com os aplicativos iOS e Android.

    Locais de cor do tema em aplicativos para celular

    Este exemplo mostra as cores que são usadas no tema padrão do aplicativo para celular. Use os números nesta imagem para ver onde essas cores aparecem nas diferentes áreas de seus aplicativos para celular. Cores usadas no tema móvel padrão

    Recursos móveis

    Use os números a seguir para ver como suas escolhas de cores afetam os elementos em seus aplicativos para celular.

    Página de inicialização da aplicação
    Diagrama de onde as cores do tema são aplicadas em uma página de inicialização da aplicação.
    Barra de Navegação
    Diagrama de onde as cores do tema são aplicadas na barra de navegação.
    Lista
    Diagrama de onde as cores do tema são aplicadas em uma lista.
    Virtual Agent
    Diagrama de onde as cores do tema são aplicadas no Virtual Agent.
    Pesquisar
    Diagrama de onde as cores do tema são aplicadas nos componentes de pesquisa.
    Ações
    Diagrama de onde as cores do tema são aplicadas em cartões de ação.

    Tela de registro e componentes

    Use os números a seguir para ver como suas escolhas de cores afetam uma tela de registro e seus componentes em seus aplicativos para celular.

    Tela de registro
    Diagrama de onde as cores do tema são aplicadas em uma tela de registro.
    Check-list
    Diagrama de onde as cores do tema são aplicadas em uma check-list.
    Fluxo de atividades
    Diagrama de onde as cores do tema são aplicadas em um fluxo de atividades.
    Links
    Diagrama de onde as cores do tema são aplicadas em links.
    Assinatura eletrônica
    Diagrama de onde as cores do tema são aplicadas em assinaturas eletrônicas.

    Modelos de tela

    Use as imagens a seguir para ver como suas escolhas de cores afetam os vários modelos de tela em seus aplicativos para celular.

    Calendário
    Diagrama de onde as cores do tema são aplicadas nas telas do calendário.
    Mapa
    Diagrama de onde as cores do tema são aplicadas nas telas do mapa.
    Nota:
    O campo Cor do alfinete no registro de fluxo de lista associado à tela do mapa determina a cor dos alfinetes em seus mapas.
    Modelo de URL
    Diagrama de onde as cores do tema são aplicadas nas telas de modelo de URL.

    Configurações e notificações

    Use os números a seguir para ver como suas escolhas de cores afetam as várias configurações e telas de notificação em seus aplicativos para celular.

    Notificações
    Diagrama de onde as cores do tema são aplicadas na tela de notificações.
    Configurações
    Diagrama de onde as cores do tema são aplicadas na tela de configurações.
    Configurações do modo off-line
    Diagrama de onde as cores do tema são aplicadas na tela de configurações do modo off-line.
    Configurações de geolocalização
    Diagrama de onde as cores do tema são aplicadas na tela de configurações de geolocalização.
    Configurações de PIN
    Diagrama de onde as cores do tema são aplicadas na tela de configurações de PIN.
    Configurações de atalhos da Siri (somente iOS)
    Diagrama de onde as cores do tema são aplicadas na tela de configurações de atalhos da Siri.

    Modais

    Use as imagens a seguir para ver como suas opções de cores são exibidas nos modais do Android e iOS.

    Modais do Android
    Diagrama de onde as cores do tema são aplicadas nos modais do Android.
    Modais do iOS
    Diagrama de onde as cores do tema são aplicadas nos modais do iOS.