Apps mit responsiven Layouts, die sich automatisch an unterschiedliche Bildschirmgrößen anpassen, bieten Nutzern einen Mehrwert und eine produktivere, ansprechendere Nutzererfahrung.
Responsive Layouts formatieren und positionieren Elemente wie Schaltflächen, Textfelder und Dialogfelder dynamisch, um die Nutzerfreundlichkeit zu optimieren. Bieten Sie Nutzern Ihrer App auf größeren Bildschirmen automatisch zusätzlichen Mehrwert, indem Sie responsive Designpraktiken nutzen. Ob mehr Text auf einen Blick sichtbar ist, mehr Aktionen auf dem Bildschirm oder größere, barrierefreie Touch-Ziele: Responsive Designs bieten Nutzern mit größeren Bildschirmen eine verbesserte Nutzererfahrung.
Mehrwert durch responsives Design
Dos
- Verwenden Sie die M3 Compose-Komponentenbibliothek mit integriertem responsiven und adaptiven Verhalten.
- Verwenden Sie responsive Layouts, die sich automatisch und reibungslos an den verfügbaren Platz auf verschiedenen Bildschirmgrößen anpassen.
Don'ts
- Dehnen Sie UI-Elemente wie Textfelder, Schaltflächen und Dialogfelder, um zusätzlichen Platz auszufüllen.
- Vergrößern Sie die Schriftgröße, es sei denn, sie dient hauptsächlich grafischen Zwecken.
Responsive Apps und Kacheln für Wear OS entwickeln
Responsive Benutzeroberflächen werden gestreckt und geändert, um den gesamten verfügbaren Bildschirmplatz optimal zu nutzen, unabhängig davon, auf welchem Bildschirm sie gerendert werden.
Beim Entwerfen responsiver Layouts auf einem runden Bildschirm haben Ansichten mit und ohne Scrollen jeweils unterschiedliche Anforderungen, um die Skalierung von UI-Elementen beizubehalten und ein ausgewogenes Layout und eine ausgewogene Komposition zu erhalten. Verwenden Sie für scrollbare Ansichten Prozentsätze, um alle oberen, unteren und seitlichen Ränder zu definieren, um Ausschnitte zu vermeiden und Elemente proportional zu skalieren. Verwenden Sie für Ansichten ohne Scrollfunktion für alle Ränder Prozentsätze und vertikale Einschränkungen. So kann sich der Hauptinhalt in der Mitte auf den gesamten verfügbaren Bereich ausdehnen.
Ansichten mit Scrollfunktion
Alle Ober-, Unter- und Seitenränder sollten in Prozent angegeben werden, um Ausschnitte zu vermeiden und eine proportionale Skalierung der Elemente zu ermöglichen.
Ansichten ohne Scrollen
Alle Ränder sollten in Prozent angegeben werden und die vertikalen Einschränkungen sollten so definiert werden, dass sich die Hauptinhalte in der Mitte so weit wie möglich ausdehnen können, um den verfügbaren Bereich auszufüllen.
Beispiele
Die folgenden Bilder zeigen Beispiele für responsive und optimierte Apps.
Randnahe Schaltflächen
Kartenliste
Liste der Schalter und Schaltflächen
Kachel mit Bildkarten
Liste der Karten mit Bildern
Kachel mit Grafik
