Entwerfen Ihrer Microsoft Teams-App
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.
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.
Beispiel-App
Sie können eine Beispiel-App hochladen, um zu erfahren, wie Apps im Teams-Client aussehen und sich verhalten sollen.
Designer für adaptive Karten
Entwerfen Sie adaptive Karten in unserem webbasierten Tool.