Status und Ausrichtung

Das Android-Design umfasst eine Vielzahl von einzigartigen Aspekten und Geräten. Es reicht nicht aus, sich nur Breakpoints anzusehen. 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, bei der Anpassung von Inhalten in Bereichen zu denken.

Ä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 sie von einer mittleren zu einer großen Größe wechseln. Das Querformat bietet jedoch eine mittlere Fenstergröße mit einer kompakten vertikalen Ansicht.

Beachten Sie die folgenden Designpraktiken für die Querformat-Ausrichtung:

• 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 neu fließ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 Hochformat nehmen in einem großen Querformat-Layout den größten Teil des Bildschirms ein. Wenn der Inhalt im Hochformat nicht gescrollt wurde, sollte er auch im Querformat nicht gescrollt werden, da dies Nutzer verwirren kann.

Das Hero-Bild 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 (zusammengeklappt, flach und Tischmodus).

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 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 Layout-Raster und Bereiche verwenden, sollten Sie einen breiteren Bund 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 bei einem 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, steht die Nachricht im Vordergrund.

Auf kleineren Bildschirmen, z. B. auf dem Cover, wird das Filtersheet im Vollbildmodus angezeigt. Die Platzierung und Skalierung der Schaltflächen werden jedoch angepasst.

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 die System-UI und Kameraausschnitte vermeiden und gleichzeitig die geringe Höhe berücksichtigen.