Ícones de design para aquisição e gerenciamento de agentes

Um agente do Copilot é um aplicativo do Microsoft 365, e seu pacote de aplicativos deve incluir dois arquivos de ícone que representem o agente na interface do usuário de aquisição e gerenciamento de aplicativos do Teams, do Office, do Copilot e de outros aplicativos do Microsoft 365. Este artigo descreve os requisitos e as práticas recomendadas para criar esses ícones.

Aplicativos para ícones do Microsoft 365

O pacote do aplicativo para qualquer Aplicativo para Microsoft 365 deve incluir dois ícones que representam a extensão em vários lugares, incluindo o seguinte:

  • Os repositórios de aplicativos nos vários aplicativos do Microsoft 365, como a loja de aplicativos do Teams.
  • A página Gerenciar seus aplicativos que pode ser acessada de vários aplicativos do Microsoft 365.
  • As barras de aplicativos do Teams, Outlook e do aplicativo Microsoft 365 Copilot.

Ambos os ícones devem atender a requisitos de tamanho específicos. Este artigo descreve os requisitos e as práticas recomendadas para o design desses ícones, com diretrizes destinadas a ajudá-lo a criar um layout equilibrado e uniforme em todas as experiências do Microsoft 365.

Diagrama que mostra o layout uniforme para ícones de aplicativos.

Criando seus ativos

O Microsoft 365 precisa de dois ativos obrigatórios e um opcional durante o envio do aplicativo para gerar os ícones. Veja a seguir os requisitos para esses ativos.

Diagrama que mostra os três ativos usados para gerar ícones de aplicativo.

Ativo Tamanho Objetivo
Ícone de cor sem margens 192 × 192 px Usado em lojas de aplicativos e submenus.
Ícone padrão (rest) 32 × 32 px Usado na barra de aplicativos; estado padrão.
Ícone focado (pressionado) (opcional) 32 × 32 px Usado na barra de aplicativos; estado focado/ativo.

Especificação do ícone de cor

  • As dimensões do ícone do aplicativo de cores devem ser 192 x 192 pixels.

  • Se o ícone incluir um logotipo ou marca de marca, mantenha-o dentro da área segura de 120 x 120 no centro.

  • O ícone enviado deve ser um quadrado perfeito.

  • Não vire as esquinas. O Microsoft 365 aplica mascaramento automaticamente em tempo de execução para renderização consistente da interface do usuário.

Diagrama que mostra as dimensões do ícone do aplicativo de cores do ícone do logotipo.

Atributos do ícone

Colorido

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

Tela de fundo branca

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

Utilização do ícone do aplicativo

Seus ícones podem aparecer em outros locais nos aplicativos do Microsoft 365, dependendo dos tipos de extensões ou funcionalidades incluídas no seu Aplicativo para Microsoft 365. Veja a seguir alguns exemplos.

Aplicativo pessoal

Diagrama que mostra o ícone do aplicativo no aplicativo pessoal.

Submenu do aplicativo

Diagrama que mostra o ícone do aplicativo no submenu do aplicativo.

Bot (exibição de canal)

Diagrama que mostra um ícone de aplicativo no modo de exibição de canal do bot.

Submenu de extensão de mensagem

Diagrama que mostra um ícone de aplicativo no submenu de extensão de mensagem.

Submenu Aplicativos de reunião

Diagrama que mostra um ícone de aplicativo no submenu do aplicativo de reunião.

Barra em U de reunião

Diagrama que mostra um ícone de aplicativo na barra de U de reunião.

Práticas recomendadas

Use as seguintes práticas recomendadas ao criar ícones de aplicativo. As imagens representam como os ícones são exibidos no Teams.

Diagrama que mostra um logotipo na área de segurança.

O que fazer: siga a recomendação para a área segura (120 x 120)

Mantenha todas as marcas críticas dentro da área segura de 120 × 120 px. Isso garante que elementos importantes do ícone não sejam mascarados ou cortados quando exibidos em contextos diferentes.

Diagrama que mostra um logotipo que não está dentro da área de segurança.

O que não fazer: estenda seu logotipo além da área segura

Estender o logotipo além da área segura resulta em preenchimento irregular após o mascaramento.

Diagrama que mostra um ícone com sangria total.

O que fazer: Fornece sangria total para cantos arredondados

Carregue um PNG quadrado sem margens (192 × 192 px). Os cantos são arredondados dinamicamente.

Diagrama que mostra um ícone com cantos mais arredondados.

O que não fazer: contornar os cantos do ícone

Não vire os cantos. Envie um quadrado perfeito em 192 × 192 px, os cantos são arredondados dinamicamente.

Diagrama que mostra um upload de ícone sem borda.

O que fazer: carregar um ícone sem borda

A borda é adicionada automaticamente. Nesse caso, basta carregar seu formato PNG sem borda, mesmo que esteja em um fundo branco.

Diagrama que mostra um upload de ícone com uma borda.

O que não fazer: Adicionar uma borda

As bordas são adicionadas dinamicamente. Se você incluir uma borda no formato PNG, isso resultará em duplicação indesejada em fundos brancos.

Diagrama que mostra um ícone de aplicativo com contraste suficiente.

O que fazer: fornecer contraste suficiente

Mantenha contraste suficiente entre o primeiro plano e o plano de fundo. Uma proporção de 4,5:1 é recomendada para melhor acessibilidade.

Diagrama que mostra um ícone de aplicativo que está esmaecido.

O que não fazer: Desvanecer o ícone

Não use elementos visuais esmaecidos ou de baixo contraste.

Diagrama que mostra um ícone de aplicativo com sua marca elevada.

O que fazer: Elevar sua marca

Concentre-se na sua marca usando uma cor plana como tela de fundo.

Diagrama que mostra um ícone de aplicativo com sua marca em um círculo.

O que não fazer: evite colocar o ícone da sua marca em um círculo

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

Diagrama que mostra um ícone de aplicativo com uma abreviação.

O que fazer: abreviar palavras longas no ícone do aplicativo

Abrevie nomes de aplicativos longos para facilitar a leitura quando o ícone for redimensionado para o tamanho 32 x 32.

Diagrama que mostra um ícone de aplicativo com várias palavras.

O que não fazer: incluir várias palavras no ícone do aplicativo

Evite usar várias palavras no ícone. Não é possível ler o texto quando o ícone está em tamanhos menores, por exemplo, 32 x 32 ou 36 x 36.

Diagrama que mostra um ícone de aplicativo balanceado.

O que fazer: Criar equilíbrio (96 x 96)

Garanta o equilíbrio visual em uma área central de 96 × 96 px para obter o dimensionamento ideal.

Diagrama que mostra um ícone de aplicativo distorcido ou esticado.

O que não fazer: inclinar ou esticar seu ícone

Mantenha seu ícone dentro da área de segurança. Não estique o ícone em nenhuma direção.