Разработка приложения Microsoft Teams с помощью расширенных компонентов пользовательского интерфейса

  • Статья

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

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

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

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

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

Основные варианты использования

  • Иерархия взаимодействия
  • Навигация

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

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

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

В примере показан шаблон навигации на рабочем столе.

Левая навигация

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

Основные варианты использования

  • Просмотр нескольких страниц на вкладке Teams.
  • Разбить сложные приложения на несколько страниц.

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

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

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

В примере показан левый шаблон навигации на рабочем столе.

Панель уведомлений

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

Панель уведомлений можно реализовать с помощью компонента оповещений пользовательского интерфейса Fluent.

Основные варианты использования

  • Критические сообщения, ошибки и предупреждения
  • Сообщения об успешном выполнении
  • Информационные или рекламные сообщения

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

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

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

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

Представление этапа

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

Узнайте, как реализовать Stageview.

Основные варианты использования

  • Отображение содержимого на большой поверхности в Teams вместо другого приложения или браузера
  • Интересное мультимедиа или другое многофункциональное содержимое

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

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

В примере показан шаблон этапа на мобильных устройствах.

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

В примере показан шаблон этапа на рабочем столе.

Панель инструментов

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

Основные варианты использования

  • Контекстные действия с содержимым приложения.
  • Контекстный фильтр и поиск.
  • Навигация и навигация.

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

В примере показан шаблон панели инструментов на мобильных устройствах.

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

В примере показан шаблон панели инструментов на рабочем столе.