Comment créer un prototype haute fidélité avec Sketch

Utiliser Anima Toolkit pour concevoir des prototypes réalistes plus rapidement

Les prototypes statiques de type présentation sont parfaits pour voir un flux de produits. Mais lorsqu'il s'agit de vraiment sentir le produit et de faire des tests de convivialité, nous avons généralement besoin d'un développeur.

Les prototypes haute fidélité nous permettent de tester l'expérience utilisateur sans passer par un processus de développement.
Prototype Haute Fidélité - Créé entièrement en Sketch, en quelques minutes.

Anima Toolkit est un outil permettant de créer des prototypes haute fidélité interactifs et réactifs, tous à l'intérieur du croquis. Ch

Les bases en 20 secondes

Commencez par installer Anima Toolkit for Sketch.

  • Créer un lien - Sélectionnez un calque, cliquez sur "Prototype> Flux> + Lien", sélectionnez la planche d’art cible. Oh, vous pouvez aussi utiliser les liens natifs Sketch.
  • Aperçu dans le navigateur - Sélectionnez votre planche d’art personnelle, cliquez sur "Aperçu du site Web".

Maintenant, vous pouvez voir votre conception en direct dans le navigateur. Boom.

Les bases: créer des liens et prévisualiser un site Web

Exemple de tableau de bord

Dans cet article, nous utiliserons un exemple de tableau de bord pour passer en revue les principales fonctionnalités et expliquer comment créer des prototypes impressionnants et réalistes en quelques minutes.

  • Téléchargez le fichier Sketch ici.
  • Visitez le prototype en direct ici.
https://dashboard-sample.animaapp.io

Liens

Sélectionnez un calque pour l'ajouter à un lien. Cliquez sur le bouton Liens dans le panneau Anima, puis sélectionnez la planche graphique cible.

Créer un lien. Vous pouvez également utiliser les liens natifs Sketch.
Astuce: Liens dans les symboles - Si vous avez un ensemble de liens répétitif, tel que la barre de gauche sur notre tableau de bord, placez Symbol Masters sur la même page que votre conception. Ensuite, créez simplement un lien depuis l'intérieur de ce symbole. L'astuce consiste à créer un autre plan de travail, en le transformant en symbole. Il restera sur la même page.

Définir un Artboard à la maison

Lorsque vous utilisez plusieurs plans de travail (plusieurs pages de sites Web), informez Anima de votre page d'accueil en développant le panneau, en sélectionnant le plan de travail principal et en cliquant sur l'onglet Prototype> Flux> Définir comme page d'accueil.

Sélectionnez Artboard, onglet Prototype> Flux> Définir comme page d'accueil.

Aperçu dans le navigateur

Jusqu’à présent, nous avons créé une planche d’art à la maison et créé un lien: il est temps de la voir prendre vie. Appuyez sur "Aperçu dans le navigateur".

Disposition sensible avec l'onglet Disposition

Nous voulons que notre conception soit réelle, non étirée et centrée lorsque la taille du navigateur change. Passons à l’onglet le plus à gauche - Mise en page.

Si vous n’aviez jamais vu nos outils de mise en page auparavant, voici un guide rapide:

Voici comment nous avons utilisé les repères pour rendre l’exemple ci-dessus sensible. Les repères fonctionnent de la même manière dans Sketch et lorsque vous affichez un aperçu dans le navigateur.

Comment nous avons configuré les punaises de mise en page sur le formulaire de connexion
Conseil: développez le panneau pour obtenir plus de contrôle, c’est-à-dire utilisez des valeurs en pourcentage, une largeur maximale, etc.

Les interactions

En utilisant l'éditeur d'interaction, vous pouvez créer des interactions impressionnantes directement dans Sketch. Commençons par l’exemple de commutateur de la page "Paramètres" du tableau de bord.

Changer de comportement sur notre prototype

La meilleure pratique consiste à créer des interactions à l'intérieur de symboles. Lorsqu'il est utilisé à l'intérieur d'un symbole, vous pouvez réutiliser ces interactions ou même créer une bibliothèque interactive.

Créer une interaction à partir d'un symbole

Sélectionnez le symbole Switch, accédez à l’onglet Prototype et cliquez sur "Créer" dans la section Interaction.

Une fois dans l'éditeur d'interaction, vous pouvez voir qu'un deuxième état a déjà été créé pour vous. Les états commencent à partir de la conception de votre symbole d'origine. Modifiez les propriétés des calques que vous souhaitez animer.

Pour ajouter une action, choisissez le calque auquel vous souhaitez ajouter une action, puis cliquez sur la petite icône représentant un éclair.

En utilisant la timeline en bas, vous pouvez ajuster la synchronisation et les courbes pour perfectionner vos animations.

Effet de survol

Pour cette interaction, nous avons réutilisé un seul symbole interactif et les remplacements Sketch utilisés pour modifier le contenu de l'étiquette.

À l'aide de l'outil Interaction de l'onglet Prototype, nous avons créé une interaction à deux états. Les événements d’action que nous avons utilisés ici sont «Mouse Enter» et «Mouse Leave» pour que cela fonctionne en survol.

Création d'un effet de survol dans Anima Interaction Editor

Animations temporelles

Lors de la création d’interactions avec l’éditeur d’interaction d’Anima, il est souvent utile d’utiliser un événement Timer. Ce qui signifie que l'utilisateur n'effectue aucune interaction - la transition commence par elle-même.

Dans l'éditeur Anima Interaction, utilisez l'événement Timer.

Afficher une superposition

Les superpositions ressemblent beaucoup aux liens, à la différence qu’elles ont un arrière-plan transparent et qu’elles apparaissent en haut de la page d’origine. Dans notre exemple, dans la page des paramètres, le mode de paiement est une superposition.

https://dashboard-sample.animaapp.io/settings

Tout comme nous avons créé un lien, sélectionnez un calque pour l’ajouter à un lien superposé. Cliquez sur le bouton + Lien et sélectionnez la planche graphique cible. A présent, marquez-le comme une superposition dans le panneau Lien.

Anima Links peut afficher la planche graphique cible en superposition flottante

Conseils:
1. Modifiez la couleur d'arrière-plan de la planche graphique en une couleur transparente.
2. Lorsque l'écran d'origine défile, mais que la superposition n'en contient pas, sélectionnez le plan de superposition et réglez-le. C’est juste à côté de la superposition.

Champ de texte en direct, vidéos et plus

Sélectionnez le calque de texte que vous souhaitez introduire. Onglet Prototype> Calques intelligents> Formulaires, sélectionnez Saisie de texte.

Onglet Prototype> Calques intelligents> Formulaires

Sous Smart-Layers, vous trouverez également le bouton Vidéo, ce qui vous permettra de créer des vidéos et de les transformer en vidéo intégrée. Les vidéos ne sont lues que dans le navigateur, pas dans Sketch. Les effets de survol, les animations d'entrée, les positions fixes, un code d'intégration même est également possible avec Smart-Layers.

Voulez-vous en savoir plus?

  • La collaboration d'équipe
  • Comment exporter du HTML
  • Page de documentation complète Anima: docs.animaapp.com
  • Plus de tutoriels sur notre centre de support

C’est tout pour le tutoriel d’aujourd’hui, nous espérons que cela vous a plu.

Participez à la discussion ou montrez simplement vos créations sur Facebook ou Twitter.
l'équipe Anima