Создание вкладки собранияDesign an in-meeting tab

Вкладка "в собрании" это холст для расширения совместной работы во время собраний.The in-meeting tab is a canvas for augmenting collaboration during meetings. В зависимости от возможности вкладки Teams участники могут просматривать содержимое приложения и взаимодействовать с ним в выделенном пространстве за пределами этапа собрания с помощью общих представлений или представлений на основе ролей.Based on the Teams tab capability, attendees can see and interact with app content in a dedicated space outside the meeting stage through shared or role-based views.

Варианты использованияUse cases

С помощью вкладки в собрании пользователи могут выполнять следующие действия:People might use the in-meeting tab to:

  • Предоставление подробной обратной связи (например, Оценка кандидата на задание)Provide detailed feedback (for example, evaluate a job candidate)
  • Быстрое создание опроса, опроса или элемента задачи для участников собранияQuickly create a poll, survey, or task item for the meeting participants
  • Отображение заметок, относящихся к собранию (например, сведений о менеджере по продажам)Display notes relevant to the meeting (for example, information about a sales lead)

ПримерExample

В следующем примере показана вкладка на собрании, в которой отображается контент приложения опроса.The following example shows the in-meeting tab displaying survey app content.

Пример: вкладка Собрание в собрании может выглядеть с точки зрения организатора собрания.

Просмотр полного сценария (фигма)See the full scenario (Figma)

Другие примеры вариантов использования (фигма)See other example use cases (Figma)

СоставляющиеAnatomy

На вкладке в собрании отображается контент приложения с использованием следующих измерений:The in-meeting tab displays your app content using the following dimensions:

  • Ширина: 280 пикселей для области вебвиев.Width: 280 pixels for the webview area. В левой и правой сторонах вебвиев есть 20 точек заполнения.There are 20 pixels of padding on the left and right sides of the webview.
  • Высота: полный выпуск в нижней части вкладки. Существует 20 точек заполнения между областью вебвиев и заголовком табуляции.Height: Full bleed to the bottom of the tab. There are 20 pixels of padding between the webview area and tab header.

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

  1. Значок приложения: точка входа на вкладку "в собрании".App icon: The entry point to the in-meeting tab.
  2. Верхний колонтитул: включает имя вкладки.Header: Includes the tab name.
  3. Name: имя экземпляра вкладки.Name: The name of the tab instance.
  4. Закрыть: закрывает вкладку. Всегда используйте значок закрытия сверху справа, а не действие в нижнем колонтитуле.Dismiss: Dismisses the tab. Always use the upper-right close icon instead of an action in the footer.
  5. Вебвиев: отображает весь контент стороннего приложения.Webview: Displays all third-party app content.

ПоведениеBehavior

МасштабScale

В настоящее время ширина вкладки "в собрании" исправлена.Currently, the width of the in-meeting tab is fixed.

ПрокруткиScrolling

Вот что нужно знать о прокрутке на вкладке на собрании:Here's what to know about scrolling in the in-meeting tab:

  • Эту возможность можно прокручивать только по вертикали.You should only be able to scroll vertically.
  • Отображается только содержимое, к которому вы выполнили прокрутку (ничего или не ниже).You can only see the content you've scrolled to (nothing above or below).
  • Полоса прокрутки является частью содержимого вебвиев.The scrollbar is part of the webview content.

Иллюстрация, на которой показано, как работает прокрутка содержимого вебвиев на вкладке "в собрании".

Для сценариев с слоями навигации или большим содержимым рекомендуется разрешить пользователям переходить на дополнительный слой.For scenarios with navigation layers or heavy content, we recommend allowing users to navigate to a secondary layer. Пользователи должны иметь возможность вернуться к предыдущему слою.Users must be able to go back to the previous layer.

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

КомпонентыComponents

Вкладки на собрании в первую очередь строятся с помощью следующих компонентов пользовательского интерфейса (фигма), основанных на системе дизайна Fluent.In-meeting tabs are built primarily with the following UI components (Figma), which are based on the Fluent Design System.

КомпонентComponent РекомендацииGuidelines ПримерExample
КнопкаButton Основные и дополнительные кнопки могут быть средними или малымиPrimary and secondary buttons can be medium or small Отправка ответаSend a response
InputInput Поле для краткого ввода данных пользователем.Field for brief user input. Текст метки может включать значокLabel text can include an icon Введите отзывEnter feedback
Раскрывающийся списокDropdown Выберите один или несколько параметров из списка.Select one or more options from a list. Может включать функции поиска и выбора нескольких элементовCan include search and multi-selection features Выбор языкаChoose a language
Элементы управления выборомSelection controls Используйте флажки для нескольких вариантов или переключателей и переключитесь на один вариант.Use checkboxes for multiple choices or radio buttons and toggles for single choices. Для более подробного выбора используйте ползунокFor more detailed selections, use a slider Голосование за опросVote in a poll
ОповещенияAlerts При отображении срочных сообщений, состояния ошибок или предупреждений сообщение должно быть кратким и не прерывать текущую задачу пользователяWhether displaying an urgent message, error state, or warning, the message should be short and won't interrupt the user's current task Ошибка отображения при отправке ответаDisplay issue when submitting a response

ТемыTheming

ЦветаColors

Используйте рекомендуемую цветовую схему (фигма) для фоновых изображений, переднего плана и состояний.Use the recommended color scheme (Figma) for backgrounds, foregrounds, and conveying states.

Шрифтовое оформлениеTypography

Используйте Рекомендуемые размеры и веса шрифтов (фигма) для заголовков, основного текста и текста метаданных.Use the recommended font sizes and weights (Figma) for titles, body text, and metadata text.

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

ОткликаResponsiveness

Макеты вкладок на собрании должны иметь возможность масштабироваться до различных размеров.In-meeting tab layouts should be able to scale to various sizes. Рассмотрите способ масштабирования вкладки и получения фигуры до, во время и после собрания.Consider how the tab will scale and take shape before, during, and after the meeting.

Иллюстрация, на которой показано, что содержимое вкладки "в собрании" выглядит как вкладка полноэкранного экрана перед собранием и после него.

Перед собраниемBefore the meeting

Убедитесь, что макет вкладок можно адаптировать к разметке справа или слева для разных языков, а элементы управления перемещаются в правильное расположение.Make sure your tab layout can adapt to a right or left layout for different languages and that controls move to the correct locations. (Макеты перед собраниями также могут применяться к макетам после собраний.)(Pre-meeting layouts can also apply to post-meeting layouts.)

Иллюстрация, на которой показано, как содержимое вкладки перед собранием сжимается на вкладке "на собрание" во время собрания.

Во время собранияDuring the meeting

Содержимое вкладки регулируется макетом и расположением вкладок на собрании.Tab content adjusts to the in-meeting tab layout and location.

ТемыTheming

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

Do: дизайн для темной темыDo: Design for a dark theme

Собрания Teams оптимизированы для темного режима, что позволяет снизить визуальное и пользовательское шум, чтобы пользователи могли сосредоточиться на обсуждении и общем содержимом.Teams meetings are optimized for dark mode to help reduce visual and cognitive noise so users can focus on the discussion and shared content. Вкладка "на собрании" должна применять темную тему и следовать рекомендациям.The in-meeting tab should apply a dark theme and should follow theming guidelines.

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

Не используйте незнакомые цвета.Don't: Use unfamiliar colors

Цвета, которые могут пересекаться со средой для собраний, могут отвлекаться от несущего объема в Teams.Colors that clash with the meeting environment may be distracting and appear less native to Teams.

ПрокруткиScrolling

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

Do: вертикальная прокруткаDo: Scroll vertically

Пользователи предполагают вертикальную прокрутку в Teams (и в других местах).Users anticipate vertical scrolling in Teams (and elsewhere).

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

Не: прокручивать по горизонталиDon't: Scroll horizontally

Горизонтальная полоса прокрутки не является ожидаемым поведением в Teams.Horizontal scrolling isn’t an expected behavior in Teams. Другие холсты в среде проведения собраний прокручиваются вертикально.Other canvases in the meeting environment scroll vertically.

МакетLayout

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

Do: Single ColumnsDo: Single columns

При наличии узкой природы вкладки в собрании настоятельно рекомендуется отобразить содержимое в отдельном столбце.Given the in-meeting tab’s narrow nature, we strongly recommend displaying the contents in a single column.

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

Не: несколько столбцовDon't: Multiple columns

Из-за ограниченного пространства вкладки в собрании не рекомендуется использовать макеты с несколькими столбцами.Due to the limited space of the in-meeting tab, layouts with more than one column aren’t recommended.

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

Do: кнопка "назад"Do: Have a back button

Если имеется несколько уровней навигации, пользователи должны иметь возможность вернуться к предыдущему представлению.If you have more than one layer of navigation, users must be able to go back to their previous view.

Иллюстрация, на которой показано, как добавление новой кнопки "Закрыть" на вкладке "на собрание" для навигации является избыточной и может привести к возникновению проблем.

Не: включить еще одну кнопку "Закрыть"Don't: Include another close button

Предоставление возможности закрыть содержимое вкладки собраний может привести к проблемам, так как в заголовке уже есть кнопка Закрыть для закрытия вкладки в собрании.Providing an option to close in-meeting tab content may cause issues since there’s already a close button in the header to dismiss the in-meeting tab itself.

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

Внимание! использование диалоговых окон в узком пространствеCaution: Using dialogs in a narrow space

Диалоговые окна, такие как модули задач, на вкладке уже более узкое собрание могут переносить и скрывать содержимое.Dialogs, such as task modules, in the already narrow in-meeting tab might wrap and obscure the content.

Специальные возможностиAccessibility

Сведения о специальных возможностях содержатся в разделе фигма.For information on accessibility, see Figma.

РесурсыResources

Проверка проектаValidate your design

Если вы планируете опубликовать свое приложение в AppSource, следует изучить проблемы, которые обычно приводят к сбою приложений во время отправки.If you plan to publish your app to AppSource, you should understand the design issues that commonly cause apps to fail during submission.