Freigeben über

Layout

  • Artikel

Jeder in Office eingebettete HTML-Container verfügt über ein Layout. Diese Layouts sind die Standard Bildschirme Ihres Add-Ins. In ihnen erstellen Sie Benutzeroberflächen, die es Kunden ermöglichen, Aktionen zu initiieren, Einstellungen zu ändern, anzuzeigen, zu scrollen oder in Inhalten zu navigieren. Entwerfen Sie Ihr Add-In mit einem konsistenten Layout auf allen Bildschirmen, um die Kontinuität der Erfahrung zu gewährleisten. Wenn Sie über eine vorhandene Website verfügen, mit der Ihre Kunden vertraut sind, sollten Sie die Wiederverwendung von Layouts aus Ihren vorhandenen Webseiten in Betracht ziehen. Passen Sie sie so an, dass sie harmonisch in Office-HTML-Container passen.

Richtlinien zum Layout finden Sie unter Aufgabenbereich, Inhalt. Weitere Informationen zum Zusammenstellen von Fluent UI-React oder Office UI Fabric JS-Komponenten in gängigen Layouts und Benutzeroberflächenflows finden Sie unter UX-Entwurfsmustervorlagen.

Wenden Sie die folgenden allgemeinen Richtlinien für Layouts an.

  • Vermeiden Sie schmale oder breite Ränder in Ihren HTML-Containern. 20 Pixel ist ein hervorragender Standardwert.
  • Richten Sie Elemente gezielt aus. Zusätzliche Einzüge und neue Ausrichtungspunkte können für die visuelle Hierarchie hilfreich sein.
  • Office-Oberflächen nutzen ein 4-px-Raster. Versuchen Sie nach Möglichkeit, den Abstand zwischen Elementen auf ein Vielfaches von 4 festzulegen.
  • Zu viele Elemente in einer Oberfläche können zu Verwirrung führen und die Benutzerfreundlichkeit von Touchinteraktionen beeinträchtigen.
  • Gestalten Sie Layouts bildschirmübergreifend konsistent. Unerwartete Layoutänderungen sehen wie visuelle Fehler aus, die das Vertrauen in Ihre Lösung schmälern.
  • Halten Sie sich an gängige Layoutmuster. Konventionen helfen Benutzern dabei zu verstehen, wie eine Oberfläche verwendet wird.
  • Vermeiden Sie redundante Elemente wie Branding oder Befehle.
  • Konsolidieren Sie Steuerelemente und Ansichten, um übermäßige Mausbewegungen zu vermeiden.
  • Erstellen Sie reaktionsschnelle Oberflächen, die sich an die Breite und Höhe der HTML-Container anpassen.