Des méthodes incroyablement simples et amusantes pour vos prototypes

La sortie de juin de Adobe XD présentait deux nouvelles fonctionnalités: éléments fixes et superpositions . Lorsque vous travaillez avec des prototypes et souhaitez qu'ils soient plus interactifs, des fonctions comme celles-ci vous seront très utiles.

(Cet article est aimablement sponsorisé par Adobe.) Un élément fixe est un objet que vous définissez à une position fixe sur la planche graphique, permettant à d'autres éléments de défiler dessous. De cette façon, vous obtenez une simulation réaliste du défilement sur le bureau et le mobile. Avec la nouvelle fonctionnalité de superposition, vous pouvez simuler des interactions telles que les effets de lightbox et les sous-menus.

Comment les marques célèbres utilisent-elles des éléments fixes et des superpositions? Eh bien, jetons un coup d’œil à quelques exemples pour obtenir d’abord de l’inspiration.

Dans ce didacticiel, nous allons apprendre à définir une barre de menus comme élément fixe et à appliquer une transition de recouvrement dans un prototype, afin de simuler une ouverture de menu en cliquant sur un bouton. Les deux exemples seront réalisés dans un modèle mobile, afin que nous puissions voir notre simulation en action directement sur notre appareil mobile. J'ai également inclus un fichier Illustrator avec des icônes que vous pouvez utiliser pour configurer rapidement vos exemples.

Commençons.

Préparation du modèle mobile

Ouvrez Adobe Xd et choisissez «iPhone 6 / 7/8 Plus »modèle. Ensuite, allez à Fichier → Enregistrer sous et choisissez un nom pour enregistrer votre fichier (le mien est mobile.xd ).

Créons une application de restaurant dans laquelle les utilisateurs peuvent sélectionner ce qu’ils vont commander dans une liste de plats.

Nous allons créer deux mises en page à la maison. Le premier sera une longue page, que nous utiliserons pour voir comment fonctionne la navigation fixe. Le second aura une image en plein écran, et l'utilisateur pourra cliquer et ouvrir une barre de menu qui recouvre l'écran d'accueil.

Pour commencer, cliquez sur l'icône de la planche graphique à gauche et cliquez sur l'icône. à droite de votre artboard actuel. Cela créera un second tableau identique, proche du premier.

Commençons à concevoir nos éléments, en commençant par la barre de navigation. Cliquez sur l'outil Rectangle (R) et dessinez une forme de 414 pixels de largeur et 48 pixels de hauteur. Définir sa couleur comme # DE4F4F .

J'ai préparé des icônes dans Illustrator à utiliser dans notre présentation. Il suffit d'ouvrir le fichier Illustrator que j'ai fourni puis de faire glisser les icônes dans votre bibliothèque, comme indiqué ci-dessous:

Ce faisant, vos icônes seront automatiquement téléchargé sur votre bibliothèque Adobe XD.

Pour en savoir plus sur l'utilisation des bibliothèques dans différentes applications, lisez mon précédent article dans lequel je vais vous donner quelques exemples sur la façon d'ajouter des icônes et des éléments à une bibliothèque (dans Illustrator, par exemple), puis y accéder en ouvrant cette bibliothèque dans d'autres applications (XD, dans ce cas).

Une fois les icônes ajoutées, ouvrez votre bibliothèque XD. Vous devriez voir les icônes en place:

Glissez et déposez les icônes sur votre planche graphique, comme indiqué ci-dessous. Positionnez-les et assurez-vous qu'ils sont tous d'environ 25 pixels de large.

Comme nous avons besoin que nos icônes soient blanches, nous devons les modifier. Nous pouvons les modifier directement dans la bibliothèque, comme démontré dans mon précédent tutoriel . Cela fait, nous les verrons mis à jour directement dans XD, sans avoir à les faire glisser à nouveau depuis la bibliothèque.

Maintenant que les icônes que nous voulons sont en place, créons un logo. Appelons cette application "Gusto". Nous allons simplement utiliser l’outil Texte pour l’ajouter. (J'utilise la police Leckerli One ici, mais n'hésitez pas à utiliser ce que vous voulez.) Alignez le logo au centre de la barre de navigation en cliquant sur “Aligner le centre (horizontalement)” dans la barre latérale droite.

Regroupez tous les éléments de navigation et appelez le groupe «Menu». Pour ce faire, sélectionnez tous les éléments dans le panneau de gauche, cliquez avec le bouton droit de la souris et choisissez «Grouper».

Ajoutons une belle image de héros. J'ai choisi un de Pexels . Faites-le glisser sur votre planche graphique et redimensionnez sa hauteur à 380 pixels.

Cliquez maintenant sur l'outil Rectangle (R), dessinez un rectangle de la même taille que l'image du héros et placez-le sur l'image. Définissez un dégradé pour la couleur du rectangle, en utilisant les valeurs indiquées dans l’image ci-dessous.

(Si vous souhaitez plus d'informations sur les dégradés, n'hésitez pas à consulter mon précédent tutoriel sur leur application à XD.)

Insérer du texte blanc sur l'image du héros et un cercle pour un bouton. Placez également un petit cercle avec un numéro sur l'icône du panier. nous en aurons besoin plus tard.

Ensuite, augmentons la hauteur de la planche graphique. Nous devons le faire pour insérer de nouveaux éléments et créer la simulation de défilement.

Après avoir double-cliqué sur la planche graphique, définissez sa hauteur sur 1265 pixels. Assurez-vous que “Scrolling” est réglé sur “Vertical” et que “Viewport Height” est réglé sur 736 pixels. Un petit marqueur bleu vous permettra de définir la limite de défilement vers le bas de la planche, comme indiqué ci-dessous:

Ajoutons à notre contenu: le menu appétissant de Gusto. Cliquez sur l'outil Rectangle (R) pour créer un rectangle pour l'image que nous allons ajouter.

Glissez et déposez une image directement dans la boîte que nous venons de créer; l'image va automatiquement s'y adapter. Cliquez une fois dessus et faites glisser le petit cercle blanc d'un angle vers l'intérieur pour arrondir tous les angles. Leurs valeurs devraient être autour de 25, comme le montre l'image ci-dessous. Débarrassez-vous de la bordure en décochant la valeur de la bordure dans la barre latérale droite.

Cliquez sur l'outil Texte (T) et écrivez un titre sur le côté droit de l'image. J'ai choisi Lato comme police, à 14 pixels. N'hésitez pas à utiliser une autre police, mais conservez la taille de 14 pixels.

Récupérez l'outil Texte (T) et écrivez quelques lignes pour la description (Lato, 10 pixels) et pour le prix (Lato, 16 pixels).

Prenez l'outil Rectangle (R) et dessinez un rectangle de 100 x 30 pixels. Colorez-le avec la même orange que nous avons utilisée sur le bouton pour l'image de héros; ajoutez le texte «Ajouter au panier» avec l'outil Texte (T); et ajoutez l'icône du panier de la bibliothèque. Toutes ces étapes sont traitées dans la courte vidéo ci-dessous:

Enfin, cliquez sur «Repeat Grid» pour créer une grille pour cette section. Une fois cela fait, nous pouvons facilement modifier les images et le texte, comme le montre la vidéo ci-dessous:

Si vous voulez en savoir plus sur la création de grilles, suivez mon tutoriel .

J'ai utilisé les images suivantes de Pexels:

• https://www.pexels.com/photo/close-up-of-food-247685/
• https: //www.pexels. com / photo / repas-dîner-pâtes-spaghetti-8500 /
• https://www.pexels.com/photo/selective-focus-photography-of-beef-steak-with-sauce-675951/
• https://www.pexels.com/photo/food-plate-chocolate-dessert-132694/
• https://www.pexels.com/photo/bread-food-sandwich-wood-62097/

Ajouter des titres, des descriptions et des boutons.

Enfin, ajoutons un rectangle au pied de page, avec le texte «Gusto» au centre. Définissez la couleur de remplissage du rectangle sur # 211919 .

Oui! Nous avons terminé la première conception de modèle. Mettons en place notre deuxième modèle avant de commencer le prototypage.

Pour notre deuxième mise en page mobile, copiez et collez la section de navigation et de héros de la première mise en page et redimensionnez l'image de héros en plein écran. Ensuite, ajoutez un bouton «Essayer maintenant».

Dans la courte vidéo ci-dessous, je vous montre comment copier et coller des éléments dans la deuxième planche graphique, créer un nouveau bouton avec l'outil Rectangle (R) et écrire du texte sur avec l'outil Texte (T).

Excellent! Passons maintenant à la création de nos prototypes.

Définir les éléments fixes

Nous voulons corriger la navigation supérieure de notre mise en page, en la plaçant dans la planche graphique.

Cliquez sur votre "Menu" groupe pour le sélectionner, et sélectionnez «Position fixe» dans la barre latérale droite.

Important: Pour que tous les éléments défilent sous le menu, le menu devrait s'afficher sur tous les autres éléments. Placez simplement le dossier de menu en haut, dans la barre latérale gauche.

Maintenant, pour voir votre navigation fixe en action, cliquez simplement sur le bouton "Desktop Preview" et essayez de faire défiler. Vous devriez voir ceci:

Extrêmement simple, n'est-ce pas?

Définition des éléments de recouvrement

Pour voir comment les superpositions fonctionnent dans XD, nous devons d'abord créer les éléments être superposé. Lorsque vous cliquez sur un élément du menu, à quoi vous attendriez-vous? Exactement: un sous-menu devrait apparaître.

Créons trois sous-menus différents, comme ceux de l'image ci-dessous, à l'aide de l'outil Rectangle (R). J'ai choisi un rectangle car le menu recouvrira l'écran, il ne couvrira donc pas la totalité de la planche graphique, mais seulement une partie.

Suivez la vidéo ci-dessous pour voir comment j'ai créé les trois menus superposés. Vous verrez que j'ai utilisé l'outil Rectangle (R), l'outil Ligne (L) et l'outil Texte (T). Nous utilisons des rectangles pour créer les arrière-plans de menu car nous avons besoin d'un objet pour superposer l'écran. J'ai inclus les icônes dans le fichier Adobe Illustrator .

Ci-dessous, vous verrez comment j'utilise "Repeat Grid" et comment je modifie les éléments qu'il contient.

Voici le résultat final:

Définissez le mode visuel sur “Prototype” en le sélectionnant en haut à gauche de l'écran.

Double-cliquez ensuite sur la petite icône du menu hamburger et faites glisser la petite flèche bleue sur la planche graphique «Overlay 1». Lorsque la fenêtre contextuelle apparaît, choisissez «Overlay» et «Slide right». Ensuite, cliquez sur le bouton «Desktop Preview» pour le voir en action.

Faisons la même chose avec l’icône de l’utilisateur et l’icône du panier. Double-cliquez sur l'icône de l'utilisateur en mode Prototype, puis faites glisser la petite flèche bleue sur la planche graphique «Overlay 2». Lorsque la fenêtre contextuelle apparaît, choisissez “Overlay” et “Slide left”. Cliquez ensuite sur le bouton «Desktop Preview» pour le voir en action.

Double-cliquez sur l’icône du panier en mode Prototype, puis faites glisser la petite flèche bleue sur la Overlay 3 ”artboard. Lorsque la fenêtre contextuelle apparaît, choisissez “Overlay” et “Slide left”. Cliquez à nouveau sur le bouton "Aperçu du bureau" pour le voir fonctionner.

Nous avons terminé! Ces nouvelles fonctionnalités géniales sont extrêmement faciles à apprendre et elles ajouteront un nouveau niveau de simulation d’interactivité à vos prototypes.

Conseil rapide: Vous souhaitez prévisualiser la mise en page sur votre téléphone? Il vous suffit de télécharger votre fichier XD sur Creative Cloud, de télécharger l'application XD pour mobile et d'ouvrir votre document.

Voici ce que nous avons appris dans ce didacticiel:

• définissent des éléments fixes,
• utilisent des superpositions pour simuler un sous-menu click-to-open.

Où utiliseriez-vous des éléments fixes ou des superpositions? N'hésitez pas à partager vos exemples dans les commentaires ci-dessous!

(il, yk)