适用于 Office 外接程序的 UX 设计模式UX design patterns for Office Add-ins

在设计 Office 外接程序的用户体验时,应为 Office 用户提供具有吸引力的体验并通过在默认 Office UI 内无缝接入来扩展整体 Office 体验。Designing the user experience for Office Add-ins should provide a compelling experience for Office users and extend the overall Office experience by fitting seamlessly within the default Office UI.

我们的 UX 模式由组件组成。Our UX patterns are composed of components. 组件是帮助客户与软件或服务元素进行交互的控件。Components are controls that help your customers interact with elements of your software or service. 按钮、导航、和菜单是常见组件的示例,通常具有一致的样式和行为。Buttons, navigation, and menus are examples of common components that often have consistent styles and behaviors.

Office UI Fabric 呈现外观和行为类似于 Office 部件的组件。Office UI Fabric renders components that look and behave like a part of Office. 利用 Fabric 来轻松与 Office 集成。Take advantage of Fabric to easily integrate with Office. 如果外接程序有自己预先存在的组件语言,则不需要为支持 Fabric 而放弃它。If your add-in has its own preexisting component language, you don't need to discard it in favor of Fabric. 与 Office 集成的同时寻找保留该语言的机会。Look for opportunities to retain it while integrating with Office. 想办法改变风格元素、消除冲突或采用可避免用户混淆的样式和行为。Consider ways to swap out stylistic elements, remove conflicts, or adopt styles and behaviors that remove user confusion.

提供的模式是基于常见客户方案和用户体验研究的最佳做法解决方案。The provided patterns are best practice solutions based on common customer scenarios and user experience research. 它们旨在提供设计和开发外接程序的快速切入点,以及提供在 Microsoft 和品牌元素之间实现平衡的指导。They are meant to provide both a quick entry point to designing and developing add-ins as well as guidance to achieve balance between Microsoft and brand elements. 提供整洁的新式用户体验,并在 Microsoft Fabric 设计语言的设计元素与合作伙伴的独特品牌标识之间保持平衡,可能有助于提高外接程序的用户保留率和采用率。Providing a clean, modern user experience that balances design elements from Microsoft's Fabric design language and the partner's unique brand identity may help increase user retention and adoption of your add-in.

使用 UX 模式模板来实现以下目的:Use the UX pattern templates to:

  • 将解决方案应用于常见的客户方案。Apply solutions to common customer scenarios.
  • 应用设计最佳实践。Apply design best practices.
  • 纳入“Office UI Fabric”组件和样式。Incorporate Office UI Fabric components and styles.
  • 构建以可视方式与默认 Office UI 集成的外接程序。Build add-ins that visually integrate with the default Office UI.
  • 形成 UX 概念并将其可视化。Ideate and visualize UX.

入门Getting started

该模式按照外接程序中的常见按键操作或体验来进行组织。The patterns are organized by key actions or experiences that are common in an add-in. 主要的组包括:The main groups are:

浏览每个分组,了解如何使用最佳做法来设计外接程序。Browse each grouping to get an idea of how you can design your add-in using best practices.

备注

本文档中显示的所有示例屏幕均按 1366x768 的分辨率进行设计和显示。The example screens shown throughout this documentation are designed and displayed at a resolution of 1366x768.

另请参阅See also