Freigeben über

Inhaltslayout und -abstand

Dieser Artikel enthält einige praktische Tipps und Beispiele, mit denen Sie den Inhalt Ihrer App entwerfen können: Windows-Abstandsgrundsätze, Verwenden der Typhierarchie zum Veranschaulichen von Hierarchien, Listen und Rastern und zum Gruppieren von Steuerelementen.

Abstände und Fugen

Die Verwendung von konsistenten Abständen und Bundsteste gruppiert semantisch eine Erfahrung in separate Komponenten. Diese Werte sind unserer abgerundeten Ecklogik zugeordnet und helfen zusammen, ein einheitliches und verwendbares Layout zu erstellen.

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

8epx zwischen Schaltflächen

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

8epx zwischen Schaltflächen und Flyouts

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

8epx zwischen Steuerelement und Kopfzeile

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 Typografie-Skala (Link) wurde entwickelt, um eine Vielzahl von Größen bereitzustellen, die dabei helfen kann, Hierarchien innerhalb einer App zu kommunizieren.

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

Verwenden Sie beim Unterscheiden eines Titels in einem begrenzten BENUTZERoberflächenbereich "Body Strong" für den Titel ohne zusätzlichen Abstand zwischen Textblöcken.

Ein Beispiel für die Verwendung des Beschriftungsstils in einem begrenzten Raum.

Verwenden Sie die Beschriftungsgröße für sehr begrenzte Bereiche, bei denen Text benötigt wird, z. B. 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 Fließtext und Beschriftung aus der Typvorlage sowie 32epx-Icons.

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 den Haupttext und richten Sie ihn zur linken Seite des Bildes aus, 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 einen Expander mit untergeordneten Steuerelementen.

Beispiele für die Verwendung eines Expander-Steuerelements (Link) mit Listenstilen und standardmäßigen Steuerelementen. Steuerelemente sollten rechtsbündig ausgerichtet sein, mit 16epx Abstand zwischen dem Steuerelement und der Expander-Taste.

Ein Beispiel, wie Steuerelemente in einem Erweiterungsfeld ausgerichtet werden.

Dieses Beispiel zeigt die Ausrichtung von Steuerelementen, wenn sie in der Erweiterung platziert werden. Rücken Sie die Steuerelemente um 48epx ein.

  • Last updated on