Das Wear OS-System umfasst Geräte mit einer Vielzahl von Bildschirmgrößen. Die Verwendung von Prinzipien für adaptive Benutzeroberflächen ist entscheidend, um eine möglichst hohe Qualität für alle Nutzer zu bieten. Adaptive Benutzeroberflächen werden gestreckt und angepasst, um den gesamten verfügbaren Bildschirmplatz optimal zu nutzen, unabhängig davon, auf welchem Bildschirm sie gerendert werden. Adaptive Benutzeroberflächen ändern sich reaktionsschnell und verwenden Komponenten und Methoden, die direkt in die Layoutlogik eingebunden sind. Diese Layouts nutzen auch Bildschirmgrößen-Haltenpunkte, um ein anderes Design auf verschiedene Bildschirmgrößen anzuwenden und so für alle eine noch bessere Nutzererfahrung zu schaffen.
Wichtige Begriffe
Responsives Design: Ein Designansatz, bei dem Layouts Elemente wie Schaltflächen, Textfelder und Dialogfelder dynamisch formatieren und positionieren, um eine optimale Nutzererfahrung zu ermöglichen. Bieten Sie Nutzern auf größeren Bildschirmen automatisch zusätzlichen Mehrwert, indem Sie responsive Designpraktiken nutzen. Ob mehr Text auf einen Blick sichtbar ist, mehr Aktionen auf dem Bildschirm angezeigt werden oder größere, leichter zugängliche Touch-Ziele vorhanden sind: Responsive Designs bieten Nutzern großer Bildschirme eine verbesserte Nutzererfahrung.
Adaptives Design: Ein Designansatz, bei dem sich die Benutzeroberfläche an bekannte Nutzer-, Geräte- oder Umgebungsbedingungen anpasst. Das adaptive Design in Material umfasst Layout- und Komponentenanpassungen.
Layouttypen
Bei der Gestaltung adaptiver Layouts für den runden Bildschirm haben Ansichten mit und ohne Scrollen jeweils unterschiedliche Anforderungen an die Skalierung von UI-Elementen und die Aufrechterhaltung eines ausgewogenen Layouts und einer ausgewogenen Komposition.
Adaptive Layouts mit Scrollfunktion
Alle Ober-, Unter- und Seitenränder sollten in Prozent angegeben werden, um Ausschnitte zu vermeiden und eine proportionale Skalierung der Elemente zu ermöglichen.
Adaptive Layouts ohne Scrollen
Alle Ränder sollten in Prozent definiert werden und die vertikalen Einschränkungen sollten so definiert werden, dass sich der Hauptinhalt in der Mitte so weit wie möglich ausdehnen kann, um den verfügbaren Bereich auszufüllen.
Wichtige Bildschirmgrößen
Viele der Smartwatches im Wear OS-Ökosystem haben unterschiedliche Bildschirmgrößen. Denken Sie beim Entwerfen für Wear OS daran, dass Ihre App-Oberflächen auf diesen verschiedenen Bildschirmgrößen angezeigt werden. Beachten Sie die folgenden Prinzipien, wenn Sie für verschiedene Geräte entwerfen.
Klein zuerst
Entwerfen Sie immer zuerst für den kleinen unterstützten Emulator mit rundem Display: 204 dp bis 216 dp. Wenn das Layout dicht ist, rendern Sie es mit 192 dp, damit nichts kaputtgeht. Testen Sie es auch mit größeren Schriftgrößen bei 192 dp. Optimieren Sie dann für größere Geräte.
Skalierbares Programmdesign
Definieren Sie die äußeren Ränder als Prozentsätze anstelle von absoluten Werten, damit sie auf runden Bildschirmen proportional skaliert werden können und keine UI-Elemente abgeschnitten werden.
Schriftgrößen
Die Höhe eines UI-Elements kann sich je nach Schriftskalierung und Bedienungshilfeneinstellungen wie Fettdruck nicht linear ändern.
Die folgenden Displaygrößen sind bei Wear OS-Geräten besonders häufig. Es ist sinnvoll, 225 dp als Unterbrechungspunkt zwischen kleineren und größeren Bildschirmen zu verwenden.
192 dp bis 224 dp
225 dp bis 240 dp und mehr
Qualitätsstufen für Designs
Außerdem setzen wir die Formensprache auf viel umfassendere und aussagekräftigere Weise ein. Dazu verwenden wir flexible Containerformen, um die Ecken zu runden oder zu spitzen und so Listen und Schaltflächenstatus zu unterstützen, die sich verformen. Außerdem führen wir Schaltflächen mit abgerundeten Ecken als neue Komponente und ein ikonisches Designmuster für runde Wear OS-Geräte ein. Unsere Qualitätsrichtlinien sind in drei Stufen unterteilt. Bieten Sie Ihren Nutzern die bestmögliche Erfahrung, indem Sie die Richtlinien in allen drei Stufen einhalten.
Für alle Bildschirmgrößen geeignet
Sorgen Sie dafür, dass Ihre App auf allen Bildschirmgrößen eine hohe Qualität bietet. Erstellen Sie Layouts, die den verfügbaren App-Bereich vollständig nutzen.
Responsive und optimiert
Bieten Sie Nutzern auf Geräten, die dies zulassen, mehr Inhalte und verwenden Sie responsive Layouts, die sich automatisch an verschiedene Bildschirmgrößen anpassen.
Adaptiv und differenziert
Nutzen Sie zusätzliche Bildschirmfläche, indem Sie mithilfe von Wendepunkten auf größeren Bildschirmen neue Funktionen anbieten, die auf Geräten mit kleineren Bildschirmen nicht möglich sind.