Si vous avez une application Android et que vous souhaitez conserver son style visuel, vous pouvez conserver ce langage de conception dans Android XR. Pour les nouvelles applications ou les refontes, envisagez de suivre les consignes Material Design concernant la taille de l'interface utilisateur, l'accessibilité, la typographie, les jeux de couleurs et les composants.
Les applications Android mobiles ou grand écran en 2D peuvent exploiter les fonctionnalités Full Space avec très peu de travail de développement supplémentaire. Pour un impact XR élevé, envisagez de spatialiser les panneaux et de créer une interface utilisateur spatiale. Pour des parcours utilisateur plus immersifs, envisagez d'ajouter des modèles 3D et des environnements.
Si vous avez créé ou créez une application Unity, Open XR ou WebXR, vous êtes libre de suivre le langage de conception de votre choix. Les recommandations de conception fournies par Material Design peuvent vous aider à appliquer des couleurs, un espacement, une échelle, des boutons et une typographie.
Tester la conception visuelle de votre application
Tester la conception visuelle de votre application est essentiel pour garantir une expérience utilisateur confortable et accessible. Voici comment effectuer des tests sur différentes plates-formes et environnements XR.
Utiliser des émulateurs, des simulateurs et des appareils réels
- Si vous développez une application Android, testez-la sur l'émulateur Android XR. Cela vous permet d'identifier les problèmes potentiels et d'itérer rapidement sans appareil physique.
Checklist de test de conception visuelle
- Testez tous les mouvements ou animations pour vous assurer qu'ils ne provoquent pas de mal des transports. Vérifiez que les transitions sont fluides, que les fréquences d'images sont stables et que les mouvements sont prévisibles.
- Essayez le passthrough dans des environnements réels pour vous assurer que les éléments virtuels se fondent dans l'environnement physique.
- Testez votre application dans différentes conditions d'éclairage, y compris dans des environnements clairs et sombres.
- Vérifiez la lisibilité du texte à différentes distances et angles.
- Évaluez le jeu de couleurs en termes d'accessibilité et de confort.
Recueillir les commentaires des utilisateurs
Menez des tests utilisateur pour identifier les axes d'amélioration. Incluez des utilisateurs ayant des niveaux d'expérience et de capacités visuelles différents pour obtenir une perspective globale.
Cibles dans Android XR
Dans une application XR, une cible est la zone cliquable ou pointable avec laquelle les utilisateurs interagissent. Les cibles plus grandes améliorent la précision, le confort et la facilité d'utilisation. Pour rendre votre application accessible, suivez les consignes relatives aux cibles Material Design. Ils fonctionneront avec les applications Android, Unity, OpenXR et WebXR. Si votre application suit déjà les recommandations de Material Design, vos tailles cibles respectent la taille minimale, bien que 56 dp soit optimal.
Tous les éléments d'UI interactifs doivent prendre en compte les éléments suivants:
- Cible recommandée: 56 dp x 56 dp ou plus
- Disponibilité visuelle: 48 dp x 48 dp ou plus
- Décalage entre la cible et l'affordance visuelle: 4 dp
- Pour des interactions précises, les cibles du pointeur des différents éléments d'interface utilisateur ne doivent pas se chevaucher.
Veillez à ajouter des états de pointage
Pour améliorer l'accessibilité, incorporez les états de survol et de focus en plus des états interactifs de base pour les composants interactifs. Les états de survol peuvent être utiles pour tous les utilisateurs et sont particulièrement cruciaux pour les utilisateurs qui s'appuient sur les entrées du pointeur pour sélectionner des éléments d'interface utilisateur.
Les états de survol jouent un rôle important dans l'activation de la fonctionnalité de suivi visuel dans le système. Toutefois, lorsque le suivi oculaire est activé, les états de survol sont inaccessibles à l'application afin de protéger la confidentialité des utilisateurs et d'empêcher le partage de données. Le système dessine un état de surbrillance visible uniquement par l'utilisateur pour indiquer les composants d'interface utilisateur avec lesquels il est possible d'interagir.
Distance entre les cibles
Material Design recommande un espace minimal de 8 dp entre les cibles, y compris les boutons. Cet espacement permet aux utilisateurs de distinguer facilement les éléments interactifs et d'éviter les sélections accidentelles.
La distance spécifique entre les boutons peut varier en fonction de leur contexte et de leur taille. Voici quelques facteurs à prendre en compte:
- Taille des boutons: les boutons plus grands peuvent nécessiter plus d'espace entre eux pour maintenir la clarté visuelle.
- Regroupement des boutons: les boutons étroitement liés fonctionnellement peuvent être regroupés plus près les uns des autres, tandis que les boutons sans rapport doivent être plus éloignés les uns des autres.
- Mise en page: la mise en page globale de l'écran peut influencer l'espacement entre les boutons. Par exemple, les boutons d'une barre d'outils peuvent être plus proches les uns des autres que ceux d'une boîte de dialogue.
Taille et échelle du panneau
Android XR est conçu pour rendre votre application confortable, lisible et accessible à un large public. Pour une expérience optimale, Android XR utilise 0,868 dp/dmm.
Si vous utilisez des panneaux, votre application XR sera probablement plus éloignée de l'utilisateur qu'un écran physique. Supposons que l'utilisateur porte un casque. Pour un confort optimal, placez le contenu principal dans un champ de vision de 41 degrés afin que les utilisateurs n'aient pas à bouger la tête pour interagir.
Recommandations
- Les panneaux ont des coins arrondis de 32 dp. Vous pouvez remplacer cette valeur par défaut.
Comportements de profondeur du panneau
- Espace de la maison: les applications se lancent à 1,75 mètre de l'utilisateur, et les développeurs ne peuvent pas remplacer cette valeur.
- Espace complet: par défaut, les applications se lancent à la même position qu'elles occupaient dans l'espace d'accueil. Vous pouvez utiliser la logique spatiale pour placer des panneaux en fonction de la position de l'utilisateur, mais nous vous recommandons une distance de lancement de 1,75 mètre.
Lorsqu'une application se trouve à 1,75 mètre de l'utilisateur:
- 1 024 dp correspond à 1 556,24 millimètres
- 720 dp est perçu comme 1 093,66 millimètres
- 1 mètre dans la réalité physique = 1 mètre dans la XR
Boutons et icônes
Si vous disposez d'une application Android existante, vous n'avez pas besoin de concevoir de composants spéciaux pour Android XR. Suivez les consignes de Material Design pour les boutons et les icônes. Si vous avez une application Unity, OpenXR ou WebXR, vous pouvez conserver vos boutons et icônes tels quels ou vous inspirer de Material Design.
Si vous décidez de créer vos propres boutons ou icônes, optez pour des formes simples, des lignes nettes, des formes de base et une palette de couleurs limitée. Évitez les conceptions trop détaillées. Faites en sorte qu'ils soient évolutifs et lisibles pour différentes résolutions et distances de visionnage. Pour l'accessibilité, assurez-vous d'un contraste suffisant entre le composant et son arrière-plan, et fournissez des descriptions textuelles ou des info-bulles pour les utilisateurs de lecteurs d'écran ou d'autres technologies d'assistance.
Couleurs
Android XR suit le système de couleurs de Material Design pour garantir une interface cohérente et attrayante visuellement. Pour créer un style visuel immersif adapté à la RV, concevez avec un contraste suffisant, choisissez une palette équilibrée, utilisez des couleurs accessibles aux personnes souffrant de déficience de la vision des couleurs et évitez les combinaisons discordantes qui peuvent provoquer une fatigue oculaire ou une désorientation.
Thèmes sombre et clair dans XR
Utilisez les thèmes sombre et clair comme vous le feriez dans une application mobile Android. Les utilisateurs peuvent basculer entre les thèmes sombre et clair dans Android XR, en choisissant le style visuel qui correspond le mieux à leurs préférences personnelles.
En savoir plus sur les jeux de couleurs Material Design
Typographie XR
La lisibilité des polices est essentielle pour une expérience utilisateur confortable dans l'XR. Nous vous recommandons d'utiliser des options de typescale avec une taille de police de 14 dp ou plus et une épaisseur de police normale ou supérieure pour améliorer la lisibilité.
Pour créer une application facile à utiliser, envisagez de suivre les consignes typographiques de Material Design.
Bonnes pratiques pour la typographie dans les expériences XR
- Taille pour des distances variables: n'oubliez pas que les utilisateurs se déplaceront et verront le texte depuis différents endroits. Assurez-vous que les tailles de police sont suffisamment grandes pour être lues de loin.
- Placez le texte dans le champ de vision naturel de l'utilisateur: cela évite les mouvements de tête excessifs et les tensions au niveau du cou.
- Tenez compte de la profondeur et de l'échelle: utilisez des indices de profondeur et une échelle pour créer une hiérarchie dans l'espace 3D.
- Assurez-vous que le texte est lisible sur l'arrière-plan de l'utilisateur: les épaisseurs plus importantes offrent un contraste plus élevé. Ajustez en fonction des couleurs, de l'éclairage et de la complexité de l'environnement.
- Utilisez une typographie adaptable: les panneaux peuvent être trop proches, trop éloignés et à des angles de vue inconfortables pour l'utilisateur.
- Limitez le texte associé à des objets en mouvement: cela peut provoquer le mal des transports.
Typographie accessible dans les expériences XR
- Sélectionnez des polices pour la lisibilité: privilégiez les polices dont les lettres sont claires à petite échelle et à grande distance.
- Utilisez la casse de début de phrase: elle est plus facile à lire que la casse en majuscules.
- Limitez la longueur des lignes: essayez de réduire la longueur des lignes pour améliorer la lisibilité.
- Sélectionnez des couleurs accessibles: utilisez des combinaisons de couleurs lisibles pour les utilisateurs ayant des différences de vision des couleurs.
- Évitez de surcharger le texte: laissez-lui suffisamment d'espace.
- Autoriser la mise à l'échelle du texte: permet aux utilisateurs d'ajuster la taille du texte en fonction de leurs besoins individuels.