Freigeben über


Das App-Designsystem von Microsoft Teams

Erlernen Sie schnell die Grundlagen des App-Designs von Teams. Umfassende Anleitungen und Beispiele finden Sie im Microsoft Teams-UI-Kit (Figma).

Layout

Teams basiert auf einem Rasterlayout, um konsistente und elegante Beziehungen zwischen Designkomponenten zu gewährleisten. Mit der 4-Pixel-Basiseinheit des Rasters können Komponenten in Teams einheitlich über alle Anzeigegrößen skaliert werden.

Konzeptionelle Darstellung Teams-Layouts.

Avatare

Ein Avatar ist eine grafische Darstellung einer Person, eines Teams, eines Bots oder einer Entität in Teams. Eine Avatargruppe wird häufig verwendet, um Live-Aktivität zu vermitteln oder eine Teilnehmerliste so darzustellen, dass vertikaler Raum erhalten bleibt.

Lesen Sie den vollständigen Leitfaden zu Avataren (Figma)

Konzeptionelle Darstellung von Avataren in Teams.

Symbole

Das primäre Symbol Ihrer App kann einen sehr guten Eindruck Ihrer Marke an Teams-Benutzer übermitteln. Das richtige Symboldesign ist auch wichtig, um Ihre App im Microsoft Teams Store zu veröffentlichen.

Sie können auch Fluent UI-Symbole in der gesamten App verwenden:

Konzeptionelle Darstellung von Symbolen in Teams.

Typ

Teams verwendet Segoe UI für seine Typpalette und verschiedene Schriftgrade und -breiten, um die Hierarchie zu erstellen und die Lesbarkeit zu gewährleisten.

Konzeptionelle Darstellung der Typografie von Teams.

Farben

Teams-Web- und Desktopversionen unterstützen die Designs Standard (hell), dunkel und mit hohem Kontrast, während Teams-Mobile helle und dunkle Designs unterstützt. Jedes Teams-Design verfügt über ein eigenes Farbschema.

Konzeptionelle Darstellung von Farben in Teams.

Form und Tiefe

Mithilfe von Form und Tiefe können Sie zusätzliche Hierarchien in Ihrer App erstellen.

Konzeptionelle Darstellung von Form und Tiefe.

Text und Inhalt

Um sich als Teil von Teams zu fühlen, sollte Ihr App-Text im Allgemeinen die folgenden Microsoft Sprachrichlinien befolgen: herzlich und entspannt, klar und deutlich, hilfsbereit.

Lesen Sie den vollständigen Leitfaden zu Text und Inhalt – einschließlich zum Schreiben für Bots (Figma)

Konzeptionelle Darstellung von Text und Inhalt.