Concevez des prototypes réalistes avec Proto.io

Prototypage: juxtacaption

Apprentissage comment créer une application est un processus qui nécessite une planification minutieuse, avec de nombreux éléments à considérer. La conception d'applications à écran tactile exige en fin de compte des prototypes qui semblent réels. Malgré cela, lorsque nous visons une application basée sur les gestes avec une animation interactive, nous déclinons souvent notre réflexion conceptuelle dans des outils de conception statiques. Ne devrions-nous pas baser nos explorations dans un outil d'animation interactif?

Semblable à la façon dont le langage filtre notre perception, notre outil filtre notre façon de penser à travers les solutions. Nous voulons rester dans le courant et ne pas basculer constamment entre les outils pour explorer des solutions de conception. Nous avons rarement besoin de prototyper avec la perfection vectorielle, mais nous avons besoin d'actifs de prototypage suffisamment bons.



Proto.io sert de plusieurs outils de prototypage visuel en un. Vous pouvez importer des compositions à lier dans des flux et des couches d'actifs à animer. Mais vous pouvez également créer des actifs avec une fidélité suffisamment élevée à la volée et personnaliser des bibliothèques de composants natifs pour iOS, watchOS et Material Design.

Dans ce didacticiel, nous allons prototyper un concept de produit pour juxtaposer deux photos et saisir une légende sur la connexion entre elles. Cela devrait ressembler à ce .

Nous commencerons par apporter une gamme d'actifs externes. Ensuite, nous allons concevoir des ressources et personnaliser les composants natifs de l'outil. Les interactions seront déclenchées par des gestes, une saisie au clavier et automatiquement lors du chargement du prototype, puis chorégraphiées le long d'une chronologie d'animation.

Étape 01

Prototypage: nouveau projet

Tout d'abord, vous devrez vous rendre sur Proto.io et vous inscrire pour un essai. Démarrez un nouveau projet et nommez-le «Juxtacaption». Sélectionnez la taille de l'écran de l'iPhone 6 (750x1334) et appuyez sur Créer un projet. Survolez la vignette du projet et cliquez sur Modifier le projet pour ouvrir l'éditeur.

Étape 02

J'ai créé un dossier d'actifs pour ce projet. En bas à droite de l'éditeur, vous trouverez vos options pour les ajouter au projet. Vous pouvez également les faire glisser directement sur le canevas.

Étape 03

Double-cliquez sur 'opening-photo-bottom.jpg' (la section transversale du tronc d'arbre) pour l'ajouter au canevas. Faites-le glisser vers le bas jusqu'à ce qu'il s'aligne sur le bord. Ensuite, faites glisser 'opening-photo-top.jpg' (grande roue) sur le canevas et positionnez-le de sorte qu'il se trouve juste au-dessus de l'image de l'arbre. Ajoutez maintenant «logo.png» au canevas. Sous Taille et pos., Définissez sa marge gauche sur 140 et sa marge supérieure sur 120.

Étape 04

Créons un actif natif. Sur votre toile affichez l'outil Texte (T), puis cliquez sous l'en-tête sur le bord gauche. Tapez 'Légende la connexion entre deux photos' et placez-la au centre horizontal de la toile.

Étape 05

Nous allons ajouter une police Web. Accédez à Propriétés> Texte> Gérer les polices Web du projet. Recherchez «Catamaran» et appuyez sur retour. Cliquez sur Tout ajouter. Maintenant, de retour dans la liste déroulante du texte, sélectionnez Catamaran 300 et définissez la taille sur 34. Alignez le texte au centre.

Étape 06

Prototypage: bouton

Ajoutons l'actif bouton. Faites glisser 'button.png' sur le canevas vers le bas, et positionnez-le à gauche 175, top 1070. Si à tout moment vous souhaitez prévisualiser le projet, vous pouvez simplement cliquer sur Aperçu en haut à droite.

Étape 07

Prototypage: nouvel écran

Survolez la liste déroulante Écrans en haut à gauche et sélectionnez Ajouter un nouvel écran. Intitulez-le «Écran: Principal» et appuyez sur OK. Cela formera notre deuxième écran, qui contiendra le contenu de la photo et des légendes du prototype.

Étape 08

Sur le canevas, utilisez le raccourci cmd + F pour afficher la fonction de recherche. Tapez 'statusbar' pour rechercher des actifs. Double-cliquez sur la barre iOS standard pour l'ajouter. Sous Propriétés, nous pouvons changer la couleur d'arrière-plan (j'ai opté pour le bleu). Faites glisser la nuance choisie dans la zone des couleurs enregistrées pour l'utiliser plus tard.

Étape 09

Dans Proto.io, si le contenu doit défiler au-delà de la longueur de l'écran, il doit être placé dans un conteneur. Pour ce faire, allez dans Conteneurs> Ajouter un nouveau conteneur et nommez-le «Conteneur: Défilement du contenu principal». Modifiez la hauteur du conteneur sur 2000.

Étape 10

Ajoutons les photos à cette deuxième vue. Double-cliquez sur «juxtaphoto_1.jpg» (fleurs) et centrez-le horizontalement le long du bord supérieur de la toile. Vous pouvez effectuer un zoom avant et arrière à l'aide de cmd + 1 (pour zoomer à 100%) et cmd + 0 (pour revenir à la vue agrandie).

Étape 11

Faites glisser «juxtaphoto_2.jpg» (cupcake) directement sous la photo du haut. Cela veut avoir une marge supérieure de 455, donc il se trouve 5px sous l'image de la fleur. Faites glisser «juxtaphoto_3.jpg» (crêpes) en dessous (marge gauche 11, marge supérieure 1000) et «juxtaphoto_4.jpg» (face), en bas (marge gauche 11, marge supérieure 1455).

Étape 12

Dans la zone Composants, faites défiler jusqu'à Formulaires et faites glisser le champ de texte afin qu'il se trouve sous la photo du haut. Ajustez sa taille à 600x120px et positionnez-le sur la jointure entre les deux images du haut. Sous Propriétés, ajustez le style. J'ai choisi un fond blanc et un rayon de bordure de 10.

Étape 13

Prototypage: propriétés

Pendant que vous êtes toujours dans l'onglet Propriétés, ajustez votre texte. Nous utilisons le Catamaran 300, taille 40, bleu et aligné au centre. Définissez le champ de texte d'espace réservé sur «tapez une juxtacaption».

Étape 14

Nous voulons que ce champ de saisie de texte ait deux états, le premier pour saisir le texte et le second pour afficher ce qui a été tapé. Cliquez avec le bouton droit sur le champ de saisie de texte et sélectionnez Convertir en conteneur. Dans le panneau Calques, double-cliquez sur 'Champ de texte 1' et renommez l'entrée de texte du calque.

Étape 15

En haut du canevas du conteneur, cliquez sur le symbole + en regard de l'état 1 pour ajouter un nouvel état. Dans l'état 2, cliquez pour sélectionner le champ de saisie de texte et supprimez-le.

Étape 16

Appuyez sur R et ajoutez un rectangle 600x120px. Rendre l'arrière-plan bleu et le rayon de la bordure 10. Tapez T et cliquez pour insérer du texte. Modifiez le style de texte pour qu'il corresponde au texte de l'état 1, mais cette fois, il veut être blanc au lieu de bleu. Ajustez la hauteur de la ligne à 50.

Étape 17

Redimensionnez la zone de texte de 570 x 100 et centrez-la horizontalement et verticalement. Remplacez le texte par «votre juxtacaption». Revenez à Conteneur> Défilement du contenu principal.

Étape 18

Nous allons maintenant inclure certains éléments de Material Design dans notre conception. En haut du panneau des composants, accédez à Material Design> Buttons et faites glisser le bouton d'action rond en bas à droite du conteneur de champ de saisie de texte. Modifiez la couleur d'arrière-plan du bouton d'action en bleu enregistré. Dans le champ de l'icône, tapez «vérifier» et choisissez le premier bouton à cocher. Dans la liste déroulante des effets d'entraînement, sélectionnez Lumière.

Étape 19

Prototypage: actions

Maintenant, nous allons faire quelque chose d'un peu plus avancé (c'est toujours simple, je le promets). Pour utiliser la légende saisie, nous devons définir une variable qui modifie la zone de texte résultante pour afficher cette légende. Sélectionnez le bouton Action et accédez à Interactions> Ajouter des interactions. Réglez le déclencheur sur Tap et l'action sur Définir la variable.

Étape 20

Définissons une variable qui saisit ce qui est tapé dans le champ de saisie de texte. Sélectionnez Nouvelle variable et nommez-la «juxtacaption». Ensuite, sélectionnez Texte, cochez Évaluer la variable, Définir la valeur de la propriété de l'élément, Conteneur actuel. Sous élément, sélectionnez la saisie de texte et pour la propriété, sélectionnez Valeur. Cochez Callback pour enchaîner une autre action.

Étape 21

Une nouvelle fenêtre devrait apparaître pour Callback 1. Ici, nous enchaînerons une autre action qui lit la variable pour changer la zone de texte en ce qui a été tapé. Pour l'action, sélectionnez Modifier la propriété (sous Logique), puis choisissez Conteneur actuel, votrejuxtacaption , Texte, Lire à partir d'une variable, juxtacaption. Enregistrez maintenant votre interaction.

Étape 22

Prototypage: faites-le défiler

Maintenant, ajoutons le conteneur de contenu principal et rendons-le défilable. Allez dans Écrans> Écran: Principal. Une fois sélectionné, passez sur Conteneurs> Conteneur: Défilement du contenu principal, puis cliquez sur Ajouter au canevas.

Étape 23

Définissez un guide horizontal sur 160 et abaissez le conteneur pour qu'il s'enclenche sur le guide. Allez au bas de l'écran et faites glisser la poignée du conteneur central pour qu'elle s'aligne sur le bord inférieur de la zone de dessin de l'écran.

Étape 24

Prototypage: scroll vertical

Définissons le conteneur principal pour qu'il défile verticalement. Sélectionnez le conteneur, accédez à Propriétés et choisissez Verticalement dans la liste déroulante Propriétés de défilement. Maintenant, double-cliquez sur l'élément 'header.png' pour l'ajouter. Positionnez ce 225 gauche et le haut 85.

Étape 25

Double-cliquez sur le conteneur et sélectionnez le bouton Action. Sous Interactions, sélectionnez Ajouter une interaction, Appuyez sur, Modifier l'état du conteneur, Conteneur actuel, Conteneur du champ de texte 1, État 2.

Étape 26

Déclenchons le timing du contenu principal pour qu'il apparaisse étape par étape, suggérant quoi faire avec le prototype. Sélectionnez le conteneur Champ de texte 1 et déplacez-le vers le bas de 25 pixels à 417 pixels à partir du haut.

Étape 27

Nous devons maintenant ajouter un nouvel état (dans Conteneurs> Défilement du contenu principal). Déplacez le conteneur «Champ de texte 1» vers le haut de 25 pixels à 392 et modifiez son opacité à 0,9. Revenez à l'état 1 et sélectionnez tout le contenu du canevas (cmd + A). Changez l'opacité à 0 et appuyez sur retour. Revenez à l'état 2. La chronologie au bas du canevas montre tous les calques avec des propriétés modifiées entre les états 1 et 2.

Étape 28

Sélectionnez à la fois «juxtaphoto_1.jpg» et «juxtaphoto_2.jpg» dans la chronologie et faites glisser l'un de leurs curseurs d'animation sur 0,5 durée. Cliquez sur le curseur d'animation 'juxtaphoto_2.jpg' et modifiez le délai à 0,4. Faites glisser le curseur d'animation pour «Conteneur du champ de texte 1» sur 0,6 et modifiez le délai sur 0,7.

Étape 29

Faites glisser le curseur d'animation pour «juxtaphoto_3.jpg» sur une durée de 0,5, avec un délai de 1,3. Conservez les courbes quadruples d'accélération par défaut. Faites glisser le curseur d'animation du bouton d'action sur une durée de 1 s, avec un délai de 1,3 s.

Étape 30

Ainsi, le conteneur passe automatiquement à l'état 2, vous devez définir une interaction d'écran. Accédez à Écrans> Écran: Principal> Interactions> Ajouter une interaction. Réglez le déclencheur sur Afficher l'écran, l'action sur Modifier l'état du conteneur, l'écran principal, le conteneur principal Défilement du conteneur, l'état 2. Enregistrez votre interaction.

Étape 31

Ajoutons maintenant une transition entre les deux écrans. Tout d'abord, allez à l'écran 1. Sélectionnez «button.png», allez dans l'onglet Interactions et Ajouter une interaction. Sélectionnez Tap, Aller à l'écran, Principal et Glisser vers la gauche.

Étape 32

Pour revenir en arrière, allez dans «Écran: Principal», sélectionnez le «Conteneur: Défilement du contenu principal» transparent et ajoutez une interaction. Sélectionnez Balayer vers la droite, Aller à l'écran: Écran 1, Glisser vers la droite.

Étape 33

Voyons le prototype! Enregistrez le projet, puis prévisualisez-le. Pour partager le projet, retournez dans l'Éditeur, Partager> Publier> Partager avec tout le monde> Publier. Appuyez sur Continuer> Afficher> onglet d'icône de partage - cela vous donnera le lien, afin que vous puissiez partager votre prototype avec qui vous voulez. Profitez!

Mots : Todd Siegel

Todd Siegel est un concepteur UX et un évangéliste de produits chez Proto.io. Cet article a été initialement publié dans le numéro 276 de magazine net .

Comme ça? Lisez ces: