Sie können immersive 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, für welche Plattform Sie sich entscheiden.
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 Displays können die Full Space-Funktionen mit sehr wenig 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 Ihrer App 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. Achte auf flüssige Übergänge, stabile Framerates und vorhersehbare Bewegungen.
- Testen Sie den Passthrough-Modus in realen Umgebungen, um sicherzustellen, dass sich virtuelle Elemente in die physische Umgebung einfügen.
- Testen Sie Ihre App bei unterschiedlichen Lichtverhältnissen, auch bei hellem und schwachem Licht.
- Prüfen Sie die Lesbarkeit des Texts aus verschiedenen Entfernungen und Blickwinkeln.
- Bewerten Sie das Farbschema im Hinblick auf Barrierefreiheit und Komfort.
Nutzerfeedback einholen
Führen Sie Nutzertests durch, um Verbesserungsmöglichkeiten zu ermitteln. Schließen 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 Zielbereich der Bereich, mit dem Nutzer durch Tippen oder Zeigen interagieren. Größere Ziele erhöhen die Präzision, den Komfort und die Benutzerfreundlichkeit. Wenn Sie Ihre App barrierefrei gestalten möchten, folgen Sie den Material Design-Richtlinien für Zielvorhaben. 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 die Mindestanforderungen. 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 (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 je nach Bedarf an den übergeordneten Container oder das Label angepasst.
Achten Sie darauf, dass Sie 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 auf Zeigereingaben angewiesen sind, um UI-Elemente auszuwählen.
Hover-Zustände spielen eine wichtige Rolle bei der Aktivierung der Eye-Tracking-Funktionalität im System. Wenn Eye-Tracking aktiviert ist, sind Hover-Zustände jedoch für die Anwendung 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. Durch diese Abstände können Nutzer interaktive Elemente leicht unterscheiden und versehentliche Auswahl vermeiden.
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.
- Gruppierung von Schaltflächen: Schaltflächen, die funktional eng miteinander verbunden sind, können näher zusammen gruppiert werden. Nicht zusammengehörige 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.
Größe und Skalierung des Bereichs
Android XR wurde entwickelt, um Ihre App für ein breites Publikum komfortabel, gut lesbar und barrierefrei zu machen. Für eine optimale Darstellung verwendet Android XR 0, 868 dp pro mm.
Wenn Sie Panels verwenden, ist Ihre XR-App höchstwahrscheinlich weiter vom Nutzer entfernt als ein physischer Bildschirm. Der Nutzer trägt ein Headset. Für optimalen Komfort sollte sich der primäre Inhalt in einem Sichtfeld von 41° befinden, damit Nutzer ihren Kopf nicht bewegen müssen, um zu interagieren.
Empfehlungen
- Die Ecken von Feldern sind mit einem Radius von 32 dp abgerundet. Sie können diesen Standardwert überschreiben.
Verhalten bei unterschiedlicher Tiefe des Panels
- Home Space: Apps werden in einem Abstand von 1, 75 Metern vom Nutzer gestartet.Entwickler können dies nicht überschreiben.
- Full Space: Apps werden standardmäßig an derselben Position gestartet, an der sie sich im Home Space befanden. 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. Geben Sie außerdem Textbeschreibungen oder Tooltips für Nutzer mit Screenreadern oder anderen Hilfstechnologien an.
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 Farbblindheit zugänglich sind, und grelle Kombinationen vermeiden, die zu Augenbelastung oder Orientierungslosigkeit führen können.
Farben für unterschiedliche Displays optimieren
Das Display einer kabelgebundenen XR-Brille funktioniert anders als der Bildschirm eines XR-Headsets. Stell dir eine kabelgebundene XR-Brille nicht als festen Bildschirm vor, der deine Sicht ersetzt, sondern als Projektor, der Licht auf eine klare Linse wirft.
- Headsets ersetzen die Welt: Sie verwenden Kameras, um den Raum zu erfassen und auf einem undurchsichtigen Bildschirm anzuzeigen. Wenn die App Schwarz anzeigen möchte, werden die Pixel deaktiviert. So entsteht ein echter dunkler Fleck, der die Welt dahinter verdeckt.
- Kabelgebundene XR-Datenbrillen überlagern die Welt: Sie ermöglichen es Ihnen, den Raum direkt durch das Glas zu sehen. Das Display fügt dieser Ansicht Licht hinzu. Mit Pixeln kann man zwar keine „Dunkelheit“ projizieren, aber durch Hardware-Dimming können die Linsen abgedunkelt werden, um die reale Welt auszublenden.
Transparenz bei der Entwicklung
Da das Display von kabelgebundenen XR-Brillen additiv ist, wirken sich Ihre Farbauswahlen direkt darauf aus, wie solide oder transparent Ihre Benutzeroberfläche aussieht.
- Schwarz wird als transparent gerendert: Reines Schwarz kann nicht angezeigt werden. Vollständig schwarze Pixel sind deaktiviert. Der Nutzer sieht die reale Welt direkt durch diesen Teil des Glases.
- Helligkeit verbessert die Sichtbarkeit: Helle Farben wirken kräftiger. Dunklere Farben strahlen weniger Licht ab und wirken transparenter. Durch das Hinzufügen von Weiß wird die Sichtbarkeit verbessert. Vermeiden Sie jedoch übermäßige Helligkeit, um eine Überanstrengung der Augen zu verhindern.
- Umgebungsanpassung: Die Farben der Benutzeroberfläche werden optisch mit der realen Welt vermischt. Helle, kontrastreiche Farben sorgen dafür, dass sich die Benutzeroberfläche von unvorhersehbaren Hintergründen abhebt.
- Durch das Dimmen der Gläser wird die Darstellung von Inhalten solider. Je dunkler die Gläser sind, desto weniger transparent und desto solider wirken digitale Inhalte. Durch die elektrochromatische Dimmung wird mehr Hintergrundlicht blockiert, wodurch Farben kräftiger wirken und dunkle Elemente besser zur Geltung kommen.
Dunkle und helle Designs in XR
Verwenden Sie das dunkle und helle Design wie in einer mobilen Android-App. Nutzer können in Android XR zwischen dem dunklen und hellen Design wechseln und so den visuellen Stil auswählen, der ihren individuellen Vorlieben am besten entspricht.
Weitere Informationen zu Material Design-Farbschemas
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 App erstellen möchten, die intuitiv zu bedienen ist, sollten Sie die Typografie-Richtlinien von Material Design beachten.
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 aus der Ferne gelesen zu werden.
- 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 Maßstab, um eine Hierarchie im 3D-Raum zu schaffen.
- Text muss vor dem Hintergrund des Nutzers 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. Helle Textwerte sorgen für eine bessere Lesbarkeit auf kabelgebundenen XR-Brillen.
- Anpassungsfähige Typografie verwenden: Bereiche können für einen Nutzer zu nah, zu weit entfernt oder in einem ungünstigen Betrachtungswinkel 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: Kürzere Zeilenlängen verbessern die Lesbarkeit.
- Barrierefreie Farben auswählen: Verwenden Sie Farbkombinationen, die für Nutzer mit Farbenfehlsichtigkeit gut lesbar sind.
- Überfüllung vermeiden: Lassen Sie dem Text ausreichend Platz.
- 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 als Marke in China, der Europäischen Union, Japan und dem Vereinigten Königreich eingetragen.