Diseño de la aplicación de Microsoft Teams con plantillas de interfaz de usuario
Diseñe la aplicación de Microsoft Teams más rápido con plantillas de interfaz de usuario. Las plantillas son una colección de componentes basados en la interfaz de usuario de Fluent que funcionan en casos de uso comunes de Teams, lo que le proporciona más tiempo para averiguar la mejor experiencia para los usuarios.
Introducción a herramientas y ejemplos
Los siguientes recursos pueden ayudarle a diseñar y desarrollar la aplicación mediante plantillas de interfaz de usuario.
Kit de UI de Microsoft Teams
Obtenga plantillas de interfaz de usuario para el diseño de la aplicación desde el kit de interfaz de usuario de Microsoft Teams, que también incluye información extensa sobre el uso, la anatomía, la accesibilidad y los procedimientos recomendados.
Los cuadernos de estrategias de aplicaciones y las plantillas de interfaz de usuario también están disponibles para ayudarle a empezar a trabajar con las aplicaciones extendidas en Microsoft 365.
Componentes de Fluent UI React
Vea y pruebe los componentes individuales de Fluent UI React en el explorador.
Aplicación de ejemplo
Instale una aplicación de ejemplo para ver cómo se ven y se comportan las plantillas de interfaz de usuario en los contextos de Teams.
Calendario
En Teams, un calendario es donde un usuario ve, programa y administra eventos próximos y pasados para ellos mismos o para un grupo.
Casos de uso principales
- Programar reuniones y eventos
- Obtener recordatorios de las próximas reuniones y eventos
- Ver programaciones
Escritorio
Panel
Un panel muestra diferentes tipos de contenido en una ubicación central (por ejemplo, una pestaña o una aplicación personal de Teams). Los usuarios deben poder personalizar al menos parte de lo que ven en un panel.
Casos de uso principales
- Análisis de datos
- Métricas de informe
- Organizar información diferente en un solo lugar
Móvil
Escritorio
Visualización de datos
Puede usar diferentes tamaños de tarjeta (único, doble y completo) para apilar y organizar visualizaciones de datos en la misma página. Las tarjetas se escalan para ajustarse al diseño de columna y rellenar espacios en blanco.
Casos de uso principales
- Mostrar información compleja
- Creación de un panel
Móvil
Escritorio
Estado vacío
La plantilla de estado vacío se puede usar para muchos escenarios, incluidos el inicio de sesión, las experiencias de primera ejecución, los mensajes de error, etc. Es muy flexible: adaptálo para usar uno, algunos o todos los componentes del siguiente diseño.
Casos de uso principales
- Iniciar sesión
- Mensajes de bienvenida y experiencias de primera ejecución
- Mensajes correctos
- Mensajes de error
Móvil
Escritorio
Filtro
Un filtro le permite reducir la información que ve en función de los criterios seleccionados. Puede incluir filtros con tablas, listas, tarjetas y otros componentes que organicen el contenido.
Casos de uso principales
Organización del contenido en:
- Listas
- Tables
- Paneles
- Visualización de datos
Formulario
Los formularios se usan para recopilar, validar y enviar entradas de usuario de forma estructurada. El etiquetado claro y las agrupaciones lógicas de los campos de entrada son fundamentales para una buena experiencia del usuario.
Casos de uso principales
- Iniciar sesión
- Perfiles de usuario
- Configuración
- Colección de entradas de usuario
Móvil
Escritorio
List
Puede usar una lista para mostrar elementos relacionados en un formato escaneable y permitir que los usuarios realicen acciones en una lista completa o en elementos individuales.
Casos de uso principales
- Mostrar datos
- Acciones contextuales en el contenido de la aplicación
Móvil
Escritorio
Iniciar sesión
Puede diseñar flujos de inicio de sesión de aplicaciones para diferentes contextos de Teams y proveedores de identidades. En el ejemplo siguiente se incluye el inicio de sesión único (SSO), que se recomienda para la experiencia de autenticación más sencilla.
Caso de uso superior
Autenticación de usuarios
Móvil
Escritorio
Configuración
Las pantallas de configuración son donde los usuarios pueden configurar sus preferencias con la aplicación.
Nota:
La configuración es un contenedor para los componentes básicos de la interfaz de usuario.
Caso de uso superior
Administración de características de la aplicación
Panel de tareas
Un panel de tareas, a veces denominado tablero kanban o pistas de natación, es una colección de tarjetas que se usan a menudo para realizar un seguimiento del estado de los artículos de trabajo o boletos. También se puede usar para ordenar cualquier tipo de contenido en categorías. Puede editar y mover las tarjetas entre columnas.
Casos de uso principales
- Administración de proyectos. Asignación de tareas y estado de seguimiento.
- Lluvia de ideas. Agregar ideas en diferentes categorías.
- Ejercicios de ordenación. Organizar cualquier tipo de información en cubos.
Móvil
Escritorio
Asistente
Un asistente guía a un usuario a través de varias pantallas para completar una tarea (por ejemplo, un proceso de configuración).
Casos de uso principales
- Instalación
- Incorporación
- Experiencias de primera ejecución
Móvil
Escritorio
