Apps, die responsiv und optimiert sind, nutzen responsive Layouts, die sich automatisch an verschiedene Bildschirmgrößen anpassen, was den Nutzern einen Mehrwert bietet und eine produktive, interaktive Nutzererfahrung bietet.
Mehrwert durch responsives Design
Bei responsiven Layouts werden Elemente wie Schaltflächen, Textfelder und Dialogfelder dynamisch formatiert und positioniert, um eine optimale Nutzererfahrung zu erzielen. Bieten Sie Nutzern Ihrer App auf größeren Bildschirmen mithilfe von Best Practices für responsives Design automatisch einen Mehrwert. Ganz gleich, ob mehr Text auf einen Blick sichtbar ist, mehr Aktionen auf dem Bildschirm angezeigt werden oder größere, barrierefreiere Tippziele sind – mit responsiven Verfahren verbessern sich die Nutzerfreundlichkeit auf größeren Bildschirmen.
Responsive Apps und Kacheln für Wear OS erstellen
Responsive UIs werden so gestreckt und angepasst, dass der gesamte verfügbare Platz auf dem Bildschirm optimal genutzt wird – unabhängig davon, auf welcher Bildschirmgröße sie gerendert werden. Beim Entwerfen responsiver Layouts auf einem runden Bildschirm gelten sowohl für scroll- als auch für nicht scrollbare Ansichten eigene Anforderungen, um die Skalierung von UI-Elementen sowie ein ausgewogenes Layout und eine ausgewogene Anordnung der Elemente beizubehalten. Bei scrollenden Ansichten können Sie mithilfe von Prozentsätzen den gesamten oberen, unteren und seitlichen Rand festlegen, um eine Begrenzung zu vermeiden und eine proportionale Skalierung von Elementen zu ermöglichen. Verwenden Sie bei nicht scrollbaren Ansichten Prozentsätze und vertikale Einschränkungen für alle Ränder. Auf diese Weise kann der Hauptinhalt in der Mitte die verfügbare Fläche ausfüllen.
Weitere Informationen zur Implementierung von responsiven Layouts finden Sie unter Schreiben und Kacheln.
Dos
- Verwenden Sie Standardkomponenten, die für die Anpassung vorgesehen sind.
- Nutzen Sie adaptive Layouts, die sich nahtlos an verschiedene Bildschirmgrößen anpassen.
Don'ts
- Sie können UI-Elemente (Textfelder, Schaltflächen, Dialogfelder) so erweitern, dass sie zusätzlichen Platz ausfüllen.
- Erhöhen Sie die Schriftgröße (es sei denn, sie dienen hauptsächlich grafischen Zwecken).
Nächster Schritt: anpassungsfähig und differenziert
adaptive und differenzierte Apps schaffen eine Nutzererfahrung, die auf Geräten mit kleineren Bildschirmen nicht möglich ist.