Sistema de diseño de aplicaciones de Microsoft Teams

  • Artículo

Obtenga información rápida sobre los conceptos básicos del diseño de aplicaciones de Teams. Puede encontrar una guía completa y ejemplos en el Kit de interfaz de usuario de Microsoft Teams (Figma).

Diseño

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

Imagen conceptual del diseño de Teams.

Avatares

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

Imagen conceptual de los avatares de Teams.

Iconos

El icono principal de la aplicación puede tardar mucho tiempo en transmitir la marca a los usuarios de Teams. También es importante que el diseño del icono sea correcto para publicar la aplicación en la Tienda Microsoft Teams.

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

Imagen conceptual de iconos de Teams.

Tipo

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

Imagen conceptual de tipografía de Teams.

Colores

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

Imagen conceptual de los colores de Teams.

Forma y elevación

Puede usar la forma y la elevación para crear una jerarquía adicional en la aplicación.

Imagen 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álido y relajado, nítido y claro, y listo para ayudar.

Imagen conceptual de copia y contenido.