Se hai un'app per Android e vuoi mantenere il suo stile visivo, puoi mantenere questo linguaggio di design in Android XR. Per le nuove app o le riprogettazioni, ti consigliamo di seguire le linee guida di Material Design per dimensioni, accessibilità, tipografia, combinazioni di colori e componenti dell'interfaccia utente.
Le app Android mobile o con schermi di grandi dimensioni 2D possono sfruttare le funzionalità di Full Space con pochissimo lavoro di sviluppo aggiuntivo. Per un impatto XR elevato, valuta la possibilità di spazializzare i pannelli e creare interfacce utente spaziali. Per percorsi degli utenti più coinvolgenti, valuta la possibilità di aggiungere modelli 3D ed ambienti.
Se hai o stai creando un'app Unity, Open XR o WebXR, puoi seguire qualsiasi linguaggio di design che preferisci. I consigli di progettazione forniti da Material Design possono aiutarti ad applicare colori, spaziatura, scala, pulsanti e tipografia.
Come testare il design visivo dell'app
Testare il design visivo dell'app è fondamentale per garantire un'esperienza utente confortevole e accessibile. Ecco come eseguire test su piattaforme e ambienti XR diversi.
Utilizzare emulatori, simulatori e dispositivi reali
- Se stai sviluppando un'app per Android, testa l'app sull'emulatore Android XR. In questo modo puoi identificare potenziali problemi e eseguire rapidamente l'iterazione senza un dispositivo fisico.
Elenco di controllo per i test di progettazione visiva
- Prova eventuali movimenti o animazioni per assicurarti che non provochino cinetosi. Verifica la presenza di transizioni fluide, frame rate stabili e movimenti prevedibili.
- Prova la modalità Passthrough in ambienti reali per assicurarti che gli elementi virtuali si fondano con l'ambiente fisico.
- Testa l'app in condizioni di illuminazione diverse, inclusi ambienti luminosi e scuri.
- Controlla la leggibilità del testo a distanze e angolazioni diverse.
- Valuta la combinazione di colori per accessibilità e comfort.
Raccogliere il feedback degli utenti
Esegui test sugli utenti per identificare eventuali aree di miglioramento. Includi utenti con diversi livelli di esperienza XR e capacità visive per una prospettiva completa.
Target in Android XR
In un'app XR, un target è l'area tocabile o selezionabile con cui gli utenti interagiscono. Target più grandi aumentano la precisione, il comfort e l'usabilità. Per rendere la tua app accessibile, segui le linee guida sui target di Material Design. Funzioneranno con app per Android, Unity, OpenXR e WebXR. Se la tua app segue già i consigli di Material Design, le dimensioni target soddisfano i requisiti minimi, anche se 56 dp è ottimale.
Tutti gli elementi interattivi dell'interfaccia utente devono tenere conto di quanto segue:
- Target consigliato: 56 dp x 56 dp o superiore
- Accessibilità visiva: 48 dp x 48 dp o superiore
- Distanza tra il target e l'affordance visiva: 4 dp
- Per interazioni precise, i target del cursore di elementi dell'interfaccia utente diversi non devono sovrapporsi
Assicurati di aggiungere gli stati di passaggio del mouse
Per una maggiore accessibilità, incorpora gli stati di passaggio del mouse e di messa a fuoco oltre agli stati di interazione di base per i componenti interattivi. Gli stati di passaggio del mouse possono essere utili per tutti e sono particolarmente importanti per gli utenti che si affidano agli input del cursore per selezionare gli elementi dell'interfaccia utente.
Gli stati di passaggio del mouse svolgono un ruolo importante nell'attivazione della funzionalità di monitoraggio oculare all'interno del sistema. Tuttavia, quando il monitoraggio oculare è attivo, gli stati di passaggio del mouse sono inaccessibili all'applicazione per proteggere la privacy degli utenti e impedire la condivisione di dati. Il sistema disegnerà uno stato di evidenziazione visibile solo all'utente per indicare quali componenti dell'interfaccia utente sono interattivi.
Distanza tra i target
Material Design consiglia uno spazio minimo di 8 dp tra i target, inclusi i pulsanti. Questa spaziatura consente agli utenti di distinguere facilmente gli elementi interattivi ed evitare selezioni accidentali.
La distanza specifica tra i pulsanti può variare in base al contesto e alle dimensioni. Alcuni fattori da considerare:
- Dimensioni dei pulsanti: i pulsanti più grandi potrebbero richiedere più spazio tra loro per mantenere la chiarezza visiva.
- Raggruppamento dei pulsanti: i pulsanti strettamente correlati dal punto di vista funzionale possono essere raggruppati più da vicino, mentre i pulsanti non correlati devono essere più distanziati.
- Layout: il layout complessivo dello schermo può influire sulla spaziatura tra i pulsanti. Ad esempio, i pulsanti di una barra degli strumenti possono essere più ravvicinati rispetto ai pulsanti di una finestra di dialogo.
Dimensioni e scala del riquadro
Android XR è progettato per rendere la tua app comoda, leggibile e accessibile a un pubblico molto ampio. Per un'esperienza ottimale, Android XR utilizza 0,868 dp/dmm.
Se utilizzi i pannelli, la tua app XR sarà molto probabilmente più lontana da un utente rispetto a uno schermo fisico. Supponiamo che l'utente indossi una cuffia. Per un comfort ottimale, colloca i contenuti principali in un campo visivo di 41° in modo che gli utenti non debbano muovere la testa per interagire.
Consigli
- I riquadri hanno angoli arrotondati di 32 dp. Puoi sostituire questo valore predefinito.
Comportamenti di profondità del riquadro
- Spazio domestico: le app vengono avviate a 1, 75 metri dall'utente e gli sviluppatori non possono ignorarlo.
- Spazio completo: per impostazione predefinita, le app vengono avviate nella stessa posizione in cui si trovavano nello spazio domestico. Puoi utilizzare la logica spaziale per posizionare i riquadri in base alla posizione dell'utente, anche se consigliamo una distanza di lancio di 1,75 metri.
Quando un'app si trova a 1,75 metri dall'utente:
- 1024 dp sono percepiti come 1556,24 millimetri
- 720 dp sono percepiti come 1093,66 millimetri
- 1 metro nella realtà fisica = 1 metro in XR
Pulsanti e icone
Se hai già un'app per Android, non devi progettare componenti speciali per Android XR. Segui le linee guida di Material Design per pulsanti e icone. Se hai un'app Unity, OpenXR o WebXR, puoi mantenere i pulsanti e le icone invariati o ispirarti a Material Design.
Se decidi di creare i tuoi pulsanti o le tue icone, scegli forme semplici, linee pulite, forme di base e una tavolozza di colori limitata. Evita design eccessivamente dettagliati. Rendili scalabili e leggibili su risoluzioni e distanze di visualizzazione diverse. Per l'accessibilità, assicurati che il contrasto tra il componente e lo sfondo sia sufficiente e fornisci descrizioni di testo o descrizioni comando per gli utenti con screen reader o altre tecnologie per la disabilità.
Colori
Android XR segue il sistema di colori di Material Design per garantire un'interfaccia coerente e accattivante. Per creare uno stile visivo immersivo personalizzato per la realtà virtuale e la realtà aumentata, progetta con un contrasto sufficiente, scegli una tavolozza equilibrata, utilizza colori accessibili a chi ha disturbi della visione dei colori ed evita combinazioni stridenti che possono causare affaticamento degli occhi o disorientamento.
Temi scuri e chiari su XR
Utilizza i temi scuro e chiaro come faresti su un'app mobile Android. Gli utenti possono passare dal tema scuro a quello chiaro e viceversa in Android XR, scegliendo lo stile visivo che meglio soddisfa le loro preferenze individuali.
Scopri di più sulle combinazioni di colori di Material Design.
Tipografia XR
La leggibilità dei caratteri è fondamentale per un'esperienza utente confortevole in XR. Ti consigliamo di utilizzare opzioni di scala tipografica con dimensioni dei caratteri pari o superiori a 14 pt e spessore dei caratteri normale o superiore per una maggiore leggibilità.
Per creare un'app facile da usare, ti consigliamo di seguire le linee guida sulla tipografia di Material Design.
Best practice per la tipografia in XR
- Dimensioni per distanze variabili: ricorda che gli utenti si muoveranno e leggeranno il testo da posizioni diverse. Assicurati che le dimensioni dei caratteri siano abbastanza grandi da essere letti da lontano.
- Posiziona il testo nel campo visivo naturale dell'utente: in questo modo eviterai movimenti eccessivi della testa e tensioni al collo.
- Prendi in considerazione la profondità e la scala: utilizza gli indicatori di profondità e la scala per creare gerarchia nello spazio 3D.
- Assicurati che il testo sia leggibile sullo sfondo dell'utente: gli spessori più elevati offrono un maggiore contrasto. Regolali in base ai colori, all'illuminazione e alla complessità dell'ambiente.
- Utilizza una tipografia adattabile: i riquadri potrebbero essere troppo vicini, troppo lontani e con angli di visualizzazione scomodi per un utente.
- Limita il testo associato a oggetti in movimento: può causare cinetosi.
Tipografia accessibile in XR
- Seleziona i caratteri per la leggibilità: dai la priorità ai caratteri con lettere chiare a dimensioni ridotte e a distanze elevate.
- Utilizza il testo con la lettera maiuscola all'inizio della frase: il testo con la lettera maiuscola all'inizio della frase è più facile da leggere rispetto al testo tutto maiuscolo.
- Limita la lunghezza delle righe: cerca di utilizzare righe più brevi per migliorare la leggibilità.
- Seleziona colori accessibili: utilizza combinazioni di colori leggibili per gli utenti con differenze nella percezione dei colori.
- Evita di sovraccaricare: lascia ampio spazio al testo.
- Consenti ridimensionamento testo: consente agli utenti di regolare le dimensioni del testo in base alle proprie esigenze.