Besprechungs-Dialogfeld entwerfenDesign an in-meeting dialog

In-Meeting-Dialoge werden in der Teams-Besprechungs Phase angezeigt.In-meeting dialogs display on the Teams meeting stage. Sie benötigen Aufmerksamkeit, Bestätigung oder Interaktion eines Benutzers, sind jedoch subtil und unterbrechen die Besprechung nicht.They require a user's attention, confirmation, or interaction but are subtle and don't interrupt the meeting.

AnwendungsfälleUse cases

In-Meeting-Dialogfelder werden von einem Benutzer (wie dem Besprechungsorganisator) ausgelöst, der den Teilnehmern möglicherweise Folgendes wünscht:In-meeting dialogs are triggered by a user (such as the meeting organizer) who might want participants to:

  • Kurzes Feedback gebenProvide brief feedback
  • Eine kurze Umfrage oder Umfrage durchführenTake a short survey or poll
  • Übermitteln von GenehmigungenSubmit approvals
  • Erinnerungen abrufenGet reminders

BeispielExample

Im folgenden Beispiel wird gezeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.The following example shows what the in-meeting dialog might look like from a meeting participant's perspective. Wie Sie sehen können, sind der Inhalt und die Aufgabe leicht.As you can see, the content and task are lightweight.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Das vollständige Szenario anzeigen (Figma)See the full scenario (Figma)

Siehe andere Beispiele für Anwendungsfälle (Figma)See other example use cases (Figma)

AnatomieAnatomy

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

  1. App-SymbolApp icon
  2. App-NameApp name
  3. AktionszeichenfolgeAction string
  4. Symbol schließen: Schließt ein einzelnes Dialogfeld.Dismiss icon: Closes a single dialog. Verwenden Sie immer das obere rechte Schließsymbol anstelle einer Aktion in der Fußzeile.Always use the upper-right close icon instead of an action in the footer.
  5. WebView: zeigt alle Inhalte und Schaltflächen von Drittanbieter-apps an (Standard-Teams-Schaltflächen werden empfohlen).Webview: Displays all third-party app content and buttons (standard Teams buttons recommended).

DimensionierungSizing

In-Meeting-Dialogfelder können in der Größe variieren, um verschiedene Anwendungsfälle zu berücksichtigen, aber Sie müssen stets Abstand und Komponentengröße beibehalten.In-meeting dialogs can vary in size to account for different use cases, but you must always maintain padding and component sizes.

  • Height: die Höhe des Dialogs wird durch den Inhalt in der WebView bestimmt.Height: The height of the dialog is determined by the content in the webview. Der vertikale Bildlauf übernimmt den Inhalt, der die von Ihnen angegebene maximale Höhe überschreitet.Vertical scroll takes over for content that exceeds the maximum height you specify.
  • Width: die Breite der WebView ist ein absoluter Wert innerhalb des angegebenen Bereichs.Width: The width of the webview is an absolute value within the range you specify.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

VerhaltenBehavior

Weitere Informationen finden Sie unter Allgemeines in-Meeting-Dialog Verhalten wie Rest, laden und vieles mehr in Figma.See general in-meeting dialog behavior, such as rest, loading, and more, in Figma.

PositionPosition

In-Meeting-Dialogfelder werden in der Mitte der Besprechungs Phase ausgerichtet.In-meeting dialogs are aligned in the center of the meeting stage. Sie können nicht gezogen werden und arbeiten im Rahmen von Microsoft Teams-Benachrichtigungen auf Systemebene.They can’t be dragged and work within the framework of Teams system-level notifications.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

AggregationAggregation

Es wird jeweils nur ein Dialogfeld angezeigt, wobei das Stapel Ranking von zuletzt bis zuletzt an den unteren Rand gesendet wurde.Only one dialog displays at a time, stack ranking from last to most recent sent to the bottom. Sobald ein Dialogfeld aufgelöst oder entlassen wurde, nimmt der nächste an seiner Stelle an.Once a dialog is resolved or dismissed, the next one take its place.

Siehe ein Beispiel (Figma)See an example (Figma)

ScrollenScrolling

Der Bildlauf erfolgt im WebView-Teil eines in-Meeting-Dialogs.Scrolling occurs in the webview portion of an in-meeting dialog. Beachten Sie beim Scrollen Folgendes:Remember the following about scrolling:

  • Sie sollten nur vertikal scrollen können.You should only be able to scroll vertically.
  • Sie können nur den Inhalt sehen, zu dem Sie einen Bildlauf durchgeführt haben (nichts oberhalb oder unterhalb).You can only see the content you've scrolled to (nothing above or below).

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

SchaltflächenButtons

In-Meeting-Dialogfelder sind Teil der WebView (Siehe einige Beispiele).In-meeting dialog buttons are part of the webview (see some examples).

Im Gegensatz zu ähnlichen Komponenten werden Besprechungs Dialogfelder geschlossen, nachdem ein Benutzer eine Schaltfläche ausgewählt hat.Unlike similar components, in-meeting dialogs are dismissed once a user selects a button.

KomponentenComponents

In-Meeting-Dialoge werden in erster Linie mit den folgenden UI-Komponenten (Figma)erstellt, die auf dem Fluent-Entwurfs Systembasieren.In-meeting dialogs are built primarily with the following UI components (Figma), which are based on the Fluent Design System.

KomponenteComponent AnleitungenGuidelines BeispielExample
SchaltflächeButton Primäre und sekundäre Schaltflächen können Mittel oder klein seinPrimary and secondary buttons can be medium or small Senden einer AntwortSend a response
InputInput Feld für eine kurze Benutzereingabe.Field for brief user input. Bezeichnungstext kann ein Symbol enthaltenLabel text can include an icon Feedback eingebenEnter feedback
DropdownDropdown Wählen Sie eine oder mehrere Optionen aus einer Liste aus.Select one or more options from a list. Kann Such-und Mehrfachauswahl Funktionen umfassenCan include search and multi-selection features Auswählen einer SpracheChoose a language
AuswahlsteuerelementeSelection controls Verwenden Sie Kontrollkästchen für mehrere Auswahlmöglichkeiten oder Optionsfelder, und schalten Sie Sie für einzelne Optionen ein.Use checkboxes for multiple choices or radio buttons and toggles for single choices. Für detailliertere Auswahlen verwenden Sie einen SchiebereglerFor more detailed selections, use a slider Abstimmung in einer UmfrageVote in a poll
WarnungenAlerts Unabhängig davon, ob eine dringende Nachricht, ein Fehlerstatus oder eine Warnung angezeigt wird, die Nachricht sollte kurz sein und die aktuelle Aufgabe des Benutzers nicht unterbrechen.Whether displaying an urgent message, error state, or warning, the message should be short and won't interrupt the user's current task Anzeigeproblem beim Senden einer AntwortDisplay issue when submitting a response

DesignsTheming

FarbenColors

Verwenden Sie das Empfohlene Farbschema (Figma) für Hintergründe, vordergrunde und förderzustände.Use the recommended color scheme (Figma) for backgrounds, foregrounds, and conveying states.

TypografieTypography

Verwenden Sie die empfohlenen Schriftgrößen und-Gewichtungen (Figma) für Titel, Textkörper und metadatentext.Use the recommended font sizes and weights (Figma) for titles, body text, and metadata text.

Bewährte MethodenBest practices

Während in-Meeting-Dialoge Anrufe effektiver gestalten können, können Sie auch Anrufe entgleisen, wenn Sie zu auffällig sind.While in-meeting dialogs can make calls more effective, they also can derail calls if too obtrusive. Im Allgemeinen verwenden Sie die Dialogfelder sparsam, und befolgen Sie diese bewährten Methoden.In general, use the dialogs sparingly and follow these best practices.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Do: enthalten bleibenDo: Keep it contained

Beschränken Sie den Inhalt von Besprechungs Dialogen auf einen einzelnen Bildschirm, damit sich Benutzer auf die Besprechung konzentrieren können.Limit in-meeting dialog content to a single screen so users can focus on the meeting.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Nicht: mehrere Schritte einschließenDon't: Include multiple steps

In-Besprechungs Dialogfelder sollten Benutzer nicht durch Inhalte navigieren müssen.In-meeting dialogs shouldn't require users to navigate through content.

InteraktionenInteractions

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Do: Begrenzen der Anzahl von InteraktionenDo: Limit number of interactions

Entfernen Sie unnötige Inhalte, die nicht dazu beitragen, dass Benutzer schnell etwas erreichen.Remove unnecessary content that doesn't help users accomplish something quickly. Wenn Sie komplexe Interaktionen benötigen, wird dringend empfohlen, ihre Inhalte stattdessen in einer einzelnen Spalte auf der Registerkarte "in-Meeting" anzuzeigen.If you need complex interactions, we strongly recommend displaying your content using a single column on the in-meeting tab instead.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Nicht: Einführung unnötiger ElementeDon't: Introduce unnecessary elements

Sie können möglicherweise ein einzelnes Besprechungs Dialogfeld mit mehreren Interaktionen entwerfen, aber zu viele können von der Besprechung ablenken.You may be able to design a single in-meeting dialog with multiple interactions, but too many can distract from the meeting.

LayoutLayout

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Do: Verwenden von Einzel SpaltenlayoutsDo: Use single-column layouts

Da sich die Dialogfelder in der Mitte der Besprechungs Phase befinden, sollte die Aufgaben Vervollständigung schnell und einfach sein, um Benutzer Frustration zu vermeiden.Since the dialogs are at the center of the meeting stage, task completion should be fast and simple to avoid user frustration.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Nicht: Übersichtlichkeit des SpeicherplatzesDon't: Clutter the space

Dichte oder übermäßig strukturierte Inhalte können störend und überwältigend sein, vor allem während einer Besprechung.Dense or overly structured content can be distracting and overwhelming, especially during a meeting.

GrößeSize

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Vorgehensweise: konsistent haltenDo: Keep it consistent

Dies ist wichtig, da in-Meeting-Dialogfelder immer am gleichen Speicherort angezeigt werden.This is important because in-meeting dialogs always display in the same location.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Nicht: immer an den Inhalt anpassenDon't: Always fit to the content

Möglicherweise versuchen Sie, einen horizontalen Bildlauf zu vermeiden, aber mehrere in-Meeting-Dialog Größen innerhalb derselben App stellen eine inkonsistente Erfahrung dar.You may be trying to avoid horizontal scrolling, but multiple in-meeting dialog sizes within the same app is an inconsistent experience.

SteuerelementeControls

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Do: Rechtsbündiges Ausrichten der primären AktionDo: Right align the primary action

Es wird empfohlen, die visuell intensivste Aktion an der am weitesten rechts gelegenen Stelle zu positionieren.We recommend positioning the most visually heavy action to the right-most location.

Beispiel zeigt, wie der in-Meeting-Dialog aus der Perspektive eines Besprechungsteilnehmers aussehen könnte.

Nicht: Links oder zentrierte Ausrichtungs AktionenDon't: Left or center align actions

Dies weicht vom standardmäßigen Teams-Muster für die Platzierung von Steuerelementen in einem Dialogfeld ab und kann mit einem Dialogfeld hinter dem oberen Rand in Konflikt stehen.This deviates from the standard Teams pattern for control placement in a dialog and may conflict with a dialog behind the top one.

BarrierefreiheitAccessibility

Informationen zur Barrierefreiheit finden Sie unter Figma.For information on accessibility, see Figma.

RessourcenResources

Überprüfen des DesignsValidate your design

Wenn Sie Ihre APP in AppSource veröffentlichen möchten, sollten Sie sich mit den Entwurfsproblemen vertraut machen, die häufig dazu führen, dass apps während der Übermittlung fehlschlagen.If you plan to publish your app to AppSource, you should understand the design issues that commonly cause apps to fail during submission.