Конструктивные шаблоны пользовательского интерфейса для надстроек OfficeUX design patterns for Office Add-ins

Проектирование пользовательского интерфейса для надстроек Office должно обеспечивать удобство работы для пользователей Office и расширять функциональный набор Office благодаря плавной интеграции в интерфейс 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.

Наши шаблоны пользовательского интерфейса состоят из компонентов.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. Они призваны обеспечить как быструю отправную точку для проектирования и разработки надстроек, так и руководство для достижения баланса между элементами Майкрософт и фирменной символикой.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.

Используйте шаблонные заготовки пользовательского интерфейса для того, чтобы: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;Build add-ins that visually integrate with the default Office UI.
  • формировать и визуализировать пользовательский интерфейс.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