Prototypage rapide IOT dans Protopie

1. Introduction: Hé, les gars, je suis à aujourd'hui. Nous allons apprendre à créer rapidement des prototypes interactifs Iva T avec un programme appelé Proto by. Vous pouvez Catch un téléchargement gratuit où vous pourriez obtenir une licence $100 pour une année de mises à jour, et je pense que cela vaut bien le prix. Et nous allons comprendre pourquoi c'est précieux plus tard. Qu' est-ce qu'un produit I T j'aime à penser que les produits i o T sont quelque chose avec plusieurs canaux de communication. Je pense qu'il choisit un nid Philip pour ampoule. Donc, c'est tout ce qui se connecte à un produit physique et à un homologue numérique, et c'est vraiment cette interaction entre les deux qui est si difficile à tester. Et c'est pourquoi il faut tellement de temps et d'argent pour obtenir quelque chose de tangible pour obtenir les commentaires des utilisateurs . Et c'est la raison pour laquelle je fais cette vidéo, c'est parce que je connais un moyen rapide et un processus que les gens peuvent obtenir des commentaires des utilisateurs tôt dans le processus pour mettre fin à beaucoup de spéculations qui se produisent sur ce que les gens pensent que les produits devraient faire. Donc, l'une des choses que vous allez sortir avec cette classe est de savoir comment faire un prototype rapide obtenir les commentaires des utilisateurs à ce sujet et mettre fin à beaucoup de cela. La spéculation qui se passe dans le processus de développement précoce est si un peu de contexte sur moi. Je suis un concepteur de produit scientifique numérique à Atlanta, et mon expérience est dans les applications mobiles et les sites Web, spécifiquement pour un i ot produits. J' ai travaillé sur tout, des outils électriques aux produits de maison intelligente, et ce sont des choses que j'ai appris pour améliorer mon processus, et j'espère que ce sont des choses qui peuvent aussi être précieuses, alors commençons. 2. Étape : 1 Créer la saisie (Toggle la Switch): Ok, donc une fois que vous aurez ouvert crédible, vous remarquerez à gauche. Vous avez des exemples de fichiers qui sont utiles à titre de référence, mais pour celui-ci sélectionnera un nouveau secteur. Qui minimisera cet aperçu ? Et c'était pour commencer un aperçu rapide de ce qui est sur l'écran à gauche. Nous avons le panneau des calques au milieu des tableaux d'art. C' est là que bien, dessiner tout à droite est le panneau d'interaction, et à droite de cela se trouve le panneau intra patient et, pour commencer, s'assurer que nos tailles d'écran sont correctes. Donc ça va juste varier en fonction de ce que vous concevez. Mais pour moi, je vais sélectionner Android. Donc la première chose que j'aimerais créer est mon interrupteur à bascule pour l'ampoule. Donc nous allons apporter un rectangle, et nous allons mettre l'origine au centre et noter. Ce n'est pas vraiment important où se trouve l'origine, tant qu'il est cohérent avec tout ce que vous laissez tomber, donc nous allons faire un peu plus d'un rectangle. Je traîne juste là-bas, et nous allons le centrer sur notre carte, et puis, et puis, comme c'est un interrupteur à bascule, fera le rayon 100 et la première chose que nous voulons que l'interrupteur à bascule soit allumé, donc nous allons aller de l'avant et faire et ensuite nous reviendrons. Il allait y avoir l'interrupteur et donc encore une fois fera de l'origine le centre et nous allons le déposer au milieu. Et nous allons utiliser le changement d'option pour réduire cette échelle. Et par ici, la taille que tu as remarquée, il y a une petite serrure. Et si nous sélectionnons cette chance, nous pouvons utiliser ces boutons pour le rendre à l'échelle uniformément, puis utiliser le clavier pour le cogner dessus , où nous avons besoin de Teoh et va changer la couleur. Un peu va bien ici. Nous pouvons également ajouter une ombre portée et je le ferai parce que c'est un élément qui est au-dessus du calque d' arrière-plan. Et maintenant que nous avons notre interrupteur à bascule dessiné, nous pouvons le regarder dans la fenêtre d'aperçu et nous avons notre interrupteur à bascule. Donc la prochaine étape que nous allons faire ici, si vous remarquez que cliquer ici, ne fait rien encore, et c'est parce que nous n'avons pas ajouté d'interactions. Donc ça va être notre prochaine étape 3. Étape 2 : Ajouter des interactions: Ok, donc la première interaction que nous allons ajouter sera de déplacer cet interrupteur à bascule vers la gauche, en coupant efficacement notre vie. Donc, nous allons ajouter déclencheur et nous voulons taper. Et si vous regardez, il y a un tas d'autres options ici, et vous pouvez vraiment obtenir des interactions assez approfondies, mais nous allons garder les choses simples pour celui-ci. Donc haut et m'a demandé de sélectionner un calque, et j'ai plus d'un et rectangle un et une note rapide. Il est toujours utile de nommer vos couches de manière appropriée, car sur certains gros fichiers, il est très facile de les mélanger. Donc maintenant, si nous allons plus, voudra lui dire interrupteur, et ce que nous voulons changer de faire est déplacé vers la gauche, simulant qu'il est éteint. Donc si on va par ici, on devait se déplacer sur l'axe X. Donc, si vous cliquez sur le tableau d'art, nous savons que c'est une position à 7.5, et il est utile d'écrire ces chiffres, soit dans des notes ou sur du papier, ce que vous préférez, alors nous allons passer à l'endroit où il devrait être désactivé et nous sommes 1 53,5 pas commande Z jusqu'à ce qu'il soit de retour à l'endroit où il a commencé. Ensuite, nous allons à X, et nous savons qu'il doit passer à 1 53.5 Donc maintenant que nous avons cette configuration, nous pouvons le regarder dans notre fenêtre d'aperçu. Donc, si nous sélectionnons le robinet, cela signifie toujours où il devrait. Donc l'étape suivante, c'est qu'on ne veut pas que ça bouge. Nous voulons que la couleur change, signifie qu'elle s'éteint. Donc, on va colorer l'arrière-plan et ensuite on le remplit pour passer à Gray. Si vous remarquerez ici, il y a d'autres réglages d'accélération et d'animation que vous pouvez faire pour le pour. Les fins de ce verre sera juste garder est dans et dehors dans une durée de point à. Mais si jamais vous voulez explorer, il y a quelques animations assez intéressantes que vous pouvez ajuster et quelques choses assez faciles à intégrer. Revenons à notre aperçu. Je vais en fait déposer ça pour qu'on puisse voir notre fenêtre d'aperçu en haut. Donc maintenant, lorsque nous cliquons, il va également changer de couleur. Mais le problème est quand nous cliquons à nouveau, Il ne bouge pas. C' est ce que nous avons besoin de dio est de mettre une déclaration conditionnelle pour s'assurer que l'interrupteur peut être allumé et éteint. Donc, si notre commutateur, si leur valeur X est égale à 1 53,5, c'est la valeur pour qu'il soit éteint. Ensuite, nous voulions revenir à sa position sur deux sur 7,5. Maintenant, vérifions pour voir si ça a fonctionné. Ok, super. Ça a fonctionné. Alors maintenant, vous remarquez que nous pouvons l'allumer et l'éteindre. Maintenant, tout ce qu'on a à faire, c'est changer de couleur au vert pour cette condition. Assurez-vous que les bons calques sont sélectionnés en vert. Ok, parfait. Tout le reste a l'air bien. C' est un aperçu une fois de plus. Impressionnant. Donc maintenant que son fichier est configuré avec des interactions, la prochaine chose que nous allons faire est d'envoyer des commandes à un autre prototype 4. Étape 3 : Créer la sortie (lumière): Ok, donc maintenant nous voulons ajouter des commandes sin à un autre prototype. Et donc tout cela signifie que lorsque nous parlons de l'interrupteur allumé et éteint, il sera assis une commande à un autre prototype pour tourner une propre maison de lumière. Donc on va aller ici, envoyer le commandement. Et nous venons d'ajouter qu'avant cette condition, et nous savons que cela signifie pour activer et aucun avis que vous pouvez sélectionner canal apparaissent nous utilisons crédit par les studios. Cela signifie juste qu'il va communiquer avec un autre prototype de diffusion Android est quelque chose d'un peu différent. Entrez plus tard, le message sera allumé, et ainsi arrivera ici sous l'instruction conditionnelle. Nous allons ajouter une autre commande send à désactiver. Et il est important de se souvenir de ce que vous nommez, car il doit être le but exact de rappeler le commandement et d'autres prédateurs. Donc maintenant que c'est fait, nous pouvons aller enregistrer le fichier, et nous appellerons cette entrée de commutateur. Nous allons dire cela sur le bureau, puis nous pouvons créer une nouvelle taille de fichier. Je vais lui mettre son bureau. Et la raison pour laquelle je fais ça est parce que nous allons probablement montrer un autre ordinateur ou un écran de télévision ou même peut-être un projecteur. Cela dépend vraiment de la façon dont vous voulez montrer un prototype à un utilisateur. Et donc ce qu'on va faire est important, Alliés, on ne va pas importer. Nous allons apporter une image que nous allons apporter cette ampoule. Ça va centrer ça sur l'écran, et ensuite on va faire un rectangle. On va faire un rectangle de la taille du tableau d'art et remarquer dans ce panneau de calque , il n'apparaît pas. Tout ce que vous pouvez faire est de glisser-déposer pour réorganiser. Et nous allons rendre ce rectangle noir pour signifier que la lumière est éteinte pour que vous ne puissiez rien voir. Et après ça, on va ajouter un déclencheur ici, tu reçois ? Et le message qu'il veut recevoir est désactivé et fera en sorte que change la couleur de l'orteil rectangle noir et l'autre message que nous voulions recevoir sera activé. Et nous voulons que la couleur change. Disons à orange quand il reçoit la commande d'activation, tout semble bien pour que nous puissions prévisualiser que minimiser. Et donc, ce que nous pouvons faire maintenant, c'est que vous pouvez sortir votre téléphone et descendre l'application Prettify si vous avez pas déjà fait et que nous pouvons prévisualiser ce premier design dessus. 5. Étape 4 : Prévisualiser sur mobile: Donc, si la recherche jottify joueur dans le magasin APP, nous trouverons ce dont nous avons besoin. Et donc une fois que vous aurez ouvert, vous remarquerez en haut. Nous avons scanné le type en vitesse US. Vous pouvez les utiliser pour vous connecter à un prototype, et vous avez également des connexions récentes. En bas Si vous avez déjà connecté Wi-Fi, mais allez-vous rechercher celui-ci ? Il est généralement assez sûr dans votre première utilisation, et vous pouvez aller sur les deux premiers appareils pour tirer vers le haut ce code-barres qu'ils savent remarqué. Votre prototype arrive automatiquement sur votre téléphone, et nous l'utiliserons pour la prochaine étape. 6. Étape finale : Visualiser votre interaction: Donc, une fois que vous avez obtenu votre crédit par APP téléchargé, vous pouvez numériser ou utiliser USB pour extraire le prototype ou utiliser le WiFi s'il a été connecté auparavant . Mais une fois qu'on l'aura arraché, on pourra monter notre prototype de lumière sur son ordinateur, et vous remarquerez que si on parle de l'interrupteur et de l'arrêt de notre réponse lumineuse et de la beauté de cela sur un ordinateur, si vous en avez besoin, vous pouvez le brancher à un téléviseur ou un projecteur. Si vous êtes dans une salle de réunion avec l'utilisateur, il est vraiment facile de se moquer de cela dans un cadre un peu plus professionnel. Mais ce qui est génial, c'est que nous commençons à tester l'interaction entre un produit numérique et un produit physique, et c'est un bon moyen de diviser un peu les utilisateurs et de leur faire comprendre comment il va être utilisé dans le contexte, un peu plus que quelque chose comme des prototypes rapides ou simplement un simple prototype papier et aller de l'avant avec les classes suivantes. Ce que nous pourrions obtenir dans l'exécution d'un prototype plus haute fidélité avec des interactions mawr et un environnement plus crédible que nous pouvons rendre. Mais pour l'instant, s'il vous plaît n'hésitez pas à essayer de faire de l'exercice en classe et laissez-moi savoir. Vous pensez que merci