Comment prototyper une application mobile avec studio origami

Sep 12, 2025

Comment

Dans un monde où les utilisateurs ont des attentes élevées de leur expérience sur le Web et le prototypage et l'évaluation de l'utilisateur sont essentiels. Il est maintenant courant de parcourir progressivement sur des prototypes avec une fidélité de plus en plus élevée et une floraison expérience utilisateur L'industrie a grandi autour de cet ensemble d'activités critiques. En fin de compte, l'obtention de logiciels directement à l'étape du prototypage vous permet d'économiser du temps et / ou de l'argent plus tard.

10 outils de prototypage supérieur

Vous pouvez prendre de nombreuses approches au prototypage et à de nombreux outils pour vous aider. L'un des plus récents sur le bloc est Studio origami , développé par Facebook et disponible gratuitement pour MacOS.

Origami Studio, qui a en fait commencé sa vie en tant que plugin pour le compositeur de quartz (langage de programmation visuel dans l'environnement de développement Xcode de MacOS) avant de devenir un outil autonome, a gagné beaucoup d'attention au cours de la dernière année.

Ce n'est pas seulement parce qu'il est construit par un développeur de gros noms, mais également en raison de la combinaison du pouvoir et de la simplicité, il apporte au développement de prototypes interactifs à haute fidélité.

Suivez ces étapes pour découvrir à quel point vous pouvez utiliser facilement l'ORIGAMI Studio pour créer un prototype.

01. Un nouveau prototype

Start by creating a new iPhone 8 prototype — Commencez par créer un nouveau prototype iPhone 8

Nous allons créer un prototype d'une application mobile qui nous permettra de glisser à travers des images de chats et de «comme» certains d'entre eux. Une fois que nous avons installé Origami Studio, nous allons créer un nouveau prototype iPhone 8 à partir de l'écran Splash.

02. Ajout de couches

Nous pouvons commencer à ajouter des couches à notre prototype immédiatement. Dans ce cas, nous ajouterons un logo positionné en haut de l'écran. Nous ajoutons le calque à l'aide du bouton + en haut à droite et en sélectionnant «Couche d'image». Nous pouvons ensuite le redimensionner et la positionner de manière appropriée en soulignant et en modifiant les propriétés du calque. Après notre marque, nous ajouterons également une image de coeur au bas de l'écran pour servir de bouton "J'aime".

03. Créer une interaction

For interactions you'll need to create a patch — Pour les interactions, vous devez créer un patch

Nous devons faire réagir notre bouton de cœur aux interactions utilisateur. Vous remarquerez que dans la fenêtre d'aperçu, le curseur change pour représenter Appuyez sur un périphérique mobile. Pour répondre à cela, nous devons créer un «patch», qui est essentiellement une fonction dans l'origami qui prend des entrées et produit des sorties. Double-cliquez sur la zone grise vide pour afficher une liste de nouveaux correctifs et recherchez «Interaction». Placez votre patch et il devrait apparaître à l'écran.

04. Relier des interactions aux couches

Change the patch properties so that it only responds when you click in the right place — Modifiez les propriétés du correctif afin qu'il ne répond que lorsque vous cliquez au bon endroit

Pour le moment, votre patch répondra au toucher n'importe où sur le prototype. Testez-le en cliquant sur et vous verrez les propriétés «DOWN» et «TAP» changer en temps réel. Si vous sélectionnez la propriété 'Calque' dans le correctif, vous pouvez le relier à la couche contenant l'image cardiaque et ne répondra que des clics sur cette zone spécifique.

05. Animations

A pop animation will give users a bit of visual feedback — Une animation pop donnera aux utilisateurs un peu de commentaires visuels

Maintenant, nous voulons avoir quelque chose à arriver lorsque notre interaction déclenche. Créez un autre patch, cette fois une «animation pop». Ceci est utilisé pour créer un effet élastique. Laissez les propriétés telles qu'elles sont pour l'instant, mais nous allons créer un lien entre la sortie du robinet de l'interaction que nous avons créée précédemment et l'entrée numérique de notre nouvelle animation POP. Nous faisons cela en cliquant sur et en faisant glisser entre les petits cercles à côté de chacun. Si vous cliquez sur le cœur maintenant, vous verrez maintenant que l'interaction déclenche une modification de la sortie «Progress» de l'animation pop.

06. Transitions

You can change the extent to which objects change size when they're clicked — Vous pouvez modifier la mesure dans laquelle les objets changent de taille quand ils sont cliqués

La prochaine chose que nous avons besoin est un patch de transition. Cela nous permettra de spécifier des valeurs basses et élevées pour se déplacer entre les changements de sortie de progression de la pop animation. Nous pouvons ensuite relier les valeurs de sortie de la transition à la propriété d'échelle de la couche d'image cardiaque pour indiquer à l'origami de le redimensionner lorsqu'il est cliqué. Vous devriez maintenant trouver que cliquer sur le cœur lui entraîne d'animer un bref changement de taille. Ce n'est pas tout à fait raison, cependant, puisqu'il retombe immédiatement à la normale.

07. Commutateurs

Use switch patches to toggle objects between different states — Utilisez des correctifs de commutation pour basculer des objets entre différents états

Les patchs de commutation sont la voie de l'origami de basculer entre deux états. C'est ce que nous voulons pour notre bouton "comme". Une entrée transmise à un patch de commutation peut le basculer entre les états "sur" et "OFF", qui peuvent ensuite être transmis comme une sortie aux patchs ultérieurs. Créons un nouveau commutateur et placez-le entre l'interaction et l'animation pop. Vous devriez alors être capable de cliquer sur le cœur pour le basculer entre les petits et les grands états.

08. Comportement plus complexe

By experimenting with patches you can add more complex behaviour to your prototype — En expérimentant des correctifs, vous pouvez ajouter un comportement plus complexe à votre prototype.

Toutes nos félicitations! Vous avez maintenant créé votre première fonctionnalité interactive, en utilisant les correctifs les plus courants que vous trouverez à nouveau l'heure et l'heure. Nous pouvons ajouter plus de correctifs pour créer un comportement plus complexe. Créons une couche de coeur de couleur différente directement derrière notre actuelle, puis ajoutez de nouvelles corrections à l'échelle simultanément et modifiez l'opacité de notre couche d'origine afin qu'elle soit rendue visible. Maintenant, lorsque vous appuyez sur le cœur, il bascule plus grand et plus petit, mais semble également changer de couleur.

09. Carrousel

It's time to bring on all the cats — Il est temps d'apporter tous les chats

Pour terminer notre prototype, ajoutons un carrousel d'image avec les chats que nous voulons permettre aux utilisateurs de "aimer". Pour ce faire, nous devons d'abord ajouter un groupe de couches. Chaque image sera une couche distincte, avec des coordonnées x de plus en plus compensées de manière à s'asseoir essentiellement la taille latérale dans une rangée avec une seule visible à l'écran à un seul élément.

10. Swiping gauche et droite

Follow these steps to add a classic swiping action to your carousel — Suivez ces étapes pour ajouter une action de glissement classique à votre carrousel

La dernière chose que nous devons faire pour le faire fonctionner est de permettre aux flux de gauche et de droite pour faire défiler le carrousel. Nous le faisons en créant une interaction de défilement pour créer un lien vers le groupe de calques de carrousel (pas les images individuelles). L'interaction génère une coordonnée X que nous pouvons ensuite créer un lien vers la propriété X du carrousel pour le déplacer. Entre entre, nous allons ajouter un patch de clip, qui peut être utilisé pour limiter les valeurs afin de ne pas faire défiler les coordonnées en dehors du bord du carrousel.

11. Prochaines étapes

Now you've learned the basics you can add more advanced features — Maintenant, vous avez appris les bases que vous pouvez ajouter des fonctionnalités plus avancées

C'est tout. Vous avez créé une application très basique. Vous pouvez également utiliser 'Frames' d'Origami Studio's's intégré pour le placer sur un fond de périphérique, ce qui peut aider à donner une finition professionnelle. Maintenant que vous connaissez les bases de l'utilisation des correctifs, vous pouvez commencer à créer des comportements plus avancés. Il existe de nombreux guides sur le site Web de Studio d'Origami, qui expliquent comment mettre en œuvre des fonctionnalités populaires couramment observées dans les applications.

Cet article a été publié à l'origine dans le numéro 270 de la création Web Design Magazine Web Designer. Achetez le numéro 270 ici ou Abonnez-vous à Web Designer ici .

Articles Liés:

Tendances qui forment la conception de l'application en 2018
3 meilleurs moyens de construire un prototype de site Web
Tout ce que vous avez besoin de savoir sur des maquettes, des images filaires et des prototypes

Comment prototyper une application mobile avec studio origami

01. Un nouveau prototype

02. Ajout de couches

03. Créer une interaction

04. Relier des interactions aux couches

05. Animations

06. Transitions

07. Commutateurs

08. Comportement plus complexe

09. Carrousel

10. Swiping gauche et droite

11. Prochaines étapes

Comment - Most Popular Articles

Comment retourner une couche dans Photoshop: un guide complet

Comment créer des pin-up art

Comment dessiner un éléphant

Comment créer un effet de frappe animé

Comment dessiner un gros chat avec des pastels

Créer un composant de carrousel flexible

Comment créer des actifs numériques

Créer des tableaux interactifs dans Ionic 2

Catégories