Разработка пользовательского интерфейса надстроек Office

Надстройки Office расширяют возможности Office, предоставляя контекстные функции, с которыми пользователи могут работать в клиентах Office. Надстройки позволяют пользователям выполнять больше, позволяя им получать доступ к внешним функциям в Office без дорогостоящих переключений контекста.

Дизайн пользовательского интерфейса надстройки должен полностью интегрироваться с Office для эффективного и естественного взаимодействия с пользователями. Настройте команды надстроек для представления доступа к надстройке и воспользуйтесь нашими рекомендациями при создании пользовательского интерфейса на основе HTML.

Принципы оформления Office

Приложения Office соответствуют общему набору правил взаимодействия. Приложения совместно используют содержимое и имеют элементы, которые выглядят и ведут себя одинаково. Это сходство основывается на наборе принципов разработки. Принципы помогают команде Office создавать интерфейсы, которые отвечают задачам клиентов. Их понимание и соблюдение поможет вам создавать решения, которые отвечают целям ваших клиентам в Office.

Соблюдайте принципы оформления Office, чтобы ваши надстройки не вызывали у пользователей никаких неудобств.

Явное проектирование для Office

Функциональность, так же как и внешний вид и удобство использования надстройки должны гармонично дополнять возможности Office. Надстройки должны чувствовать себя собственными на всех платформах, будь то в Word на iPad или PowerPoint в Интернете. Хорошая надстройка — это органичное сочетание дополнительных возможностей, платформы и приложения Office. Применяйте тематическое оформление документов и пользовательского интерфейса.

Использование пользовательского интерфейса Fluent в Интернете в качестве языка разработки

Рассмотрите возможность использования Fluent UI для Интернета в качестве языка дизайна и набора инструментов. Пользовательский интерфейс Fluent для Интернета имеет два варианта.

  • Для проектов React: используйте React пользовательского интерфейса Fluent— интерфейсную платформу React, предназначенную для создания возможностей, которые легко вписываются в широкий спектр продуктов Майкрософт. Он обеспечивает надежные, современные, доступные компоненты на основе React, которые легко настраиваются с помощью CSS-in-JS. Сведения о начале работы см. в статье Использование React пользовательского интерфейса Fluent в надстройках Office.

  • Для проектов, отличных от React: используйте Fabric Core, коллекцию классов CSS с открытым кодом и сочетания sass для цветов, анимаций, шрифтов, значков и сеток. (По историческим причинам он называется "Fabric Core", а не "Fluent Core".) Для начала см. раздел Fabric Core в надстройках Office.

    Примечание.

    Хотя fabric Core является рекомендуемой библиотекой для разработки надстроек, не React, команда работает над веб-компонентами пользовательского интерфейса Fluent, чтобы предоставить более новое решение. Созданная на базе FAST библиотека веб-компонентов пользовательского интерфейса Fluent позволяет использовать, настраивать и создавать веб-компоненты для создания более современного пользовательского интерфейса на основе стандартов. Мы приглашаем вас протестировать эту библиотеку, выполнив краткий запуск и приветствуя отзыв о вашем опыте через GitHub.

Предпочитать содержимое хрому

Разрешите клиенту страницу, слайд или электронную таблицу оставаться в центре внимания. Надстройка — это вспомогательный интерфейс. Вспомогательный хром не должен мешать работе с содержимым и функциями надстройки. Размещение фирменной символики требует разумного подхода. Мы знаем, что важно сделать надстройку уникальной и узнаваемой, но фирменная символика не должна отвлекать пользователей. Стремитесь, чтобы основное внимание уделялось содержимому и выполнению задач, а не символике. Рекомендации по эффективному фирменному оформлению см. в разделе Шаблоны фирменной символики.

Сделайте его приятным и держите пользователей под контролем

Людям нравятся функциональные и красивые продукты. Тщательно проработайте свою надстройку. Уделите особое внимание мелочам, учитывайте все варианты взаимодействия и внешнего вида. Разрешите пользователям самим выбирать, что делать. Действия, необходимые для выполнения задачи, должны быть понятными и логичными. Важные решения должны быть понятными. Отмена действий не должна вызывать затруднений. Надстройка не является назначением— это улучшение функциональности Office.

Проектирование для всех платформ и методов ввода

Надстройки предназначены для работы на всех платформах, поддерживаемых Office, поэтому пользовательский интерфейс надстройки должен быть оптимизирован для работы на разных платформах и форм-факторах. Поддержка мыши и клавиатуры и сенсорных устройств ввода, а также обеспечение того, чтобы пользовательский пользовательский интерфейс HTML реагировал на различные форм-факторы. Дополнительные сведения см. в разделе Оптимизация сенсорного ввода.

См. также

  • Last updated on