Entwerfen der Benutzeroberfläche von Office-Add-Ins

Office-Add-ins erweitern die Office-Erfahrung, indem Sie Kontextfunktionen bereitstellen, auf die Benutzer in Office-Clients zugreifen können. Mit Add-Ins können Benutzer mehr leisten, da sie in Office auf Drittanbieter-Funktionen zugreifen können, ohne teure Kontextwechsel zu verwenden.

Das Benutzeroberflächendesign Ihres Add-Ins muss nahtlos in Office integriert werden können, damit Ihre Benutzer effizient und natürlich damit interagieren können. Nutzen Sie Add-In-Befehle, um Zugriff auf Ihr Add-In bereitzustellen, und wenden Sie die von uns empfohlenen bewährten Methoden an, wenn Sie eine benutzerdefinierte HTML-basierte Benutzeroberflächen erstellen.

Gestaltungsgrundsätze für Office

Office-Anwendungen entsprechen einer Reihe von Interaktionsrichtlinien. Die Anwendungen haben gemeinsame Inhalte sowie Elemente, die sich in Aussehen und Verhalten ähneln. Diese Gemeinsamkeit basiert auf einer Reihe von Entwurfsprinzipien. Diese Prinzipien helfen dem Office-Team bei der Erstellung von Benutzeroberflächen, die den Kunden bei der Ausführung seiner Aufgaben unterstützen. Wenn Sie diese Prinzipien verstehen und befolgen, können Sie die von Ihrem Kunden in Office benötigten Funktionen gezielter bereitstellen.

Befolgen Sie die Office-Entwurfsprinzipien, um Benutzern eine positive Add-In-Erfahrung zu ermöglichen.

  • Entwerfen Sie explizit für Office. Funktionalität sowie Aussehen und Verhalten eines Add-Ins müssen die Office-Funktionen harmonisch ergänzen. Add-Ins sollten wie ein systemeigener Bestandteil wirken. Sie sollten nahtlos in Word auf einem iPad oder in PowerPoint im Web passen. Ein gut entworfenes Add-In stellt eine angemessene Mischung aus der Funktionalität, der Plattform und der Office-Anwendung dar. Wenden Sie Dokument- und Benutzeroberflächendesigns an, wo angemessen. Erwägen Sie, die Fluent-Benutzeroberfläche für das Web als Entwurfssprache und Toolset zu verwenden. Die Fluent-Benutzeroberflächen für das Web gibt es in zwei Varianten.

    • Für Nicht-React-Benutzeroberflächen: Verwenden Sie Fabric Core, eine Open Source-Sammlung von CSS-Klassen und SASS-Mixins, die Ihnen Zugriff auf Farben, Animationen, Schriftarten, Symbole und Raster bieten. (Aus historischen Gründen wird dies "Fabric Core" statt "Fluent Core" genannt.) Informationen für die ersten Schritte finden Sie unter Fabric Core in Office-Add-Ins.
    • Für React-Benutzeroberflächen: Verwenden Sie Fluent UI React, ein React-Front-End-Framework, das entwickelt wurde, um Umgebungen zu erstellen, die nahtlos in eine Vielzahl von Microsoft-Produkten passen. Es bietet stabile, aktuelle, barrierefreie, auf React basierende Komponenten, die mit CSS-in-JS in hohem Maße angepasst werden können. Informationen für die ersten Schritte finden Sie unter Fluent UI React in Office-Add-Ins.
  • Ziehen Sie Inhalte dem Aussehen vor. Sorgen Sie dafür, dass die Seite, Folie oder Tabelle des Kunden im Fokus der Funktionen bleibt. Ein Add-In ist eine zusätzliche Benutzeroberfläche. Inhalte und Funktionen des Add-Ins sollten nicht durch Zubehörelemente gestört werden. Verwenden Sie Branding-Elemente in Ihrer Oberfläche mit Bedacht. Wir wissen, dass es ist wichtig, Benutzern eine eindeutige, wiedererkennbare Oberfläche bereitzustellen, aber vermeiden Sie Ablenkungen. Legen Sie den Fokus auf Inhalte und Aufgaben, nicht auf die Marke.

  • Machen Sie die Nutzung zum Genuss, und überlassen Sie den Benutzern die Kontrolle. Benutzer genießen es, Produkte zu verwenden, die funktional und optisch ansprechend sind. Gestalten Sie die Oberfläche sorgfältig. Achten Sie auf Kleinigkeiten, indem Sie jede Interaktion und visuelle Details berücksichtigen. Überlassen Sie Benutzern die Kontrolle über ihre Oberfläche. Die notwendigen Schritte zum Durchführen einer Aufgabe müssen klar und relevant sein. Wichtige Entscheidungen sollten leicht verständlich sein. Aktionen sollten ganz einfach rückgängig gemacht werden können. Ein Add-In ist kein Ziel – es ist eine Erweiterung von Office-Funktionen.

  • Design für alle Plattformen und Eingabemethoden. Add-Ins sind für alle Plattformen konzipiert, Sind Office unterstützen, und Ihre Add-In-UX sollte so optimiert werden, dass sie mit verschiedenen Plattformen und Formfaktoren funktioniert. Unterstützen Sie Maus-/Tastatur- und Touch-Eingabegerät, und vergewissern Sie sich, dass Ihre benutzerdefinierte HTML-Benutzeroberfläche reaktionsfähig für die Anpassung an verschiedene Formfaktoren ist. Weitere Informationen finden Sie unter Touch.

Siehe auch