Diseñar la interfaz de usuario de complementos de Office

  • Artículo

Los Complementos de Office amplían la experiencia de Office proporcionando funcionalidad contextual a la que pueden acceder los usuarios desde clientes de Office. Los complementos permiten a los usuarios realizar más acciones al permitirles acceder a la funcionalidad externa dentro de Office, sin costosos cambios de contexto.

El diseño de la interfaz de usuario del complemento debe integrarse sin problemas con Office para proporcionar una interacción natural y eficaz a los usuarios. Aproveche las ventajas decomandos de complemento proporcionar acceso a su complemento y aplicar los procedimientos recomendados que recomendamos al crear una interfaz de usuario personalizada basada en HTML.

Principios de diseño de Office

Las aplicaciones de Office siguen un conjunto general de directrices de interacción. Las aplicaciones comparten contenido y tienen elementos que se ven y se comportan de forma similar. Esta compatibilidad se basa en un conjunto de principios de diseño. Los principios ayudan al equipo de Office a crear interfaces compatibles con las tareas de los clientes. Comprenderlos y seguirlos le ayudará a alcanzar los objetivos de sus clientes en Office.

Siga los principios de diseño de Office para crear experiencias de complementos positivas:

  • Diseñe explícitamente para Office. La funcionalidad, así como la apariencia de un complemento han de complementar de manera profesional la experiencia de Office. Los complementos deben parecer nativos. Deberían encajar perfectamente en Word en un iPad o en PowerPoint en línea. Un complemento bien diseñado será una combinación apropiada de su experiencia, de la plataforma y de la aplicación de Office. Aplique la documentación y los temas de la interfaz de usuario de forma apropiada. Considere el uso de Fluent UI para la web como su lenguaje de diseño y conjunto de herramientas. La interfaz de usuario de Fluent para la web tiene dos sabores.

    • Para las interfaces de usuario que no son React: use Fabric Core, una colección de código abierto de clases CSS y mixins sass que le proporcionan acceso a colores, animaciones, fuentes, iconos y cuadrículas. (Se llama "Fabric Core" en lugar de "Fluent Core" por razones históricas). Para empezar, vea Fabric Core en los complementos de Office.

    Nota:

    Aunque Fabric Core es la biblioteca recomendada para diseñar complementos que no son React, el equipo está trabajando en Fluent UI Web Components para proporcionar una solución más reciente. Basada en FAST, la biblioteca Fluent UI Web Components le permite usar, personalizar y compilar componentes web para crear una interfaz de usuario más moderna y basada en estándares. Le invitamos a probar esta biblioteca completando los comentarios de inicio rápido y bienvenida sobre su experiencia a través de GitHub.

    • Para las UI de React: use Fluent UI React, un marco de trabajo de front-end de React diseñado para crear experiencias que se adapten perfectamente a una amplia gama de productos de Microsoft. Proporciona componentes sólidos, actualizados y accesibles basados en React que son altamente personalizables usando CSS-in-JS. Para empezar, vea Fluent UI React en los complementos de Office.

  • Dé prioridad al contenido sobre el contenedor visual. Permita que la página, la diapositiva o la hoja de cálculo de los clientes sigan siendo el foco de la experiencia. Un complemento es una interfaz auxiliar. El aspecto de los accesorios no debe interferir en el contenido y la funcionalidad del complemento. Etiquete su experiencia de forma sabia. Sabemos que es importante proporcionar a los usuarios una experiencia única y reconocible, pero también se deben evitar las distracciones. Intente centrarse en el contenido y la finalización de tareas, no en la atención a la marca.

  • Haga que sea divertida y mantenga a los usuarios bajo control. Personas disfrutar del uso de productos funcionales y visualmente atractivos. Diseñe cuidadosamente su experiencia. Entienda bien los detalles al considerar cada interacción y detalle visual. Permita a los usuarios controlar su experiencia. Los pasos necesarios para completar una tarea deben ser claros y relevantes. Las decisiones importantes deben ser fáciles de entender. Las acciones deberían ser fácilmente reversibles. Un complemento no es un destino: es una mejora en la funcionalidad de Office.

  • Diseñe para todas las plataformas y métodos de entrada. Los complementos están diseñados para que funcionen en todas las plataformas que admite Office, y la experiencia de usuario de su complemento debe estar optimizada para que funcione en diversas plataformas y factores de forma. Permita la compatibilidad con dispositivos dotados de ratón/teclado y entrada táctil, y asegúrese de que la interfaz de usuario HTML personalizada tiene capacidad de respuesta para adaptarse a diferentes factores de forma. Para obtener más información, consulte Tecnología táctil.

Ver también