Instructions sur lutilisation du prototypage dans Sketch

Avec le prototypage dans Sketch , vous pouvez prévisualiser les conceptions avec des interactions vives. Pour utiliser la fonction de prototypage de Sketch, vous devez utiliser Artboard dans un document.

C'est formidable que l'éditeur ait inclus le didacticiel sur le prototypage dans l'onglet Modèles de la fenêtre Documents de Sketch for Mac. En outre, vous pouvez vous référer aux instructions ci-dessous pour utiliser immédiatement le logiciel de conception graphique Prototyping in Sketch.

Ajouter un lien

Le moyen le plus rapide pour créer un prototype est d'ajouter un lien entre les deux plans de travail. Vous pouvez ajouter des liens depuis n'importe quelle couche vers n'importe quel plan de travail.

Pour ajouter un lien, sélectionnez le calque> cliquez sur à +côté de Prototypage dans l'inspecteur (ou cliquez sur W), puis cliquez sur la planche graphique que vous souhaitez lier au calque.

Comment modifier le lien

Dans l'inspecteur, vous pouvez choisir la façon de transférer un lien qui ressemblera via les boutons d' animation et modifier le lien qui vous amène à Artboard à l'aide du menu déroulant Cible .

Sélectionnez « Plan de travail précédent » dans le menu Cible pour demander à Sketch de renvoyer le plan de travail dont vous prévisualisez la planche à dessin actuelle. Cette fonctionnalité est extrêmement utile lorsque vous disposez de plusieurs liens menant à un plan de travail.

Comment supprimer un lien

Choisissez Prototypage> Supprimer les liens de la sélection , définissez la cible du lien sur Aucun  ou cliquez sur l'icône de la corbeille dans la section Prototypage de l'inspecteur pour déplacer un lien.

Ajouter un hotspot

Hotspot vous donne plus de contrôle que Link et est utile lorsque vous souhaitez créer une zone cliquable plus grande qu'un calque séparé.

Pour ajouter un Hotspot, sélectionnez Insérer> Hotspot (ou cliquez sur H), puis cliquez et faites glisser pour dessiner la zone Hotspot. Ensuite, cliquez sur le plan de travail que vous souhaitez lier à Hotspot.

Vous pouvez modifier l'animation du point d'accès et du plan de travail cible, dans l'inspecteur, comme vous le pouvez avec Link.

Comment transformer un lien en un hotspot

Sélectionnez un lien et cliquez sur l'icône " Créer un hotspot " dans l'inspecteur pour le transformer en hotspot.

Comment fixer l'emplacement d'un Hotspot

Sélectionnez Hotspot, puis cochez la case Fix position when scrolling dans l'inspecteur pour fixer sa position sur le canevas même le reste de la page de défilement des calques.

Comment utiliser Hotspot avec Symbol

Si vous utilisez un hotspot dans le cadre d'un symbole, vous pouvez réutiliser ce symbole mais écraser chaque cible de hotspot. Vous pouvez également remplacer l'objectif du Hotspot par Aucun si vous ne souhaitez pas créer de lien vers un autre plan de travail.

Comment masquer le lien et le hotspot

Sélectionnez Affichage> Afficher le prototypage (ou appuyez sur Ctrl+ F) pour masquer les chemins d'accès représentant différents lien de prototypage et point d'accès. Vous pouvez également changer la couleur dans le canevas dans Préférences .

Créer des éléments fixes

Pour créer un élément permanent, sélectionnez le calque ou le Hotspot et cochez Fix position lors du défilement dans la section Prototypage d'Inspector. Vous pouvez également sélectionner Prototypage ›Fixer la position du calque lors du défilement dans le menu.

Par exemple, cela est utile lorsque vous souhaitez figer une rangée d'onglets sous la conception de l'application ou avoir un bouton flottant sur le Web.

Comment créer un plan de travail déroulant

Si vous souhaitez créer un prototype avec des éléments de défilement, vous devez choisir un préréglage de plan de travail ou créer un préréglage personnalisé et régler sa hauteur. Sans utiliser le préréglage et dessiner un plan de travail personnalisé, votre prototype ne défilera pas et n'apparaîtra pas dans l'état réduit de l'application, sur Sketch Cloud et Sketch Mirror.

Pour créer un prototype déroulant à partir d'un préréglage de plan de travail, choisissez votre préréglage et modifiez sa hauteur sur la toile. Lorsque vous effectuez cette opération, le nom prédéfini dans l'inspecteur change pour inclure le mot redimensionné .

Pour créer un préréglage de taille personnalisée pour le plan de travail, sélectionnez Créer une taille personnalisée en bas de l'inspecteur. Confirmez la taille et le nom de votre planche graphique, puis modifiez sa hauteur sur la toile. Comme d'autres préréglages réguliers, son nom dans l'inspecteur changera pour inclure le mot redimensionné .

Utilisez le point de départ

Le point de départ vous permet de sélectionner le plan de travail que le prototype démarre lors de sa prévisualisation. Pour définir un point de départ, ouvrez le prototype dans la fenêtre d' aperçu , sélectionnez Plan de travail dans le menu déroulant et cliquez sur le bouton indicateur à côté.

Chaque fois que vous prévisualisez le prototype, vous commencerez toujours avec le plan de travail sélectionné comme point de départ. Pour supprimer un point de départ, sélectionnez ce plan de travail dans la fenêtre Aperçu et cliquez à nouveau sur le bouton indicateur.

Définir plusieurs points de départ

Vous pouvez placer plusieurs points de départ pour guider les utilisateurs à travers différents aspects de conceptions plus complexes (par exemple, les processus d'enregistrement et de configuration utilisateur). Chaque fois que vous placez un nouveau point de départ, il apparaîtra comme un autre prototype dans le même document dans Sketch Cloud.

Aperçu du prototype

Il existe 3 façons de prévisualiser le prototype - dans l'application Sketch, sur un appareil iOS à l'aide de Sketch Mirror ou dans Sketch Cloud où vous pouvez partager des prototypes avec d'autres.

Comment prévisualiser un prototype dans une application Mac

Pour prévisualiser votre travail dans l'application Esquisse, cliquez sur le bouton Aperçu dans la barre d'outils. Si vous avez défini un point de départ, votre prototype commencera ici. Sinon, il commencera à partir du plan de travail actuellement sélectionné.

1. Cliquez n'importe où dans la fenêtre d'aperçu pour voir les cibles qui se touchent . Ils vous indiquent où Link et Hotspot se trouvent sur le plan de travail actuel.
2. Le bouton Retour vous ramène à l'étape précédente du plan de travail du prototype.
3. Le menu déroulant Plan de travail vous permet de vous déplacer rapidement entre différents plans de travail.
4. L'icône de drapeau qui définit le plan de travail que vous visualisez actuellement comme point de départ.

Comment prévisualiser un prototype dans Sketch Cloud

Lorsque vous ouvrez un document dans Sketch Cloud, vous verrez que chaque prototype qu'il contient se trouve dans la partie supérieure de la fenêtre de présentation du document. Cliquez sur l'image miniature du prototype pour l'ouvrir et la prévisualiser dans le navigateur.

Comme la fenêtre d'aperçu sur une application Mac, cliquer n'importe où sur l'écran mettra en surbrillance n'importe quel point d'accès ou lien. Pour revenir d'une étape au plan de travail précédent, cliquez sur le bouton Précédent dans le navigateur.

Si des commentaires ont été activés sur le document, toute personne qui affiche votre prototype peut choisir Afficher le plan de travail au bas de la fenêtre pour quitter le prototype et entrer dans la fenêtre de vue statique de ce plan de travail. Ici, vous pouvez laisser un commentaire dans la barre latérale. Pour fermer Prototype et revenir à l'aperçu du document, sélectionnez Fermer .

Comment prévisualiser un prototype dans Sketch Mirror

Ouvrez l'application Sketch Mirror sur votre appareil iOS et connectez-vous via USB ou Wi-Fi, puis cliquez sur la notification dans le coin supérieur de la fenêtre de l'application Sketch pour vous connecter.

Dans Sketch Mirror, touchez un plan de travail pour commencer à prévisualiser votre prototype. Ici, vous pouvez toucher le lien et le point d'accès pour naviguer dans le prototype ou faire glisser un plan de travail vers le bas pour le fermer.

Ci-dessus est un guide sur la façon d'utiliser les fonctionnalités de prototypage dans l' esquisse la plus simple. J'espère que l'article vous sera utile.