Разработка вкладки для Microsoft Teams
Вкладка — это большой холст для содержимого приложения. Далее описано и показано, как люди могут добавлять вкладки, использовать их и управлять ими в Teams. Это может помочь вам в создании приложения.
Комплект разработчика для пользовательского интерфейса Microsoft Teams
В комплекте разработчика для пользовательского интерфейса Microsoft Teams можно найти полные рекомендации по проектированию вкладок, в том числе элементы, которые можно взять и изменить так, как нужно вам. В комплекте разработчика для пользовательского интерфейса также присутствуют такие важные темы, как специальные возможности, адаптивный размер, которые здесь не рассматриваются.
Добавьте вкладку
Вкладку можно добавить из Microsoft Teams Store (AppSource) или в одном из следующих контекстов:
- Чат
- Канал
- Собрание (до, во время или после собрания)
Мобильная версия
Пользователи могут получить доступ к вкладками, нажав кнопку Дополнительно в канале (пример ниже) или в чате, в который они были добавлены.
Версия для настольного компьютера
В следующем примере показано, как пользователи могут добавлять вкладки на канал.
Настройка вкладки
Существует короткий процесс настройки для добавления приложения в качестве вкладки канала, чата или собрания. В основном это зависит от вас. Например, у вас может быть описание использования приложения и некоторые дополнительные параметры. Если необходимо проверить подлинность пользователей, включив здесь шаг для входа.
Диалоговое окно настройки вкладок
Анатомия: диалоговое окно конфигурации вкладок
| Счетчик | Описание |
|---|---|
| 1 | Логотип приложения: полноцветный логотип вашего приложения. |
| 2 | Имя приложения: полное имя приложения. |
| 3 | iframe: адаптивное пространство для содержимого приложения (например, параметры вкладки или проверка подлинности). |
| 4 | Сведения о ссылке: открывает диалоговое окно, в котором отображаются дополнительные сведения о приложении, такие как полное описание, разрешения, необходимые приложению, а также ссылки на политику конфиденциальности и условия предоставления услуг. |
| 5 | Кнопка "Закрыть": закрывает диалоговое окно. |
| 6 | Функция "Уведомить участников группы": диалоговое окно спрашивает пользователей, хотят ли они создать сообщение, чтобы другие пользователи знали, что они добавили вкладку. |
| 7 | Кнопка "Назад": переходит к предыдущему шагу в зависимости от того, где открылось диалоговое окно. |
| 8 | Кнопка "Сохранить": завершает настройку вкладок. |
Проверка подлинности вкладки при едином входе
Вы можете добавить шаг, на котором пользователям будет необходимо сначала выполнить вход с учетными данными Майкрософт. Этот способ проверки подлинности называется единым входом (SSO).
Версия для настольного компьютера
Мобильная версия
Создание настройки вкладки с помощью шаблонов пользовательского интерфейса
Используйте один из следующих шаблонов пользовательского интерфейса Teams, чтобы спроектировать интерфейс настройки вкладки:
- Список. Списки могут отображать связанные элементы в формате, доступном для сканирования, и позволяют пользователям выполнять действия со всем списком или отдельными элементами.
- Форма. Формы предназначены для сбора, проверки и отправки данных пользовательского ввода в структурированном виде.
- Пустое состояние. Шаблон пустого состояния можно использовать для различных сценариев, включая вход, первый запуск, сообщения об ошибках и т. д.
Просмотр вкладки
Вкладки обеспечивают полноэкранный веб-режим в Teams, где можно отображать совместное содержимое, например доски задач и панели мониторинга, а также важную информацию.
Мобильная версия
Версия для настольного компьютера
Анатомия: вкладка
Мобильная версия
| Счетчик | Описание |
|---|---|
| 1 | Имя вкладки. Метка навигации для вкладки. |
| 2 | Чат вкладки. Открывает чат, который позволяет пользователям общаться рядом с содержимым. |
| 3 | Веб-представление. Отображает содержимое приложения. |
Версия для настольного компьютера
| Счетчик | Описание |
|---|---|
| 1 | Имя вкладки. Метка навигации для вкладки. |
| 2 | Переполнение вкладки. Открывает действия вкладки, такие как переименование и удаление. |
| 3 | Чат вкладки. Открывает чат справа, позволяя пользователям общаться рядом с содержимым. |
| 4 | iframe. Отображает содержимое приложения. |
Разработка вкладки с помощью шаблонов пользовательского интерфейса и дополнительных компонентов
Используйте один из следующих шаблонов и компонентов Teams, чтобы спроектировать интерфейс вкладки:
- Список. Списки могут отображать связанные элементы в формате, доступном для сканирования, и позволяют пользователям выполнять действия со всем списком или отдельными элементами.
- Доска задач. Доска задач, иногда называемая канбан-доской или трассой, представляет собой набор карточек, часто используемых для отслеживания состояния рабочих элементов или билетов.
- Панель мониторинга: панель мониторинга — это холст, содержащий несколько карточек, которые предоставляют обзор данных или содержимого.
- Форма. Формы предназначены для сбора, проверки и отправки данных пользовательского ввода в структурированном виде.
- Пустое состояние. Шаблон пустого состояния можно использовать для различных сценариев, включая вход, первый запуск, сообщения об ошибках и т. д.
- Навигация слева. Компонент навигации слева может помочь если вкладка требует некоторой навигации. Как правило, навигация по вкладке должна быть минимальной.
Использование вкладки для совместной работы
Вкладки помогают упростить беседы о содержимом в центральном расположении.
Обсуждения
Пользователи могут автоматически публиковать сообщения на канале или в чате после добавления новой вкладки. Это не только уведомит участников группы о новом содержимом и предоставит ссылку на вкладку, но и позволит пользователям начать говорить о вкладке.
Мобильная версия
Версия для настольного компьютера
Чат вкладки
Пользователи могут общаться рядом с просматриваемым содержимым вкладок. На настольном компьютере чат открывается сбоку от содержимого приложения.
Мобильная версия
Версия для настольного компьютера
Разрешения и представления на основе ролей
Работа с вкладками может отличаться для пользователей в зависимости от их разрешений. Например, один пользователь может получить доступ к вкладке, не выполняя вход. Другой пользователь, однако, должен выполнить вход и будет видеть немного другое содержимое.
Управление вкладками
Можно включить параметры переименования, удаления или изменения вкладки.
Анатомия: меню вкладок
Мобильная версия
| Счетчик | Описание |
|---|---|
| 1 | Открыть в браузере: открывает приложение в браузере устройства по умолчанию. |
| 2 | Копировать ссылку: пользователи могут копировать и делиться ссылкой на вкладку. |
| 3 | Параметры(необязательно): изменение параметров вкладки после ее добавления. |
| 4 | Переименование: пользователи могут дать вкладке имя, которое имеет смысл для канала, чата или собрания. |
| 5 | Удаление: удаляет вкладку из канала, чата или собрания. |
Версия для настольного компьютера
| Счетчик | Описание |
|---|---|
| 1 | Параметры(необязательно): позволяет пользователям изменять параметры вкладки после ее добавления. |
| 2 | Переименование: пользователи могут дать вкладке имя, которое имеет смысл для канала, чата или собрания. |
| 3 | Удаление: удаляет вкладку из канала, чата или собрания. |
Уведомления вкладок и создание глубинных ссылок
Вы можете отправить сообщение с прямой ссылкой на свою вкладку. Например, карточка показывает сводку данных об ошибке, которую пользователь может выбрать, чтобы увидеть всю ошибку на вкладке. Отправка сообщений о действиях с вкладками повышает осведомленность без явного уведомления всех (т. е. действия без шума). При необходимости вы также можете использовать @mention определенных пользователей.
Уведомлять пользователей о действиях с вкладками одним из следующих способов:
- Бот: этот метод предпочтительный, особенно если цепочка вкладок является целевой. Беседа с несколькими ветками вкладки перемещается в представление как недавно активная. Этот метод также позволяет усложнить отправку уведомления.
- Сообщение: в ленте новостей пользователя появляется сообщение с прямой ссылкой на вкладку.
Рекомендации
Используйте эти рекомендации для создания качественных приложений:
Версия для настольного компьютера
Совместная работа
Правильно: облегчить беседу
Включите содержимое и компоненты, о которых можно говорить. Если они не вписываются в контекст чата, канала или собрания, они не входят в вкладку.
Неправильно: относиться к вкладке как к любой другой веб-странице.
Вкладка — это не веб-страница, которую кто-то может просмотреть один раз. На вкладке должно отображаться наиболее важное и актуальное содержимое, необходимое для совместной работы.
Навигация
Правильно: ограничение задач и данных
Вкладки работают лучше всего, когда они отвечают конкретным потребностям. Включите ограниченный набор задач и данных, относящихся к команде или группе.
Неправильно: встраивать все приложение целиком
Использование вкладки для отображения всего приложения с многоуровневой навигацией и сложными взаимодействиями приводит к информационной перегрузке.
Настройка
Правильно: быть лаконичным
Если вашему приложению требуется проверка подлинности, попробуйте интегрировать единый вход Майкрософт для более удобного входа в систему. Кроме того, включайте только важные сведения и действия для добавления вкладки.
Неправильно: слишком много действий
Удалите ненужные действия для добавления вкладки.
Темы
Нужно: использовать преимущества цветовых маркеров Teams
Каждая тема Teams имеет собственную цветовую схему. Чтобы автоматически обрабатывать изменения темы, используйте в дизайне цветовые маркеры (Fluent UI).
Неправильно: жестко задавать значения цветов прямо в коде
Если вы не используете цветовые маркеры Teams, ваши макеты будут менее масштабируемыми и управление ими будет отнимать больше времени.
Мобильная версия
См. также
Platform Docs
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по