Entwerfen Ihrer Microsoft Teams-App

Konzeptionelles Bild, das die Microsoft Teams Entwurfsrichtlinien einführt.

Unabhängig davon, ob Sie Designer, Produktmanager, Entwickler oder Entwickler mit Tools mit geringem Code sind, können Diese Richtlinien Ihnen dabei helfen, schnell die richtigen Entwurfsentscheidungen für Ihre Microsoft Teams App zu treffen.

Erstellen einer zusammenhängenden Oberfläche

Das Entwerfen einer Teams App ähnelt dem Entwerfen einer herkömmlichen Web-App, unterscheidet sich jedoch auch etwas. Ein effektives Design hebt die einzigartigen Attribute Ihrer App hervor und passt sich natürlich mit Teams Features und Kontexten an.

Diese Richtlinien und Ressourcen können Ihnen dabei helfen, dieses Gleichgewicht zu finden. Sie wissen, was Sie tun müssen und was Sie beim Entwerfen Ihrer Teams-App vermeiden müssen (z. B. Navigation auf mehreren Ebenen auf einer Registerkarte).

Teams App-Entwurfsprinzipien

Teams Apps helfen Menschen, gemeinsam mehr zu erreichen. Verwenden Sie diese Prinzipien, um Ihr Design zu leiten.

Gemeinsame

Teams App fördert die Zusammenarbeit durch koordinierte und gemeinsame Aktivitäten zwischen Benutzern.

Vertrauenswürdig

Die App ist sicher und konform. Benutzer können auf einfache Weise Informationen zum Datenschutz finden.

Global inklusiv

Personen aller Hintergründe, Fähigkeiten und Fächer können die App verwenden. Es ist kulturell, rassisch und social aware.

Niedrig

Die App konzentriert sich auf Kernszenarien, die sich mit Teams Workflows verbinden.

Systemeigen oder unterschiedlich

Die App verwendet systemeigene Teams Designkomponenten oder Eigene. Es gibt keine Mischung aus Farbschemas, Steuerelementen usw.

Nützlich

Die App basiert auf einem Szenario, das Benutzer in Teams ausführen müssen.

Einfach zu verwenden

Die Benutzeroberfläche ist leicht verständlich, ansprechend in Aussehen und Tonfall und macht die Mitarbeiter produktiver.

Reaktionsfähig

Die App ist geräte- und bildschirmunabhängig.

Barrierefrei

Die App erfüllt Teams Barrierefreiheitsanforderungen hinsichtlich Farbkontrast, Navigationsalternativen und mehr.

Gut beschrieben

Text, Symbole und Bilder machen deutlich, wozu die App dient und wie sie verwendet wird.

Teams-Entwurfssystem

Lernen Sie die Grundlagen des Teams App-Designskennen, einschließlich Layout, Farbschemas und mehr.

App-Funktionen

Erfahren Sie, wie Benutzer Teams Apps hinzufügen, verwenden und verwalten, um die einzelnen Funktionen in Ihrem Design optimal zu nutzen.

Vorlagen für Benutzeroberflächen

Erstellen Sie schnell komplexe, präzise Designs mit Vorlagen für häufige Teams Anwendungsfälle und Workflows.

Grundlegende Benutzeroberflächenkomponenten

Basierend auf Fluent Ui sind dies die Kernelemente, die Sie verwenden können, um Teams Oberflächen von Grund auf neu zu erstellen.

Tools und Beispiele

Die folgenden Tools können Designern und Entwicklern bei den ersten Schritten helfen:

Microsoft Teams-Benutzeroberflächenbausatz

Entwerfen Sie eine Teams-App mit UI-Komponenten, Vorlagen und Beispielen, die Sie nach Bedarf ziehen, ablegen und ändern können. Das UI-Kit enthält auch umfassende Informationen dazu, wie Apps in verschiedenen Teams Szenarien aussehen und sich verhalten sollten.

Microsoft Teams-Benutzeroberflächenbibliothek

Anzeigen und Testen einzelner Teams UI-Vorlagen und zugehöriger Komponenten in Ihrem Browser.

Importieren Sie diese Vorlagen und zugehörigen Komponenten direkt in Ihr Teams App-Projekt.

Beispiel-App

Sie können eine Beispiel-App hochladen, um zu sehen, wie Apps im Teams-Client aussehen und sich verhalten sollen.

Weitere Ressourcen

Um mehr zu erfahren, probieren Sie eine der folgenden Ressourcen aus:

Dokumentation zur Fluent Benutzeroberfläche

Rufen Sie Codebeispiele und Implementierungsdetails für die grundlegenden Fluent UI-Komponenten ab, die zum Erstellen Teams Oberflächen verwendet werden.

Designer für adaptive Karten

Entwerfen Sie adaptive Karten in unserem webbasierten Tool.

Siehe auch