Поделиться через

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

  • Статья

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

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

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

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

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

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

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

    Примечание.

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

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

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

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

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

См. также