Proceso de diseño para aplicaciones de Microsoft Teams
Hay varias herramientas y recursos para diseñar la aplicación de Microsoft Teams. En los pasos siguientes se describe cuándo y cómo se pueden usar durante el proceso de diseño. (Algunos de los pasos pueden estar técnicamente fuera del proceso de diseño, pero se incluyen para un contexto adicional).
Planear la aplicación
Diseñar una aplicación de Teams de alta calidad requiere comprender lo que quiere que haga la aplicación y cómo cree que la utilizarán los usuarios. Sin embargo, antes de empezar a diseñar, debe responder 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 rentabilidad de la inversión puede proporcionar la aplicación?
Para obtener más información, vea comprender los casos de uso de las aplicaciones y asignar casos de uso a Teams.
Obtener herramientas de diseño de Teams
Microsoft proporciona herramientas para facilitar el diseño de la aplicación de Teams. Como mínimo, se recomienda usar el Kit de interfaz de usuario de Microsoft Teams.
Obtener el Kit de interfaz de usuario de Microsoft Teams
El Kit de interfaz de usuario de Microsoft Teams puede ayudarle a desarrollar una aplicación de Teams eficaz en el menor tiempo posible. El kit de interfaz de usuario tiene todo lo que ve en estos documentos relacionados con el diseño de aplicaciones de Teams y mucho más, incluidos amplios ejemplos y variaciones.
El kit de interfaz de usuario también tiene plantillas y componentes precompilados que puede copiar y modificar según sea necesario, por lo que puede dedicar más tiempo a diseñar la mejor experiencia de usuario en lugar de preocuparse por el aspecto que debe tener un botón.
Sugerencia
¿El kit de interfaz de usuario es para mí? Si tiene alguna parte en la creación de una aplicación de Teams, sí. Comprender cómo crear una aplicación de Teams no solo es útil para diseñadores, sino también para administradores de productos, desarrolladores que usan IDE y creadores que crean con herramientas de escaso código (como es Microsoft Power Platform).
- Vaya a la página Figma del kit de interfaz de usuario de Microsoft Teams.
- Seleccione Duplicar para abrir el kit de interfaz de usuario (Es posible que primero tenga que crear una cuenta de Figma).
Prueba de la aplicación de ejemplo
Puede cargar una aplicación de ejemplo para ver cómo deben verse y comportarse las aplicaciones en el cliente Teams.
Aprender el sistema de diseño de Teams
Lea en profundidad o al menos familiarícese con los aspectos básicos del diseño de aplicaciones de Teams, incluido diseño, combinaciones de colores y mucho más.
Elección de las funcionalidades de la aplicación
Después de la fase de planificación, puede determinar qué funcionalidades de Teams se ajustan a los casos de uso de las aplicaciones. Por ejemplo, si quiere notificar de forma proactiva a las personas, un bot podría ser la funcionalidad correcta.
El kit de interfaz de usuario tiene diseños precompilados que muestran cómo los usuarios suelen agregar, configurar, usar y administrar cada funcionalidad. Como referencia rápida, esta información también está en estos documentos, pero con el kit de interfaz de usuario puede copiar y pegar cualquiera de esos diseños en el diseño de las aplicaciones.
- En el panel de navegación izquierdo del kit de interfaz de usuario, vaya a Funcionalidades de la aplicación y seleccione la funcionalidad que quiera para la aplicación.
- Copie lo que necesite 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 exacto necesario.
Diseño del flujo de experiencia del usuario
Una vez que tenga un diseño de aplicación básico, puede modificarlo y refinarlo tanto como desee copiando las plantillas de interfaz de usuario de Teams y los 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 flujos de trabajo y casos de uso comunes de Teams. 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.
- En el panel de navegación izquierdo del kit de interfaz de usuario, vaya a plantillas de interfaz de usuario.
- Copie las plantillas que tengan sentido para el diseño de la aplicación.
Por ejemplo, si está diseñando una aplicación personal, es posible que quiera usar una plantilla de panel.
Diseño con componentes básicos de la interfaz de usuario
En función de la interfaz de usuario de Fluent, estos son los elementos principales para crear interfaces conocidas de Teams. Use estos componentes si a una plantilla de interfaz de usuario le falta algo que necesita o solo quiere diseñar la aplicación desde cero.
- En el panel de navegación izquierdo del kit de interfaz de usuario, vaya a Componentes básicos de la interfaz de usuario.
- Copie los componentes que necesita 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 listo para empezar a crear. La siguiente herramienta puede ayudar a simplificar el desarrollo front-end de la aplicación.
Compilación con componentes básicos de la interfaz de usuario
No a diferencia de la fase de diseño, puedes usar componentes de Fluent UI React en el proyecto de aplicación si falta algo en una plantilla de interfaz de usuario o solo quieres compilar la aplicación desde cero.
Revisar los recursos de diseño
Tanto si está empezando en la aplicación como si está cerca de una aplicación lista para producción, le recomendamos que revise periódicamente los siguientes recursos:
- Directrices de validación de microsoft Teams Store: proporciona estándares que todas las aplicaciones de Teams deben esforzarse y no solo las aplicaciones que aparecen en la Tienda Teams. Para obtener más información, vea las instrucciones.
- 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, puede consultar los procedimientos recomendados para diseñar bots.