Compartilhar via


Ícones de estrutura para aquisição e gestão de agentes

Um agente copilot é uma aplicação para o Microsoft 365 e o pacote de aplicações tem de incluir dois ficheiros de ícone que representam o agente na IU de gestão e aquisição de aplicações do Teams, Office, Copilot e outras aplicações do Microsoft 365. Este artigo descreve os requisitos e as melhores práticas para criar estes ícones.

Ícones de Aplicações para o Microsoft 365

O pacote de aplicação para qualquer Aplicação para o Microsoft 365 tem de incluir dois ícones que representam a extensão em vários locais, incluindo o seguinte:

  • A aplicação armazena nas várias aplicações do Microsoft 365, como a loja de aplicações do Teams.
  • A página Gerir as suas aplicações que pode ser acedida a partir de várias aplicações do Microsoft 365.
  • As barras de aplicações do Teams, Outlook e a aplicação Microsoft 365 Copilot.

Um destes tem de ser um ícone de cor e o outro um ícone de destaque e ambos têm de ser formato PNG. Estes ícones têm de cumprir determinados requisitos de tamanho. Este artigo especifica os requisitos e as melhores práticas para estruturar estes ícones.

Esquema equilibrado

Os ícones destinam-se a criar um esquema uniforme. Estas diretrizes ajudam-no a criar o ícone da sua aplicação.

Diagrama que mostra o esquema uniforme para ícones de aplicação.

Criar os seus recursos

O Microsoft 365 precisa de dois recursos durante a submissão da aplicação para gerar os ícones.

Diagrama que mostra os dois recursos para gerar ícones de aplicação.

Contador Descrição
1 Um formato PNG de transbordo completo a 192 x 192 píxeis. Utilize o espaço de recursos completo como fundo. Isto é utilizado, por exemplo, na Loja Teams ou em listas de opções.
2 Um ícone de formato PNG predefinido ou rest a 32 x 32 píxeis. Este ícone é utilizado como estado de descanso/predefinição na barra de aplicações e noutras localizações no produto.

Arquitetura do ícone de cor

As dimensões do ícone da aplicação de cores têm de ter 192 x 192 píxeis. Se tiver um ícone de logótipo, o logótipo tem de caber na área segura 120 x 120 no centro.

O ícone submetido tem de ser um quadrado completo. O Teams aplica automaticamente máscaras para formas de ícone consistentes em toda a aplicação.

Diagrama que mostra as dimensões do ícone da aplicação de cores do ícone do logótipo.

Atributos do ícone

Colorido

Diagrama que mostra os atributos do ícone de um ícone colorido.

Fundo branco

Diagrama que mostra os atributos de cor de um ícone com fundo branco.

Utilização do ícone da aplicação

Os ícones podem aparecer noutros locais nas aplicações do Microsoft 365, consoante os tipos de extensões ou capacidades incluídos na sua Aplicação para Microsoft 365. Seguem-se alguns exemplos.

Aplicativo pessoal

Diagrama que mostra o ícone da aplicação na aplicação pessoal.

Lista de opções da aplicação

Diagrama que mostra o ícone da aplicação na lista de opções da aplicação.

Bot (vista de canal)

Diagrama que mostra um ícone de aplicação na vista de canal do bot.

Lista de opções da extensão de mensagem

Diagrama que mostra um ícone de aplicação na lista de opções da extensão de mensagem.

Lista de opções de aplicações de reunião

Diagrama que mostra um ícone de aplicação na lista de opções da aplicação de reunião.

Barra U da Reunião

Diagrama que mostra um ícone de aplicação na barra U da reunião.

Práticas recomendadas

Diagrama que mostra um logótipo dentro da área segura.

Do: Siga a recomendação para a área segura (120 x 120)

Se tiver um logótipo, mantenha-o dentro da área segura 120 x 120 dentro do ícone de formato PNG 192 x 192.

Diagrama que mostra um logótipo que não está dentro da área segura.

Não o faça: tornar o ícone maior do que a área segura

Segue-se um exemplo de um logótipo dentro do ícone de formato PNG que não está dentro da área segura. Cria preenchimento desigual (espaço negativo) à volta do ícone.

Diagrama que mostra um ícone com transbordo total.

Do: Fornecer transbordo total para cantos arredondados

Se tiver uma imagem de transbordo completa, basta carregar um formato PNG quadrado a 192 x 192. Os cantos são arredondados dinamicamente.

Diagrama que mostra um ícone com cantos mais arredondados.

Não: Arredondar os cantos do ícone

Não arredondo os cantos. Submeta no quadrado perfeito a 192 x 192, os cantos são arredondados dinamicamente.

Diagrama que mostra um carregamento do ícone sem limite.

Fazer: Carregar um ícone sem limite

O limite é adicionado automaticamente. Neste caso, basta carregar o formato PNG sem um limite, mesmo que esteja num fundo branco.

Diagrama que mostra um carregamento do ícone com um limite.

Não: Adicionar um limite

Os limites são adicionados dinamicamente. Se incluir um limite no formato PNG, tal resultará numa duplicação indesejada em fundos brancos.

Diagrama que mostra um ícone de aplicação com contraste suficiente.

Do: Fornecer contraste suficiente

Certifique-se de que o ícone tem contraste suficiente em relação ao fundo. Recomendamos uma proporção de 4,5:1 para a melhor acessibilidade.

Diagrama que mostra um ícone de aplicação desvanecido.

Não: Desvanecer o ícone

Evite o baixo contraste para os ícones. Certifique-se de que o fundo e o ícone que utiliza no formato PNG têm contraste suficiente.

Diagrama que mostra um ícone de aplicação com a sua marca elevada.

Do: Elevar a sua marca

Concentre-se na sua marca ao utilizar uma cor plana completa como fundo.

Diagrama que mostra um ícone de aplicação com a sua marca num círculo.

Não o faça: evite colocar o ícone de marca num círculo

Eleve a sua marca mantendo o ícone de marca dentro da área segura de 96 x 96.

Diagrama que mostra um ícone de aplicação com abreviatura.

Do: Abreviar palavras longas no ícone da aplicação

Se tiver um nome de aplicação longo, tente abreviar para que seja mais fácil de ler quando o ícone for redimensionado para um tamanho de 32 x 32.

Diagrama que mostra um ícone de aplicação com múltiplas palavras.

Não: incluir várias palavras no ícone da aplicação

Evite utilizar várias palavras no ícone. É impossível ler o texto quando o ícone está em tamanhos mais pequenos, por exemplo, 32 x 32 ou 36 x 36.

Diagrama que mostra um ícone de aplicação equilibrado.

Do: Criar saldo (96 x 96)

Eleve a sua marca ao manter o equilíbrio. Mantenha-se na área segura de 96 x 96 para uma sensação de equilíbrio.

Diagrama que mostra um ícone de aplicação desativado ou disperso.

Não: Distorça ou estique o ícone

Mantenha o ícone dentro da área segura. Não estique o ícone numa direção ou noutra.