Prototyper une visite interactive de produit iOS avec Framer.js

Framer.js et son écosystème, Framer Studio, sont d'excellents outils pour la composition, la présentation et l'itération lors de la conception d'interactions. Dans cet article, je vais vous expliquer comment construire un prototype interactif pour une visite guidée du produit d'une application iOS fictive à l'aide d'Adobe Photoshop CC 2014 et de Framer Studio 1.9.29. Nous supposerons que nous créons une application de flux d'actualités dans laquelle les mises à jour du réseau de l'utilisateur sont affichées dans une chronologie, tandis que les paramètres et les options supplémentaires sont affichés dans une barre latérale..

Jouez avec le prototype sur la page de démonstration (les navigateurs Web-Chrome, Chrome, Safari, etc. sont pris en charge).

1. Configuration initiale

Créer des actifs dans Photoshop

Commencez par créer vos ressources dans Photoshop. La visite du produit se déroulera en quatre étapes:

Introduction à l'application
Introduction au fil d'actualité
Introduction à la barre latérale
Écran de connexion

Lorsque vous travaillez avec Framer, il est important de noter que seuls les calques Photoshop visibles et groupés seront importés dans Framer Studio. Regroupez vos couches par interaction (par exemple, les éléments qui ont la même interaction doivent être regroupés), car vous accéderez aux éléments par leur nom de groupe lorsque vous travaillerez dans Framer. Pour cette visite du produit, j'ai regroupé mes couches en fonction de leur fonction:

Ces couches seront accessibles dans le code ultérieurement via myLayers.doneButton, myLayers.dots, etc.

Importer dans Framer Studio

Ensuite, importez vos ressources de Photoshop dans Framer Studio. Votre document Photoshop doit être ouvert et enregistré lors de l'importation. Clique le Importation bouton, et vous verrez une boîte de dialogue qui ressemble à ceci:

Framer convertira vos groupes en images lors de l'importation et vos ressources seront accessibles dans Framer une fois l'importation terminée..

Utiliser des variables pour manipuler facilement plus tard

Il est recommandé de transformer vos objets groupés importés en variables une fois que vous avez importé dans Framer, car cela vous permettra de manipuler le prototype ultérieurement si vous en avez besoin..

Par exemple, vous souhaiterez peut-être utiliser ultérieurement un fichier Photoshop différent avec des groupes portant un nom différent, mais avec les mêmes interactions que celles que vous avez déjà créées. Cela sera beaucoup plus facile si vous structurez vos interactions autour de noms de variables, car vous pouvez simplement changer la référence de la variable sur une ligne et la faire apparaître dans le reste du document:

# Ceci importe toutes les couches pour "tour" dans tourLayers ly = Framer.Importer.load "importer / tour" ## ------------------- VARIABLES ---- ----------------- bienvenue = ly.welcome dots = ly.dots moveDot = ly.movingDot done = ly.doneButton login = ly.login logo = ly.logo news = ly .newsFeed siderbar = ly.siderbar gradient = ly.gradient background = ly.background feedDescription. ly.feedDescription

Maintenant que nous disposons de certains atouts, vous pouvez commencer à créer les interactions qui donneront vie à votre prototype..

États d'utilisation

Si vous avez des actifs qui auront des interactions différentes au sein de votre composition, les états sont un moyen puissant de structurer votre code. Dans ce prototype, les quatre étapes de la visite utiliseront différentes ressources de différentes manières. Les états nous donneront la souplesse nécessaire pour définir chaque élément de la composition de manière indépendante, augmentant ainsi la modularité et la lisibilité du code..

Par exemple, notre écran de flux de nouvelles aura quatre états:

Original (côté droit de l'écran, non visible)
Montré (centre de l'écran)
Barre latérale (à l'extrême droite de l'écran)
Caché (côté gauche de l'écran, non visible)

Nos états refléteront ces positions en définissant différents X valeurs basées sur l'endroit où le fil d'actualités doit être dans une partie donnée de la tournée:

news.states.add origine: x: 750 affichée: x: news.originX barre latérale: x: 655 cachée: x; -750

2. Interactions de structure dans l'encadreur

Activer le glisser sur des calques

Pour la visite guidée du produit, nous souhaitons illustrer différentes zones de l'application après qu'un utilisateur a glissé vers la gauche pour accéder à la partie suivante de la visite guidée du produit. Pour ce faire, commencez par activer le glissement sur les calques là où vous le souhaitez..

Créer un tableau:

dragLayers = [bienvenue, dégradé, dégradé2]

Puis créer un pour boucle pour parcourir ce tableau, en ajoutant des propriétés déplaçables à ces couches:

pour glisser dans dragLayers # Activez le glissement drag.draggable.enabled = true drag.draggable.speedY = 0 # Empêchez le glissement de gauche à droite drag.draggable.maxDragFrame = drag.frame drag.draggable.maxDragFrame.width * = 2 drag.draggable. maxDragFrame.x = drag.x-drag.width

enabled = true permet de faire glisser le calque
speedY = 0 désactive le glissement le long de l'axe des ordonnées
maxDragFrame = drag.frame définit le cadre dans lequel on peut faire glisser pour rester dans le calque lui-même
maxDragFrame.x = drag.x-drag.width permet au cadre d'être glissé négativement le long de l'axe des x (c'est-à-dire de droite à gauche)

Changer les états lorsque traîné au-delà d'un certain point

Après avoir activé le déplacement sur les calques de votre choix, ciblez-les et modifiez les états de vos actifs lorsqu'ils sont déplacés dans une certaine mesure..

welcome.on Events.DragEnd, -> si welcome.screenFrame.x < -150

Lorsque l'utilisateur a fini de faire glisser le curseur Bienvenue calque, s’ils l’ont fait glisser au-delà de 150 pixels vers la gauche (screenFrame.x < -150), puis changez les états du prototype en état de fil de nouvelles:

welcome.on EventsDragEnd, -> si welcome.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"

Les états des autres éléments devront changer en conséquence (masquez l’état d’accueil, déplacez le point situé en bas pour refléter l’étape 2 de la visite, etc.). Ensuite, nous répétons pour les autres calques déplaçables (dégradé, dégradé2) et modifions les états en conséquence. En continuant dans cette voie, nous pouvons créer un prototype entièrement étoffé pour notre visite du produit..

Animer les calques d'un tableau individuellement, en ajoutant un léger retard

L'animation des mises à jour de statut individuelles dans le fil d'actualité plutôt que dans l'ensemble du groupe donnera au prototype une apparence plus épurée, comme l'illustre le gif animé (très petit) ci-dessous:

Commencez par créer un tableau des calques que vous souhaitez animer:

newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]

Ensuite, créez une fonction pour animer chaque calque vers le X emplacement, en ajoutant un délai de 0,1 entre chaque animation:

newsCurve = 'printemps (50, 30, 30)' newsAnimation = -> pour i dans [0… newsLayers.length-1] newsLayers [i] .anime retard: i * 0.1 propriétés: x: 0 courbe: newsCurve

Pro Tip: Créez des fonctions pour vos interactions

Si vous envisagez de réutiliser certaines interactions à divers endroits de votre prototype, envisagez de créer des fonctions afin de pouvoir les réutiliser ultérieurement. Donc, plutôt que d'écrire votre animation plusieurs fois, écrivez-la une fois et réutilisez-la si nécessaire. Créez une animation pouvant être réutilisée à l'aide d'une méthode telle que:

Couche :: fadeOut = -> Propriétés this.animate: Opacité: 0 Courbe: Temps de soulagement: 0.5

Ensuite, vous pouvez "fadeOut" n'importe quel calque en appelant: myLayer.fadeOut ()

Conclusion

Framer est un excellent outil pour créer rapidement des prototypes modernes, soyeux et hautement interactifs. L'intégrer à votre flux de travail en créant vos mises en page dans Photoshop (ou Sketch), puis en les manipulant via Framer, vous permettra de créer beaucoup plus rapidement des prototypes robustes..

Vous pourrez également modifier vos conceptions dans votre outil de présentation visuelle, puis les importer directement dans Framer, ce qui permettra une itération plus efficace au fur et à mesure de l'avancement du développement. Si vous avez correctement configuré votre document avec des variables, vos interactions s’appliqueront aux ressources nouvellement importées, permettant ainsi une itération rapide des idées d’interaction et de conception visuelle. Si vous deviez proposer une conception d'interaction statique, vous auriez besoin de mettre à jour plusieurs compositions statiques avec de nouveaux éléments visuels. Cependant, avec ce flux de travail, il vous suffit de modifier un document parent unique, de le réimporter dans Framer et le tour est joué.!

Restez à l'écoute pour plus de tutoriels sur le prototypage. Aussi, n'hésitez pas à commenter ci-dessous, et je vous contacterai dès que possible. Prototypage heureux!

Création de sites web