Proceso de diseño para Microsoft Teams aplicaciones

Hay varias herramientas y recursos para diseñar tu Microsoft Teams aplicación. Los pasos siguientes describen cuándo y cómo puede usarlos durante el proceso de diseño. (Algunos de los pasos pueden estar técnicamente fuera del proceso de diseño, pero se incluyen para contexto adicional).

Diagrama que muestra un ejemplo del proceso Teams diseño de la aplicación.

Planear la aplicación

El diseño de una aplicación de Teams de alta calidad requiere comprender lo que quieres que haga la aplicación y cómo crees que la usarán las personas. Sin embargo, antes de empezar a diseñar, responda a las siguientes preguntas:

  • ¿Quiénes son sus usuarios?
  • ¿Cuál es su problema?
  • ¿Cómo puede resolver su problema la aplicación?
  • ¿Con qué frecuencia se usará la aplicación?
  • ¿Cuántas personas usarán la aplicación?
  • ¿Qué tipo de retorno de la inversión puede proporcionar la aplicación?

Para obtener más información, consulta comprender los casos de uso de la aplicación y asignar los casos de uso a Teams.

Obtener Teams de diseño

Microsoft proporciona herramientas para facilitar el diseño de la Teams aplicación. Como mínimo, recomendamos encarecidamente usar el kit Microsoft Teams interfaz de usuario.

Obtener el kit Microsoft Teams interfaz de usuario

El kit Microsoft Teams interfaz de usuario puede ayudarte a desarrollar una aplicación Teams eficaz en el menor tiempo posible. El kit de interfaz de usuario tiene todo lo que ves en estos documentos relacionados con Teams diseño de aplicaciones y mucho más, incluidos extensos ejemplos y variaciones.

El kit de interfaz de usuario también tiene plantillas y componentes predefinidos que puedes copiar y modificar según sea necesario, por lo que puedes dedicar más tiempo a diseñar la mejor experiencia del usuario en lugar de preocuparte por cómo debería ser un botón.

Sugerencia

¿El kit de interfaz de usuario es para mí? Si tienes alguna parte en la creación de una Teams, sí. Comprender cómo crear una aplicación Teams no solo es útil para los diseñadores, sino también para los jefes de producto, los desarrolladores que usan id. de usuario y los creadores que se construyen con herramientas de código bajo (como Microsoft Power Platform).

  1. Vaya a la página Microsoft Teams Kit de interfaz de usuario de La Figma.
  2. Selecciona Duplicar para abrir el kit de interfaz de usuario. (Es posible que primero tenga que crear una cuenta de Figma).

Probar la aplicación de ejemplo

Puedes cargar una aplicación de ejemplo para ver cómo deben verse y comportarse las aplicaciones en el Teams cliente.

Información sobre Teams de diseño

Lea en profundidad o, al menos, familiarícese con los conceptos básicosdel diseño Teams aplicación, incluido el diseño, las esquemas de color y mucho más.

Elegir funcionalidades de la aplicación

Después de la fase de planeación, puedes determinar qué Teams se ajustan a los casos de uso de la aplicación. Por ejemplo, si quieres notificar proactivamente a las personas, un bot puede ser la funcionalidad adecuada.

El kit de interfaz de usuario tiene diseños predefinidos que muestran cómo las personas suelen agregar, configurar, usar y administrar cada funcionalidad. Para obtener una referencia rápida, esta información también está en estos documentos, pero con el kit de interfaz de usuario puedes copiar y pegar cualquiera de estos diseños en el diseño de la aplicación.

  1. En la navegación izquierda del kit de interfaz de usuario, ve a Funcionalidades de la aplicación y selecciona la funcionalidad que quieras para la aplicación.
  2. Copia lo que necesitas de esa página para diseñar la aplicación.
    Por ejemplo, si la aplicación admite la autenticación con inicio de sesión único, copie y pegue el diseño para controlar ese escenario exacto.

Diseñar el flujo de experiencia de usuario

Una vez que tienes un diseño de aplicación básico Teams, puedes modificarlo y refinarlo tanto como quieras copiando plantillas de interfaz de usuario y componentes básicos del kit de interfaz de usuario.

Diseño con plantillas de interfaz de usuario

Las plantillas de interfaz de usuario son diseños complejos y de alta fidelidad para Teams casos de uso y flujos de trabajo comunes. En lugar de empezar de abajo hacia arriba con componentes básicos, se recomienda usar estas plantillas para simplificar y acelerar el proceso de diseño.

  1. En la navegación izquierda del kit de interfaz de usuario, vaya a Plantillas de interfaz de usuario.
  2. Copia plantillas que tienen sentido para el diseño de la aplicación.
    Por ejemplo, si estás diseñando una aplicación personal, es posible que quieras usar una plantilla de panel.

Diseño con componentes básicos de la interfaz de usuario

En función Fluent interfaz de usuario, estos son los elementos principales para crear interfaces Teams familiares. Usa estos componentes si falta una plantilla de interfaz de usuario o quieres diseñar la aplicación desde cero.

  1. En la navegación izquierda del kit de interfaz de usuario, vaya a Componentes básicos de la interfaz de usuario.
  2. Copia los componentes que necesitas para el diseño de la aplicación (por ejemplo, un botón o un botón de alternancia).

Implementar el diseño

El diseño está listo y está listo para empezar a compilar. Las siguientes herramientas pueden ayudar a simplificar el desarrollo front-end de la aplicación.

Crear con plantillas de interfaz de usuario

Si usaste plantillas de interfaz de usuario en el diseño, puedes implementar estas plantillas con la biblioteca de interfaz de usuario Microsoft Teams (una biblioteca de componentes React basada en Fluent interfaz de usuario).

Actualmente, no todas las plantillas que aparecen en el kit de interfaz de usuario están disponibles en la biblioteca.

Compilación con componentes básicos de la interfaz de usuario

A diferencia de la fase de diseño, puedes usar estos componentes de interfaz de usuario de Fluent en el proyecto de aplicación si falta una plantilla de interfaz de usuario o si solo quieres crear la aplicación desde cero.

(Nota: Si observa que falta algo o tiene una idea para una plantilla, considere la posibilidad de contribuir al repositorio Teams biblioteca de interfaz de usuario).

Revisar recursos de diseño

Tanto si estás empezando en la aplicación como si estás cerca de una aplicación lista para producción, te recomendamos que revises periódicamente los siguientes recursos:

  • Microsoft Teams de validación de la tienda: proporciona estándares que todas las Teams deben esforzarse y no solo las aplicaciones enumeradas en la tienda. Para obtener más información, vea las directrices.
  • Procedimientos recomendados de diseño: estos documentos y el kit de interfaz de usuario proporcionan procedimientos recomendados para diseñar aplicaciones de alta calidad. Por ejemplo, vea los procedimientos recomendados para diseñar bots.

Consulte también

Diseño de notificaciones de fuentes de actividad