Share via

UX-Entwurfsmuster für Office-Add-Ins

  • Artikel

Beim Entwerfen der Benutzeroberfläche für Office-Add-Ins sollte eine ansprechende Umgebung für Benutzer von Office im Vordergrund stehen, und die gesamte Benutzeroberfläche von Office sollte erweitert werden, indem sie sich nahtlos in die standardmäßige Office-Benutzeroberfläche einfügt.

Unsere UX-Muster setzen sich aus Komponenten zusammen. Komponenten sind Steuerelemente, die Kunden bei der Interaktion mit Elementen Ihrer Software oder Ihres Diensts helfen. Schaltflächen, Navigation und Menüs sind Beispiele für allgemeine Komponenten, die häufig konsistente Stile und Verhaltensweisen aufweisen.

Fluent UI-React-Komponenten sehen wie ein Teil von Office aus und verhalten sich wie die frameworkneutralen Komponenten von Office UI Fabric JS. Nutzen Sie beide Komponenten, um sie in Office zu integrieren. Wenn Ihr Add-In über eine eigene, bereits vorhandene Komponentensprache verfügt, müssen Sie sie alternativ nicht verwerfen. Suchen Sie nach Möglichkeiten, diese Sprache während der Integration in Office beizubehalten. Überlegen Sie, wie Sie stilistische Elemente austauschen, Konflikte entfernen, oder Formatvorlagen und Verhaltensweisen übernehmen können, die Verwirrung bei den Benutzern vermeiden.

Die bereitgestellten Muster sind bewährte Lösungen, die auf allgemeinen Kundenszenarien und der Forschung in Bezug auf Benutzeroberflächen basieren. Sie sollen sowohl einen schnellen Einstieg in das Entwerfen und Entwickeln von Add-Ins als auch Anleitungen bieten, um ein Gleichgewicht zwischen Microsoft-Markenelementen und Ihren eigenen zu erreichen. Die Bereitstellung einer sauber, modernen Benutzeroberfläche, die Designelemente aus der Fluent-Ui-Designsprache von Microsoft und der einzigartigen Markenidentität des Partners ausgleicht, kann dazu beitragen, die Benutzerbindung und die Akzeptanz Ihres Add-Ins zu erhöhen.

Mit den UX-Mustervorlagen haben Sie die folgenden Möglichkeiten:

  • Anwenden von Lösungen auf häufige Kundenszenarien
  • Anwenden bewährter Methoden für den Entwurf
  • Integrieren Sie Fluent-UI-Komponenten und -Stile.
  • Erstellen von Add-Ins für visuelle Integration in die standardmäßige Office-Benutzeroberfläche
  • Entwickeln und Visualisieren der Benutzeroberfläche

Erste Schritte

Die Muster sind nach den wichtigen Aktionen oder Funktionen organisiert, die in einem Add-In häufig verwendet werden. Die wichtigsten Gruppen sind:

Sehen Sie sich die einzelnen Gruppen an, um eine Vorstellung davon zu erhalten, wie Sie Ihr Add-In mit bewährten Vorgehensweisen am besten entwerfen können.

Hinweis

Die in dieser Dokumentation aufgeführten Beispielbildschirme wurden mit einer Auflösung von 1366 x 768 entwickelt und dargestellt.

Siehe auch