Das Android-Design umfasst eine Vielzahl von einzigartigen Aspekten und Geräten, einschließlich faltbarer Geräte. Es reicht nicht aus, nur Breakpoints zu berücksichtigen. Nutzer können App-Fenster auf ihren Geräten anpassen und neu ausrichten. Mit faltbaren Geräten kann ein einzelnes Gerät alle diese Anwendungsfälle abdecken. Es ist wichtig, in Bereichen zu denken, um Inhalte anpassen zu können.
Änderungen an der Ausrichtung
Apps nicht im Hochformat sperren. Das kann wie ein Fehler aussehen und beim Multitasking zu unerwünschten Letterbox-Effekten führen.
Nutzer drehen ihre Geräte oft, um sie ergonomischer zu halten oder Inhalte besser sehen zu können. Ihre App muss diese Ausrichtungsänderungen unterstützen.
Auf größeren Geräten können sich Hoch- und Querformat subtiler auswirken, da die Größe von mittel auf groß wechselt. Das Querformat bietet jedoch eine mittlere Fenstergröße mit einer kompakten vertikalen Ansicht.
Beachten Sie die folgenden Designpraktiken für das Querformat:
Unterstützung von Systemleisten, die sich über den gesamten Bildschirm erstrecken
Entscheiden Sie sich für die Navigationskomponente, die Ihre Inhalte am besten unterstützt, z. B. eine horizontale Navigationsleiste oder einen Navigationsstreifen.
Sie können den Inhalt umfließen lassen oder die Dichte ändern.
Für Querformat-Layouts kann die Benutzeroberfläche mit mittlerer Breite verwendet werden.
Im Querformat kann die geringere Höhe einer horizontal ausgerichteten unteren Navigationsleiste genutzt werden.
Verwende für Inhalte einen Container, um sie zu letterboxen, oder nutze eine andere Ausrichtung, z. B. vertikal statt Video im Querformat. Inhalte in voller Breite auf einem kompakten Porträt nehmen in einem großen Querformat-Layout den größten Teil des Bildschirms ein. Wenn die Inhalte im Hochformat nicht gescrollt wurden, sollten sie auch im Querformat nicht gescrollt werden, da dies Nutzer verwirren kann.
Das Hero-Image nimmt den prominenten Platz ein und bleibt fixiert. Die untere App-Leiste wird angedockt.
Vom Hoch- ins Querformat: Beide Containergruppen werden an Ort und Stelle gedreht.
Bei einem Filtersheet kann sich die Sheet-Komponente in ein Seiten-Sheet ändern. Wenn mehr Aufmerksamkeit erforderlich ist, bleibt das Sheet im Vollbildmodus, wird aber an ein zweispaltiges Layout angepasst.
Sicherheitsstatus
Berücksichtigen Sie Anwendungsfälle für einzigartige Formfaktoren wie Faltpositionen (gefaltet, flach und Tischmodus).
Weitere Informationen zum Unterstützen von Displays auf faltbaren Geräten
Ihre App muss nicht speziell für jede Position ausgelegt sein, aber Sie sollten in Erwägung ziehen, eine Position für Ihre App zu nutzen. Ein Media Player kann beispielsweise eine spezielle Benutzeroberfläche für den Tischmodus und das Cover anzeigen.
Gleichbleibend
Ein faltbares Smartphone ist im aufgeklappten Zustand flach. Die Bildschirmgröße ist in der Regel mittel oder groß.
Zugeklappt
Wenn ein faltbares Gerät geschlossen ist, befindet es sich in einer gefalteten Position. In dieser Position interagieren Sie mit dem externen Display, das in der Regel kompakt ist.
Auf dem Tisch
Ein Tablet, das teilweise in horizontaler Position zusammengeklappt ist und auf einem Tisch steht. In dieser Position können Sie einzigartige Layouts verwenden, z. B. große Steuerelemente und Videos im Querformat.
Scharnier
Sorgen Sie dafür, dass Ihre App das Scharnier berücksichtigt, damit Inhalte flüssig und ohne Unterbrechung dargestellt werden und nicht im Scharnier verschwinden. Bei Layouts mit nur einem Bereich ist das möglicherweise nicht erforderlich. Überlegen Sie jedoch, ob Steuerelemente und Text den Scharnierbereich meiden sollten.
Wenn Sie ein Layoutraster und Bereiche verwenden, sollten Sie einen breiteren Steg für das Scharnier einplanen, z. B. in einem Layout mit zwei Bereichen (Listen-Detailansicht).
Einige faltbare Geräte, z. B. solche mit drei Displays, haben mehrere Scharniere.
Cover
Einige faltbare Smartphones haben ein quadratisches Coverdisplay, wie ein Klapphandy.
Beachten Sie beim Designen für Cover-Displays die folgenden Richtlinien:
- Apps müssen über den gesamten Bildschirmrand angezeigt werden.
- Achten Sie darauf, dass UI-Elemente nicht durch Kameraausschnitte verdeckt werden.
- Anwendungsfälle und Benutzeroberfläche fokussieren
Wenn ein Gerät beispielsweise nur als Mediaplayer verwendet wird, kann das Coverdesign zum Hintergrund werden, um eine Kurzübersicht mit weniger Informationen zu präsentieren.
Auf kleineren Bildschirmen und bei kleineren Seitenverhältnissen sollte der Fokus auf dem Inhalt liegen. Das Hero-Bild nimmt den größten Teil des Covers ein, um die visuelle Attraktivität zu steigern. Titel und Inhalt sind zu sehen, damit das Scrollen und Lesen erleichtert wird.
Das Cover sollte sich weiterhin stark auf die Eingabe konzentrieren. Wenn beispielsweise die Tastatur angezeigt wird, liegt der primäre Fokus auf der Nachricht.
Auf kleineren Bildschirmen, z. B. auf dem Cover, wird das Filtersheet im Vollbildmodus angezeigt, aber die Schaltflächen werden entsprechend platziert und skaliert.
Obwohl sie kompakt ist, kann eine Navigationsleiste auf einem Außendisplay ergonomischer sein.
Bei größeren Covern kann die Navigation in beiden Ausrichtungen verwendet werden. Überlegen Sie, wie Nutzer mit den Inhalten interagieren könnten.
Eine kleine Navigationsleiste kann System-UI und Kameraausschnitte vermeiden und gleichzeitig die geringe Höhe berücksichtigen.
Das sollten Sie tun
