Beim adaptiven Design werden Layouts entworfen, die sich an bestimmte Breakpoints und Geräte anpassen.
So implementieren Sie adaptive Layouts effektiv:
Berücksichtigen Sie zuerst die Fensterbreite der Geräteklasse, um Layoutänderungen zu bestimmen, und passen Sie dann die Höhe an. Verschiedene Bildschirmgrößen unterstützen.
Android nutzt ähnliche Konzepte wie beim responsiven Webdesign und verwendet flexible Ränder und Bilder, um Layouts zu erstellen, die effektiv auf ihren Kontext reagieren.
Layouts sollen mit adaptiven Methoden auf verschiedene Größen reagieren können: Umfließen, Einblenden, Präsentationsänderung.
Vermeiden Sie es, Ihre App nur im Hochformat zu sperren. Dadurch kommt es bei einer Größenänderung der App zu Letterboxing.
Das sollten Sie nicht tun
Designrichtlinien zum Anpassen von Layouts an größere Bildschirmgrößen finden Sie im Entwicklerleitfaden Verschiedene Bildschirmgrößen unterstützen in Compose und auf der Seite Layout anwenden in M3. Außerdem können Sie sich in der Galerie für kanonische Android-Layouts für große Bildschirme inspirieren lassen und sehen, wie Layouts für große Bildschirme implementiert werden.
Adaptiv denken
„Adaptiv“ sollte beim Design Ihrer App die Standardeinstellung sein. Der Android-Mobilfunkmarkt entwickelt sich ständig weiter. Sie können also nicht nur an Mobiltelefone denken, sondern müssen auch andere Geräte wie Foldables und Tablets berücksichtigen.
Bestimmte Funktionen und Anwendungsfälle sind möglicherweise nicht für jede Bildschirmgröße oder jeden Formfaktor geeignet. Das adaptive Design bietet Nutzern mehr Freiheit in Bezug auf Ergonomie, Nutzerfreundlichkeit und App-Qualität.
Methoden und Qualität
Beginnen Sie mit dem Design von wichtigen Bildschirmen, die die wesentlichen Konzepte oder Ihre App vermitteln. Verwenden Sie dabei Klassen als Breakpoints, die als Richtlinien für den Rest Ihrer App dienen. Diese Hero-Erlebnisse können differenzierte adaptive und Formfaktor-Qualitäten hervorheben. Oder Sie gestalten Inhalte von Grund auf responsiv, indem Sie angeben, wie Inhalte eingeschränkt, maximiert oder umgebrochen werden sollen.
In diesem Beispiel werden die Navigation und die Inhalte neu angeordnet, angepasst und skaliert, um die ergonomische Navigation zu verbessern. Das Layoutraster wird von vertikal ausgerichtet auf mehrspaltig erweitert. Die Adresse in der App-Leiste und die Filter werden neu angeordnet und angepasst, um in das Layoutraster zu passen.
Das sollten Sie tun
Das sollten Sie nicht tun
Das sollten Sie tun
Das sollten Sie tun
Das sollten Sie nicht tun
Achten Sie darauf, dass Eingabefelder und Schaltflächen nicht gestreckt werden.
Denken Sie in Bezug auf Containment und Bereiche.
Verwenden Sie das Konzept der Containment-Bereiche, um Inhalte für adaptive Layouts zu gruppieren. Im Beispiel wird ein Detailbildschirm verwendet, ein Bereich, der in einer Listen-Detailansicht angezeigt werden kann.
Kompakte Größen sollten ein einspaltiges Layout verwenden.
Für Medium können 1- bis 2-spaltige Layouts verwendet werden.
Auf großen und extragroßen Displays können mehrere Bereiche angezeigt werden.
Verwenden Sie intrinsische und visuelle Container, um Elemente zu gruppieren. Bereiche können ein- und ausgefahren, minimiert, maximiert, eingeschränkt oder eingeblendet werden. Wenn Sie mit Bereichen arbeiten, wird das Design für alle Mobilgeräte einfacher.
Auf großen Bildschirmen sind Bereiche nicht unbedingt erforderlich, aber Sie sollten trotzdem überlegen, wie Sie Inhalte in Containment-Gruppen zusammenfassen können, um flexibler zu sein.
Lassen Sie zu, dass sich Elemente verschieben und neu anordnen, indem Sie sich darauf konzentrieren, wie sich Elemente an das Raster anpassen. Berücksichtigen Sie vertikale Änderungen für Elemente und kombinieren Sie sie mit Einschränkungen und Änderungen der Darstellung.
Berücksichtigen Sie die Größe und Menge der angezeigten Inhalte.
Ein kleines Raster mit Videos auf einem Smartphone wirkt auf einem Tablet schnell überladen. Aktualisieren Sie die Skalierung von UI-Elementen basierend auf Bildschirmgröße, ‑dichte und Eingabe.
Eine hochwertige App sollte den differenzierten Tier in den Qualitätsrichtlinien für Apps und den Qualitätsrichtlinien für große Bildschirme entsprechen.
Weitere Informationen zu Layouts finden Sie auf der Seite Material Design 3 (M3): Layout.
Nutzen Sie die Vorteile der einzigartigen Formfaktoren.
Vergessen Sie nicht kleinere Bildschirmgrößen und unterschiedliche Seitenverhältnisse, da Android-Smartphones unterschiedliche Größen haben und faltbare Smartphones einen kleinen Cover-Bildschirm haben können, auf dem Ihre App angezeigt werden kann.
Bei Layouts, die auf Steuerung basieren, z. B. bei Media-Playern, sollten die Steuerelemente umgebrochen und Inhalte eingeblendet werden.
Um Nutzern die Anpassung zu erleichtern, verwenden Sie ein Anker-Element wie eine große Wiedergabeschaltfläche, um die Inhalte anzupassen. Das Hero-Art wird dann zum Hintergrund auf dem Cover-Display.
Über Größenklassen hinaus
Die Fenstergröße ist zwar ein wichtiger Faktor für das adaptive Design, aber Ihre App muss auch darauf vorbereitet sein, dass Nutzer Monitore und Eingabegeräte anschließen, Inhalte aus verschiedenen Entfernungen betrachten und die Ausrichtung ihres Geräts ändern. Mit der mediaQuery API können Sie nach diesen Änderungen suchen. So können Sie beim Entwerfen der Anpassung bestimmter UI-Elemente Ihrer App an bestimmte Anwendungsfälle mehr Nuancen berücksichtigen.
Passen Sie das Design Ihrer App auf Komponenten- oder Bereichsebene an, anstatt ganze Bildschirme für jede Größe, Eingabe, jeden Formfaktor und jede Gerätehaltung zu entwerfen.
Weitere Informationen zur Eingabeinteraktion finden Sie in den Anleitungen zur Interaktion auf dem Computer.
Hier finden Sie eine Beispiel-Fallstudie, die mit den neuesten adaptiven APIs und Designrichtlinien erstellt wurde.
