Faire un prototype Hi-Fidelity dans Atomic

Sep 11, 2025
Comment
[dix] [dix] [dix]
[dix]

Il est facile de se faire prendre en essayant de développer une idée dans une maquette statique ou un outil de dessin de fichiers plat, mais un prototype vaut mille réunions. Pourquoi voudriez-vous vous contenter de quelque chose de moins que d'explorer vos idées de manière interactive?

[dix]

Peut-être que vous avez une idée de la façon dont une transition pourrait se comporter, mais vous n'êtes pas tout à fait sûr si cela se sentirait droit à l'utilisateur. Prototypant rapidement la transition et interagir avec elle vous donne directement une expérience beaucoup plus réaliste de la manière dont le produit final pourrait travailler dans le monde réel.

Nous avons vu des outils apporter le prototypage dans l'espace de conception, mais aucun tout comme Atomique . Maintenant, il y a un moyen de construire des prototypes entièrement interactifs, hi-fidélité qui se dessinent et se comportent comme la vraie chose.

[dix]

Le prototypage dans Atomic est incroyablement rapide: vous pouvez créer de belles maquettes avancées en quelques minutes, sans écrire de code, installer n'importe quel logiciel ou boire trop de café. Vous serez capable de prévisualiser avec le prototype directement sur votre appareil mobile ou de le partager avec un coéquipier pour vos commentaires. Nous avons également préformé tous les actifs dont vous avez besoin pour commencer afin que vous n'ayez pas à importer une chose (mais vous pouvez importer de l'esquisse et Photoshop cc trop).

Dans ce tutoriel, nous explorerons une simple transition de balayage dans une application météo que nous allons créer dans Atomic. Nous allons passer à travers les étapes faciles pour créer des transitions de fabrication et, si vous avez besoin d'un défi, je vais également couvrir des fonctionnalités de prototypage plus avancées à explorer.

[dix]

01. Inscrivez-vous

Commençons! Si vous n'avez pas déjà de compte, ouvrez Google Chrome, visitez atomique.io et inscrivez-vous pour un essai gratuit. Cela dure 30 jours, ce qui devrait avoir beaucoup de temps pour que vous puissiez explorer atomique et faire votre premier prototype.

02. Jetez un oeil autour de

The Sample Project contains sample files to help you get familiar with Atomic

[dix] [dix]
Le projet exemple contient des exemples de fichiers pour vous aider à vous familiariser avec Atomic

Maintenant, vous êtes connecté à votre compte, c'est un bon moment à explorer. Vous remarquerez qu'un exemple de projet a été configuré pour vous. Cela dispose de certains fichiers d'échantillons d'introduction que vous pouvez jouer avec pendant que vous vous familiarisez avec Atomic. Sinon, vous pouvez visiter notre Vitrine , qui a une collection de prototypes construits par d'autres. Si vous êtes coincé, le meilleur endroit pour rechercher une solution est notre centre d'aide .

03. Nouveau projet

Créez un nouveau projet en cliquant sur «Nouveau projet» et en choisissez «Application de recette». Appuyez sur Entrée ouvrira le dossier de projet. Ici, vous pouvez voir toutes les conceptions de ce projet particulier. Comme il s'agit d'un nouveau projet, il est vide. Cependant, les conceptions se rempliront ici au fil du temps pendant que vous les créez.

04. Prenez un échantillon

There's a ready-made sample file for this project

[dix] [dix]
Il y a un fichier d'échantillon prêt à l'emploi pour ce projet

Au lieu de créer un nouveau design vide, tête ici . Cela ouvrira un exemple de fichier que nous avons créé pour vous aider à démarrer.

Voir le bouton 'Copier et Edition' dans le coin inférieur droit? Cliquez dessus et ajoutez-le à votre projet d'application de recette. Cliquez sur 'Modifier maintenant'. Comme cela, une copie de notre fichier exemple est maintenant à l'intérieur de votre projet prêt à modifier.

05. Explorez l'éditeur

Bienvenue dans l'éditeur! Si vous avez utilisé un outil de conception dans le passé, Atomic se sentira probablement familier. Regardons autour de vous. À gauche, vous trouverez accès aux outils de dessin, de mise en page et de prototypage, ainsi que deux onglets qui vous permettent de basculer entre les pages et les panneaux de couches. Sur la droite, vous remarquerez le panneau Propriétés, ce qui vous permet de modifier la taille de votre page, ainsi que d'introduire des paramètres pour les styles et les transitions.

06. Découvrez les éléments

In the sample file's Assets page you’ll find the elements you need

[dix] [dix]
Dans la page d'actifs du fichier exemple, vous trouverez les éléments dont vous avez besoin.

Sur la page Actifs du fichier exemple, vous verrez que nous avons créé tous les éléments utilisés dans ce prototype pour vous. Passez au panneau Calques, puis cliquez sur certains des éléments de la toile. Les éléments que vous sélectionnez seront automatiquement mis en surbrillance dans le panneau Calques. Accélérez votre flux de travail en appuyant sur '?' Pour voir la gamme de raccourcis clavier, vous pouvez utiliser.

07. Aperçu

Vous pouvez prévisualiser et interagir avec votre prototype lorsque vous souhaitez en cliquant sur «Aperçu» dans le coin inférieur droit de l'éditeur. Nous allons utiliser cela plus tard pour tester la sensation de nos transitions. Sélection de «Aperçu» maintenant vous montrera les actifs en mode FullScreen, mais si vous naviguez vers la page 2 à l'aide des flèches, vous verrez un exemple de référence du premier état de notre prototype. Essayez d'interagir avec l'exemple de référence en cliquant sur le bouton "Recettes enregistrées" dans l'en-tête pour prévisualiser ce que nous allons créer.

08. Commencez

Maintenant, vous connaissez le prototype que nous construisons, il est temps de commencer! Sélectionnez 'Modifier', pour revenir dans l'éditeur, puis sur la page Actifs, sélectionnez tous les éléments et copiez-les dans le presse-papiers. Allez à la page 1 et collez les éléments sur la page.

09. Organisez vos actifs

Sans aucun élément sélectionné, réglez le remplissage d'arrière-plan de votre toile sur # F6F7F8 (regardez dans le panneau de propriétés de droite). Placez l'en-tête sur la toile, le haut et le centre.

Vous voudrez réorganiser les actifs afin que votre premier état (toutes les recettes) est positionné sur la toile et que les actifs de votre deuxième état de création de votre choix (recettes sauvegardées) sont éteints de la toile à droite. Voici pourquoi: lorsque le même objet existe à la page 1 et page 2, Atomic animera automatiquement les modifications entre elles.

10. Empilez vos cartes

Lorsque vous prévisualisez initialement le prototype, vous avez peut-être constaté que la page d'actualité des recettes sur la page 'Référence - Toutes les recettes' est défilable verticalement. Pour ajouter cet effet, organiser les cartes de recette dans une pile verticale, y compris le texte «Reviens de demain» qui doit être placé en dernier, en bas.

[dix]

11. Créer un conteneur de défilement

Sélectionnez le texte des cartes de recette et «Retour demain '» et choisissez l'outil de conteneur qui sera apparu sur le centre supérieur de la toile. Sélectionnez "Créer un conteneur de défilement". Le contenu sera ensuite regroupé et placé à l'intérieur de ce que nous appelons un conteneur de défilement, avec défilement vertical activé par défaut. Assurez-vous de définir les limites de votre conteneur en faisant glisser la limite inférieure pour masquer les éléments et rencontrer la toile.

12. Placez vos éléments

Pour cette transition particulière, nous voulons que la grille des "recettes sauvegardes" venant de la droite, et le texte "Ajouter plus" à venir de ci-dessous. Pour vous assurer que cela se produit, placez chaque élément dans sa position de départ respective. Par exemple, les «recettes sauvegardées» doivent être placées à la page 1, hors de la toile et à droite; Alors que le texte "Ajouter plus" doit être placé à la page 1, hors de la toile et ci-dessous.

13. Appuyez sur la transition

Comme nous créons une transition de prise, où nous souhaitons que les éléments de notre prochaine page se glisse, il est important qu'ils existent également à la page 1, hors de la toile, de définir leur position de départ. À tout moment, vous pouvez vous reporter à la page 'Référence - Toutes les recettes' pour voir comment cette page doit être organisée.

14. Duplication

For our transition, duplicate page 1

[dix] [dix]
Pour notre transition, double page 1

Maintenant, nous avons configuré la première page, il est temps de créer le deuxième état pour la transition que nous ferons sur une nouvelle page. Assurez-vous que le panneau Pages est sélectionné, puis survolez la page 1 pour afficher le menu Hamburger en bas à droite de la carte de page. Cliquez sur le menu et sélectionnez "Dupliquer".

15. Recettes enregistrées

Atomic will animate any changes you make between Page 1 and your new Page 2

[dix] [dix]
Atomic animera toute modification que vous apportez entre la page 1 et votre nouvelle page 2

Accédez à votre page nouvellement dupliquée pour créer le deuxième état: vos recettes enregistrées. Il est important de ne pas supprimer aucun élément sur la page, car cela enfreint la transition. Parce que nous avons dupliqué la page, Atomic sait que les éléments des deux pages sont les mêmes éléments connectés. Par conséquent, il sait animer les modifications que nous apportons aux propriétés des éléments à la page 2 (taille, position, rotation, opacité, couleur, etc.).

16. Plus de transitions

Déplacez d'abord le groupe de défilement «Toutes les recettes» à gauche, hors de toile et l'élément «Recettes sauvegardé» et «Ajouter plus» de texte dans leurs nouvelles positions: dans le corps (à la place du groupe «Toutes les recettes») sur la moitié inférieure de la toile, et au centre respectivement. Le seul élément que nous ne déménageons pas dans cette transition est l'en-tête. En effet, l'en-tête reste à l'écran et ne change que subtilement - nous en arriverons bientôt.

17. autre animation

Pour l'en-tête, nous voulons que le fond bleu glisse sur le deuxième état. Bien que sur la page 2, avec le panneau Calques Ouvrir, développez le groupe intitulé «En-tête» et sélectionnez le rectangle bleu. Puis déplacez-le à droite afin qu'il soit placé derrière les "recettes sauvegardées". Joli!

18. la partie amusante

Add an interaction hotspot over the area you want users to interact with

[dix] [dix]
Ajoutez un point chaud d'interaction sur la zone que vous souhaitez que les utilisateurs interagissent avec

Vient maintenant la partie amusante de la création de la transition. À la page 1, nous allons dessiner un hotspot sur le texte "Recettes sauvegardé" dans l'en-tête, car c'est la zone que nous voulons que notre utilisateur interagisse. Sélectionnez l'outil Hotspot d'interaction à partir du panneau Outils à l'extrême gauche de l'éditeur (ou appuyez simplement sur H). Vous pouvez dessiner des points chauds en utilisant la même méthode que vous utiliseriez pour dessiner un rectangle sur la toile: cliquez simplement sur et faites glisser.

19. Paramètres de transition

Customise your transition, including the trigger gesture and motion type

[dix] [dix]
Personnalisez votre transition, y compris le gestes de déclenchement et le type de mouvement

Une fois que vous avez dessiné votre hotspot, il est toujours sélectionné, vous verrez une section d'interactions apparaissant dans le panneau Propriétés à droite. C'est là que vous pouvez spécifier le geste de déclenchement, la page de destination, le type de mouvement et la durée de la transition. Pour cette transition, spécifiez les paramètres suivants: GESTURE: Cliquez ou appuyez sur ; Aller à: Page 2 ; Motion: e ASE IN-OUT ; Durée: 250 .

20. Bilan

Nous voulons pouvoir basculer entre les deux transitions entre les deux transitions, nous aurons donc également besoin de placer un point d'accès à la page 2 pour nous ramener à la page 1. Copiez l'hotspot à partir de la page 1 à l'aide des raccourcis clavier et de coller à la page 2 sur le texte "Toutes les recettes" dans "l'en-tête". N'oubliez pas de mettre à jour le réglage de la page de destination du nouveau hotspot à la page 1.

21. Aperçu

Click the Preview button to see your transition in action

[dix] [dix]
Cliquez sur le bouton Aperçu pour voir votre transition en action

Il est temps de prévisualiser votre transition! Naviguez jusqu'au panneau Pages et cliquez sur Aperçu en bas à droite de l'éditeur (raccourci cmd + entrer ). Cliquez sur "Recettes sauvegardées" sur votre prototype pour accéder à la page 2. Ensuite, sélectionnez "Toutes les prototypes de recettes" à reprendre à la page 1.

22. Tout fait!

Maintenant, tu es un pro! Sélectionnez "Modifier" pour revenir à l'éditeur, puis si vous supprimez les actifs et deux pages de référence (en sélectionnant le menu Hamburger de la page, puis «Supprimer la page»), le prototype que vous venez de faire est prêt à partager. Vous pouvez facilement créer un lien de partage en appuyant sur «Partager» en bas à droite de l'éditeur.

Cet article est apparu à l'origine dans magazine net numéro 283; Achetez-le ici !

[dix] [dix]
[dix]

Comment - Most Popular Articles

Adobe Fresco Tutoriel: Créez un portrait dans l'application de peinture

Comment Sep 11, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Phil Galloway) [DIX] Pour CE Didacticiel A..

Comment transformer la photographie en illustration

Comment Sep 11, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Cindy Kang) [DIX] Comprendre la Meureuse F..

Exporter des animations après les effets sur HTML5

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] L'animation sur le Web est là pour rester. C'est dans tout, des mouvements s..

Concevoir un avatar jouable pour un jeu vidéo

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Pour ça Tutoriel Photoshop , Je vais créer u..

Tutoriel de texte 3D pour les graphistes

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Mise en route..

Comment concevoir une couverture de livre dans InDesign

Comment Sep 11, 2025

Le dicton pourrait être: «Ne jugez pas un livre par sa couverture», mais la conception d'une couverture peut, en fait, faire ou casser le succès d'un livre. Si vous êtes comme moi, la co..

Comment peindre des runes brillantes magiques

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Dans ce tutoriel, je vais vous montrer comment peindre des runes mystiques qu..

Texture un droid K-2SO porté authentique

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Page 1 ..

Catégories