Android ist auf einer Vielzahl von Geräten, Formen und Bildschirmgrößen verfügbar. Daher ist es nicht nur ineffektiv, für bestimmte pixelgenaue Lockups zu entwickeln, sondern kann sich auch negativ auf die Nutzerfreundlichkeit auswirken. Stattdessen sollten Sie adaptiv entwickeln und denken. Wir haben vor Kurzem neue APIs eingeführt, die einige bekannte Designkonzepte enthalten, mit denen sich adaptive Layouts erstellen lassen.
Pawparazzi ist eine Beispiel-App, die diese Konzepte veranschaulicht. Sie wurde entwickelt, um adaptives Design mithilfe adaptiver APIs wie Grid und Flexbox hervorzuheben.
Adaptives Denken bedeutet nicht nur, mit Breakpoints zu entwickeln, sondern auch, Inhalte in flexiblen Containern zu betrachten.
Alles ist ein Raster!
Eine Grundlage für die Strukturierung von Inhalten ist eine gute Designpraxis und kann Ihnen helfen, zu entscheiden, wie Inhalte angepasst werden sollen. Android hat ein zugrunde liegendes 8-dp-Basisraster, an dem wir alle Inhalte auf Mikroebene ausrichten können.
Pawparazzi verwendet ein hierarchisches Layoutraster anstelle eines gleichmäßigen modularen Rasters oder eines unidirektionalen Spaltenrasters. Das bedeutet, dass die Spalten und Zeilen, aus denen es besteht, basierend auf der Inhaltshierarchie festgelegt werden.
Die Entscheidung für den Rastertyp sollte vom Inhalt abhängen. Beginnen Sie mit den Inhalten Ihrer App und überlegen Sie, wie sie gruppiert sind. Dadurch wird die allgemeine Layoutstruktur festgelegt. Weitere Informationen zum Denken in Bereichen finden Sie unter Raster und Einheiten, Inhaltsstruktur und Erste Schritte auf dem Desktop.
Bei Pawparazzi war das Hauptziel, die Haustiere des Teams auf verschiedene Arten zu präsentieren, beginnend mit einer Übersicht, Details und dann einer Rangliste. Das bedeutete, dass die Galerie der Haustiere den Hauptinhaltsbereich und einen größeren Teil des Rasters einnehmen würde, gefolgt von Navigations- und Filterelementen. Wenn mehr Platz verfügbar ist, kann die Galerie über mehr Zeilen und mehr Haustiere erweitert werden und gleichzeitig Details zu den Haustieren anzeigen. Dieses adaptive Prinzip wird als „Reveal“ bezeichnet, d. h. es werden mehr Inhalte in größeren Layouts angezeigt.
Das Hauptziel der App und die Inhalte haben dazu beigetragen, zu bestimmen, wie und wann das Layoutraster angepasst werden muss: welche Fensterklassengrößen, Scharnierplatzierung und Geräteausrichtungen.
Aus dem Layoutraster können mit Unterrastern flexiblere Inhaltsstrukturen erstellt werden. Die Galerien sind selbst ein Raster. Bei kompakten Größen wird ein Raster mit zwei Spalten verwendet.
Raster sind ein bidirektionales Layoutkonzept, sodass Inhalte sowohl horizontal als auch vertikal fließen können.
Damit lassen sich interessantere Layouts erstellen oder eine klarere visuelle Hierarchie schaffen, z. B. „Haustier der Woche“, bei dem das Raster verwendet wird, um die am besten bewerteten Haustiere zu präsentieren. Das Raster kann 2 × 4 sein, aber der erste Platz umfasst 2 Spalten und Zeilen.
All das wird mit der Grid API erreicht.
Komponenten flexibel gestalten
Während das Raster die Makro- und Mikroinhaltsstruktur abdeckt, hilft Flexbox bei Komponenten, die auf ihre Inhalte reagieren müssen. Dies wird für unidirektionale Inhalte verwendet, bei denen nur horizontal oder vertikal festgelegt ist. Beispielsweise können Filterchips auf ihre Labels reagieren und der Filterbereich kann je nach Anzahl der Filter erweitert werden. Verwenden Sie „Reveal“ auf größeren Bildschirmen, um mehr Filter gleichzeitig anzuzeigen.
Nuancierte Abfragen
Durch das Entwerfen eines Layoutrasters und die Verwendung von Raster und Flexbox ermöglichen wir ein adaptives Layout auf mehreren Bildschirmen und berücksichtigen sogar einzigartige Formen wie faltbare Geräte. Aber was ist mit verschiedenen Nutzerkontexten? Android-Nutzer können eine Verbindung zu einem Display herstellen oder eine Maus anschließen. Mit MediaQuery können wir nuancierte Designentscheidungen treffen, um Nutzer in allen Kontexten zu berücksichtigen.
Bei Pawparazzi bedeutete das, präzise Zeigereingaben mit kleineren Zielbereichen und dichteren Inhalten zu nutzen.
Beispiele für adaptive Android-UI
Entdecken Sie inspirierende, optimierte Designs für Geräte mit großem Display. Durchsuchen Sie UI/UX-Vorlagen für beliebte App-Kategorien, darunter Medien, Kreativität, Spiele und mehr.
