Windows-App-Silhouetten

Silhouetten zeigen ein häufiges Muster von Beziehungen zwischen Elementen wie App-Layering, Menüs, Navigation, Befehls- und Inhaltsbereichen an. Dieser Artikel konzentriert sich auf die gängigen Silhouetten, die in mehreren Windows-In-Box-Apps verwendet werden.

Lesen Sie auch Inhaltsgrundlagen für die üblichen Anordnungen von Inhalten und Steuerelementen.

Obere Navigationssilhouette

Eine NavigationView kann oben auf der Inhaltsebeneder App verwendet werden, um eine Verbindung mit dem darunter liegenden Inhalt herzustellen. Beachten Sie die Position des Benutzers Identität/Person/Bildsteuerung , wenn Sie die obere Navigation verwenden.

Das Platzieren der Navigation in derselben Zeile wie Befehle kann nützlich sein, wenn Sie versuchen, den vertikalen Platz für den inhalt unten zu maximieren.

Die Ränder des Inhalts können variieren. In diesem Beispiel werden 56epx-Ränder verwendet, die große Medienelemente ergänzen. Verwenden Sie kleinere Seitenränder für kleinere/engere Inhaltsanforderungen.

In Windows 11 ist die App "Photos" ein gutes Beispiel für eine Anwendung, die eine obere Navigationsleiste verwendet.

Silhouette der Menüleiste

Eine MenuBar- kann als Teil der Basisebene zusammen mit einer CommandBar-verwendet werden. Dies bringt mehr Fokus auf die primäre Aufgabe des Inhaltsbereichs, in diesem Fall Komposition und Bearbeitung.

In diesem Beispiel wird ein Texteditor mit 12 Pixel breiten Rändern dargestellt, um die Nützlichkeit der App zu unterstreichen.

In Windows 11 ist Notepad ein gutes Beispiel für eine App, die eine Menüleisten-Silhouette verwendet.

Silhouette der linken Navigationsleiste

DasNavigationView Steuerelement ruht automatisch auf der Basisebeneder App. Dadurch wird der Fokus auf die primäre Aufgabe des Inhaltsbereichs gelegt. Beachten Sie die Position des Benutzers Identität/Person/Bildsteuerung , wenn Sie die linke Navigation verwenden.

Die Ränder des Inhalts können variieren. In diesem Beispiel werden 56epx-Ränder verwendet, um den Zusammenhalt des Inhalts innerhalb der Erweiterungselemente zu ergänzen. Verwenden Sie kleinere Ränder, wenn der Zusammenhalt von Inhalten weniger bedenklich ist, da andere Designelemente den Zusammenhalt stärken, inhalte nicht in Erweiterungen geschachtelt sind oder Inhalte nicht logisch gruppiert werden sollten.

In Windows 11 ist "Einstellungen" ein gutes Beispiel für eine App, die eine linke Navigationssilhouette verwendet.

Silhouette der Tab-Ansicht

Eine TabView kann mit der Basisebeneund der Titelleisteder App integriert werden. Dies bringt mehr Fokus auf die primäre Aufgabe des Inhaltsbereichs, in diesem Fall Codekomposition und -bearbeitung.

Dieses Beispiel zeigt einen Texteditor, der 12epx Ränder verwendet, um den Nutzen der App zu vervollständigen.

In Windows 11 ist Terminal ein gutes Beispiel für eine App, die eine Silhouette der Registerkartenansicht verwendet.