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 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 die räumliche Benutzeroberfläche 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 testest du 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-Modus 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. in hellen und dunklen Umgebungen.
- 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 Verbesserungspotenzial zu ermitteln. 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 Zielbereich der Bereich, der durch Tippen oder Zeigen aktiviert wird und mit dem Nutzer interagieren. Größere Zielelemente erhöhen die Präzision, 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 Material Design-Empfehlungen entspricht, erfüllen die Zielgrößen die Mindestanforderungen. 56 dp sind jedoch optimal.
Bei allen interaktiven UI-Elementen sollte Folgendes berücksichtigt werden:
- Empfohlenes Ziel: mindestens 56 dp × 56 dp
- 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.
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-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 Highlight-Status, um anzuzeigen, welche UI-Komponenten interaktiv sind.
Entfernung zwischen Zielen
Laut Material Design sollten Zielbereiche, einschließlich Schaltflächen, einen Mindestabstand von 8 dp haben. 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 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 näher 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, 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 vom 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 Ecken von Feldern sind mit einem Radius von 32 dp abgerundet. Sie können diese Standardeinstellung überschreiben.
Verhalten bei der Panel-Tiefe
- Home Space: Apps werden 1, 75 Meter vom Nutzer entfernt 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. 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 konsistente 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 Desorientierung führen können.
Farben für unterschiedliche Displays optimieren
Das Display einer kabelgebundenen XR-Brille funktioniert anders als das Display eines XR-Headsets. Stell dir eine kabelgebundene XR-Brille nicht als Bildschirm vor, der deine Sicht ersetzt, sondern als Projektor, der Licht auf ein klares Brillenglas wirft.
- Headsets ersetzen die Welt: Sie verwenden Kameras, um den Raum zu erfassen und auf einem blickdichten 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-Brillen ü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 zwar keine „Dunkelheit“ projiziert werden, aber durch die Hardware-Dimmung können die Linsen abgedunkelt werden, um die physische Welt auszublenden.
Transparenz fördern
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 einfach 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 eine zu hohe Helligkeit, um eine Überanstrengung der Augen zu verhindern.
- Umgebungsanpassung: Die Farben der Benutzeroberfläche werden visuell 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 erscheinen digitale Inhalte. Durch die elektrochromatische Dimmung wird mehr Hintergrundlicht blockiert, wodurch Farben satt wirken und dunkle Elemente besser zur Geltung kommen.
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 in Material Design beachten.
Best Practices für die 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 eines 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. Helle Textwerte sorgen für eine bessere Lesbarkeit auf kabelgebundenen XR-Brillen.
- 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.