Prototypage d'applications: commencer avec Facebook Origami

Facebook Origami: un outil puissant pour créer des prototypes d'applications interactifs sans codage

Points de base:

• L'outil Origami de Facebook permet la création de prototypes d'applications interactifs sans aucune connaissance de codage. Il a été utilisé par Facebook pour créer de nombreuses applications phares, prouvant sa fiabilité et sa fonctionnalité.
• Origami s'intègre parfaitement à Sketch, et le prototype sera automatiquement mis à jour lorsque des modifications sont apportées dans l'outil de conception. Il a également des capacités d'exportation de code, permettant aux ingénieurs d'exporter le code nécessaire pour iOS, Android et animations Web.
• Bien que l'origami soit un outil relativement nouveau qui peut manquer de ressources de support étendues, il est facile à utiliser et permet un prototypage rapide. Il fournit des mises à jour en temps réel de la visionneuse lorsque des modifications sont apportées, et les propriétés du correctif peuvent être intégrées en douceur pour le faciliter la compréhension et l'utilisation.

Dans le domaine du développement de logiciels, les prototypes fonctionnent des prototypes d'applications (ou sites Web) qui sont souvent utilisés pour tester et collecter des commentaires.

Un prototype bien conçu présente toujours le fonctionnement de l'application finale de manière plus fiable que des dizaines de pages de modèle statique.

Cependant, tous les concepteurs et équipes n'ont pas la capacité de construire de tels prototypes. La rédaction du code à partir de zéro prend du temps et de l'expertise, tandis que de nombreux outils en ligne nécessitent une sorte d'abonnement.

Heureusement, il y a un an, Facebook a publié Origami, un outil gratuit pour la conception de l'interface utilisateur moderne et des prototypes interactifs sans écrire de code.

Il doit avoir été testé dans la pratique - Facebook a construit plusieurs de ses applications phares à l'aide d'Origami, comme Instagram, Messenger, Slingshot et Facebook Paper.

Introduction:

Facebook Origami lui-même est une grande pile "patch" compositeur de quartz qui facilite le développement de modèles de travail qui incluent des animations de démonstration et d'autres interactions complexes.

Les correctifs sont des modules d'animation, de graphiques ou d'interactifs préexistants. Vous pouvez considérer les patchs comme des blocs de construction pour la construction de prototypes.

La meilleure façon de comprendre le compositeur Quartz est de le considérer comme un outil de programmation visuelle qui peut prendre des paramètres d'entrée et des résultats de sortie. Il vous permet d'importer des croquis ou des calques Photoshop en tant que correctifs, puis de les connecter avec des animations et des événements jusqu'à ce que vous fassiez quelque chose qui simule l'expérience de l'application finale.

Une fois que vous avez maîtrisé le compositeur de quartz, vous devriez pouvoir combiner des prototypes immédiatement et facilement. Voici une description plus détaillée de l'histoire du compositeur de quartz. Pour télécharger l'origami, suivez les étapes de la section Téléchargements de son site officiel.

Interface et outils de base:

Lors du démarrage du compositeur Quartz, vous verrez d'abord la fenêtre de sélecteur de modèle. Pour démarrer un nouveau projet Origami, accédez à: File & gt; nouveau fichier origami "ou ⌥⌘n.

Après avoir créé le projet Origami, vous serez invité à utiliser trois fenêtres qui se chevauchent. Pour rendre votre espace de travail meilleur et plus propre, allez à: Window & gt;

1.

La fenêtre d'édition est votre principal espace de travail - un établi où vous pouvez faire glisser et déposer les correctifs et assembler la meilleure combinaison d'animations et d'interactions en connectant différentes couches de votre conception.

Depuis la fenêtre d'édition, vous pouvez également accéder à d'autres outils et fenêtres tels que la bibliothèque de patch, la fenêtre de la visionneuse, l'inspecteur de correctif et les boutons de base de l'outil tels que le dos / avant et zoomer / out.

2.

La bibliothèque de patch contient tous les composants nécessaires pour construire un prototype. Ce sont les boulons et les écrous qui réalisent les effets magiques. Double-cliquez simplement ou faites glisser et déposez pour ajouter différents éléments de l'événement et de la bibliothèque de patch à la fenêtre d'édition.

3.

La fenêtre de la visionneuse ressemble à un émulateur de périphérique réel. Toutes les actions que vous effectuez dans l'espace de travail (fenêtre d'édition) sont reflétées ici. Vous pouvez modifier le type de périphérique affiché en modifiant la propriété du patch de taille de la visionneuse de type à la valeur préférée du type d'appareil de votre choix.

Il existe même des types Windows Phone et Apple Watch dans le menu déroulant par défaut.

Exportation de code

Après avoir approuvé le prototype, il est temps pour l'ingénieur de le faire. De toute évidence, cela peut être un processus très difficile pour les concepteurs et les programmeurs, qui doivent travailler en étroite collaboration pour s'assurer que le produit final correspond très bien au prototype.

Des problèmes peuvent survenir lorsque le produit final n'est pas suffisamment similaire au prototype approuvé.

Cependant, grâce aux capacités d'exportation du code d'Origami, les ingénieurs peuvent facilement résoudre ce problème en exportant le code nécessaire pour implémenter les mêmes animations dans iOS, Android et le Web.

Intégration des croquis

L'intégration de croquis d'Origami vous permet de lier les couches conçues dans l'application Sketch directement à votre prototype. Cela signifie que chaque fois que vous modifiez une conception dans Sketch, les mises à jour se reflètent automatiquement dans votre projet Origami.

Mode de démonstration

Utilisez le mode de démonstration, vous pouvez magnifiquement présenter votre prototype au public en mode plein écran, avec différentes images d'arrière-plan, les mains humaines tenant l'appareil et les pointeurs.

Si vous avez un iPhone ou un iPad, ou via le trackpad de votre appareil Apple, vous pouvez contrôler directement le prototype.

Vous pouvez trouver plus de détails sur les différentes fonctionnalités du site Web officiel d'Origami via ce lien.

Conclusion:

Facebook Origami fonctionne bien et fait le travail. L'ajustement du prototype est rapide car vous n'avez pas besoin de compiler ou de cliquer sur le bouton Actualiser lors de la modification d'un correctif ou de l'importation d'une nouvelle image. Tout le contenu sera reflété dans le spectateur en temps réel.

Vous n'avez pas à vous procéder à de grands efforts pour comprendre ce que cela signifie lorsque vous obtenez un prototype de quelqu'un d'autre. Les propriétés du patch sont généralement explicites et semblent s'intégrer en douceur sans rien casser d'autre.

L'inconvénient est que l'origami est relativement nouveau et n'a pas encore une grande quantité de ressources de soutien. Néanmoins, les ressources existantes sont bien faites et organisées.

Vous pouvez trouver des exemples et des tutoriels sur le site officiel que vous trouvez ici.

Si vous souhaitez ajouter du contenu à cet article d'introduction, ou si vous avez simplement des questions, n'hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.

FAQS sur le prototypage avec Facebook Origami:

En quoi Facebook Origami est-il différent des autres outils de prototype d'applications?

Facebook Origami est un outil unique qui offre une variété de capacités de prototypage d'applications. Contrairement à d'autres outils, Origami offre un aperçu en temps réel de la conception, vous permettant de visualiser les changements en temps réel. Il offre également une variété de composants prédéfinis pour faciliter la création d'interactions complexes. De plus, Origami vous permet d'exporter des extraits de code qui peuvent être utilisés directement dans votre projet, ce qui vous fait gagner du temps et des efforts.

Facebook Origami est-il libre à utiliser?

Oui, Facebook Origami est entièrement libre à utiliser. Il s'agit d'un outil open source, ce qui signifie que n'importe qui peut l'utiliser pour créer ses propres prototypes d'application. Cela en fait une solution rentable pour les particuliers et les entreprises.

Puis-je utiliser Facebook Origami sur un système d'exploitation?

À l'heure actuelle, Facebook Origami n'est disponible que pour MacOS. Cependant, l'équipe derrière Origami travaille constamment à la mise à jour et à l'amélioration, il peut donc fonctionner pour d'autres systèmes d'exploitation à l'avenir.

Comment partager les prototypes créés avec Facebook Origami?

Facebook Origami vous permet de partager votre prototype de diverses manières. Vous pouvez exporter des prototypes sous forme de prototypes vidéo, GIF ou interactifs. Vous pouvez également partager des liens de prototypes afin que d'autres puissent interagir directement avec lui.

Puis-je utiliser Facebook Origami sans aucune connaissance de codage?

Oui, Facebook Origami est conçu pour être facile à utiliser et ne nécessite aucune connaissance de codage. Il utilise une interface visuelle qui vous permet de créer des interactions complexes en faisant simplement glisser et abandonner les composants.

Quel type de prototype d'application puis-je faire en utilisant Facebook Origami?

Facebook Origami est un outil multifonctionnel qui peut être utilisé pour prototyper diverses applications. Que vous créiez des applications de médias sociaux, des jeux mobiles ou des outils de productivité, l'origami a la fonctionnalité et la flexibilité pour transformer vos idées en réalité.

Comment démarrer avec Facebook Origami?

Pour commencer avec Facebook Origami, vous devez télécharger et installer Origami Studio Software sur votre Mac. Une fois l'installation terminée, vous pouvez commencer à créer votre propre prototype à l'aide d'une variété d'outils et de fonctionnalités disponibles.

Puis-je collaborer avec d'autres sur Facebook Origami?

Bien que Facebook Origami n'offre actuellement pas de fonctionnalités de collaboration intégrées, vous pouvez toujours collaborer avec les autres en partageant des prototypes et en collectant des commentaires.

Comment en savoir plus sur l'utilisation de Facebook Origami?

Il existe de nombreuses ressources pour vous aider à en savoir plus sur l'utilisation de Facebook Origami. Le site Web Origami propose une variété de tutoriels et de guides, et il existe de nombreuses communautés en ligne où vous pouvez vous connecter avec d'autres utilisateurs d'origine et apprendre leurs expériences.

Quelles sont les exigences du système pour Facebook Origami?

Facebook Origami a besoin de macOS 10.13 ou plus. Il nécessite également un Mac avec un processeur 64 bits.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!