Проектирование диалоговых окон для приложения Microsoft Teams

Статья
12/28/2023

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

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

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

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

Открытие диалогового окна

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

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

Структура

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

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

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

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

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

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

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

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

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

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

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

Примеры

Список

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

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

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

Версия для настольного компьютера

Form

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

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

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

Версия для настольного компьютера

Пример формы в диалоговом окне.

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