Entwerfen Ihrer Microsoft Teams-App

  • Artikel

Konzeptionelle Darstellung der Microsoft Teams-Designrichtlinien

Wenn Sie Designer, Produktmanager, Entwickler oder Hersteller sind und Tools mit geringem Code verwenden, können diese Richtlinien Ihnen helfen, schnell die richtigen Designentscheidungen für Ihre Microsoft Teams-App zu treffen.

Erstellen einer zusammenhängenden Erfahrung

Das Entwerfen einer Teams-App ist wie das Entwerfen einer herkömmlichen Web-App, aber dennoch ein wenig anders. Ein effektives Design hebt die einzigartigen Attribute Ihrer App hervor und passt sich gleichzeitig natürlich an Teams-Features und -Kontexte an.

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

Teams-App-Designprinzipien

Teams-Apps helfen Menschen dabei, gemeinsam mehr zu erreichen. Nutzen Sie diese Prinzipien, um sich bei Ihrem Design leiten zu lassen.

Gemeinsam

Die Teams-App fördert die Zusammenarbeit durch koordinierte und gemeinsame Aktivitäten unter den Benutzern.

Vertrauenswürdig

Die App ist sicher und konform. Benutzer können leicht Informationen zum Datenschutz finden.

Global inklusiv

Personen mit allen Hintergründen, Fähigkeiten und Disziplinen können die App verwenden. Sie berücksichtigt kulturelle, ethnische und soziale Aspekte.

Niedrig

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

Systemeigen oder individuell

Die App verwendet systemeigene Teams-Designkomponenten oder Ihre eigenen. Farbschemas, Steuerelementen usw. werden nicht vermischt.

Hilfreich

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

Benutzerfreundlich

Die Benutzeroberfläche ist leicht zu verstehen, ist angenehm, was das Aussehen und den Ton betrifft, und macht Menschen produktiver.

Reaktionsfähig

Die App kann auf verschiedenen Geräten und Bildschirmen ausgeführt werden.

Barrierefrei

Die App erfüllt die Teams-Anforderungen hinsichtlich des Farbkontrastes, der Navigationsalternativen usw.

Gut beschrieben

Texte, Symbole und Bilder verdeutlichen, wofür und wie die App genutzt werden kann.

Teams-Designsystem

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

App-Funktionen

Erfahren Sie, wie Benutzer Teams-Apps hinzufügen, verwenden und verwalten, um jede Funktion Ihres Designs optimal zu nutzen.

Vorlagen für Benutzeroberflächen

Erstellen Sie komplexe und hochwertige Designs mit Vorlagen für gängige Teams-Anwendungsfälle und -Workflows. Die App-Playbooks und UI-Vorlagen sind auch verfügbar, um Ihnen den Einstieg in die Apps zu erleichtern , die in Microsoft 365 erweitert wurden.

Grundlegende Benutzeroberflächenkomponenten

Basierend auf der Fluent-Benutzeroberfläche sind dies die Kernelemente, die Sie verwenden können, um Teams-Erfahrungen von Grund auf neu zu erstellen.

Tools und Beispiele

Die folgenden Tools können Designern und Entwicklern bei den ersten Schritte 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 außerdem umfassende Informationen dazu, wie Apps in verschiedenen Teams-Szenarien aussehen und sich verhalten sollten.

Abrufen des UI-Kits (Figma)

Dokumentation zur Fluent-Benutzeroberfläche

Erhalten Sie Codebeispiele, und verstehen Sie die Implementierungsspezifik für die grundlegenden Fluent-UI-Komponenten, die beim Erstellen von Teams-Umgebungen verwendet werden.

Ausprobieren der Teams-Benutzeroberflächen-Komponenten (Fluent-Benutzeroberfläche)

Beispiel-App

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

Abrufen der Beispiel-App (GitHub)

Designer für adaptive Karten

Entwerfen Sie adaptive Karten in unserem webbasierten Tool.

Designer für adaptive Karten testen

Siehe auch