Quando crei un'app Android XR differenziata, potresti voler utilizzare la UI spaziale per posizionare i contenuti nell'ambiente fisico o virtuale di un utente. Puoi suddividere la tua app in pannelli spaziali, orbiter e aggiungere l'elevazione spaziale (descritta in maggiore dettaglio in questa pagina). Puoi anche incorporare i video spaziali nel tuo design.
Pannelli spaziali
I pannelli spaziali sono gli elementi di base delle app Android XR. Puoi utilizzarle per creare un'esperienza XR differenziata su un display illimitato, con contenuti che si espandono nello spazio dell'utente. I pannelli spaziali fungono da contenitori per elementi UI, componenti interattivi e contenuti immersivi.
Comprendi come la UI si ridimensiona e si sposta
I pannelli spaziali regolano automaticamente le loro dimensioni in base alla distanza dall'utente. Questa scalabilità dinamica garantisce che gli elementi UI rimangano leggibili e interattivi se visualizzati da distanze diverse. Le dimensioni rimangono costanti tra 0,75 metri e 1,75 metri. Poi, il tasso di scalabilità aumenta di 0,5 metri per metro e gli elementi appariranno più piccoli.
Per evitare conflitti con l'interfaccia utente di sistema, rispetta i limiti di movimento predefiniti del riquadro:
- Profondità minima: 0,75 metri dall'utente
- Profondità massima: 5 metri dall'utente
Gli utenti possono aumentare o diminuire le dimensioni di un pannello spaziale in modo che sia abbastanza grande da essere visto chiaramente, indipendentemente dalla distanza dall'utente. Quando un utente sposta un pannello spaziale, Android XR ne ridimensiona automaticamente le dimensioni.
Dimensioni dei pannelli spaziali
Android XR è progettato per rendere la tua app comoda, leggibile e accessibile a un vasto pubblico. Per un'esperienza ottimale, il sistema utilizza 0,868 dp-to-dmm. Se visualizzata su un visore, l'app apparirà più lontana dall'utente rispetto a quando viene visualizzata su uno smartphone o un tablet, quindi deve essere più grande per facilitarne l'utilizzo.
Nello spazio intero, non esiste una dimensione minima per un pannello spaziale, mentre la dimensione massima è 2560 dp x 1800 dp a causa di limitazioni fisiche.
Dove posizionare i pannelli spaziali
Nello spazio intero, puoi determinare il posizionamento dei pannelli sia negli ambienti virtuali che in quelli passthrough. Quando gli utenti passano dallo spazio Home allo spazio intero, gli elementi rimangono nella stessa posizione prevedibile, a meno che non assegni una posizione personalizzata.
Genera il centro del pannello a 1,75 metri dalla linea di visione dell'utente. Posiziona il centro verticale del riquadro 5° al di sotto del livello degli occhi dell'utente per massimizzare il comfort, poiché gli utenti tendono a guardare verso il basso.
Per un comfort ottimale, posiziona i contenuti al centro del campo visivo dell'utente, entro un angolo di 41°. In questo modo, garantirai una visibilità chiara e ridurrai al minimo la necessità di movimenti eccessivi della testa o del corpo.
Un utente può spostarsi nello spazio e i pannelli spaziali rimarranno al loro posto.
Android XR include pattern di interazione pronti all'uso per consentire agli utenti di manipolare gli elementi senza problemi e semplificare il processo di sviluppo. Un utente può spostare gli elementi per adattarli al proprio spazio personale. Puoi configurare i comportamenti di spostamento e ridimensionamento.
Per aiutare gli utenti a posizionare gli elementi UI rispetto agli oggetti del mondo reale nel loro spazio, puoi consentire loro di ancorare un pannello spaziale a una posizione specifica nel mondo reale, ad esempio il pavimento, una sedia, una parete, il soffitto o un tavolo. L'ancoraggio è disponibile solo in modalità passthrough.
Per aiutare gli utenti a sentirsi stabili e ben orientati, puoi consentire loro di ancorare un pannello spaziale a una posizione specifica nel mondo reale, ad esempio il pavimento, una sedia, una parete, il soffitto o un tavolo. L'ancoraggio è disponibile solo in modalità passthrough.
Crea il tuo layout spaziale
Puoi scomporre la tua app in più pannelli spaziali, con qualsiasi layout tu scelga. Le API UI spaziali non limitano il numero di riquadri. Includono la possibilità di creare layout con righe e colonne, nonché righe piatte e curve. Le posizioni dei pannelli spaziali possono essere specifiche o arbitrarie. Scopri come sviluppare layout UI spaziali.
Layout a riga piatta
Layout con riga curva
Layout con posizioni arbitrarie
Video spaziali
I video spaziali possono aggiungere un'atmosfera dimensionale e immersiva ai tuoi contenuti. Puoi incorporarli nei tuoi progetti come video monoscopici o stereoscopici visualizzati su superfici piane, emisferiche a 180° o sferiche a 360°.
Orbiter
Gli orbiter sono elementi UI mobili che vengono in genere utilizzati per controllare i contenuti all'interno dei pannelli spaziali e di altre entità a cui sono ancorati. Consentono di dare più spazio ai contenuti e gli utenti possono accedere rapidamente alle funzionalità mentre i contenuti principali rimangono visibili. Gli Orbiter ti offrono la versatilità di integrare componenti UI esistenti o di crearne di nuovi.
Gli orbiter devono essere utilizzati con parsimonia e con un'attenta considerazione delle esigenze e dell'intento degli utenti. Un numero elevato di elementi UI spazializzati può causare affaticamento da contenuti e sopraffare gli utenti con un numero eccessivo di azioni concorrenti. Ti consigliamo di adattare alcuni componenti di navigazione chiave, come la barra di navigazione o la barra di navigazione.
Barra di navigazione non spazializzata di Material Design in Home Space
Una barra di navigazione spaziale di Material Design in Spazio intero
Barra di navigazione non spazializzata di Material Design in Home Space
Una barra di navigazione spaziale di Material Design in Spazio intero
Linee guida
- Regola il padding del riquadro per determinare la sua posizione flessibile o percentuale.
- Determina l'offset degli orbiter. La distanza visiva consigliata è di 20 dp.
- Se necessario, regola il livello di elevazione dell'orbiter utilizzando i livelli di elevazione spaziale. Per impostazione predefinita, sono sollevati di 15 dp in profondità Z.
- Le dimensioni possono essere fisse o flessibili quando il riquadro viene ridimensionato.
- Determina se vuoi che un orbiter si espanda dinamicamente per adattarsi ai contenuti.
Pattern di progettazione da evitare
- Evita di sovrapporre un orbiter per più del 50% delle sue dimensioni.
- Evita di posizionare gli orbiter troppo lontano dal pannello spaziale.
- Non utilizzare coordinate X o Y assolute.
- Evita di utilizzare troppi orbiter.
Elevazione spaziale
Quando aggiungi l'elevazione spaziale a un componente, questo viene visualizzato sopra il pannello spaziale sull'asse Z. In questo modo, attiri l'attenzione dell'utente, crei una gerarchia migliore e migliori la leggibilità.
| Livello di elevazione spaziale | Componente | DP |
|---|---|---|
| 0 | Non assegnato | .1dp |
| 1 | Orbiter | 16dp |
| 2 | Non assegnate | 24dp |
| 3 | SpatialPopup | 32dp |
| 4 | Non assegnate | 40dp |
| 5 | SpatialDialog | 56dp |
Finestra di dialogo Material Design su un'app per schermi di grandi dimensioni
Una finestra di dialogo che utilizza l'elevazione spaziale in Android XR
Menu a discesa Material Design su un'app per schermi di grandi dimensioni
Un menu a discesa che utilizza l'elevazione in Android XR
Pattern di progettazione da evitare
- Evita di spazializzare o elevare aree e piani di grandi dimensioni, come i riquadri inferiori e i riquadri laterali.
- Evita di elevare gli elementi UI con contenuti scorrevoli.
Progetta touch target di grandi dimensioni
In un'app XR, un target è l'area selezionabile con cui gli utenti interagiscono. Android XR rispetta le linee guida per i target di Material Design e consiglia target più grandi per aumentare precisione, comfort e usabilità.
Scopri di più sui target e sugli stati di passaggio del mouse di XR.
Rendi accessibile la tipografia
La leggibilità dei caratteri è fondamentale per un'esperienza utente confortevole in XR. Per una migliore leggibilità, ti consigliamo di utilizzare le opzioni di scala dei caratteri con una dimensione di almeno 14 dp e uno spessore normale o superiore.
Se la tua app esistente segue le linee guida di Material Design, è già ottimizzata per Android XR. Puoi definire la tipografia di una nuova app in base a Material Design.
Scopri di più sulla tipografia XR.
Utilizza i componenti e i layout di Material Design
Sfrutta la libreria di componenti di Material Design e i layout adattivi durante la progettazione della tua app Android XR. Questi componenti di base interattivi contribuiscono ad accelerare lo sviluppo, così puoi concentrarti sulle funzionalità di base e sull'innovazione.
Material Design per XR migliora i componenti e i layout adattivi di Material 3 con comportamenti dell'interfaccia utente spaziale. In questo modo, la tua app sembrerà più nativa della piattaforma e lo spazio verrà ottimizzato.
Puoi anche spazializzare i componenti UI esistenti posizionandoli in orbiter e applicando l'elevazione spaziale, come descritto in questa pagina.
Scarica il kit di progettazione di Material 3 per iniziare.