Fundamentos do design de aplicativos do Microsoft TeamsMicrosoft Teams app design fundamentals

Aprenda rapidamente sobre os fundamentos do design de aplicativos do Teams.Quickly learn about the fundamentals of Teams app design. Você pode encontrar orientações e exemplos abrangentes no Kit de Interface do Usuário do Microsoft Teams (Figma).You can find comprehensive guidance and examples in the Microsoft Teams UI Kit (Figma).

LayoutLayout

O Teams depende de um layout de grade para garantir relações consistentes e elegantes entre componentes de design.Teams relies on a grid layout to ensure consistent and elegant relationships between design components. A unidade base de 4 pixels da grade permite que os componentes sejam dimensionados de forma consistente em todos os tamanhos de exibição no Teams.The grid’s 4-pixel base unit allows components to scale consistently across all display sizes in Teams.

Consulte diretrizes de layout completo (Figma)See full layout guidelines (Figma)

Imagem conceitual do Microsoft Teams UI Kit.

AvataresAvatars

Um avatar é uma representação gráfica de uma pessoa, equipe, bot ou entidade no Teams.An avatar is a graphical representation of a person, team, bot, or entity in Teams. Um grupo de avatares é frequentemente usado para transmitir atividade ao vivo ou representar uma lista de uma forma que preserva o espaço vertical.An avatar group is often used to convey live activity or a represent a roster in a way that preserves vertical space.

Consulte diretrizes de avatar completas (Figma)See full avatar guidelines (Figma)

Imagem conceitual para o Kit de Interface do Usuário do Teams.

CoresColors

A Web e a área de trabalho do Teams suportam temas padrão (claro), escuro e de alto contraste, enquanto o Teams mobile dá suporte a temas claros e escuros.Teams web and desktop supports default (light), dark, and high-contrast themes, while Teams mobile supports light and dark themes. Cada tema tem seu próprio esquema de cores.Each theme has its own color scheme.

Consulte diretrizes de cores completas e tokens de cores disponíveis (Figma)See full color guidelines and available color tokens (Figma)

Imagem de conceito para o Microsoft Teams UI Kit.

IconografiaIconography

Ilustração conceitual do Microsoft Teams UI Kit.

TipografiaTypography

O Teams usa a interface do usuário segoe para sua rampa de tipos e tamanhos e pesos de fontes diferentes para ajudar a criar hierarquia e garantir a capacidade de leitura.Teams uses Segoe UI for its type ramp and different font sizes and weights to help create hierarchy and ensure readability.

Consulte diretrizes de tipografia completas (Figma)See full typography guidelines (Figma)

Figura conceitual do Microsoft Teams UI Kit.

Copiar e conteúdoCopy and content

Para fazer parte do Teams, a cópia do aplicativo em geral deve seguir estes princípios de voz da Microsoft:quentes e relaxados, nítidos e claros e prontos para dar as mãos.To feel part of Teams, your app copy in general should follow these Microsoft voice principles: warm and relaxed, crisp and clear, and ready to lend hand.

Consulte as diretrizes de conteúdo e cópia completas, incluindo a escrita para bots (Figma)See full copy and content guidelines—including writing for bots (Figma)

Imagem conceitual do Microsoft Teams UI Kit.

Expressão da marcaBrand expression

O ícone do aplicativo pode ser muito longo para transmitir sua marca aos usuários do Teams.Your app icon can go a long way in conveying your brand to Teams users. Fazer com que o design do ícone seja correto também é importante para publicar seu aplicativo no AppSource.Getting your icon design right is also important for publishing your app to AppSource.

Consulte diretrizes de expressão de marca completa (Figma)See full brand expression guidelines (Figma)

Formulário conceitual para o Microsoft Teams UI Kit.