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

Диалоговые окна для собраний отображаются на этапе собрания Teams.In-meeting dialogs display on the Teams meeting stage. Для них требуется вмешательство пользователя, подтверждение или участие, но они не прерывают собрание.They require a user's attention, confirmation, or interaction but are subtle and don't interrupt the meeting.

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

Диалоговые окна для собраний запускаются пользователем (например организатором собрания), которые могут заинтересовать следующих участников:In-meeting dialogs are triggered by a user (such as the meeting organizer) who might want participants to:

  • Предоставление кратких отзывовProvide brief feedback
  • Получение короткого опроса или опросаTake a short survey or poll
  • Предоставление утвержденийSubmit approvals
  • Получение напоминанийGet reminders

ПримерExample

В приведенном ниже примере показано, как может выглядеть диалоговое окно для собраний с точки зрения участника собрания.The following example shows what the in-meeting dialog might look like from a meeting participant's perspective. Как видите, контент и задача являются облегченными.As you can see, the content and task are lightweight.

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

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

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

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

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

  1. Значок приложенияApp icon
  2. Имя приложенияApp name
  3. Строка действияAction string
  4. Значок закрытия: Закрывает отдельное диалоговое окно.Dismiss icon: Closes a single dialog. Всегда используйте значок закрытия сверху справа, а не действие в нижнем колонтитуле.Always use the upper-right close icon instead of an action in the footer.
  5. Вебвиев : отображает все содержимое и кнопки сторонних приложений (рекомендуется использовать стандартные кнопки групповых команд).Webview : Displays all third-party app content and buttons (standard Teams buttons recommended).

СпособSizing

Размеры диалоговых окон собраний могут различаться в зависимости от различных вариантов использования, но всегда необходимо сохранять заполнение и размеры компонентов.In-meeting dialogs can vary in size to account for different use cases, but you must always maintain padding and component sizes.

  • Height : высота диалогового окна определяется содержимым в вебвиев.Height : The height of the dialog is determined by the content in the webview. Вертикальная прокрутка занимает больше места для контента, который превышает максимальную заданную высоту.Vertical scroll takes over for content that exceeds the maximum height you specify.
  • Ширина : ширина вебвиев — это абсолютное значение в указанном диапазоне.Width : The width of the webview is an absolute value within the range you specify.

Иллюстрация, в которой показаны возможные размеры диалогового окна для собраний. Height: высота диалогового окна определяется содержимым в вебвиев. Вертикальная прокрутка применяется к содержимому, которое превышает максимальную высоту (определено пользователем). Min: None. Максимум: 400 пикселей (320 пикселей вебвиев). Ширина: ширина вебвиев — это абсолютное значение в указанном диапазоне. Min: 288 пикселей (256 пикселей вебвиев). Максимум: 468 пикселей (436 пикселей вебвиев).

ПоведениеBehavior

В фигмаможно просмотреть общее поведение диалогового окна для собраний, например REST, Загрузка и многое другое.See general in-meeting dialog behavior, such as rest, loading, and more, in Figma.

PositionPosition

Диалоги в собрании выравниваются в центре этапа собрания.In-meeting dialogs are aligned in the center of the meeting stage. Они не могут быть перенесены и работать в рамках платформы Teams на уровне системы.They can’t be dragged and work within the framework of Teams system-level notifications.

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

ОбъединенAggregation

Одновременно отображается только одно диалоговое окно, ранжирование по стеку от последнего к последнему, отправленному внизу.Only one dialog displays at a time, stack ranking from last to most recent sent to the bottom. После того как диалоговое окно будет устранено или закрыто, оно будет следующим.Once a dialog is resolved or dismissed, the next one take its place.

Пример (фигма)See an example (Figma)

ПрокруткиScrolling

Прокрутка происходит в части вебвиев диалогового окна собрания.Scrolling occurs in the webview portion of an in-meeting dialog. Обратите внимание на следующие особенности прокрутки:Remember the following about scrolling:

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

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

КнопкиButtons

Кнопки диалогового окна для собраний входят в состав вебвиев (см. несколько примеров).In-meeting dialog buttons are part of the webview (see some examples).

В отличие от схожих компонентов, диалоги в диалоговых окнах для собраний удаляются после того, как пользователь нажимает кнопку.Unlike similar components, in-meeting dialogs are dismissed once a user selects a button.

КомпонентыComponents

Диалоги в собрании в основном создаются с помощью следующих компонентов пользовательского интерфейса (фигма), основанных на системе дизайна Fluent.In-meeting dialogs 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

Несмотря на то, что в диалоговых окнах для собраний вызовы более эффективны, они также могут дераил вызовы, если они слишком перегружены.While in-meeting dialogs can make calls more effective, they also can derail calls if too obtrusive. Как правило, эти диалоговые окна следует использовать экономно и следовать приведенным ниже рекомендациям.In general, use the dialogs sparingly and follow these best practices.

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

Do: Храните егоDo: Keep it contained

Ограничение содержимого диалогового окна для собраний на один экран, чтобы пользователи могли сосредоточиться на собрании.Limit in-meeting dialog content to a single screen so users can focus on the meeting.

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

Не: включать несколько шаговDon't: Include multiple steps

В диалоговых окнах для собраний не требуется перемещаться по содержимому.In-meeting dialogs shouldn't require users to navigate through content.

ДиалогInteractions

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

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

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

Do: ограничить количество взаимодействийDo: Limit number of interactions

Удалите ненужные материалы, не позволяющие пользователям быстро выполнить что-либо.Remove unnecessary content that doesn't help users accomplish something quickly. Если вам нужны сложные взаимодействия, мы настоятельно рекомендуем отображать контент с помощью одного столбца на вкладке на собрании.If you need complex interactions, we strongly recommend displaying your content using a single column on the in-meeting tab instead.

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

Не следует добавлять ненужные элементы.Don't: Introduce unnecessary elements

Вы можете разрабатывать одно диалоговое окно для собраний с несколькими взаимодействиями, но слишком много может отвлекаться от собрания.You may be able to design a single in-meeting dialog with multiple interactions, but too many can distract from the meeting.

МакетLayout

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

Do: использование макетов с одним столбцомDo: Use single-column layouts

Так как диалоги находятся в центре этапа собрания, выполнение задачи должно быть быстрым и простым, чтобы избежать недовольство пользователей.Since the dialogs are at the center of the meeting stage, task completion should be fast and simple to avoid user frustration.

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

Не совсем: незагромождения местаDon't: Clutter the space

Сжатые и более структурированные контент могут отвлекаться и передаваться, особенно во время собрания.Dense or overly structured content can be distracting and overwhelming, especially during a meeting.

SizeSize

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

Do: обеспечение согласованностиDo: Keep it consistent

Это важно, так как диалоги в собрании всегда отображаются в одном и том же расположении.This is important because in-meeting dialogs always display in the same location.

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

Не следует всегда помещаться в содержимом.Don't: Always fit to the content

Возможно, вы пытаетесь избежать горизонтальной прокрутки, но в одном приложении несогласованно несколько размеров диалогового окна для собраний.You may be trying to avoid horizontal scrolling, but multiple in-meeting dialog sizes within the same app is an inconsistent experience.

Элементы управленияControls

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

Do: выравнивание по правому краю основного действияDo: Right align the primary action

Мы рекомендуем расместить наиболее визуально активное действие в крайнем крайнем месте.We recommend positioning the most visually heavy action to the right-most location.

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

Не: действия слева или Выровнять по центруDon't: Left or center align actions

Это отличается от стандартного шаблона команд для управления размещением в диалоговом окне и может конфликтовать с диалоговым окном, расположенным в верхней части.This deviates from the standard Teams pattern for control placement in a dialog and may conflict with a dialog behind the top one.

Специальные возможности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.