Diese Seite wurde von der Cloud Translation API übersetzt.

Raster

In einer Rasteransicht werden zwei oder mehr Spalten mit Bildern angezeigt, die Inhaltselemente darstellen. Unter jedem Bild wird ein kurzer Text angezeigt. Diese Ansicht eignet sich am besten, wenn Nutzer ihre Auswahl hauptsächlich anhand von Bildern treffen.

Raster sind vertikal scrollbar und können in Größe, Abstand und Anzahl der Spalten variieren. Der Inhalt des Rasters kann auch in Kategorien gruppiert werden.

Komponente „Listenelemente“

Listen stellen eine Alternative zur Anzeige von Inhalten dar, für die mehr Erläuterungen erforderlich sind

Anatomie

Raster enthalten Text- und UI-Steuerelemente. Da Nutzende auf sie reagieren müssen, sollten sie niemals durch andere Elemente oder den Bildschirmrand verdeckt werden.

Rasterelement

Primärer und sekundärer Text

Rasterhintergrund

Technische Daten

Layout labels

Definitionen von E, M, KL, P, Flex

Komponente „Listenelemente“

Spezifikationen, Stilrichtlinien und mehr

Inhaltsraster (3 oder 4 Spalten)

App-Raster (4 Spalten)

App-Raster mit häufig verwendeten Elementen in der obersten Zeile

Platzierung von Indikatorsymbolen im Rasterlayout

Layouts skalieren

Diese Referenzlayouts zeigen, wie Raster für Bildschirme verschiedener Breite und Höhe angepasst werden. Die Kategorien für Breite und Höhe werden im Abschnitt Layout definiert. Beachten Sie, dass alle Pixelwerte in gerenderten Pixeln vorliegen, bevor ein Downsampling oder Upsampling erfolgt.

Layout

Ränder, Keylines und Abstände für verschiedene Bildschirmgrößen

Layout labels

Definitionen von E, M, KL, P, Flex

Bildschirme mit Standardbreite

Breitbildformate

Für breite Bildschirme wird ein Layout mit drei Spalten empfohlen. Behalten Sie bei einem 4-spaltigen Layout eine Mindestkachelgröße von 219 dp bei.

Extrabreit und superbreit

Vertikaler Abstand von App-Rastern auf Bildschirmen unterschiedlicher Höhe

Bei kurzen Bildschirmen sollte der vertikale Abstand zwischen Rasterinhalten und zwischen App-Symbolen und Titeln verringert werden.

Stile

Typografierichtlinien

Skalierungs- und Rasterverweise, typografische Beispiele und mehr

Farbrichtlinien

Paletten, Höhen- und Deckkraftwerte und mehr

Typografie

Schriftstil	Schriftart	Gewicht	Größe (dp)
Text 1	Roboto	Regulär	32
Text 2	Roboto	Regulär	28
Text 3	Roboto	Regulär	24

Farbe

Element	Farbe(Tagesmodus)	Farbe (Nachtmodus)
Haupttyp / Primäre Symbole	White	Weiß mit 88%
Sekundärer Typ / Symbole	Weiß mit 72%	Weiß mit 60%
Grafik: Trennlinie	Weiß mit 22%	Weiß mit 12%
Rasterhintergrund	Schwarz	Schwarz
Content-Screm	–	Schwarz: 22%
Kürzung des Verlaufs	Schwarz bei 0–100% in 10% des Textraums	Schwarz bei 0–100% in 10% des Textraums

Größen

Element	Größe (dp)
App-Symbol	76
Min. App-Zelle	135
Zelle mit min. Inhalt	158

Elevation

Element	Farbe	Y-Achse	Unkenntlich machen
Rasterkachel	Schwarz: 22%	2	2