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

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

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

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

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

Откройте модуль задач

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

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

Анатомия

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

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

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

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

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

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

  • Список.Списки могут отображать связанные элементы в сканируемых форматах и позволяют пользователям принимать меры по всему списку или отдельным пунктам.
  • Form:Forms are for collecting, validating and submitting user input in a structured way.
  • Пустоесостояние. Пустой шаблон состояния можно использовать для многих сценариев, включая вход, первый запуск, сообщения об ошибках и многое другое.

Примеры

List

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

Form

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

Вход

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

Мультимедиа

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

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

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

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

Опрос

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

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

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

Usability

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

Do: Используйте один модуль задач одновременно

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

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

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

Это создает неоконченный, запутанный пользовательский интерфейс.

Оперативно

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

Do: Убедитесь, что содержимое отвечает на запросы

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

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

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

Это лучшая практика, чтобы держать контент сосредоточенным и не слишком длительным. Если прокрутка необходима, прокрутите по вертикали, а не по горизонтали.

Простота

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

Do: Keep it short

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

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

Don't: Have long interactions

Постарайтесь сохранить ваши взаимодействия короткими и до точки.

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

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

Do: Использование сообщений об ошибках с помощью inline

См. шаблон пользовательского интерфейса форм для инструкций по обработке ошибок.

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

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

Не всплывай сообщение об ошибке в диалоговом окну над модулем задач. Это создает запутанный пользовательский интерфейс.