Microsoft Teams de diseño de aplicaciones

Obtenga información rápida sobre los conceptos básicos del diseño de aplicaciones de Teams. Encontrará instrucciones y ejemplos completos en Microsoft Teams Ui Kit (Figma).

Diseño

Teams se basa en un diseño de cuadrícula para garantizar relaciones coherentes y elegantes entre componentes de diseño. La unidad base de 4 píxeles de la cuadrícula permite a los componentes escalar de forma coherente en todos los tamaños de pantalla de Teams.

Imagen conceptual de Teams diseño.

Avatares

Un avatar es una representación gráfica de una persona, equipo, bot o entidad en Teams. A menudo, un grupo de avatares se usa para transmitir actividad en directo o una representación de una lista de forma que conserve el espacio vertical.

Imagen conceptual de Teams avatares.

Iconos

El icono principal de la aplicación puede dar un gran paso al transmitir la marca a Teams usuarios. Hacer que el diseño de icono sea correcto también es importante para publicar la aplicación en la Teams web.

También puedes usar iconos Fluent interfaz de usuario en toda la aplicación:

Imagen conceptual de Teams iconos.

Tipo

Teams usa la interfaz de usuario de Segoe para su rampa de tipo y diferentes tamaños y grosores de fuente para ayudar a crear jerarquía y garantizar la legibilidad.

Imagen conceptual de Teams tipografía.

Colores

Teams web y escritorio admiten temas predeterminados (claros), oscuros y de contraste alto, mientras que Teams móvil admite temas claros y oscuros. Cada tema tiene su propia combinación de colores.

Imagen conceptual de Teams colores.

Forma y elevación

Puedes usar la forma y la elevación para crear jerarquías adicionales en la aplicación.

Conceptual de forma y elevación.

Copia y contenido

Para sentirse parte de Teams, la copia de la aplicación en general debe seguir estos principios de voz de Microsoft: cálidos y relajados,nítidos y claros, y listos para echar una mano.

Imagen conceptual de copia y contenido.