Teilen über

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.

Zwei Schaltflächen, die durch 8 Pixel getrennt sind.

8epx zwischen Tasten

Eine Schaltfläche und ein Flyout, das durch 8 Pixel getrennt ist.

8epx zwischen Tasten und Flyouts

Ein Steuerelement und eine Kopfzeile, die durch 8 Pixel getrennt ist.

8epx zwischen Steuerelement und Header

Ein Steuerelement und eine Beschriftung, die durch 12 Pixel getrennt ist

12epx zwischen Steuerelement und Bezeichnung

Zwei Inhaltsbereiche, die durch 12 Pixel getrennt sind.

12epx zwischen Inhaltsbereichen

Eine Oberfläche mit Text mit 12 Pixel Bundstegen auf beiden Seiten.

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.

Ein Beispiel für Text mit Titel-, Untertitel- und Textkörperformatvorlagen, wenn ausreichend Platz vorhanden ist.

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

Beispiel für die Verwendung von

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.

Ein Beispiel für die Verwendung der Beschriftungsformatvorlage in einem begrenzten Platz.

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.

Eine Beispielliste mit Listenelementen mit mehreren Elementen.

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

Verwenden Sie Body Strong für Abschnittsüberschriften.

Ein Beispiel für horizontale Listen.

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

Eine Beispielliste mit umfangreichen Listenelementen.

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.

Ein Beispiel für eine Erweiterung mit untergeordneten Steuerelementen.

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.

Ein Beispiel, wie Steuerelemente in einem Erweiterungsfeld ausgerichtet werden.

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