Freigeben über

Entwerfen der Benutzeroberfläche von Office-Add-Ins

  • Artikel

Office-Add-ins erweitern die Office-Erfahrung, indem Sie Kontextfunktionen bereitstellen, auf die Benutzer in Office-Clients zugreifen können. Add-Ins ermöglichen Es Benutzern, mehr zu erledigen, indem sie ihnen den Zugriff auf externe Funktionen in Office ohne kostspielige Kontextwechsel ermöglichen.

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 benutzerdefinierte HTML-basierte Benutzeroberflächen erstellen.

Gestaltungsgrundsätze für Office

Office-Anwendungen folgen einem allgemeinen Satz von Interaktionsrichtlinien. Die Anwendungen teilen Inhalte und verfügen über Elemente, die ähnlich aussehen und sich verhalten. Diese Gemeinsamkeit basiert auf einer Reihe von Entwurfsprinzipien. Die 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 eigener 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 Designsprache und Toolset zu verwenden. Die Fluent-Benutzeroberfläche für das Web verfügt über zwei Varianten.

    • Für Benutzeroberflächen ohne React: 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.

    Hinweis

    Fabric Core ist zwar die empfohlene Bibliothek zum Entwerfen nicht React Add-Ins, das Team arbeitet jedoch an Fluent UI-Webkomponenten, um eine neuere Lösung bereitzustellen. Die Fluent UI Web Components-Bibliothek basiert auf FAST und ermöglicht es Ihnen, Webkomponenten zu verwenden, anzupassen und zu erstellen, um eine modernere und standardbasierte Benutzeroberfläche zu erstellen. Wir laden Sie ein, diese Bibliothek zu testen, indem Sie den Schnellstart abschließen und Feedback zu Ihrer Erfahrung über GitHub begrüßen.

    • 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 Inhalt Chrom vor. Sorgen Sie dafür, dass die Seite, Folie oder Tabelle des Kunden der Mittelpunkt der Lösung 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 einmalige, 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 Toucheingabe.

Siehe auch