Wenn du eine App für Android XR entwickelst, kannst du eine räumliche Benutzeroberfläche verwenden, um Inhalte in der physischen oder virtuellen Umgebung eines Nutzers zu platzieren. Sie können Ihre App in räumliche Bereiche und Orbiters aufteilen und räumliche Erhöhungen hinzufügen (auf dieser Seite ausführlicher beschrieben). Sie können auch räumliche Videos in Ihr Design einbinden.
Räumliche Bereiche
Räumliche Panels sind die grundlegenden Bausteine von Android XR-Apps. Mit ihnen kannst du eine XR-differenzierte Umgebung auf einem unbegrenzten Display erstellen, wobei sich die Inhalte über den gesamten Raum des Nutzers erstrecken. Räumliche Bereiche dienen als Container für UI-Elemente, interaktive Komponenten und immersive Inhalte.
Skalierung und Bewegung der Benutzeroberfläche
Die Größe von räumlichen Bereichen wird automatisch an die Entfernung zum Nutzer angepasst. Diese dynamische Skalierung sorgt dafür, dass UI-Elemente aus verschiedenen Entfernungen lesbar und interaktiv bleiben. Die Größe bleibt zwischen 0,75 m und 1,75 m konstant. Dann steigt die Skalierungsrate um 0, 5 Meter pro Meter und die Elemente werden kleiner dargestellt.
Um Konflikte mit der System-UI zu vermeiden, sollten Sie sich an die Standardgrenzen für die Bewegung des Bereichs halten:
- Mindesttiefe: 0,75 m vom Nutzer entfernt
- Maximale Tiefe: 5 m vom Nutzer entfernt
Nutzer können ein räumliches Steuerfeld vergrößern oder verkleinern, damit es unabhängig von der Entfernung zum Nutzer groß genug ist, um es gut zu sehen. Wenn ein Nutzer ein räumliches Steuerfeld verschiebt, passt Android XR die Größe automatisch an.
Größen von räumlichen Bereichen
Android XR ist so konzipiert, dass Ihre App für eine breite Zielgruppe komfortabel, lesbar und barrierefrei ist. Für eine optimale Nutzung verwendet das System 0, 868 dp-to-dmm. Wenn deine App auf einem Headset angezeigt wird, erscheint sie weiter entfernt als auf einem Smartphone oder Tablet. Daher muss sie größer sein, damit sie leichter zu bedienen ist.
Im Full Space gibt es keine Mindestgröße für ein räumliches Steuerfeld. Die maximale Größe beträgt aufgrund physischer Einschränkungen 2560 dp × 1800 dp.
Wo räumliche Bereiche platziert werden sollten
Im Full Space können Sie die Platzierung von Panels sowohl in Passthrough- als auch in virtuellen Umgebungen festlegen. Wenn Nutzer vom Home Space zum Full Space wechseln, bleiben die Elemente an derselben vorhersehbaren Position, es sei denn, Sie weisen eine benutzerdefinierte Position zu.
Das Panel wird 1,75 Meter von der Sichtlinie des Nutzers entfernt eingeblendet. Platziere die vertikale Mitte des Bereichs 5° unter der Augenhöhe des Nutzers, um den Komfort zu maximieren, da Nutzer dazu neigen, nach unten zu schauen.
Für optimalen Komfort sollten Inhalte in der Mitte des Sichtfelds des Nutzers platziert werden (41°). So ist eine gute Sichtbarkeit gewährleistet und übermäßige Kopf- oder Körperbewegungen werden minimiert.
Nutzer können sich in ihrem Raum bewegen und die räumlichen Bereiche bleiben an Ort und Stelle.
Android XR enthält sofort einsatzbereite Interaktionsmuster, mit denen Nutzer Elemente nahtlos bearbeiten können und die den Entwicklungsprozess vereinfachen. Nutzer können Elemente verschieben, um sie an ihren persönlichen Bereich anzupassen. Sie können das Verhalten beim Verschieben und Ändern der Größe konfigurieren.
Damit Nutzer UI-Elemente relativ zu realen Objekten in ihrer Umgebung positionieren können, können Sie ihnen erlauben, ein räumliches Steuerfeld an einem bestimmten Ort in der realen Welt zu verankern, z. B. am Boden, an einem Stuhl, an einer Wand, an der Decke oder an einem Tisch. Die Verankerung ist nur im Passthrough-Modus verfügbar.
Damit Nutzer sich sicher und gut orientieren können, kannst du ihnen erlauben, ein räumliches Steuerfeld an einem bestimmten Ort in der realen Welt zu verankern, z. B. am Boden, an einem Stuhl, einer Wand, der Decke oder einem Tisch. Die Verankerung ist nur im Passthrough-Modus verfügbar.
Eigenes räumliches Layout erstellen
Sie können Ihre App in mehrere räumliche Bereiche aufteilen und ein beliebiges Layout wählen. Die APIs für die räumliche Benutzeroberfläche beschränken die Anzahl der Bereiche nicht. Sie können Layouts mit Zeilen und Spalten sowie flachen und gekrümmten Zeilen erstellen. Die Positionen der räumlichen Bereiche können spezifisch oder beliebig sein. Informationen zum Entwickeln von räumlichen UI-Layouts
Flaches Zeilenlayout
Layout mit gebogener Zeile
Layout mit beliebigen Positionen
Spatial-Videos
Spatial Videos können deinen Inhalten eine räumliche, immersive Wirkung verleihen. Sie können sie als monoskopische oder stereoskopische Videos in Ihre Designs einbinden, die auf flachen, 180°-halbkugelförmigen oder 360°-kugelförmigen Oberflächen angezeigt werden.
Orbiters
Orbiters sind schwebende UI-Elemente, die normalerweise verwendet werden, um den Inhalt in räumlichen Bereichen und anderen Entitäten zu steuern, an denen sie verankert sind. Sie bieten mehr Platz für den Inhalt und Nutzer können schnell auf Funktionen zugreifen, während der Hauptinhalt sichtbar bleibt. Orbiters bieten Ihnen die Flexibilität, vorhandene UI-Komponenten zu integrieren oder neue zu erstellen.
Orbiters sollten sparsam und unter sorgfältiger Berücksichtigung der Nutzeranforderungen und -absichten verwendet werden. Eine große Anzahl von räumlichen UI-Elementen kann zu einer Überforderung der Nutzer führen, da sie mit zu vielen konkurrierenden Aktionen konfrontiert werden. Es wird empfohlen, einige wichtige Navigationskomponenten wie die Navigationsleiste oder den Navigationsstreifen anzupassen.
Nicht räumliche Navigationsleiste aus Material Design im Home Space
Eine räumliche Navigationsleiste aus Material Design im Full Space
Nicht räumliche Navigationsleiste aus Material Design im Home Space
Eine räumliche Navigationsleiste von Material Design im Full Space
Richtlinien
- Passen Sie den Abstand zum Bereich an, um die Flex- oder Prozentposition festzulegen.
- Bestimme den Versatz der Orbiter. Der empfohlene visuelle Abstand beträgt 20 dp.
- Passen Sie die Höhe des Orbiters bei Bedarf mithilfe der räumlichen Höhenstufen an. Standardmäßig sind sie in der Z-Tiefe um 15 dp erhöht.
- Die Größe kann fest oder flexibel sein, wenn die Größe des Bereichs geändert wird.
- Legen Sie fest, ob ein Orbiter dynamisch erweitert werden soll, um den Inhalt anzupassen.
Zu vermeidende Designmuster
- Vermeiden Sie es, einen Orbiter um mehr als 50 % seiner Größe zu überlappen.
- Virkel sollten nicht zu weit vom räumlichen Bereich entfernt platziert werden.
- Verwenden Sie keine absoluten X- oder Y-Koordinaten.
- Verwenden Sie nicht zu viele Orbiters.
Räumliche Erhöhung
Wenn Sie einer Komponente eine räumliche Höhe hinzufügen, wird sie auf der Z-Achse über dem räumlichen Bereich angezeigt. So können Sie die Aufmerksamkeit der Nutzer wecken, eine bessere Hierarchie schaffen und die Lesbarkeit verbessern.
| Höhenebene | Komponente | DP |
|---|---|---|
| 0 | Nicht zugewiesen | .1dp |
| 1 | Im Orbit | 16 dp |
| 2 | Nicht zugewiesen | 24 dp |
| 3 | SpatialPopup | 32 dp |
| 4 | Nicht zugewiesen | 40 dp |
| 5 | SpatialDialog | 56 dp |
Material Design-Dialogfeld in einer App für große Bildschirme
Ein Dialogfeld mit räumlicher Erhöhung in Android XR
Material Design-Drop-down-Menü in einer App für große Bildschirme
Ein Drop-down-Menü mit Erhöhung in Android XR
Zu vermeidende Designmuster
- Vermeiden Sie es, große Bereiche und Ebenen wie Ansichten am unteren Rand und Seitenansichten zu verräumlichen oder zu erhöhen.
- Vermeide es, UI-Elemente mit scrollbaren Inhalten hervorzuheben.
Große Zielgrößen entwerfen
In einer XR-App ist ein Ziel der Bereich, auf den Nutzer zeigen und mit dem sie interagieren können. Android XR hält sich an die Zielrichtlinien von Material Design und empfiehlt größere Ziele, um die Präzision, den Komfort und die Nutzerfreundlichkeit zu erhöhen.
Ziele und Hover-Zustände in XR
Typografie barrierefrei gestalten
Die Lesbarkeit von Schriftarten ist entscheidend für eine angenehme Nutzererfahrung in XR. Wir empfehlen, für eine bessere Lesbarkeit Schriftgrößenoptionen mit einer Schriftgröße von mindestens 14 dp und einer normalen oder höheren Schriftstärke zu verwenden.
Wenn Ihre vorhandene App den Material Design-Richtlinien entspricht, ist sie bereits für Android XR optimiert. Sie können die Typografie einer neuen App basierend auf Material Design definieren.
Weitere Informationen zur XR-Typografie
Material Design-Komponenten und -Layouts verwenden
Nutzen Sie die Komponentenbibliothek von Material Design und adaptive Layouts, wenn Sie Ihre Android XR-App entwerfen. Diese interaktiven Bausteine beschleunigen die Entwicklung, sodass Sie sich auf die Hauptfunktionen und Innovationen konzentrieren können.
Material Design für XR erweitert Material 3-Komponenten und adaptive Layouts um räumliche UI-Verhaltensweisen. Dadurch wirkt Ihre App nativer und der Platzbedarf wird optimiert.
Sie können auch vorhandene UI-Komponenten räumlich darstellen, indem Sie sie in Orbitern platzieren und eine räumliche Erhöhung anwenden, wie auf dieser Seite beschrieben.
Laden Sie das Material 3 Design Kit herunter, um loszulegen.