Stufe 2: Responsiv und optimiert
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Apps, die responsive Layouts verwenden und sich automatisch an verschiedene Bildschirmgrößen anpassen, bieten Nutzern einen zusätzlichen Mehrwert und sorgen für eine produktivere und ansprechendere Nutzererfahrung.
Bei responsiven Layouts werden Elemente wie Schaltflächen, Textfelder und Dialogfelder dynamisch formatiert und positioniert, um eine optimale Nutzerfreundlichkeit zu erzielen. Nutzer Ihrer App erhalten auf größeren Bildschirmen automatisch einen Mehrwert, wenn Sie auf responsives Design setzen. Ob mehr Text auf einen Blick sichtbar ist, mehr Aktionen auf dem Bildschirm angezeigt werden oder größere, besser zugängliche Tippziele vorhanden sind – responsive Praktiken bieten Nutzern mit größeren Bildschirmen eine bessere Nutzererfahrung.
Mehrwert durch responsives Design
check_circle
Dos
- Verwenden Sie die M3 Compose-Komponentenbibliothek, die integriertes responsives und adaptives Verhalten bietet.
- Verwenden Sie responsive Layouts, die sich automatisch und nahtlos an die verfügbare Bildschirmgröße anpassen.
cancel
Don'ts
- UI-Elemente wie Textfelder, Schaltflächen und Dialogfelder werden so gedehnt, dass der zusätzliche Platz ausgefüllt wird.
- Schriftgrößen erhöhen, es sei denn, sie dienen in erster Linie grafischen Zwecken.
Beispiele
Die folgenden Bilder zeigen Beispiele für responsive und optimierte Apps.
Liste der Karten mit Bildern
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
