Grundlagen des Inhaltsdesigns für Windows-Apps

  • Artikel

Dieser Artikel enthält einige praktische Tipps und Beispiele, mit deren Hilfe Sie den Inhalt Ihrer App entwerfen können: Windows-Grundgedanken zu Abständen, Verwendung der Typhierarchie zum Veranschaulichen von Hierarchien, Listen und Rastern sowie Gruppieren von Steuerelementen.

Abstände und Bundstege

Die Verwendung von konsistenten Abständen und Bundstegen gruppiert semantisch eine Erfahrung in separate Komponenten. Diese Werte entsprechen unserer Logik der abgerundeten Ecken und tragen gemeinsam dazu bei, ein kohärentes und brauchbares Layout zu erstellen.

Two buttons separated by 8 pixels.

8epx zwischen Tasten

A button and a flyout separated by 8 pixels.

8epx zwischen Tasten und Flyouts

A control and a header separated by 8 pixels.

8epx zwischen Steuerelement und Header

A Control and a label separated by 12 pixels

12epx zwischen Steuerelement und Bezeichnung

Two content areas separated by 12 pixels.

12epx zwischen Inhaltsbereichen

A surface containing text with 12 pixel gutters on both sides.

16epx zwischen Oberflächen- und Randtext

Text + Hierarchie

Unsere Typenrampe (Link) wurde entwickelt, um ein Array von Größen bereitzustellen, das die Kommunikation der Hierarchie innerhalb einer App erleichtern kann.

An example of text using title, subtitle, and body styles when there is adequate space.

Verwenden von Titel, Untertitel und Textkörper mit 12epx-Abständen.

An example of using Body Strong instead of Title in a confined space.

Wenn Sie einen Titel in einem begrenzten Bereich der Benutzeroberfläche abheben möchten, verwenden Sie Body Strong für den Titel ohne zusätzlichen Abstand zwischen den Textblöcken.

An example of using the Caption style in a confined space.

Verwenden Sie die Beschriftungsgröße für sehr begrenzte Bereiche, in denen Text benötigt wird, z. B. für Befehlsschaltflächen.

Listen und Raster

Es gibt eine Vielzahl von Listen- und Rasterformatvorlagen, die erstellt werden können. Nachfolgend finden Sie eine Vielzahl von Kompositionen, die in Windows verwendet werden.

An example list with multi-element list items.

Verwenden Sie für mehrzeilige Listen Textkörper und Beschriftung aus der Typenrampe und 32epx-Symbole.

Verwenden Sie Body Strong für Abschnittsüberschriften.

An example of horizontal lists.

Verwenden Sie bei Verwendung von Symbolen oder Personenbildelementen für Rasterelemente Beschriftungstext, der zentriert ausgerichtet ist.

An example list containing large list items.

Verwenden Sie die Formatvorlage Textkörper für primären Text und linksbündig am Bild, wenn Ihre Liste große grafische Elemente mit Text enthält.

Verwenden von Steuerelementen

Einige Beispiele dafür, wie Steuerelemente in gängigen Konfigurationen miteinander zusammenhängen können.

An example of an expander with child controls.

Beispiele für die Verwendung eines Erweiterungssteuerelements (Link) mit Listenformatvorlagen und allgemeinen Steuerelementen. Steuerelemente sollten rechtsbündig mit 16epx zwischen dem Steuerelement und der Erweiterungsschaltfläche ausgerichtet sein.

An example how controls inside an expander are aligned.

Dieses Beispiel zeigt die Ausrichtung von Steuerelementen, wenn sie in der Erweiterung platziert werden. Herunterstufen der Steuerelemente 48epx.