Silhouetten von Windows-Apps

Silhouetten weisen auf ein gemeinsames Muster von Beziehungen zwischen Elementen wie App-Layering, Menüs, Navigation, Befehls- und Inhaltsbereichen hin. Dieser Artikel konzentriert sich auf die allgemeinen Silhouetten, die in mehreren Windows-In-Box-Apps verwendet werden.

Weitere Informationen zu allgemeinen Anordnungen von Inhalten und Steuerelementen finden Sie unter Inhaltsgrundlagen .

Obere Navigationssilhouette

Eine NavigationView kann oben auf der Inhaltsebene der App verwendet werden, um eine Verbindung mit dem folgenden Inhalt herzustellen. Notieren Sie sich den Speicherort des Benutzeridentitäts-/Personen-/Bildsteuerelements , wenn Sie die obere Navigation verwenden.

Das Platzieren der Navigation in derselben Zeile wie Befehle kann hilfreich sein, wenn Sie versuchen, den vertikalen Abstand für den folgenden Inhalt zu maximieren.

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

In Windows 11 ist Fotos ein gutes Beispiel für eine App, die eine obere Navigationssilhouette verwendet.

Silhouette der Menüleiste

Eine MenuBar kann zusammen mit einer CommandBar als Teil der Basisebene verwendet werden. Dadurch wird der Fokus auf die primäre Aufgabe des Inhaltsbereichs, in diesem Fall Komposition und Bearbeitung, verstärkt.

In diesem Beispiel wird ein Text-Editor mit 12epx-Rändern dargestellt, um das Hilfsprogramm der App zu ergänzen.

In Windows 11 ist Editor ein gutes Beispiel für eine App, die eine Silhouette der Menüleiste verwendet.

Linke Navigationssilhouette

NavigationView-Steuerelemente befinden sich automatisch auf der Basisebene der App. Dadurch wird die Hauptaufgabe des Inhaltsbereichs stärker in den Fokus ge rücken. Notieren Sie sich den Speicherort des Benutzeridentitäts-/Personen-/Bildsteuerelements , wenn Sie die linke Navigation verwenden.

Inhaltsränder können variieren. In diesem Beispiel werden Ränder mit 56epx verwendet, um den Zusammenhalt des Inhalts innerhalb der Expander zu ergänzen. Verwenden Sie kleinere Ränder, wenn die Inhaltszusammenhaltigkeit weniger von Bedeutung ist, da andere Entwurfselemente den Zusammenhalt stärken, Inhalte nicht in Expandern geschachtelt werden 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 Registerkartenansicht

Eine TabView kann in die Basisebene und das Titelleistensteuerelementder App integriert werden. Dadurch wird die primäre Aufgabe des Inhaltsbereichs, in diesem Fall die Codekomposition und -bearbeitung, stärker in den Fokus rücken.

In diesem Beispiel wird ein Text-Editor mit 12epx-Rändern dargestellt, um das Hilfsprogramm der App zu ergänzen.

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