Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
En esta guía se proporcionan instrucciones de experiencia de usuario (UX) para los desarrolladores que crean experiencias de interfaz de usuario basadas en MCP en Copilot. Abarca los patrones para crear interacciones nativas, coherentes y centradas en tareas que se integran sin problemas en el flujo conversacional de Copilot.
Principios de experiencia de usuario
Crear un excelente agente de Copilot con la interfaz de usuario enriquecida basada en MCP significa ofrecer una experiencia conversacional centrada que se siente nativa de Copilot. Los agentes de Copilot deben sentirse como extensiones útiles de la conversación que aparecen en la acción correcta en el momento adecuado en lugar de volver a crear aplicaciones completas dentro de Copilot.
Entrega del valor conversacional
- El agente debe proporcionar un valor mayor dentro de Copilot que como una interfaz de usuario independiente.
- Aproveche el lenguaje natural, el contexto de subproceso y la interacción multiturno para habilitar flujos de trabajo que serían difíciles o ineficaces en un modelo de navegación tradicional.
- Experiencias de diseño que aprovechan la conversación, no replican los flujos existentes.
Extraer funcionalidades, no replicar interfaces
Evite migrar toda su experiencia de aplicación a Copilot. En su lugar, identifique las funcionalidades atómicas de alto valor que se pueden exponer como herramientas. Cada funcionalidad debe:
- Requerir solo las entradas mínimas necesarias
- Devolver salidas estructuradas y confiables
- Habilitación del modelo para determinar con confianza el siguiente paso
Diseño para sentirse nativo de Copilot
- Aproveche el sistema de diseño, los componentes y los patrones de interacción de Copilot para garantizar una experiencia predecible y sin problemas.
- La coherencia reduce la carga cognitiva, aumenta la previsibilidad y minimiza la necesidad de que los usuarios aprendan nuevos modelos de interacción.
Conservación del control humano
La confianza es fundamental para la adopción empresarial. Los usuarios deben seguir siendo los responsables finales de la toma de decisiones, especialmente cuando las acciones afectan a los datos empresariales. Proporcione lo siguiente:
- Visibilidad clara de las acciones del agente
- Confirmaciones explícitas para operaciones confidenciales
- Resultados transparentes de lo que se creó, modificó o actualizó
Densidad de escala con intención
Adapte la superficie visual de la interfaz de usuario a la necesidad inmediata del usuario.
- Use el widget insertado para obtener resúmenes de un vistazo y acciones de alto nivel.
- Use la vista expandida para las tareas en las que el usuario necesita un espacio real más grande para trabajar junto con el chat.
Superficies de chat
Las superficies de chat son la forma principal en que los usuarios interactúan con los agentes creados mediante el SDK de Copilot Apps, que define cómo aparece y se comporta una aplicación dentro de la conversación de Copilot.
Al diseñar para Copilot, siga estos principios básicos:
- Conversación en primer lugar: El chat sigue siendo el modelo de interacción principal.
- Complejidad progresiva: Inicie ligero. Expanda solo cuando sea necesario.
- Conservación del contexto: Los usuarios no deben perder el contexto conversacional.
- Clarity sobre la duplicación: la interfaz de usuario de la aplicación y el texto del modelo deben complementarse entre sí, no repetir el contenido.
Copilot admite actualmente dos superficies de chat principales. Cada superficie tiene un propósito distinto y debe elegirse en función de la complejidad y profundidad de la interacción.
- Todas las aplicaciones deben admitir el modo en línea, donde aparecen widgets insertados antes de la respuesta del modelo generada.
- El modo en paralelo es una superficie opcional que se puede usar cuando se necesitan interacciones más enriquecidas.
Modo en línea
El modo en línea es la superficie de chat en conversación predeterminada en Copilot. En línea no es una mini-aplicación. Mejora la conversación, no la reemplaza.
Cuándo usar el modo en línea
En línea se recomienda para:
- Vistas previas (documentos, imágenes, borradores)
- Confirmations
- Acciones sencillas
- Avisos de decisión rápida
Las experiencias insertadas deben permanecer concisas e idealmente caben dentro de un único desplazamiento de la respuesta.
Diseño del modo en línea
- Encabezado del agente: Identifica el agente que responde y establece el contexto.
- Widget insertado: Se usa para mostrar contenido estructurado, vistas previas o controles de acción.
- Respuesta del modelo: Mensaje corto generado por el modelo que se muestra después del widget para sugerir modificaciones, pasos siguientes y acciones relacionadas.
Widget insertado
Los widgets insertados aparecen directamente dentro del flujo de chat, lo que permite a los usuarios ver información y tomar medidas sin salir de la conversación. Proporcionan confirmaciones rápidas, acciones sencillas o ayudas visuales.
- Título: Incluir un título si la tarjeta está basada en documentos o contiene elementos con un elemento primario
- Expanda a la vista en paralelo: Use para abrir un modo en paralelo si la tarjeta contiene medios enriquecidos o interactividad.
- Acciones: Limite a dos acciones, colocadas en la parte inferior de la tarjeta. Las acciones deben realizar un turno de conversación o una llamada de herramienta.
Directrices de interacción
- Mantener la interacción centrada: Evite flujos de varios pasos, navegación anidada o configuración profunda. Si la tarea requiere iteración, comparación o edición extensa, vaya a En paralelo.
- Mostrar resúmenes, no sistemas: En línea muestra vistas previas, no aplicaciones completas. Evite el desplazamiento interno, la paginación, las pestañas, los filtros o la agrupación de varios niveles.
- Hacer que el estado sea explícito: Las interacciones insertadas deben proporcionar comentarios claros del sistema, como el estado de carga, el estado deshabilitado, la confirmación correcta, el estado de error con la opción de recuperación. Nunca dependa solo del texto del modelo para comunicar el estado del sistema.
- Conservar el flujo conversacional: Un widget debe caber cómodamente dentro de un único desplazamiento de respuesta. Debe evitar dominar la ventanilla. Debe complementar la respuesta del modelo, no competir con ella.
Modo en paralelo (opcional)
El modo en paralelo proporciona un área de trabajo inmersiva expandida que aparece junto a la conversación. Está diseñado para flujos de trabajo más completos que no se pueden entregar eficazmente dentro de la superficie insertada. A diferencia del modo en línea, que está optimizado para interacciones ligeras, el modo en paralelo crea un área de trabajo dedicada para una interacción más profunda, a la vez que conserva el contexto conversacional.
El modo en paralelo es opcional y debe usarse intencionadamente.
Cuándo usar el modo en paralelo
Use el modo en paralelo cuando la experiencia requiera:
- Edición o configuración en varios pasos
- Flujos de trabajo iterativos con estado persistente
- Diseños visuales complejos (tablas, lienzos, paneles)
- Tareas de revisión o comparación extendidas
- Creación enriquecida (redacción de documentos, edición de diseño, entradas estructuradas)
- Interacción de nivel de área de trabajo más allá de un único desplazamiento
- Si la tarea se puede completar en una interacción concisa de un solo turno, use el modo en línea en su lugar.
Diseño en paralelo
- Panel de conversación: Chat de Copilot que sigue siendo la fuente principal de intención y control.
- Tarjeta chiclet: Cuando el modo en paralelo está activo, el widget insertado original se contrae en una tarjeta compacta de la conversación, conservando el contexto con el área de trabajo expandida.
- Encabezado del panel en paralelo: Muestra la identidad del agente (icono y nombre) e incluye una opción de entrega a la aplicación completa.
- Área de trabajo de la aplicación: Mayor superficie representada por MCP para editar, revisar o administrar contenido estructurado. Se trata de un área de trabajo contextual dentro de Copilot, no de un shell de aplicación independiente.
- Controles contextuales: Controles específicos de la tarea dentro del área de trabajo (por ejemplo: herramientas de edición, formato, zoom, exportación).
Directrices de interacción
- Mantener contextual el área de trabajo: El modo en paralelo proporciona un área de trabajo centrada y específica de la tarea, no un shell de aplicaciones completo. Evite la navegación global, los sistemas de varias pestañas, los paneles de configuración o las características no relacionadas. Si la experiencia es similar a todo el producto SaaS, supera el ámbito.
- Conservar el chat como principal: La conversación sigue siendo el origen de la intención y el control. Los usuarios deben poder seguir chateando mientras el modo en paralelo está abierto, formular preguntas aclarantes a mitad de la tarea y ver el razonamiento de Copilot junto con su área de trabajo.
- Ámbito de la tarea activa: El modo en paralelo debe admitir un único flujo de trabajo coherente. Evite cambiar entre entidades no relacionadas e iniciar experiencias anidadas. Si se necesitan varios flujos de trabajo, divida en superficies o acciones independientes.
- Hacer que el estado sea explícito: Las interacciones insertadas deben proporcionar comentarios claros del sistema, como el estado de carga, el estado deshabilitado, la confirmación correcta, el estado de error con la opción de recuperación. Nunca dependa solo del texto del modelo para comunicar el estado del sistema.
- Mantener una escalación progresiva: El modo en paralelo debe introducirse intencionadamente. No use de forma predeterminada en paralelo las vistas previas simples o las confirmaciones rápidas.
Procedimientos recomendados
✅ Conservar el flujo conversacional
Mantenga los widgets insertados ligeros y orientados a la acción. Admite hasta dos acciones principales (por ejemplo, Aprobar, Editar y Descargar). Si la tarea requiere navegación profunda, flujos de trabajo de varios pasos o una configuración pesada, pásase al modo en paralelo.
✅ Uso de componentes de Fluent para ajuste nativo
Las experiencias en línea deben parecer una extensión natural de Copilot. Use componentes, espaciado, tipografía y tokens de Fluent 2 alineados con Copilot para garantizar la coherencia visual y de interacción.
✅ Proporcionar control de estado del widget
Los widgets deben proporcionar comentarios claros del sistema, como el estado de carga, el estado deshabilitado, la confirmación correcta y el estado de error con la opción de recuperación.
❌ No usar un widget para parecerse a una aplicación completa
El modo en línea debe parecer una extensión natural del chat, no una aplicación completa incrustada en él.
❌ No duplicar las características de Copilot en el widget
Evite volver a crear funcionalidades de chat (entrada de mensajes, sugerencias, resúmenes de razonamiento, controles de reintento) dentro del widget. La duplicación crea modelos de confusión, ruido visual y interacción fragmentada.
❌ Evitar la navegación profunda en widgets
Los widgets no deben contener varias pestañas ni una navegación más profunda. Considere la posibilidad de dividirlos en tarjetas o acciones de herramientas independientes.
❌ Evitar diseños grandes y pesados de desplazamiento
Los widgets insertados deben ser concisos y legibles. Evite el desplazamiento vertical dentro del widget. El alto debe tener el tamaño del widget, no el tamaño de la aplicación. Si el contenido requiere desplazamiento, tablas complejas o edición detallada, pase al modo en paralelo.
❌ No duplicar contenido en el texto del modelo y el widget
No repita la misma información tanto en el widget como en el mensaje del modelo.
Directrices de diseño visual
La coherencia visual y de interacción es fundamental para la experiencia del usuario de Copilot. Se espera que las aplicaciones se alineen con el sistema de diseño Fluent para que los usuarios experimenten un comportamiento predecible, controles conocidos y experiencias coherentes entre aplicaciones. Esta coherencia ayuda a los usuarios a generar confianza, a moverse con confianza entre flujos de trabajo y a realizar acciones de forma segura en varias aplicaciones dentro de Copilot.
Directrices del tema de Fluent Copilot
Crea experiencias de Microsoft hermosas y coherentes con los kits de interfaz de usuario de Fluent 2. Integrados en Figma, los kits de interfaz de usuario de Fluent 2 contienen recursos de diseño que se asignan a las bibliotecas de código. Esto significa una entrega sin problemas desde el diseño hasta el desarrollo.
Color
Botón
Tipografía
Radio
Spacing
El relleno global de una tarjeta de aplicación debe ser de 24 píxeles.
