Ícone de aplicativo do Teams para Teams Store e barra de aplicativos
Este artigo fornece as diretrizes para criar ícones em seu ecossistema de aplicativos para ajudar os designers e você enviar o ícone de aplicativo correto. Seguir essas diretrizes cria uniformidade e equilíbrio em seu ecossistema de aplicativos e enfatiza a arte do ícone do aplicativo.
ícone de aplicativo
Ao enviar seu pacote de aplicativo, inclua duas versões PNG do ícone do aplicativo, um ícone de cor e um ícone de contorno. Para que seu aplicativo passe pela revisão da Microsoft Teams Store, esses ícones devem atender a determinados requisitos de tamanho. Siga as etapas para garantir que os ícones do aplicativo se encaixem nos padrões da Teams Store.
Layout balanceado
Os ícones destinam-se a criar um layout uniforme. Essas diretrizes ajudam você a criar o ícone do aplicativo para envio.
Criando seus ativos
O Microsoft Teams precisa de dois ativos durante o envio do aplicativo para gerar os ícones do aplicativo.
| Contador | Descrição |
|---|---|
| 1 | Um formato PNG de sangramento completo em 192 x 192 pixels. Utilize o espaço completo do ativo como plano de fundo. Isso é usado na Loja do Teams ou em fly-outs. |
| 2 | Um ícone de formato PNG padrão ou rest em 32 x 32 pixels. Esse ícone é usado como estado de repouso/padrão na barra de aplicativos e em outros locais do produto. |
Arquitetura de ícone de cores
As dimensões do ícone do aplicativo de cores devem ter 192 x 192 pixels. Se você tiver um ícone de logotipo, o logotipo precisará se encaixar na área segura de 120 x 120 no centro.
O ícone enviado deve ser um quadrado completo. O Teams aplica a máscara automaticamente para formas de ícone consistentes em todo o aplicativo.
Atributos de ícone
Colorido
Fundo branco
Utilização do ícone de aplicativo
Consulte esta lista para áreas de conteúdo em que seu ícone é exibido no produto, dependendo do tipo de aplicativo ou da funcionalidade.
Aplicativo pessoal
Flyout do aplicativo
Bot (exibição de canal)
Flyout da extensão de mensagem
Flyout de aplicativos de reunião
Barra de reuniões
Práticas recomendadas
Fazer: Siga a recomendação para área segura (120 x 120)
É recomendável que, se você tiver um logotipo, mantenha-o dentro da área segura de 120 x 120 dentro do ícone de formato PNG de 192 x 192.
Não: tornar o ícone maior que a área segura
Aqui está um exemplo de um logotipo dentro do ícone de formato PNG que não está dentro da área segura. Ele cria preenchimento desigual (espaço negativo) ao redor do ícone.
Fazer: Fornecer sangramento total para cantos arredondados
Se você tiver uma imagem de sangramento completo, basta carregar um formato PNG quadrado em 192 x 192. Os cantos são arredondados dinamicamente.
Não: arredondar os cantos do ícone
Não vire os cantos. Envie no quadrado perfeito em 192 x 192, os cantos são arredondados dinamicamente.
Fazer: carregar um ícone sem uma borda
A borda é adicionada automaticamente. Nesse caso, basta carregar seu formato PNG sem uma borda, mesmo que esteja em um plano de fundo branco.
Não: adicionar uma borda
As bordas são adicionadas dinamicamente. Se você incluir uma borda no formato PNG, ela resultará em duplicação indesejada em origens brancas.
Fazer: Fornecer contraste suficiente
Considere que o ícone tem contraste suficiente em relação ao plano de fundo. É recomendável que uma taxa de 4,5:1 para melhor acessibilidade.
Não: desapareça o ícone
Evite o baixo contraste para seus ícones. Verifique se o plano de fundo e o ícone que você usa no formato PNG têm contraste suficiente.
Fazer: elevar sua marca
Concentre-se em sua marca usando uma cor plana completa como plano de fundo.
Não: evite colocar o ícone de marca em um círculo
Eleve sua marca mantendo o ícone da marca dentro da área segura 96 x 96.
Fazer: abreviar palavras longas no ícone do aplicativo
Se você tiver um nome de aplicativo longo, tente abreviar para que seja mais fácil de ler quando o ícone for redimensionado para o tamanho de 32 x 32.
Não: incluir várias palavras no ícone do aplicativo
Evite usar várias palavras no ícone. É impossível ler o texto quando o ícone está em tamanhos menores, por exemplo, 32 x 32 ou 36 x 36.
Fazer: Criar saldo (96 x 96)
Eleve sua marca mantendo o equilíbrio. Atenha-se à área segura 96 x 96 para obter uma sensação de equilíbrio.
Não: distorcer ou esticar o ícone
Mantenha seu ícone dentro da área segura. Não estique o ícone em uma direção ou em outra.