Проектирование модулей задач для приложения Microsoft Teams

Модули задач позволяют создавать модальные всплывающие окна в приложении Teams. Используйте эту возможность для отображения мультимедийных материалов и информации или для выполнения сложной задачи.

В примере показан модуль задач.

Комплект разработчика для пользовательского интерфейса Microsoft Teams

В комплекте разработчика для пользовательского интерфейса Microsoft Teams можно найти более полные рекомендации по проектированию модулей задач, в том числе элементы, которые можно использовать и изменять по мере необходимости.

Открытие модуля задачи

Модули задач можно запускать практически из любого места в вашем приложении.

  • Вкладка. Модуль задач можно запускать по любой ссылке на вкладке. Используйте в сценариях, в которых пользователь должен сосредоточиться на взаимодействии.
  • Бот. Модуль задач можно запускать по ссылке внутри сообщения бота.
  • Адаптивная карточка. Модуль задач можно запускать с адаптивной карточки (отправленной расширением для сообщений или ботом), когда пользователь выбирает кнопку.
  • Расширение для сообщений (команды действий): с помощью расширений для сообщений можно выполнять определенные действия с содержимым сообщений. При выборе какого-либо действия открывается модуль задачи.
  • Расширение для сообщений (контекст окна создания сообщения): в окне создания сообщения можно создать расширение для сообщений, открывающее модуль задачи вместо обычного всплывающего элемента. Зарезервируйте модули задач для сложного взаимодействия, например для заполнения форм.

Структура

Модули задач предоставляют гибкое пространство для интерфейсов размещенных приложений. Модули задач создаются с использованием iframe (для классических приложений) или webview (для мобильных приложений), чтобы можно было проектировать модули задач как с использованием наших шаблонов пользовательского интерфейса (рекомендуется), так и с нуля.

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

Мобильная версия

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

Счетчик Описание
1 Заголовок: создавайте ясные и четкие заголовки. Опишите задачу, которую необходимо выполнить пользователям.
2 Имя приложения: полное имя приложения.
3 Кнопка закрытия: закрывает модуль задач. При этом несохраненные изменения не применяются к содержимому приложения.
4 Веб-представление: пространство быстрого отклика, в котором размещено содержимое приложения.
5 Действия (необязательно): кнопки, связанные с содержимым приложения.

Версия для рабочего стола

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

Счетчик Описание
1 Значок приложения
2 Имя приложения: полное имя приложения.
3 Заголовок: создавайте ясные и четкие заголовки. Опишите задачу, которую необходимо выполнить пользователям.
4 Кнопка закрытия: закрывает модуль задач. При этом несохраненные изменения не применяются к содержимому приложения.
5 IFrame: пространство быстрого отклика, в котором размещено содержимое приложения.
6 Действия (необязательно): кнопки, связанные с содержимым приложения.

Проектирование с помощью шаблонов пользовательского интерфейса

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

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

Примеры

Список

Списки хорошо работают в модуле задач, так как их легко сканировать.

Мобильная версия

Пример списка в модуле задач на мобильном устройстве.

Версия для рабочего стола

Пример списка в модуле задач.

Форма

Модули задач — отличное место для отображения форм с последовательным пользовательским вводом и встроенной проверкой. Можно использовать адаптивные карточки как способ встраивания элементов формы.

Мобильная версия

Пример формы в модуле задач на мобильном устройстве.

Версия для рабочего стола

Пример формы в модуле задач.

Вход

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

Мобильная версия

Пример входа в систему в модуле задач на мобильном устройстве.

Версия для рабочего стола

Пример входа в систему в модуле задач.

Мультимедиа

Встраивайте мультимедийное содержимое в модуль задач для целенаправленного просмотра.

Мобильная версия

Пример мультимедийного содержимого в модуле задач на мобильном устройстве.

Версия для рабочего стола

Пример мультимедийного содержимого в модуле задач.

Пустое состояние

Используйте для приветствия, сообщений об ошибках и успешном завершении.

Мобильная версия

Пример пустого состояния в модуле задач на мобильном устройстве.

Версия для рабочего стола

Пример пустого состояния в модуле задач.

Встраивайте карусель галереи в iframe (для рабочего стола) или веб-представление (для мобильных устройств).

Мобильная версия

Пример коллекции изображений в модуле задач на мобильном устройстве.

Версия для рабочего стола

Пример коллекции изображений в модуле задач.

Опрос

В этом примере показаны результаты опроса, запущенного с адаптивной карточки. Опрос также можно поместить в модуль задач.

Мобильная версия

Пример опроса в модуле задач на мобильном устройстве.

Версия для рабочего стола

Пример опроса в модуле задач.

Рекомендации

Используйте эти рекомендации для создания качественных приложений.

Удобство использования

Пример, показывающий лучшие методики использования модуля задач (по одному модулю задач за раз).

Используйте по одному модулю задач за раз

Цель заключается в том, чтобы сосредоточить внимание пользователя на выполнении задачи.

Пример, показывающий лучшие методики использования модуля задач (всплывающее диалоговое окно поверх модуля задач).

Не помещайте всплывающее диалоговое окно поверх модуля задач

Это провоцирует утрату фокуса пользователем и сбивает его с толку.

Быстрый отклик

Пример, показывающий лучшие методики использования модуля задач (убедитесь, что содержимое быстро реагирует на запросы).

Убедитесь, что содержимое быстро реагирует на запросы

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

Пример, показывающий лучшие методики использования модуля задач (не используйте горизонтальные полоски прокрутки).

Не используйте горизонтальные полоски прокрутки

Это поможет сделать содержимое сфокусированным и не слишком длинным. Используйте прокрутку по вертикали, а не по горизонтали, если она все-таки необходима.

Простота

Пример, показывающий лучшие методики использования модуля задач (будьте лаконичны).

Будьте лаконичны

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

Пример, показывающий лучшие методики использования модуля задач (не используйте длительные взаимодействия).

Не используйте длительные взаимодействия

Старайтесь, чтобы все взаимодействия были краткими и по существу.

Сообщения об ошибках

Пример, показывающий лучшие методики использования модуля задач (используйте встроенные сообщения об ошибках).

Используйте встроенные сообщения об ошибках

Рекомендации по обработке встроенных ошибок см. в шаблоне пользовательского интерфейса форм.

Пример, показывающий лучшие методики использования модуля задач (сообщения об ошибках в диалогах).

Не помещайте сообщения об ошибках в диалоговые окна

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