In Ansichten ohne Scrollen liegt der Fokus auf Informationen, die Nutzer schnell erfassen können. Sie bieten Nutzern einen Mehrwert, ohne dass diese viel oder gar nichts tun müssen. Daher kann es schwierig sein, responsives Verhalten in diese Layouts einzubauen.
Voreingestellte Layoutkomponenten ohne Scrollen
Dialogfeld
Ein Dialogfeld ist ein vorübergehendes Overlay, das den gesamten Bildschirm einnimmt. Damit können Nutzer eine einzelne Aktion ausführen.
- Dialoge sollen Ihnen helfen, zu überprüfen, ob die Inhalte behandelt werden.
- Dialoge sollten Informationen direkt vermitteln und darauf ausgerichtet sein, eine Aufgabe zu erledigen.
- Dialogfelder sollten als Reaktion auf eine Nutzeraufgabe oder eine Aktion mit relevanten oder kontextbezogenen Informationen angezeigt werden.
Bestätigungs-Overlay
Im Bestätigungs-Overlay wird dem Nutzer kurz eine Bestätigungsnachricht angezeigt. Mit dieser Komponente können Sie die Aufmerksamkeit des Nutzers nach Ausführung einer Aktion auf sich ziehen.
Auf Smartphone öffnen
Das Overlay „Auf dem Smartphone öffnen“ wird ausgelöst, wenn der Nutzer seine Reise auf einem Smartphone fortsetzen möchte. Das Overlay enthält eine Fortschrittsanzeige und informiert den Nutzer, wann er auf sein Smartphone schauen soll.
Stepper
Mit Steppern können Nutzer im Vollbildmodus einen Wert aus einem Wertebereich auswählen. Die Interaktion kann über die Tasten oder die Krone gesteuert werden. Das jeweilige Niveau wird durch eine gekrümmte Pegelanzeige dargestellt.
Zeitauswahl
Mit Auswahlfeldern können Nutzer in scrollbaren Abschnitten aus einer begrenzten Anzahl von Elementen auswählen. Die Zeitauswahl hat je nach Verfügbarkeit von Sekunden und je nachdem, ob es sich um eine 12- oder 24-Stunden-Uhr handelt, bis zu drei Spalten. Nutzer interagieren jeweils mit einer Spalte. Sie treffen ihre Auswahl, indem sie die Zahl im Fokus lassen, bevor sie fortfahren.
Datumsauswahl
Mit Auswahlfeldern können Nutzer in scrollbaren Abschnitten aus einer begrenzten Anzahl von Elementen auswählen. Die Datumsauswahl hat je nach Anwendungsfall bis zu drei Spalten, deren Reihenfolge zwischen Datum, Uhrzeit und Jahr variieren kann. Datumsauswahlen erfordern längere Inhaltsstrings, sodass jeweils nur eine Spalte zu sehen ist. Das gibt einen Hinweis darauf, was sich links oder rechts befindet. Nutzer interagieren jeweils mit einer Spalte. Sie treffen ihre Auswahl, indem sie die Zahl im Fokus lassen, bevor sie fortfahren.
Beispiele für benutzerdefinierte Layouts ohne Scrollfunktion
Nicht scrollende App-Bildschirme sind nicht auf die festgelegten Komponenten beschränkt. Sie können eine Kombination von Elementen verwenden, um das gewünschte Layout zu erstellen.
Sie sollten den begrenzten Platz auf einem nicht scrollenden Bildschirm und die Verwendung von responsiven (prozentualen) Rändern und Abständen berücksichtigen, um den verfügbaren Bildschirmplatz optimal zu nutzen. Sie können auch einen Breakpoint bei 225 dp einfügen, um bei größeren Bildschirmgrößen zusätzliche Inhalte einzuführen oder vorhandene Inhalte übersichtlicher zu gestalten.
Karten
Notfall-Overlay
Notfallalarm
Responsives und adaptives Verhalten
Alle Komponenten in der Compose-Bibliothek passen sich automatisch an die größere Bildschirmgröße an und werden breiter und höher. Gerade bei diesen Ansichten können Breakpoints für alle Nutzer eine besonders umfassende und wertvolle Erfahrung bieten.
Bei vielen Schaltflächen, Karten und Rändern der Benutzeroberfläche sollten Sie den verfügbaren Platz auf der Benutzeroberfläche für verschiedene Bildschirmgrößen nutzen und für ein ausgewogenes Layout sorgen.
Prüfen Sie anhand der folgenden Checkliste, ob die responsiven Parameter richtig definiert sind:
- Erstellen Sie flexible Layouts, die auf allen Bildschirmgrößen gut aussehen.
- Wenden Sie die empfohlenen oberen, unteren und seitlichen Ränder an.
- Definieren Sie Ränder in Prozentwerten an Stellen, an denen Inhalte sonst abgeschnitten werden könnten.
- Verwenden Sie Layoutbeschränkungen, damit Elemente den Platz auf dem Bildschirm optimal nutzen und das Layout auf verschiedenen Gerätegrößen ausgewogen bleibt.
- Berücksichtigen Sie Zeittext, falls er verwendet wird, aber überlappen Sie nicht den oberen Bereich der Seite.
- Verwenden Sie Buttons, die an den Rand angrenzen, um den begrenzten Platz besser zu nutzen.
- Erwägen Sie, bei 225 dp einen Breakpoint einzufügen, um zusätzliche Inhalte einzuführen oder vorhandene Inhalte auf größeren Bildschirmen besser lesbar zu machen.
Mehrere nicht scrollende Seitenpfade mit Paginierung
Wenn für eine Funktion mehr Inhalte erforderlich sind, aber das Layout ohne Scrollen beibehalten werden soll, sollten Sie ein mehrseitiges Layout mit vertikaler oder horizontaler Paginierung in Betracht ziehen.
