Teilen über

Entwerfen Ihrer persönlichen App für Microsoft Teams

  • Artikel

Eine persönliche App kann ein Bot, ein privater Arbeitsbereich oder beides sein. Manchmal fungiert es als Ort zum Erstellen oder Anzeigen von Inhalten. In anderen Fällen bietet es dem Benutzer eine Vogelperspektive für alles, was ihnen entspricht, wenn die App als Registerkarte in mehreren Kanälen konfiguriert wurde.

Die folgenden Informationen beschreiben und veranschaulichen, wie Benutzer persönliche Apps in Teams hinzufügen, verwenden und verwalten können.

Microsoft Teams-Benutzeroberflächenbausatz

Im Microsoft Teams UI Kit finden Sie umfassende Richtlinien für das Design Ihrer persönlichen App, einschließlich Elementen, die Sie nach Bedarf übernehmen und ändern können. Der Benutzeroberflächenbausatz enthält auch wichtige Themen wie Barrierefreiheit und dynamische Größenanpassung, die hier nicht behandelt werden.

Holen Sie sich den Microsoft Teams-Benutzeroberflächenbausatz (Figma)

Eine persönliche App hinzufügen

Benutzer können eine persönliche App aus dem Microsoft Teams Store oder App-Flyout hinzufügen, indem sie auf das Symbol Mehr auf der linken Seite von Teams auswählen (im folgenden Beispiel gezeigt).

Das Beispiel zeigt, wie Sie eine persönliche App aus dem App-Flyout hinzufügen.

Verwenden einer persönlichen App (privater Arbeitsbereich)

Mit einem privaten Arbeitsbereich können Benutzer App-Inhalte anzeigen, die für sie von Bedeutung sind, an einem zentralen Ort, ohne Teams verlassen zu müssen.

(Implementierungshinweis: Der private Arbeitsbereich basiert auf der persönlichen Registerkartenfunktion.)

Anatomie: Persönliche App (privater Arbeitsbereich)

Mobilgeräte

Das Beispiel zeigt die Komponentenanatomie der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A App-Zuordnung: Ihr App-Name.
B Registerkarten: Ermöglicht die Navigation in Ihrer persönlichen App.
C Menü "Mehr": Enthält weitere App-Optionen und -Informationen.
D Primäre Navigation: Ermöglicht die Navigation zu den anderen Hauptfunktionen Ihrer App Teams.

Konfigurieren und Hinzufügen mehrerer Aktionen in NavBar

Sie können der Navigationsleiste oben rechts mehrere Aktionen hinzufügen und ein Überlaufmenü für zusätzliche Aktionen in einer App erstellen. In der Navigationsleiste können maximal fünf Aktionen hinzugefügt werden, einschließlich des Überlaufmenüs.

Der Screenshot ist ein Beispiel, das die Navigationsleiste und das Überlaufmenü beschreibt.

Leistungsindikator Beschreibung
1 Navigationsleiste
2 Überlaufmenü

Um mehrere Aktionen in NavBar zu konfigurieren und hinzuzufügen, rufen Sie die setNavBarMenu-API auf, und fügen Sie die displayMode enum -Eigenschaft zu MenuItemhinzu. Definiert displayMode enum , wie ein Menü in der Navigationsleiste angezeigt wird. Der Standardwert von displayMode enum ist auf ifRoomfestgelegt.

Legen Sie basierend auf den Anforderungen und dem in der NavBar verfügbaren Speicherplatz unter Berücksichtigung einer der folgenden Optionen fest displayMode enum .

  • Wenn Platz vorhanden ist, legen Sie ifRoom = 0 fest, dass ein Element in der Navigationsleiste platziert wird.
  • Wenn kein Platz vorhanden ist, legen Sie fest overflowOnly = 1, damit dieses Element immer im Überlaufmenü der Navigationsleiste, aber nicht in der Navigationsleiste platziert wird.

Im Folgenden finden Sie ein Beispiel für die Konfiguration der NavBar mit einem Überlaufmenü für mehrere Aktionen:

const menuItems = [item1, item2, item3, item4, item5]
microsoftTeams.menus.setNavBarMenu(menuItems, (id: string) => {
  output(`Clicked ${id}`)
  return true;
})

Hinweis

Die setNavBarMenu API steuert die Schaltfläche Aktualisieren nicht. Sie wird standardmäßig angezeigt.

Der Screenshot ist ein Beispiel, das die Navigationsleiste und mehrere Aktionen in einem Überlaufmenü zeigt.

Das Beispiel zeigt die strukturelle Anatomie der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A Registerkarten: Ermöglicht die Navigation in Ihrer persönlichen App.
1 Webansicht: Zeigt Ihren App-Inhalt an.

Desktop

Dieses Beispiel zeigt die Anatomie der Komponenten der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A App-Zuordnung: Ihr App-Logo und -Name.
B Registerkarten: Ermöglicht die Navigation in Ihrer persönlichen App.
C Popupansicht: Pusht Ihre App-Inhalte aus einem übergeordneten Fenster in ein eigenständiges untergeordnetes Fenster.
D Menü "Mehr": Enthält weitere App-Optionen und -Informationen. (Alternativ können Sie "Einstellungen" als Registerkarte festlegen.)

Dieses Beispiel zeigt die strukturelle Anatomie der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A Registerkarten: Ermöglicht die Navigation in Ihrer persönlichen App.
1 iframe: Zeigt Ihre App-Inhalte an.

Entwerfen mit Benutzeroberflächenvorlagen und erweiterten Komponenten

Verwenden Sie eine der folgenden Teams-Vorlagen und -Komponenten, um Ihre persönliche Registerkarte zu entwerfen:

  • Liste: Listen können verwandte Elemente in einem übersichtlichen Format anzeigen und Benutzern ermöglichen, Aktionen für eine gesamte Liste oder einzelne Elemente auszuführen.
  • Task Board: Ein Task Board, manchmal auch als „Kanban-Board“ oder „Organisationsprozessdarstellungen“ bezeichnet, ist eine Sammlung von Karten, die häufig verwendet werden, um den Status von Arbeitselementen oder Tickets nachzuverfolgen.
  • Dashboard: Ein Dashboard ist ein Zeichenbereich mit mehreren Karten, die eine Übersicht über Daten oder Inhalte bieten.
  • Formular: Formulare dienen zum strukturierten Sammeln, Überprüfen und Übermitteln von Benutzereingaben.
  • Leerer Status: Die Vorlage „leerer Status“ kann für viele Szenarien verwendet werden, z. B. für die Anmeldung, die Erfahrung beim ersten Ausführen, Fehlermeldungen und vieles mehr.
  • Linker Navigationsbereich: Die linke Navigationskomponente kann hilfreich sein, wenn Ihre persönliche App eine Navigation erfordert. Im Allgemeinen sollten Sie die Navigation auf ein Minimum beschränken.

Verwenden einer persönlichen App (Bot)

Persönliche Apps können einen Bot für 1:1-Unterhaltungen und private Benachrichtigungen enthalten (z. B. wenn ein Kollege einen Kommentar auf der Zeichenfläche postet). Benutzer interagieren mit dem Bot auf einer von Ihnen angegebenen Registerkarte.

Anatomie: Persönliche App (Bot)

Mobilgeräte

Das Beispiel zeigt die Anatomie der persönlichen Botkomponente.

Leistungsindikator Beschreibung
A Boteinstiegspunkt: Einstiegspunkt für Benutzer, um auf das Botfeature in Ihrer persönlichen App zuzugreifen.
B Schaltfläche "Zurück": Führt Benutzer zurück in den privaten Arbeitsbereich.
C Botnachricht: Bots senden oft Nachrichten und Benachrichtigungen in Form einer Karte (z. B. einer Adaptiven Karte).
D Kompositionsfeld: Eingabefeld zum Senden von Nachrichten an den Bot.

Schaltfläche "Zurück konfigurieren"

Wenn Sie die Zurück-Schaltfläche in einer Teams-App auswählen, kehren Sie zur Teams-Plattform zurück, ohne innerhalb der App zu navigieren.

Um in der App zu navigieren, konfigurieren Sie die Zurück-Schaltfläche so, dass Sie beim Auswählen der Zurück-Schaltfläche zu den vorherigen Schritten zurückkehren und innerhalb der App navigieren können.

Rufen Sie zum Konfigurieren der Schaltfläche Zurück die registerBackButtonHandler-API auf, die die Funktionalität der Zurück-Schaltfläche abhängig von einer der folgenden Bedingungen verarbeitet:

  • Wenn registerBackButtonHandler auf falsefestgelegt ist, ruft TeamsJS die navigateBack API auf, und die Teams-Plattform verarbeitet die Zurück-Schaltfläche.
  • Wenn registerBackButtonHandler auf truefestgelegt ist, verarbeitet die App die Funktionalität der Zurück-Schaltfläche (Sie können zu den vorherigen Schritten zurückkehren und innerhalb der App navigieren), und die Teams-Plattform führt keine weiteren Aktionen aus.

Im Folgenden finden Sie ein Beispiel für die Konfiguration der Zurück-Schaltfläche:

microsoftTeams.registerBackButtonHandler(() => {
  const selectOption = registerBackReturn.options[registerBackReturn.selectedIndex].value
  var isHandled = false
  if (selectOption == 'true') 
    isHandled = true;
  output(`onBack isHandled ${isHandled}`)
  return isHandled;
})

Desktop

Das Beispiel zeigt die Anatomie der persönlichen Bot-Komponente.

Leistungsindikator Beschreibung
A Bot-Registerkarte: Fügen Sie zum Beispiel eineRegisterkarte Chatein, um auf Bot-Unterhaltungen und -Benachrichtigungen zuzugreifen.
B Botnachricht: Bots senden oft Nachrichten und Benachrichtigungen in Form einer Karte (z. B. einer Adaptiven Karte).
C Kompositionsfeld: Eingabefeld zum Senden von Nachrichten an den Bot.

Verwalten einer persönlichen Registerkarte

Auf der linken Seite von Teams können Benutzer mit der rechten Maustaste auf die persönliche App klicken, um sie anzuheften, zu entfernen und andere App-Optionen zu konfigurieren.

Das Beispiel zeigt die Optionen für die Verwaltung einer persönlichen App.

Bewährte Methoden

Verwenden Sie diese Empfehlungen, um eine hochwertige App-Erfahrung zu erstellen.

Desktop

Registerkartenpriorität

Do: Anzeigen der relevantesten Inhalte auf der ersten Registerkarte

Bei responsiver Größe können die Registerkarten auf der rechten Seite abgeschnitten oder nicht mehr sichtbar sein.

Das Beispiel zeigt eine persönliche App, die den relevantesten Inhalt auf der ersten Registerkarte anzeigt.

Nicht: Lead mit sekundärem Inhalt oder Metadaten

Wie bei einer Standard-Webapplikation sollte die Navigation auf den Registerkarten in einer Reihenfolge erfolgen, die es ermöglicht, die wichtigsten Funktionen Ihrer App zu verstehen.

Das Beispiel zeigt eine persönliche App, die mit sekundären Inhalten oder Metadaten beginnt.

Registerkartenhierarchie

Do: Registerkarten sollten eine gleiche Hierarchie aufweisen und wichtige App-Seiten darstellen.

Ihre Registerkarten sollten die wichtigsten Funktionen und Inhalte Ihrer App kategorisieren. Bei responsiver Größe kann der Inhalt auf der rechten Seite abgeschnitten oder nicht mehr sichtbar sein.

Das Beispiel zeigt eine persönliche App mit Registerkarten mit gleicher Hierarchie.

Nicht: Unterschiedliche Hierarchieebenen einschließen

Ihr Inhalt sollte in einer logischen Reihenfolge ablaufen, die den Nutzern hilft, ihn zu verstehen. Wenn Sie zwei Registerkarten haben, die eng miteinander verbunden sind, sollten Sie sie zu einer Registerkarte zusammenfassen.

Das Beispiel zeigt eine persönliche App mit verschiedenen Hierarchieebenen.

Erste Ausführung

Do: Einschließen einer Oberfläche für die erste Ausführung

Wenn Sie eine persönliche App zum ersten Mal verwenden, sollte zumindest ein Willkommensbildschirm erscheinen. Beschreiben Sie für Bots, was Ihr Bot tun kann, und stellen Sie schnelle Aktionen bereit, z. B. eine Anmeldung.

Das Beispiel zeigt, was Sie bei einer persönlichen App-Erstanwendung tun sollten.

Ein weiteres Beispiel zeigt, was Sie bei einer persönlichen App-Erstanwendung tun sollten.

Nicht: Mit einem leeren Bildschirm beginnen

Benutzer könnten verwirrt sein, wenn bei der ersten Ausführung Ihrer App nichts angezeigt wird.

Das Beispiel zeigt, was Sie bei einer persönlichen App-Erstanwendung nicht tun sollten.

Personalisierte Inhalte

Do: Aggregieren von App-Inhalten, die für einen Benutzer relevant sind

Egal, ob es sich um eine persönliche Registerkarte oder einen Bot handelt, zeigen Sie nur Inhalte an, die sich auf die Aktivitäten eines Benutzers in Ihrer App beziehen.

Das Beispiel zeigt, was Sie mit einer persönlichen App und personalisierten Inhalten tun können.

Ein weiteres Beispiel zeigt, was man mit einer persönlichen App und personalisierten Inhalten machen kann.

Nicht: Nicht verknüpfte oder zu breite Inhalte anzeigen

Zeigen Sie in persönlichen Kontexten keine Inhalte für Teams an, in denen der Benutzer nicht Mitglied ist. Persönliche Bot-Inhalte sollten sich auf den Einzelnen konzentrieren—nicht auf eine Gruppe.

Das Beispiel zeigt, was man mit einer persönlichen App und personalisierten Inhalten nicht tun sollte.

Ein weiteres Beispiel zeigt, was man mit einer persönlichen App und personalisierten Inhalten nicht tun sollte.

Komplexe App-Funktionen

Do: Benutzern den Zugriff auf komplexe Features in einem Browser gestatten

Ihre App sollte sich auf die Kernaufgaben in Teams konzentrieren, aber Sie können trotzdem die vollständige, eigenständige App in einem Browser anzeigen.

Das Beispiel zeigt, wie Sie komplexe App-Funktionen mit einer persönlichen App verwalten können.

Nicht: Ihre gesamte App einschließen

Wenn Sie Ihre App nicht speziell für Teams entwickelt haben, haben Sie wahrscheinlich Funktionen, die in einem Collaboration-Tool keinen Sinn machen.

Das Beispiel zeigt, wie man komplexe App-Funktionen nicht mit einer persönlichen App behandeln sollte.

Mobil

Das Beispiel zeigt bewährte Methoden für eine persönliche App auf Mobilgeräten.

Codebeispiel

Beispielname Beschreibung TypeScript
Besprechungs-App Beispiel zum Anzeigen des Navigationsleistenmenüs in einer persönlichen Registerkarten-App. Anzeigen

Siehe auch

Diese anderen Designrichtlinien können je nach Umfang Ihrer persönlichen App hilfreich sein: