Microsoft Teams de design de aplicativo

  • Artigo

Aprenda rapidamente sobre os conceitos básicos do design Teams aplicativo. Você pode encontrar diretrizes e exemplos abrangentes no Kit Microsoft Teams de Interface do Usuário (Figma).

Layout

Teams depende de um layout de grade para garantir relações consistentes e elegantes entre componentes de design. A unidade base de 4 pixels da grade permite que os componentes sejam dimensionados consistentemente em todos os tamanhos de exibição Teams.

Imagem conceitual do Teams layout.

Avatares

Um avatar é uma representação gráfica de uma pessoa, equipe, bot ou entidade no Teams. Um grupo de avatares geralmente é usado para transmitir atividades ao vivo ou representar uma lista de uma forma que preserva o espaço vertical.

Imagem conceitual de Teams avatares.

Ícones

O ícone principal do aplicativo pode levar muito tempo para transmitir sua marca para Teams usuários. Acertar o design do ícone também é importante para publicar seu aplicativo na Microsoft Teams Store.

Você também pode usar ícones Fluent interface do usuário em todo o aplicativo:

Imagem conceitual de Teams ícones.

Tipo

Teams usa Segoe UI para sua rampa de tipos e tamanhos e pesos de fonte diferentes para ajudar a criar hierarquia e garantir a legibilidade.

Imagem conceitual da tipografia do Teams.

Cores

Teams web e desktop dão suporte a temas padrão (claro), escuro e de alto contraste, enquanto o Teams móvel dá suporte a temas claros e escuros. Cada tema do Teams tem seu próprio esquema de cores.

Imagem de conceito das cores do Teams.

Forma e elevação

Você pode usar a forma e a elevação para criar hierarquia adicional em seu aplicativo.

Conceitual de forma e elevação.

Copiar e conteúdo

Para se sentir parte do Teams, a cópia do aplicativo em geral deve seguir estes princípios de voz da Microsoft: quente e relaxado, claro e pronto para dar as mãos.

Imagem conceitual de cópia e conteúdo.