Layoutrichtlinien für Office-Add-Ins

Ein gut gestaltetes Layout hilft Benutzern, schnell in Ihrem Add-In zu navigieren und Aufgaben sicher zu erledigen. Jeder in Office eingebettete HTML-Container – unabhängig davon, ob es sich um einen Aufgabenbereich, einen Inhaltsbereich oder einen Dialog handelt – stellt einen Bildschirm in Ihrem Add-In dar, und einheitliche Layouts auf diesen Bildschirmen sorgen für eine nahtlose Oberfläche.

Wenn Sie bereits über eine Website verfügen, die Ihre Kunden kennen, sollten Sie die Layouts wiederverwenden. Passen Sie sie an office HTML-Container an, damit das Add-In wie ein natürlicher Teil der Office-Umgebung aussieht.

Ausführliche Anleitungen zu bestimmten Containertypen finden Sie unter Aufgabenbereich-Add-Ins und Inhalts-Add-Ins. Informationen zum Zusammenstellen von Fluent UI-React- oder Fluent UI-Komponenten (Fabric Core) in gängige Layouts und Benutzeroberflächenflows finden Sie unter UX-Entwurfsmustervorlagen.

Allgemeine Layoutrichtlinien

Befolgen Sie diese Richtlinien, wenn Sie Ihre Add-In-Layouts entwerfen.

Ränder und Abstände

  • Verwenden Sie 20 Pixel als Standardrand für HTML-Container. Vermeiden Sie Ränder, die zu schmal oder zu breit sind.
  • Halten Sie den Abstand zwischen Elementen bei Vielfachen von 4 Pixeln aufrecht. Office-Schnittstellen verwenden ein Raster von 4 px.

Ausrichtung und visuelle Hierarchie

  • Richten Sie Elemente gezielt aus. Zusätzliche Einzüge und neue Ausrichtungspunkte sollten die visuelle Hierarchie verstärken und nicht zu Unübersichtlichkeit führen.
  • Halten Sie sich an gängige Layoutmuster. Konventionen helfen Benutzern zu verstehen, wie eine Schnittstelle ohne zusätzlichen Aufwand verwendet werden kann.

Reaktionsfähigkeit und Konsistenz

  • Gestalten Sie Layouts bildschirmübergreifend konsistent. Unerwartete Änderungen sehen wie visuelle Fehler aus und verringern das Vertrauen der Benutzer.
  • Erstellen Sie reaktionsfähige Umgebungen, die sich an die Breite und Höhe des HTML-Containers anpassen. Erwägen Sie die Verwendung eines CSS-Flexbox-Layouts , um die Ui-Elemente Ihres Add-Ins zu organisieren.

Einfachheit

  • Vermeiden Sie eine Überfüllung der Schnittstelle. Dichte Layouts sorgen für Verwirrung und erschweren Touchinteraktionen.
  • Vermeiden Sie redundante Elemente wie doppeltes Branding oder Befehle.
  • Konsolidieren Sie Steuerelemente und Ansichten, um unnötige Mausbewegungen zu minimieren.

Siehe auch

  • Last updated on