Comment prototyper une application mobile avec Adobe XD

Sep 12, 2025

Comment

[dix] [dix] [dix]

[dix]

Ce tutoriel, vous montrant comment créer un prototype d'applications mobiles dans Adobe XD, a été mis en place en utilisant Adobe XD CC (2017 bêta) en 2016. Le nouvellement lancé Adobe XD CC a eu quelques modifications, ce qui le rend encore plus facile à utiliser.

[dix]

Obtenez une réduction de 15% sur Adobe Creative Cloud ici

Si vous êtes un concepteur créant des expériences utilisateur pour des applications mobiles ou des sites Web, vous pouvez utiliser plusieurs outils pour différentes tâches lorsque prototypage .

Vous commencez avec la recherche. Ensuite, vous croquez des idées sur le stylo et le papier, puis transférez plus tard vos pensées à un outil de conception. Pour proposer le meilleur flux, vous exportez tous vos actifs et apportez-les dans un autre outil pour construire un prototype. À partir de là, vous partagez ou testez votre prototype, rassemblez vos commentaires et revenez au milieu du cycle à itérer, passez de l'outil à l'outil lorsque vous affinez votre conception.

Plusieurs outils de conception abordent chacun une partie différente du problème. Mais au lieu de rendre votre vie en tant que concepteur plus facile, la commutation entre tous ces outils ne diminue que votre rythme.

Et s'il y avait un seul outil qui voulait dire que vous pourriez profiter d'un flux de travail entièrement connecté? Où vous pourriez concevoir et prototyper vos expériences en quelques minutes, partagez-les sur le Web pour capturer les commentaires, puis faire des modifications facilement sans vous briser votre foulée? Le but avec Adobe Experience Design CC - ou, comme nous l'appelons, Adobe XD - était de faire cela.

[dix]

Dans ce didacticiel, nous vous montrerons les principaux domaines d'Adobe XD en concevant, prototypage et partageant une application mobile simple «répondant à l'équipe».

Nous allons créer une page de contenu énumérant les membres de l'équipe de produit, puis les utilisateurs pourront cliquer sur les entrées individuelles à effectuer sur une page de biog plus approfondie. Vous apprendrez à créer des conceptions de haute fidélité, de prototyper et de les partager pour recueillir des commentaires.

[dix]

Regardez la vidéo ci-dessus et suivez les étapes écrites ci-dessous pour savoir comment prototyper avec Adobe XD. Non seulement nous vous montrerons comment le faire, nous allons également vous montrer comment le tester, enregistrer une vidéo de prévisualisation en action et comment partager et l'exporter.

Notez que certains processus auraient pu changer légèrement dans la version plus récente d'Adobe XD.

01. Installez Adobe XD et lancez une nouvelle conception

Start your design by selecting the iPhone artboard from your template options — Démarrez votre conception en sélectionnant l'iPhone Artboard à partir de vos options de modèle

Tout d'abord, assurez-vous que Adobe XD est installé sur votre ordinateur . Lancez-le, jetez un coup d'œil à l'écran de bienvenue et lancez un nouveau design avec un modèle d'artboard iPhone.

02. Créer un deuxième arboot

Utilisez l'outil Artboard ( UNE ) Pour créer un deuxième arboot, changez ensuite leurs titres (en double-cliquant sur eux) à «iPhone - page d'équipe» et «page de détail iPhone». Changez les deux couleurs d'arrière-plan d'Artboards au noir à l'aide de l'inspecteur de la propriété à votre droite. Avec l'outil SELECT ( V ) Sélectionné, vous pouvez appuyer sur la barre d'espace à tout moment pour paniquer sur votre conception.

03. Télécharger les actifs du didacticiel

J'ai mis en place un dossier d'actifs que j'utiliserai tout au long de ce tutoriel. Vous pouvez les télécharger ici . De Finder, faites glisser 'iPhone-Statut-Bar.svg' en haut de l'article 1 ( x: 8, y: 5 ). Ensuite, copiez-la et collez-la dans l'artboard 2, de sorte que les deux Artboards disposent de la barre d'état sur le dessus. Frapper cmd + l Pour verrouiller ces barres d'état dans les deux Artboards, de sorte que leurs propriétés ne peuvent pas être modifiées. Pour les déverrouiller, vous pouvez utiliser le raccourci à nouveau ou cliquer sur l'icône 'Verrouiller'.

04. Dessinez un rectangle et des dimensions de rectangle

Concentrons sur l'artboard 1 (la page d'équipe). Utilisation de l'outil Rectangle ( R ), dessinez un rectangle rose (# FF2BC2 sans bordure) dans l'artboard 1 et définissez ses dimensions sur 375 x 230 à l'aide du panneau d'inspecteur de la propriété à droite.

05. Réorganiser des objets

Pour activer la bordure ou remplir et éteindre, cliquez sur l'icône «Eye» à droite. Frapper Maj + cmd + [ envoyer tout le chemin à l'arrière ou aller à Objet & gt; Arrangez & gt; Envoyer au fond . Si vous souhaitez modifier des couleurs en utilisant des valeurs hexadécimales, cliquez sur l'icône Couleur et lorsque le sélecteur de couleur natif apparaît, sélectionnez le deuxième onglet en haut et modifiez la liste déroulante sur 'Sliders RGB'.

06. Créer un en-tête

Utilisation de l'outil de texte ( T ), cliquez pour créer un en-tête pour votre page d'équipe. Le mien est Helvetica Bold, 20 ans, #ffffff, X: 18, Y: 123. Commençons par mettre en place notre liste des membres de l'équipe. Dessinez une place grise où la photo du membre de l'équipe s'asseoir (100 x 100, X: 8, Y: 238, # D0D0D0 sans bordure).

07. Ajouter un autre rectangle

À la droite de cela, nous avons besoin d'un rectangle blanc (260 x 100, X: 108, Y: 238, #FFFFFF sans bordure) sur lequel nous inclurons le nom du membre de l'équipe en tant que titre et titre d'emploi comme sous-titulaire. Pour l'instant, utilisez le texte de l'espace réservé et la style que vous le souhaitez.

08. Ajouter une icône de flèche

Pour montrer cette case sera une zone tampable, nous inclurons une icône de flèche. Faites glisser 'path.svg' de Finder sur la toile XD sur un point éteint de l'artboard. Puis repositionnez-le à X: 330, Y: 279.

09. Placez votre tête de tête

De Finder, faites glisser une tête de tête en place sur la place grise.

10. Créer la liste

Use the powerful Repeat Grid feature to create your list of team members — Utilisez la puissante fonction de la grille de répétition pour créer votre liste de membres de l'équipe.

Maintenant, nous pouvons créer notre liste. À ce stade, vous seriez normalement copier et coller l'élément supérieur, en déplaçant la version copiée vers le bas et en ajustant la marge. Vous feriez la même chose pour les nouveaux articles et si vous vouliez changer de marge, vous devriez le faire manuellement, une à une.

Eh bien, pas avec Adobe XD - Vous pouvez utiliser la fonctionnalité de la grille de répétition. Sélectionnez les éléments que vous souhaitez répéter, cliquez sur le bouton "Répéter la grille" de l'inspecteur de la propriété sur votre droite ( cmd + r ) et utilisez les poignées vertes pour répéter les éléments verticalement. Vous pouvez également les répéter horizontalement pour une version de tablette.

11. Ajustez la marge

Ajustez la marge de votre grille répétée en planant sur le bord de vos objets, en cliquant sur et en faisant glisser. Placons la marge sur 7. Faites glisser la grille de répétition vers le bas de votre artboard. Nous avons maintenant quatre lignes à jouer avec.

12. Modifier les champs de texte

Drag all the headshots onto the grid — Faites glisser tous les headshots sur la grille

[dix]

Bien que les propriétés (couleurs, positions X et Y, etc.) sont globales, le contenu de chaque élément peut être unique. Modifiez les champs de texte au nom de chaque personne et au titre du poste. Vous pouvez double-cliquer pour entrer dans la grille et le groupe, ou cmd + clic pour diriger - sélectionner n'importe quel élément dans un groupe ou une grille répétée. Maintenant, nous avons juste besoin de saisir tous les headshots à la fois et de les faire glisser sur la grille et nous avons fini avec cet écran.

13. Créer un effet sombre

Allons à l'artboard 2 (la page de détail). Encore une fois, nous allons commencer par un rectangle d'espace réservé (375 x 444, X: 0, Y: 0, #ffffff sans bordure) et faites glisser une tête de tête pour le remplir. Nous allons créer un effet foncé en modifiant l'opacité de l'image à 60% et en l'envoyant à l'arrière ( Maj + cmd + [ ).

14. Ajouter une autre flèche

Puis verrouiller l'élément de la tireau ( cmd + l ) et ajoutez une autre flèche («Back-arrow.svg») pour indiquer que l'utilisateur peut revenir à la liste d'équipe. Ceci doit s'asseoir à X: 20, Y: 40. Il est important de verrouiller l'image en premier, car sinon, le SVG remplacera la titulaire.

15. Ajouter une barre d'informations de contact

Nous voulons inclure une barre rose sur chaque page, qui énumérera les coordonnées du membre de l'équipe (375 x 45, X: 0, Y: 400). Utilisez l'outil de texte ( T ) Pour créer un élément de texte Lecture «Lien d'espace réservé», centrez-le, style, et placez-le à X: 169, Y: 416.

16. Créer plus d'instances de l'élément de texte

Utilisons l'outil de répétition de la grille pour créer deux autres instances de cet élément de texte. Tout d'abord, convertissez le texte en une grille de répétition ( cmd + r ), puis maintenez la touche d'option tout en développant votre grille horizontalement. Beau, n'est-ce pas? Direct-Sélectionnez le texte ( cmd + clic ) et changez le contenu pour lire "Email", "Twitter" et "LinkedIn".

17. Créer un nom et une boîte bio

Pour terminer la conception, créez une boîte blanche (360 x 214, X: 8, Y: 445) qui comprendra le nom et la biog du membre de l'équipe. Ajoutez d'abord un élément de texte à l'aide du «nom de la personne» de l'espace réservé. Pour l'élément de texte qui détient le biog, nous souhaitons utiliser un texte de zone. Pour ce faire, sélectionnez l'outil de texte ( T ) Et cliquez et faites glisser pour définir la zone pour votre copie. Encore une fois, tapez un texte d'espace réservé pour aujourd'hui et ajustez ses propriétés de style.

18. Créer des travaux d'art pour les autres membres de l'équipe

Duplicate your detail page so there is one for each team member — Dupliquer votre page de détail, donc il y en a un pour chaque membre de l'équipe

Maintenant, faisons de nouveaux Artboards pour d'autres membres de l'équipe. D'abord déverrouillez l'image principale ( cmd + l ), puis cliquez sur le titre d'Artboard 2 pour la sélectionner et frappez cmd + c Pour le copier. Dézoomer ( cmd + - ou utilisez le trackpad pour pincer à zoomer), puis frappez cmd + v coller trois nouveaux Artboards. Ajoutez des informations de biog à chaque page. Mettez à jour les noms et les images de la tête de la tête et organisez les travaux Artboards sur la toile. Frais! Notre conception est terminée pour l'instant.

19. Configurer le flux

Il est temps de commencer à définir le flux de l'application. Un prototype peut valoir mille réunions. Nous allons donc créer un pour communiquer notre intention de conception. Sautez simplement en mode prototype (en haut à gauche), sélectionnez l'élément qui sera exploité par l'utilisateur (attendre cmd à la sélection directe) et faites glisser un fil sur le bouton droit. Lorsque la souris est relâchée, nous pouvons définir la Segue, l'assouplissement et la durée. Simple.

20. Connectez-vous

Wire each item on your list to its respective detail page — Câbler chaque élément de votre liste à sa page de détail respective

Allons-y si chacun des articles de notre liste sur l'artboard 1 et les câblent à leur page de détail respective. Pour chacun de celles-ci, nous voulons mettre la SEGUE pour glisser à gauche et l'assouplissement de l'aise. Ensuite, nous pouvons filer les flèches de dos sur chacune des pages de détail de retour à l'artboard 1 - N'oubliez pas de définir la Segue pour glisser à droite cette fois-ci. BOOM - Notre prototype est prêt.

21. Testez le prototype

Any changes to your design will be reflected immediately in the preview — Toute modification de votre conception sera immédiatement reflétée dans l'aperçu

Pour tester le prototype, cliquez sur le bouton de lecture en haut à droite (aperçu). Vous n'avez pas besoin de fermer la fenêtre d'aperçu pour mettre à jour votre conception ou vos fils. Il suffit de commencer à apporter des modifications et ils seront automatiquement reflétés dans la fenêtre d'aperçu.

22. faire une vidéo

Il est facile d'enregistrer une vidéo de vos interactions lors du test du prototype. Avec la fenêtre de prévisualisation ouverte, cliquez sur le bouton Enregistrer pour démarrer et arrêter l'enregistrement. Enregistrez le fichier '.mov »et partagez avec vos parties prenantes.

23. Partagez votre travail

Share prototypes on the web — Partagez des prototypes sur le Web

Pour partager les prototypes sur le Web, cliquez sur le dernier bouton situé en haut à droite (partage en ligne). Cliquez sur le bouton Créer un lien. Tous les actifs seront téléchargés sur Creative Cloud et un lien sera créé. Si des modifications sont nécessaires, vous pouvez revenir au mode de conception, rendre les modifications et les partager à nouveau. L'ensemble du flux fonctionne simplement.

24. Dossiers d'exportation

You can export designs as PNGs for Web, iOS and Android at different sizes, or SVGs — Vous pouvez exporter des conceptions comme PNGS pour Web, iOS et Android à différentes tailles ou SVGS

De XD, vous pouvez exporter des PNGS pour Web, iOS et Android à différentes tailles, ainsi que des fichiers SVG hautement optimisés.

25. Profitez des résultats

Toutes nos félicitations! Vous avez maîtrisé les bases de Adobe Experience Design CC (Aperçu). N'hésitez pas à partager vos prototypes sur le Web et les médias sociaux - Ajouter #adobexd Nous pouvons donc voir votre travail.

Cet article est apparu à l'origine dans magazine net numéro 280. Abonnez-vous à Net ici .

Articles Liés

Comment éviter les pièges de prototypage
Comment utiliser l'animation dans les applications mobiles
10 conseils pour un meilleur design UX mobile

[dix] [dix]

[dix]

Comment prototyper une application mobile avec Adobe XD

01. Installez Adobe XD et lancez une nouvelle conception

02. Créer un deuxième arboot

03. Télécharger les actifs du didacticiel

04. Dessinez un rectangle et des dimensions de rectangle

05. Réorganiser des objets

06. Créer un en-tête

07. Ajouter un autre rectangle

08. Ajouter une icône de flèche

09. Placez votre tête de tête

10. Créer la liste

11. Ajustez la marge

12. Modifier les champs de texte

13. Créer un effet sombre

14. Ajouter une autre flèche

15. Ajouter une barre d'informations de contact

16. Créer plus d'instances de l'élément de texte

17. Créer un nom et une boîte bio

18. Créer des travaux d'art pour les autres membres de l'équipe

19. Configurer le flux

20. Connectez-vous

21. Testez le prototype

22. faire une vidéo

23. Partagez votre travail

24. Dossiers d'exportation

25. Profitez des résultats

Comment - Most Popular Articles

21 étapes à la super vitesse JavaScript

Comment ajouter de l'énergie à vos dessins de vie

Comment faire et utiliser un mahlstick pour la peinture

Comment créer une application de tableau de bord avec réaction

Jump Début Réagissez Natif avec Expo

Aiguisez vos compétences de croquis

Créer des illustrations simples pour le web

Comment utiliser la fonctionnalité de la police de match de Photoshop

Catégories