Contrôleur
Apprenez à créer un prototype en utilisant le clavier et la manette de jeu comme déclencheurs.
Adobe XD vous permet d’utiliser des raccourcis clavier et des déclencheurs de manette de jeu pour simuler des applications de bureau natives et des prototypes pour une expérience de jeu ou une conception plus riche. Lors de la connexion d’un prototype, vous pouvez sélectionner l’option Touches/Manette de la liste déroulante Déclencheur et attribuer une touche. Vous pouvez ensuite lire ou enregistrer ces animations dans la fenêtre d’aperçu, un navigateur web ou des applications mobiles et les partager avec les parties prenantes pour des revues collaboratives. Le récit du prototype est ainsi plus vivant, tout en ajoutant une couche riche à l’expérience client globale.
Vous pouvez choisir Touches/Manette pour :
- Relier un objet individuel ou un plan de travail à un autre plan de travail.
- Connectez deux états de composant.
- Relier l’état d’un composant à un autre plan de travail.
- Lire la parole, l’audio, la vidéo ou Lottie.
Utilisation de déclencheurs de clavier
Lors du prototypage de certaines applications de bureau, de fonctions d’accessibilité, de raccourcis ou de jeux, vous avez besoin d’un clavier pour interagir avec le prototype. Dans le prototype, utilisez les raccourcis clavier comme déclencheurs pour passer d’un écran ou d’un état à l’autre, ou lisez la parole, l’audio, la vidéo ou Lottie.
Lorsque vous connectez un prototype, sélectionnez Touches/Manette. Appuyez ensuite sur n’importe quelle touche du clavier pour l’affecter en tant que déclencheur pour un objet en particulier, un état de composant ou un plan de travail complet. Cela signifie que vous pouvez avoir plusieurs déclencheurs à partir du même plan de travail.
A. Déclencheur défini sur le raccourci clavier B. Raccourci clavier C. Action définie sur Animation automatique. D. Plan de travail de destination ou état de composant
Vous pouvez également combiner une touche avec un modificateur pour définir des déclencheurs à l'aide de raccourcis comme CMD S, CTRL R.Vous ne pouvez pas utiliser la barre d'espace et d'autres touches système telles que les touches de fonction, de veille, de volume et d'alimentation.Lorsque vous affectez plusieurs déclencheurs avec le même raccourci sur le même plan de travail, le dernier déclencheur est affecté et se déclenche lors d’un aperçu.
Utilisation de déclencheurs de manette de jeu
La meilleure façon de tester un prototype de jeu consiste à utiliser le matériel réel du contrôleur de jeu. Dans le prototype, utilisez les manettes de jeu comme déclencheurs pour passer d’un écran ou d’un état à l’autre, ou lisez la parole, l’audio, la vidéo ou Lottie. Ensuite, interagissez avec le prototype dans un lecteur de bureau ou un navigateur web à l'aide d'une manette de jeu connectée.
\n
Reliez une manette Xbox (série X/S ou One) via Bluetooth ou une manette PlayStation (DualSense ou DualShock 4) via Bluetooth ou USB, puis sélectionnez Touches/Manette. Vous pouvez ensuite appuyer sur n’importe quelle touche de la manette de jeu pour l’affecter en tant que déclencheur pour un objet en particulier, un état de composant ou un plan de travail complet.
A. Sélection du déclencheur sur manette de jeu B. Raccourci de manette de jeu C. Action définie sur Animation automatique. D. Plan de travail de destination ou état de composant
Veillez à utiliser le même contrôleur pour concevoir et prévisualiser le prototype. Par exemple, vous pouvez tester un prototype avec une manette Xbox sur un ordinateur de bureau ou le Web si ce prototype a été conçu à l’aide d’une manette Xbox.
Expérience d’application mobile et web mobile
XD accepte la prise en charge de manettes de jeu ou claviers sur l’application de prévisualisation de bureau et les prototypes web. Si vous prévisualisez le prototype sur une application mobile ou un navigateur mobile, vous pouvez appuyer pour faire la transition entre des plans de travail (car ils ne sont pas dotés d’un clavier ou d’une manette de jeu).
Contrôleurs de jeu et navigateurs pris en charge
Prise en charge USB et Bluetooth :
|
|
Mac (USB) |
Mac (Bluetooth) |
Win (USB) |
Win (Bluetooth) |
|
Xbox (série X/S, One) |
Non |
Oui |
Oui |
Oui |
|
PlayStation (DualSense, DualShock 4) |
Oui |
Oui |
Oui |
Oui |
Prise en charge du navigateur :
|
Contrôleur |
Chrome (Mac) |
Chrome (Win) |
Edge Chromium (Mac) |
Edge Chromium (Win) |
Edge (existant) |
IE |
Firefox (Mac et Windows) |
Safari |
|
Xbox (USB) |
Non |
Oui |
Non |
Oui |
Non |
Non |
Non |
Non |
|
Xbox (Bluetooth) |
Oui |
Oui |
Oui |
Oui |
Non |
Non |
Non |
Non |
|
PlayStation (USB) |
Oui |
Oui |
Oui |
Oui |
Non |
Non |
Non |
Non recommandé |
|
PlayStation (Bluetooth) |
Oui |
Oui |
Oui |
Oui |
Non |
Non |
Non |
Non recommandé |
Prototype utilisant des touches de clavier ou de manette de jeu
Passez à l’onglet Prototype.
Pour définir une interaction, cliquez sur le connecteur bleu sur l’objet source, l’état du composant ou le plan de travail. Définissez les options suivantes dans l’Inspecteur Propriétés :
- Déclencheur : définissez le type de déclencheur sur Touches/Manette, puis sélectionnez une manette de jeu ou une touche du clavier pour lui attribuer un déclencheur, à l’exception de la barre d’espace et d’autres touches du système telles que fonction, veille, volume et alimentation.
- Type : Sélectionnez l'un des types d'action disponibles : Transition, Animation automatique, Recouvrement, Faire défiler vers, Plan de travail précédent, Lecture audio, Lecture vocale, Lecture vidéo ou Lecture Lottie.
\n - Destination : définissez le plan de travail de destination ou l’état de composant dans la liste déroulante (non applicable pour certains types d’action).
Une fois le type d’action choisi, définissez les options spécifiques à ce type d’action.
Procédez comme suit pour définir plusieurs interactions pour un objet, un état de composant ou un plan de travail :
- Sélectionnez-le et cliquez sur le bouton + sur le plan de travail. Vous pouvez également cliquer sur le bouton + dans l’Inspecteur Propriétés.
- Définissez des propriétés de texte dans l’Inspecteur Propriétés.
Pour prévisualiser les changements sur un ordinateur, sélectionnez l’icône Aperçu sur ordinateur
.
Pour partager votre prototype avec vos parties prenantes à partir de l’application XD pour ordinateur, sélectionnez Partager > Configuration de l’affichage > Révision de la conception ou Développement.
Articles connexes
Concevoir des prototypes UX avec Adobe XD
Créez des maquettes interactives pour sites web et applications mobiles.