Gestalten einer App-Seite
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Mithilfe der im Folgenden beschriebenen Gestaltungsmuster können Sie das Layout der UI-Elemente auf den Seiten Ihrer App festlegen. Durch ein durchgängiges Muster für Ränder, Seitenköpfe, Bundstegbreiten und weitere vergleichbare Elemente wird app-übergreifend ein geschlossenes Gesamtbild gewahrt, und Sie erreichen, dass die Benutzer Interaktionen überall im System leichter verstehen können.
Die Benutzeroberfläche in Windows 8 sollte app-übergreifend eine einheitliche Silhouette aufweisen. Das charakteristische Merkmal der Silhouette ist ein breiter Rand oben, unten und links. Der breite Rand dient dazu, den Benutzern die horizontale Verschiebungsrichtung für den Inhalt aufzuzeigen.
Sehen Sie diese Features in unserer Reihe App-Features von A bis Z in Aktion.: Windows Store-App-Benutzeroberfläche von A bis Z
Verwenden des Rastersystems
Bevor wir über die Silhouette von Windows 8 sprechen, sollten Sie ein paar Dinge über die Verwendung des Rastersystems von Windows 8 wissen. Das Rastersystem ist ein Designtool, das dazu beiträgt, visuelle Geschlossenheit für die verschiedenen Apps zu erzielen. Gleichzeitig liefert es eine Struktur, um Varianten zu entwerfen und das Interesse der Benutzer zu wahren. Das Rastersystem setzt auf den Entwicklervorlagen auf, und die Steuerelemente und Auflistungen wurden mit Blick auf das Rastersystem konzipiert.
Das Raster besteht aus Einheiten und Untereinheiten. Die Basismaßeinheit ist die Einheit. Eine Einheit entspricht 20 × 20 Pixel. Jede Einheit ist in Untereinheiten von 5 × 5 Pixel unterteilt. Eine Quadrateinheit enthält 16 Untereinheiten. Das folgende Bild zeigt das Raster in der linken oberen Ecke eines Bildschirms. Das Bild ist vergrößert, damit die Pixel, Untereinheiten und Einheiten sichtbar sind.
.png "Abbildung des Rastersystems")
Seitenkopf
Die Basislinie des Seitenkopfs sollte 5 Einheiten oder 100 Pixel vom oberen Rand entfernt sein. Der linke Rand des Seitenkopfs beträgt 6 Einheiten oder 120 Pixel. Der Windows 8-Seitenheader ist mit dem Stil-Set "Segoe UI Light 20" formatiert. Weitere Informationen zu Stil-Sets finden Sie unter Richtlinien und Prüfliste für Text und Typografie.
Hinweis In Windows 8.1 Update kann der Benutzer den Mauszeiger an den oberen Bildschirmrand bewegen, um eine Titelleiste einzublenden. Außerdem kann der Benutzer den Mauszeiger an den unteren Bildschirmrand bewegen und so die Desktop-Taskleiste einblenden. Wenn der Benutzer den Mauszeiger vom oberen oder unteren Bildschirmrand wegbewegt, wird die entsprechende Leiste wieder ausgeblendet. Titel- und Taskleiste können nicht per Toucheingabe eingeblendet werden. Die eingeblendete Titel- oder Taskleiste verdeckt unter Umständen die Benutzeroberfläche oder Befehlselemente Ihrer App. Berücksichtigen Sie dies beim Definieren der Positionen von Elementen im App-Layout.
.png "Abbildung eines Seitenkopfs")
Inhaltsbereich
Der Inhaltsbereich hat einen oberen Rand von 7 Einheiten oder 140 Pixel. Der linke Rand beträgt 6 Einheiten oder 120 Pixel. Der untere Rand kann flexibel gehandhabt werden. Beim horizontalen Verschieben des Inhalts sollte er höchstens 6,5 Einheiten (130 Pixel) und mindestens 2,5 Einheiten (50 Pixel) betragen. Beim vertikalen Verschieben des Inhalts bleiben oberer und linker Rand gleich. Ein unterer Rand ist nicht angegeben, da der Inhalt beim Durchführen des Bildlaufs vom Bildschirm geschoben wird.
.png "Abbildung eines Inhaltsbereichs")
Werte für den horizontalen Abstand
Der horizontale Abstand zwischen Inhaltselementen ist unterschiedlich und hängt von den Elementen ab. Stark konturierte Elemente (beispielsweise Bilder und Benutzerkacheln) haben 2 Untereinheiten oder 10 Pixel Abstand zwischen der Kachel und dem zugehörigen Text. Listen haben 2 Einheiten oder 40 Pixel Abstand zwischen den Spalten. Stark konturierte Elemente haben 2 Untereinheiten oder 10 Pixel Abstand zwischen den Spalten.
.png "Abbildung von Werten für den horizontalen Abstand")
Werte für den vertikalen Abstand
Der vertikale Abstand zwischen Inhaltselementen ist ebenfalls unterschiedlich und hängt von den Elementarten ab. Kachel- und Textlisten haben 1 Einheit oder 20 Pixel vertikalen Abstand zwischen den Elementen in einer Zeile. Stark konturierte Objekte haben 2 Untereinheiten oder 10 Pixel Abstand zwischen den Elementen in einer Zeile.
.png "Abbildung von Werten für den vertikalen Abstand")
Horizontaler Abstand zwischen Gruppen
Der Abstand zwischen Gruppen beträgt 4 Einheiten oder 80 Pixel. Dieser Abstand ist großzügig genug, um eine Gruppe von der nächsten zu unterscheiden, wenn der Benutzer Inhalte verschiebt.
.png "Abbildung des horizontalen Abstands zwischen Gruppen")