Рекомендации по разработке надстроек OfficeBest practices for developing Office Add-ins

Эффективные надстройки предоставляют уникальные и удобные функции, которые расширяют приложения Office, придавая им привлекательный внешний вид. Чтобы создать хорошую надстройку, сделайте работу пользователей удобной с первого запуска, разработайте первоклассный пользовательский интерфейс и оптимизируйте производительность надстройки. Применяя методики, описанные в этой статье, вы сможете создавать надстройки, которые помогают пользователям выполнять свои задачи быстро и эффективно.Effective add-ins offer unique and compelling functionality that extends Office applications in a visually appealing way. To create a great add-in, provide an engaging first-time experience for your users, design a first-class UI experience, and optimize your add-in's performance. Apply the best practices described in this article to create add-ins that help your users complete their tasks quickly and efficiently.

Примечание

Если вы планируете опубликовать надстройку в AppSource и сделать ее доступной в интерфейсе Office, убедитесь, что она соответствует политикам проверки AppSource. Например, чтобы пройти проверку, надстройка должна работать на всех платформах, поддерживающих определенные вами методы. Дополнительные сведения см. в разделе 4.12 и на странице со сведениями о доступности и ведущих приложениях для надстроек Office.If you plan to publish your add-in to AppSource and make it available within the Office experience, make sure that you conform to the AppSource validation policies. For example, to pass validation, your add-in must work across all platforms that support the methods that you define (for more information, see section 4.12 and the Office Add-in host and availability page).

Преимущества должны быть очевиднымиProvide clear value

  • Создавайте надстройки, которые помогают пользователям выполнять свои задачи быстро и эффективно. Основное внимание следует уделить сценариям, применимым для приложений Office. Например:Create add-ins that help users complete tasks quickly and efficiently. Focus on scenarios that make sense for Office applications. For example:
  • обеспечьте более быстрое и простое выполнение основных задач разработки с меньшим количеством прерываний;Make core authoring tasks faster and easier, with fewer interruptions.
  • добавьте в Office новые сценарии;Enable new scenarios within Office.
  • внедрите в ведущие приложения Office дополнительные службы;Embed complementary services within Office hosts.
  • сделайте работу в Office более удобной, чтобы повысить производительность.Improve the Office experience to enhance productivity.
  • Чтобы ваша надстройка быстро заинтересовала пользователей, обеспечьте демонстрацию ее преимуществ уже при первом использовании.Make sure that the value of your add-in is clear to users right away by creating an engaging first run experience.
  • Создайте привлекательное описание надстройки в AppSource. Сделайте преимущества вашей надстройки очевидными из названия и описания. Не полагайтесь на то, что по вашей торговой марке будет понятно, для чего предназначена надстройка.Create an effective AppSource listing. Make the benefits of your add-in clear in your title and description. Don't rely on your brand to communicate what your add-in does.

Удобство работы с первого запускаCreate an engaging first-run experience

  • Привлекайте новых пользователей удобным и интуитивно понятным интерфейсом. Помните, что пользователи все еще решают, использовать вашу надстройку или забросить ее после загрузки из магазина.Engage new users with a highly usable and intuitive first experience. Note that users are still deciding whether to use or abandon an add-in after they download it from the store.

  • Сделайте очевидными действия, необходимые для вызова вашей надстройки. Используйте видеоролики, указатели, панели разбиения на страницы и другие ресурсы, чтобы привлечь пользователей.Make the steps that the user needs to take to engage with your add-in clear. Use videos, placemats, paging panels, or other resources to entice users.

  • Если пользователям необходимо войти, чтобы использовать надстройку, следует донести до них ценность этой надстройки уже при ее запуске, а не просто просить их выполнить вход.Reinforce the value proposition of your add-in on launch, rather than just asking users to sign in.

  • Разработайте обучающий интерфейс, чтобы помочь пользователям и персонализировать среду.Provide teaching UI to guide users and make your UI personal.

    Снимок экрана: область задач надстройки с начальными этапами работы рядом с надстройкой без этих этапов

  • Если ваша контентная надстройка привязывается к данным в документе, включите пример данных или шаблон, чтобы показать пользователям рекомендуемый формат данных.If your content add-in binds to data in the user's document, include sample data or a template to show users the data format to use.

    Снимок экрана: контентная надстройка с данными рядом с контентной надстройкой без данных

  • Предлагайте бесплатные пробные версии. Если для вашей надстройки требуется подписка, сделайте некоторые функции доступными без нее.Offer free trials. If your add-in requires a subscription, make some functionality available without a subscription.

  • Упростите регистрацию. Используйте автоматическое заполнение сведений (адрес электронной почты, отображаемое имя) и пропустите проверку электронной почты.Make signup simple. Prefill information (email, display name) and skip email verifications.

  • Избегайте всплывающих окон. Если вам необходимо их использовать, помогите пользователю включить всплывающее окно.Avoid pop ups. If you have to use them, guide the user to enable your pop up.

Шаблоны, которые можно применять при разработке для первого запуска, представлены в статье Конструктивные шаблоны для надстроек Office.For patterns that you can apply as you develop your first-run experience, see UX design patterns for Office Add-ins.

Команды надстроекUse add-in commands

  • Предоставьте релевантные точки входа пользовательского интерфейса для надстройки, используя команды надстройки. Соответствующие сведения, включая рекомендации по оформлению, см. в статье о командах надстроек.Provide relevant UI entry points for your add-in by using add-in commands. For details, including design best practices, see add-in commands.

Принципы оформления элементов пользовательского интерфейсаApply UX design principles

  • Убедитесь, что внешний вид и поведение вашей надстройки согласованы с интерфейсом Office. Используйте Office UI Fabric.Ensure that the look and feel and functionality of your add-in complements the Office experience. Use Office UI Fabric.

  • Больше содержимого, меньше хрома. Избегайте лишних элементов интерфейса, которые не представляют ценности для пользователя.Favor content over chrome. Avoid superfluous UI elements that don't add value to the user experience.

  • Пользователь должен быть главным. Убедитесь, что пользователи понимают важные решения и могут с легкостью отменять действия, выполняемые надстройкой.Keep users in control. Ensure that users understand important decisions, and can easily reverse actions the add-in performs.

  • Используйте фирменную символику как повод для доверия и ориентир. Она не должна слишком бросаться в глаза или служить рекламой.Use branding to inspire trust and orient users. Do not use branding to overwhelm or advertise to users.

  • Избегайте прокрутки. Оптимизируйте надстройку для разрешения 1366 x 768.Avoid scrolling. Optimize for 1366 x 768 resolution.

  • Не включайте нелицензированные изображения.Do not include unlicensed images.

  • Используйте понятный и простой язык в надстройке.Use clear and simple language in your add-in.

  • Учитывайте специальные возможности. Обеспечьте удобство работы для всех пользователей и поддержку таких специальных возможностей, как средство чтения с экрана.Account for accessibility - make your add-in easy for all users to interact with, and accommodate assistive technologies such as screen readers.

  • Обеспечьте поддержку всех платформ и методов ввода, включая мышь, клавиатуру и сенсорное управление. Убедитесь, что ваш пользовательский интерфейс поддерживает различные форм-факторы.Design for all platforms and input methods, including mouse/keyboard and touch. Ensure that your UI is responsive to different form factors.

Оптимизация для сенсорного управленияOptimize for touch

  • Используйте свойство Context.touchEnabled, чтобы определить, поддерживается ли сенсорное управление ведущим приложением, в котором работает надстройка.Use the Context.touchEnabled property to detect whether the host application your add-in runs on is touch enabled.

    Примечание

    Это свойство не поддерживается в Outlook.This property is not supported in Outlook.

  • Убедитесь, что размер всех элементов интерфейса удобен для сенсорного управления. Например, кнопки имеют достаточно большие размеры, а в полях ввода будет удобно вводить данные.Ensure that all controls are appropriately sized for touch interaction. For example, buttons have adequate touch targets, and input boxes are large enough for users to enter input.

  • Не рассчитывайте, что можно будет обойтись другими способами ввода, например наведением указателя или щелчком правой кнопкой мыши.Do not rely on non-touch input methods like hover or right-click.

  • Убедитесь, что надстройка работает как в книжной, так и в альбомной ориентации. Помните, что на сенсорных устройствах часть надстройки может быть закрыта экранной клавиатурой.Ensure that your add-in works in both portrait and landscape modes. Be aware that on touch devices, part of your add-in might be hidden by the soft keyboard.

  • Протестируйте надстройку на настоящем устройстве, выполнив загрузку неопубликованного приложения .Test your add-in on a real device by using sideloading.

Примечание

Если используется Office UI Fabric, то многие из элементов оформления настраиваются без вашего вмешательства.If you're using Office UI Fabric for your design elements, many of these elements are taken care of.

Оптимизация и отслеживание производительности приложенияOptimize and monitor add-in performance

  • Создайте ощущение быстрой реакции пользовательского интерфейса. Надстройка должна загружаться за 500 мс или меньше.Create the perception of fast UI responses. Your add-in should load in 500 ms or less.

  • Убедитесь, что все команды пользователя выполняются менее, чем за одну секунду.Ensure that all user interactions respond in under one second.

  • Добавьте индикаторы загрузки для продолжительных операций.Provide loading indicators for long-running operations.

  • Используйте CDN для размещения изображений, ресурсов и общих библиотек. Загружайте как можно больше компонентов из одного источника.Use a CDN to host images, resources, and common libraries. Load as much as you can from one place.

  • Соблюдайте стандартные методики для оптимизации веб-страницы. В производственной версии используйте только компактные версии библиотек. Загружайте только необходимые ресурсы и оптимизируйте их загрузку.Follow standard web practices to optimize your web page. In production, use only minified versions of libraries. Only load resources that you need, and optimize how resources are loaded.

  • Если для выполнения операций требуется время, сообщайте об этом пользователям. Учитывайте пороговые значения, перечисленные в приведенной ниже таблице. Дополнительные сведения см. в статье Ограничения ресурсов и оптимизация производительности надстроек Office.If operations take time to execute, provide feedback to users. Note the thresholds listed in the following table. For additional information, see Resource limits and performance optimization for Office Add-ins.

    Класс взаимодействияInteraction class Целевой объектTarget Верхняя границаUpper bound Впечатление от использованияHuman perception
    МгновенноInstant <=50 мс<=50 ms 100 мс100 ms Без заметной задержки.No noticeable delay.
    БыстроFast 50–100 мс50-100 ms 200 мс200 ms Минимально заметная задержка. Нет необходимости в информативном сопровождении.Minimally noticeable delay. No feedback necessary.
    НормальноеTypical 100–300 мс100-300 ms 500 мс500 ms Достаточная скорость, но не более того. Нет необходимости в информативном сопровождении.Quick, but too slow to be described as fast. No feedback necessary.
    ОперативноResponsive 300–500 мс300-500 ms 1 секунда1 second Не быстро, но надстройка реагирует хорошо. Нет необходимости в информативном сопровождении.Not fast, but still feels responsive. No feedback necessary.
    ПродолжительноContinuous >500 мс>500 ms 5 секунд5 seconds Среднее время ожидания, надстройка реагирует не так хорошо. Может потребоваться информативное сопровождение.Medium wait, no longer feels responsive. Might need feedback.
    ДлительноCaptive >500 мс>500 ms 10 секунд10 seconds Длительная задержка, но не настолько, чтобы пользователь занялся чем-то другим. Может потребоваться информативное сопровождение.Long, but not long enough to do something else. Might need feedback.
    ДолгоExtended >500 мс>500 ms Более 10 секунд>10 seconds Длительная задержка, при которой пользователь может заняться чем-то другим. Может потребоваться информативное сопровождение.Long enough to do something else while waiting. Might need feedback.
    Слишком долгоLong running >5 с>5 seconds >1 минуты>1 minute Пользователи наверняка будут заниматься чем-то другим.Users will certainly do something else.
  • Отслеживайте работоспособность службы и используйте телеметрию для отслеживания успешной работы пользователя.Monitor your service health, and use telemetry to monitor user success.

МаркетингMarket your add-in

  • Опубликуйте надстройку в AppSource и рекламируйте ее на своем веб-сайте. Создайте эффективное описание для AppSource.Publish your add-in to AppSource and promote it from your website. Create an effective AppSource listing.

  • Давайте надстройкам лаконичные и информативные названия. Их длина не должна превышать 128 символов.Use succinct and descriptive add-in titles. Include no more than 128 characters.

  • Составьте краткие и привлекательные описания надстройки. Дайте ответ на вопрос "Какую проблему решает эта надстройка?"Write short, compelling descriptions of your add-in. Answer the question "What problem does this add-in solve?".

  • Опишите преимущества надстройки в названии и описании. Не полагайтесь на свою торговую марку.Convey the value proposition of your add-in in your title and description. Don't rely on your brand.

  • Создайте веб-сайт, который поможет пользователям найти и использовать вашу надстройку.Create a website to help users find and use your add-in.

См. такжеSee also