Wenn Sie eine Android-App haben und den visuellen Stil beibehalten möchten, können Sie diese Designsprache in Android XR beibehalten. Bei neuen Apps oder Neugestaltungen sollten Sie die Material Design-Richtlinien für die Größe der Benutzeroberfläche, Barrierefreiheit, Typografie, Farbschemata und Komponenten beachten.
2D-Android-Apps für Mobilgeräte oder große Displays können die Funktionen von Full Space mit nur sehr wenig zusätzlicher Entwicklungsarbeit nutzen. Für eine hohe XR-Wirkung sollten Sie Bereiche räumlich anordnen und eine räumliche Benutzeroberfläche erstellen. Für eine noch immersivere User Journey können Sie 3D‑Modelle und Umgebungen hinzufügen.
Wenn Sie eine Unity-, Open XR- oder WebXR-App erstellt haben oder gerade erstellen, können Sie eine beliebige Designsprache verwenden. Die Designempfehlungen von Material Design können Ihnen bei der Auswahl von Farben, Abständen, Skalen, Schaltflächen und Typografie helfen.
Visuelles Design Ihrer App testen
Das visuelle Design Ihrer App muss getestet werden, um eine komfortable und barrierefreie Nutzung zu ermöglichen. 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 ohne physisches Gerät iterieren.
Checkliste für visuelle Designtests
- Testen Sie alle Bewegungen oder Animationen, um sicherzustellen, dass sie keine Reiseübelkeit auslösen. Achten Sie auf flüssige Übergänge, stabile Bildraten und vorhersehbare Bewegungen.
- Testen Sie die Funktion in realen Umgebungen, um sicherzustellen, dass sich die virtuellen Elemente in die reale Umgebung einfügen.
- Testen Sie Ihre App unter verschiedenen Lichtverhältnissen, einschließlich hellen und dunklen Umgebungen.
- Prüfen Sie die Lesbarkeit des Textes aus verschiedenen Entfernungen und Blickwinkeln.
- Bewerten Sie das Farbschema hinsichtlich Barrierefreiheit und Nutzerfreundlichkeit.
Feedback der Nutzer einholen
Führen Sie Nutzertests durch, um Verbesserungsmöglichkeiten zu identifizieren. Um eine umfassende Perspektive zu erhalten, sollten Sie Nutzer mit unterschiedlichen XR-Erfahrungen und visuellen Fähigkeiten einbeziehen.
Ziele in Android XR
In einer XR-App ist ein Ziel der anklickbare oder anwählbare Bereich, mit dem Nutzer interagieren. Größere Touch-Ziele erhöhen die Präzision, den Komfort und die Nutzerfreundlichkeit. Beachten Sie die Zielgruppenrichtlinien für Material Design, um Ihre App barrierefrei zu gestalten. 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 Mindestmaß. 56 dp sind jedoch optimal.
Bei allen interaktiven UI-Elementen sollten folgende Aspekte berücksichtigt werden:
- Empfohlenes Ziel: 56 × 56 dp oder größer
- Visuelle Aufforderung: 48 × 48 dp oder größer
- Abstand zwischen Ziel und visuellem Angebot: 4 dp
- Für präzise Interaktionen dürfen sich die Zeigerziele verschiedener UI-Elemente nicht überschneiden.
Fügen Sie Hover-Zustände hinzu.
Für mehr Barrierefreiheit sollten Sie neben den grundlegenden interaktiven Status für interaktive Komponenten auch Status für den Mauszeiger und den Fokus verwenden. Hover-Status können für alle hilfreich sein und sind besonders wichtig für Nutzer, die die Maus verwenden, um UI-Elemente auszuwählen.
Hover-Zustände spielen eine wichtige Rolle bei der Aktivierung der Funktion „Augen-Tracking“ im System. Wenn Eye-Tracking jedoch aktiviert ist, sind Hover-Zustände für die Anwendung nicht zugänglich, um die Privatsphäre der Nutzer zu schützen und die Weitergabe von Daten zu verhindern. Das System zeichnet einen nur für Nutzer sichtbaren Hervorhebungsstatus, um zu zeigen, mit welchen UI-Komponenten interagiert werden kann.
Abstand zwischen Zielen
Laut Material Design sollte zwischen Zielen, einschließlich Schaltflächen, ein Abstand von mindestens 8 dp eingehalten werden. Diese Abstände sorgen dafür, dass Nutzer interaktive Elemente leicht unterscheiden und versehentliche Auswahlen vermeiden können.
Der genaue Abstand zwischen den Schaltflächen kann je nach Kontext und Größe variieren. Einige Faktoren, die Sie berücksichtigen sollten:
- Schaltflächengröße: Größere Schaltflächen erfordern möglicherweise mehr Abstand zwischen ihnen, um die visuelle Klarheit zu erhalten.
- Schaltflächengruppierung: Schaltflächen, die funktional eng miteinander verbunden sind, können näher beieinander gruppiert werden, während nicht zusammenhängende Schaltflächen weiter voneinander entfernt sein sollten.
- Layout: Das Gesamtlayout des Bildschirms kann den Abstand zwischen den Schaltflächen beeinflussen. Schaltflächen in einer Symbolleiste können beispielsweise enger beieinander liegen als Schaltflächen in einem Dialogfeld.
Größe und Skalierung des Steuerfelds
Android XR wurde entwickelt, damit Ihre App für ein breites Publikum komfortabel, gut lesbar und barrierefrei ist. Für eine optimale Leistung wird in Android XR ein Seitenverhältnis von 0, 868 dp zu dmm verwendet.
Wenn Sie Panels verwenden, ist Ihre XR-App höchstwahrscheinlich weiter vom Nutzer entfernt als ein physisches Display. Angenommen, der Nutzer trägt ein Headset. Platzieren Sie die Hauptinhalte für optimalen Komfort in einem Sichtfeld von 41 Grad, damit Nutzer ihren Kopf nicht bewegen müssen, um zu interagieren.
Recommendations
- Die Bereiche haben abgerundete Ecken mit 32 dp. Sie können diese Standardeinstellung überschreiben.
Verhalten bei unterschiedlicher Gruppengröße
- Zuhause: Apps werden 1, 75 Meter vom Nutzer entfernt gestartet und Entwickler können dies nicht überschreiben.
- Ganzer Bereich: Standardmäßig werden Apps an derselben Position gestartet, an der sie sich im Homespace befanden. Sie können Panels mithilfe von räumlicher Logik basierend auf der Position des Nutzers platzieren.Wir empfehlen jedoch eine Startdistanz von 1,75 Metern.
Wenn sich eine App 1,75 Meter vom Nutzer entfernt befindet:
- 1.024 dp entspricht 1.556,24 Millimetern
- 720 dp entspricht 1.093,66 Millimetern
- 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 unverändert lassen oder sich von Material Design inspirieren lassen.
Wenn Sie eigene Schaltflächen oder Symbole erstellen möchten, sollten Sie sich für einfache Formen, klare Linien, einfache Formen und eine begrenzte Farbpalette entscheiden. Vermeiden Sie übermäßig detaillierte Designs. Sie müssen skalierbar und bei unterschiedlichen Auflösungen und Betrachtungsabständen gut lesbar sein. Achten Sie für Barrierefreiheit auf einen ausreichenden Kontrast zwischen der Komponente und ihrem Hintergrund und stellen Sie 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 visuell ansprechende Benutzeroberfläche zu gewährleisten. Wenn Sie einen immersiven visuellen Stil für XR-Anwendungen erstellen möchten, sollten Sie auf ausreichenden Kontrast achten, eine ausgewogene Palette auswählen, Farben verwenden, die für Personen mit Farbfehlsichtigkeit zugänglich sind, und unharmonische Kombinationen vermeiden, die zu Augenbelastung oder Orientierungslosigkeit 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 Farbschemata in Material Design
Typografie für XR
Die Lesbarkeit von Schrift ist entscheidend für eine angenehme Nutzererfahrung in XR. Wir empfehlen, für eine bessere Lesbarkeit Schriftgrößen von mindestens 14 dp und eine Schriftstärke von „normal“ oder höher zu verwenden.
Wenn Sie eine nutzerfreundliche App erstellen möchten, sollten Sie die Tipps zu Typografie in Material Design beachten.
Best Practices für Typografie in XR
- Größe für unterschiedliche Entfernungen: Denken Sie daran, dass sich Nutzer bewegen und Text von verschiedenen Orten aus sehen. Die Schriftgröße muss so groß sein, dass sie auch aus der Ferne gut lesbar ist.
- Positionieren Sie Text im natürlichen Sichtfeld des Nutzers: So werden übermäßige Kopfbewegungen und Nackenverspannungen vermieden.
- Berücksichtigen Sie Tiefe und Skalierung: Verwenden Sie Tiefenhinweise und Skalierung, um eine Hierarchie im 3D-Raum zu schaffen.
- Achten Sie darauf, dass der Text auf dem Hintergrund des Nutzers gut lesbar ist: Eine stärkere Schriftstärke bietet mehr Kontrast. Passen Sie die Einstellungen an die Farben, die Beleuchtung und die Komplexität der Umgebung an.
- Verwenden Sie anpassbare Typografie: Bereiche können zu nah, zu weit entfernt oder aus einem ungünstigen Blickwinkel für Nutzer zu sehen sein.
- Begrenzen Sie Text, der an bewegte Objekte angehängt ist: Dies kann zu Übelkeit führen.
Barrierefreie Typografie in XR
- Schriftarten für gute Lesbarkeit auswählen: Verwenden Sie Schriftarten mit klaren Buchstabenformen bei kleinen Schriftgrößen und großer Entfernung.
- Achten Sie auf korrekte Groß- und Kleinschreibung: Text mit korrekter Groß- und Kleinschreibung ist leichter zu lesen als Text in Großbuchstaben.
- Begrenzen Sie die Zeilenlänge: Verwenden Sie möglichst kurze Zeilen, um die Lesbarkeit zu verbessern.
- Barrierefreie Farben auswählen: Verwenden Sie Farbkombinationen, die für Nutzer mit Farbsinnstörungen gut lesbar sind.
- Überladen Sie den Text nicht: Lassen Sie genügend Raum für den Text.
- Textskalierung zulassen: Nutzer können die Textgröße an ihre individuellen Bedürfnisse anpassen.