Sie können Android XR-Anwendungen mit OpenXR, nativen Android-APIs oder WebXR erstellen. Die auf dieser Seite beschriebenen Empfehlungen für das visuelle Design gelten unabhängig davon, welche Plattform Sie auswählen.
Für Unity-, OpenXR- oder WebXR-Apps: Sie können jede beliebige Designsprache verwenden. Obwohl die Material Design-Bibliothek nur für Android-Apps verfügbar ist, können Sie trotzdem die Designempfehlungen befolgen, um Farben, Abstände, Skalierung, Schaltflächen und Typografie anzuwenden.
Für Android-Apps: 2D-Android-Apps für Mobilgeräte oder große Bildschirme können die Full Space-Funktionen mit sehr geringem zusätzlichem Entwicklungsaufwand nutzen. Wenn Sie eine hohe XR-Wirkung erzielen möchten, sollten Sie räumliche Benutzeroberflächen verwenden. Um eine noch immersivere App zu erstellen, können Sie auch 3D-Modelle und Umgebungen hinzufügen.
Sie können die Designsprache vorhandener Android-Apps in Android XR beibehalten. Bei neuen Apps oder Redesigns sollten Sie die Material Design-Richtlinien für UI-Größe, Bedienungshilfen, Typografie, Farbschemas und Komponenten berücksichtigen. So profitieren Sie von dem vertrauten, bewährten Design und der Benutzerfreundlichkeit von Android.
Wenn Sie Ihre Android-App mit der Material Design 3-Bibliothek erstellen, können Sie ihren Komponenten und adaptiven Layouts ganz einfach räumliche UI-Verhaltensweisen hinzufügen.
Visuelles Design Ihrer App testen
Das visuelle Design Ihrer App zu testen, ist entscheidend, um eine komfortable und barrierefreie Nutzererfahrung zu gewährleisten. So testen Sie auf verschiedenen XR-Plattformen und in verschiedenen Umgebungen.
Emulatoren, Simulatoren und echte Geräte verwenden
- Wenn Sie eine Android-App entwickeln, testen Sie sie mit dem Android XR-Emulator. So können Sie potenzielle Probleme erkennen und schnell Iterationen durchführen, ohne ein physisches Gerät zu benötigen.
Checkliste für das Testen des visuellen Designs
- Testen Sie alle Bewegungen oder Animationen, um sicherzustellen, dass sie keine Reisekrankheit auslösen. Achten Sie auf flüssige Übergänge, stabile Framerates und vorhersehbare Bewegungen.
- Testen Sie den Passthrough in der realen Welt, um sicherzustellen, dass sich virtuelle Elemente in die physische Umgebung einfügen.
- Testen Sie Ihre App bei unterschiedlichen Lichtverhältnissen, z. B. bei hellem und schwachem Licht.
- Prüfen Sie die Lesbarkeit des Texts aus verschiedenen Entfernungen und Winkeln.
- Bewerten Sie das Farbschema im Hinblick auf Barrierefreiheit und Komfort.
Nutzerfeedback einholen
Führen Sie Nutzertests durch, um Verbesserungspotenziale zu identifizieren. Beziehen Sie Nutzer mit unterschiedlichen XR-Erfahrungen und visuellen Fähigkeiten ein, um eine umfassende Perspektive zu erhalten.
Ziele in Android XR
In einer XR-App ist ein Ziel der Bereich, der von Nutzern angetippt oder auf den sie zeigen können, um mit ihm zu interagieren. Größere Zielelemente erhöhen die Genauigkeit, den Komfort und die Benutzerfreundlichkeit. Wenn Sie Ihre App barrierefrei gestalten möchten, folgen Sie den Richtlinien für Material Design. Sie funktionieren mit Android-, Unity-, OpenXR- und WebXR-Apps. Wenn Ihre App bereits den Empfehlungen für Material Design entspricht, erfüllen Ihre Zielgrößen das Minimum. 56 dp sind jedoch optimal.
Bei allen interaktiven UI-Elementen sollte Folgendes berücksichtigt werden:
- Empfohlenes Ziel: 56 dp × 56 dp oder größer
- Visuelle Aufforderung (Symbol): mindestens 48 × 48 dp
- Abstand zwischen Ziel und visueller Aufforderung: 4 dp
- Für genaue Interaktionen sollten sich die Zeigerziele verschiedener UI-Elemente nicht überschneiden.
- Das Ziel und das Symbol werden nach Bedarf mit dem übergeordneten Container oder Label skaliert.
Hover-Zustände hinzufügen
Für eine bessere Barrierefreiheit sollten Sie neben den grundlegenden interaktiven Status für interaktive Komponenten auch Hover- und Fokusstatus einbinden. Hover-Zustände können für alle hilfreich sein und sind besonders wichtig für Nutzer, die Zeigereingaben verwenden, um UI-Elemente auszuwählen.
Hover-Zustände spielen eine wichtige Rolle bei der Aktivierung der Eye-Tracking-Funktion im System. Wenn Eye-Tracking aktiviert ist, sind Hover-Zustände für die Anwendung jedoch nicht zugänglich, um den Datenschutz zu gewährleisten und die Weitergabe von Daten zu verhindern. Das System zeichnet einen nur für Nutzer sichtbaren Hervorhebungsstatus, um anzuzeigen, welche UI-Komponenten interaktiv sind.
Entfernung zwischen Zielen
Gemäß Material Design wird ein Mindestabstand von 8 dp zwischen Zielbereichen, einschließlich Schaltflächen, empfohlen. Dieser Abstand sorgt dafür, dass Nutzer interaktive Elemente leicht unterscheiden und versehentliche Auswahl vermeiden können.
Der genaue Abstand zwischen Schaltflächen kann je nach Kontext und Größe variieren. Einige Faktoren, die Sie berücksichtigen sollten:
- Schaltflächengröße: Bei größeren Schaltflächen ist möglicherweise mehr Abstand zwischen den einzelnen Elementen erforderlich, um die Übersichtlichkeit zu wahren.
- Schaltflächen gruppieren: Schaltflächen, die funktional eng miteinander verbunden sind, können näher zusammen gruppiert werden. Nicht zusammenhängende Schaltflächen sollten weiter voneinander entfernt sein.
- Layout: Das allgemeine Layout des Bildschirms kann den Abstand zwischen Schaltflächen beeinflussen. Schaltflächen in einer Symbolleiste können beispielsweise enger beieinander liegen als Schaltflächen in einem Dialogfeld.
Panelgröße und ‑umfang
Android XR wurde entwickelt, um Ihre App für ein breites Publikum komfortabel, gut lesbar und zugänglich zu machen. Für eine optimale Darstellung verwendet Android XR 0, 868 dp-zu-dmm.
Wenn Sie Panels verwenden, ist Ihre XR-App höchstwahrscheinlich weiter von einem Nutzer entfernt als ein physischer Bildschirm. Der Nutzer trägt ein Headset. Für optimalen Komfort sollten Sie primäre Inhalte in einem Sichtfeld von 41° platzieren, damit Nutzer ihren Kopf nicht bewegen müssen, um zu interagieren.
Recommendations
- Die Panels haben abgerundete Ecken mit einem Radius von 32 dp. Sie können diese Standardeinstellung überschreiben.
Verhalten bei unterschiedlicher Tiefe des Panels
- Home Space: Apps werden in einem Abstand von 1, 75 Metern vom Nutzer gestartet.Entwickler können diesen Wert nicht überschreiben.
- Full Space: Apps werden standardmäßig an derselben Position wie im Home Space gestartet. Sie können räumliche Logik verwenden, um Panels basierend auf der Position des Nutzers zu platzieren.Wir empfehlen jedoch einen Startabstand von 1,75 Metern.
Wenn eine App 1,75 Meter vom Nutzer entfernt ist:
- 1.024 dp werden als 1.556,24 Millimeter wahrgenommen.
- 720 dp werden als 1093,66 Millimeter wahrgenommen.
- 1 Meter in der physischen Realität = 1 Meter in XR
Schaltflächen und Symbole
Wenn Sie bereits eine Android-App haben, müssen Sie keine speziellen Komponenten für Android XR entwerfen. Beachten Sie die Material Design-Richtlinien für Schaltflächen und Symbole. Wenn Sie eine Unity-, OpenXR- oder WebXR-App haben, können Sie Ihre Schaltflächen und Symbole beibehalten oder sich von Material Design inspirieren lassen.
Wenn Sie eigene Schaltflächen oder Symbole erstellen, sollten Sie sich für einfache Formen, klare Linien, grundlegende Formen und eine begrenzte Farbpalette entscheiden. Vermeiden Sie zu detaillierte Designs. Sie müssen skalierbar und bei unterschiedlichen Auflösungen und Betrachtungsabständen gut lesbar sein. Achten Sie auf einen ausreichenden Kontrast zwischen der Komponente und ihrem Hintergrund. Stellen Sie außerdem Textbeschreibungen oder Kurzinfos für Nutzer mit Screenreadern oder anderen Hilfstechnologien bereit.
Farben
Android XR folgt dem Farbsystem von Material Design, um eine einheitliche und optisch ansprechende Benutzeroberfläche zu gewährleisten. Um einen immersiven visuellen Stil zu schaffen, der auf XR zugeschnitten ist, sollten Sie für ausreichend Kontrast sorgen, eine ausgewogene Palette wählen, Farben verwenden, die für Menschen mit Farbenfehlsichtigkeit zugänglich sind, und grelle Kombinationen vermeiden, die zu Augenbelastung oder Desorientierung führen können.
Dunkles und helles Design in XR
Verwenden Sie dunkle und helle Designs wie in einer mobilen Android-App. Nutzer können in Android XR zwischen dunklen und hellen Designs wechseln und so den visuellen Stil auswählen, der ihren individuellen Vorlieben am besten entspricht.
Weitere Informationen zu Farbschemas in Material Design
XR-Typografie
Die Lesbarkeit von Schriftarten ist entscheidend für eine angenehme Nutzererfahrung in XR. Wir empfehlen, Typografie-Optionen mit einer Schriftgröße von mindestens 14 dp und einer Schriftstärke von „normal“ oder höher zu verwenden, um die Lesbarkeit zu verbessern.
Wenn Sie eine benutzerfreundliche App erstellen möchten, sollten Sie die Richtlinien für Typografie von Material Design beachten.
Best Practices für Typografie in XR
- Größe für variable Entfernungen: Nutzer bewegen sich und sehen Text aus unterschiedlichen Entfernungen. Achten Sie darauf, dass die Schriftgrößen groß genug sind, um auch aus der Ferne gelesen werden zu können.
- Text im natürlichen Sichtfeld des Nutzers positionieren: So werden übermäßige Kopfbewegungen und eine Belastung des Nackens vermieden.
- Tiefe und Maßstab berücksichtigen: Verwenden Sie Tiefenhinweise und den Maßstab, um eine Hierarchie im 3D-Raum zu schaffen.
- Text muss vor dem Hintergrund des Nutzers gut lesbar sein: Schriftarten mit stärkeren Strichstärken bieten mehr Kontrast. Passen Sie die Einstellungen an die Farben, die Beleuchtung und die Komplexität der Umgebung an.
- Anpassungsfähige Typografie verwenden: Bereiche können zu nah, zu weit entfernt oder in einem ungünstigen Betrachtungswinkel für den Nutzer sein.
- Text, der an sich bewegende Objekte angehängt ist, einschränken: Dies kann zu Bewegungskrankheit führen.
Barrierefreie Typografie in XR
- Gut lesbare Schriftarten auswählen: Verwenden Sie Schriftarten mit klaren Buchstabenformen, die auch bei kleinen Größen und aus großer Entfernung gut lesbar sind.
- Text in korrekter Groß- und Kleinschreibung verwenden: Text in korrekter Groß- und Kleinschreibung ist leichter zu lesen als Text in Großbuchstaben.
- Zeilenlänge begrenzen: Achten Sie auf kürzere Zeilenlängen, um die Lesbarkeit zu verbessern.
- Barrierefreie Farben auswählen: Verwenden Sie Farbkombinationen, die für Nutzer mit Farbsehschwäche gut lesbar sind.
- Überfüllung vermeiden: Lassen Sie ausreichend Platz um den Text.
- Textskalierung zulassen: Nutzer können die Textgröße an ihre individuellen Bedürfnisse anpassen.
OpenXR™ und das OpenXR-Logo sind Marken von The Khronos Group Inc. und sind in China, der Europäischen Union, Japan und dem Vereinigten Königreich als Marke eingetragen.