Schnelles IOT-Prototyping in Protopie

1. Einführung: Hey, Leute, ich bin heute bei mir. Wir werden lernen, wie man interaktive Iva T-Prototypen schnell mit einem Programm namens Proto by erstellt . Sie können einen kostenlosen Download fangen, wo Sie eine Lizenz bekommen $100 für ein Jahr Updates, und ich denke, das ist auch den Preis wert. Und wir werden später darauf eingehen, warum es wertvoll ist. Was ist ein I T Produkt Ich mag es, i o T Produkte als etwas mit mehreren Kanälen der Kommunikation zu denken . Denken Sie, es wählt ein Nest Philip Glühbirne. Es ist also alles, was mit einem physischen Produkt und einem digitalen Gegenstück verbunden ist, und es ist wirklich diese Interaktion dazwischen, die so schwer zu testen ist. Und deshalb braucht es so viel Zeit und Geld, um wirklich etwas greifbares zu bekommen, um Nutzerfeedback zu erhalten . Und das ist der Grund, warum ich dieses Video mache, ist, weil ich von einem schnellen Weg und Prozess weiß , dass Menschen Benutzerfeedback früh im Prozess bekommen können, um eine Menge der Spekulationen zu beenden, die passiert, was Leute denken, Produkte sollten tun. Eines der Dinge, von denen Sie mit dieser Klasse wegkommen werden, ist, wie Sie einen schnellen Prototyp machen können, um Benutzerfeedback darüber zu erhalten und eine Menge davon zu beenden. Spekulation, die in frühen Entwicklungsprozess geschieht, ist so ein kleiner Hintergrund auf mich. Ich bin ein Produktdesigner Digital Scientist in Atlanta, und mein Hintergrund ist in mobilen Anwendungen und Websites, speziell für ein i ot Produkte. Ich habe an allem gearbeitet, von Elektrowerkzeugen bis hin zu Smart Home-Produkten, und das sind alles Dinge, die ich gelernt habe, um meinen Prozess zu verbessern, und ich hoffe, es sind Dinge, die auch wertvoll sein können, also lasst uns anfangen. 2. Schritt: 1 Erstellen der Input (Toggle-Switch): Okay, also sobald du glaubwürdig geöffnet hast, wirst du es auf der linken Seite bemerken. Sie haben Beispieldateien, die als Referenz hilfreich sind, aber für diese wird eine neue Torte auswählen. Wer wird diese Vorschau minimieren? Und das war, um so einen schnellen Überblick über das, was auf dem Bildschirm auf der linken Seite zu starten. Wir haben die Ebenen Panel in der Mitte der Kunst Boards. Dies ist, wo gut, zeichnen Sie alles nach rechts ist das Interaktionspanel, und rechts davon ist das Intra-Patienten-Panel und als Anfang, wird sicherstellen, dass unsere Bildschirmgrößen korrekt. Das wird also nur variieren, je nachdem, wofür Sie entwerfen. Aber für mich wähle ich Android aus. Das erste, was ich erstellen möchte, ist mein Kippschalter für die Glühbirne. Also bringen wir ein Rechteck hinein, und wir setzen den Ursprung in die Mitte und Notiz. Es ist nicht wirklich wichtig, wo der Ursprung ist, solange er mit allem übereinstimmt, was Sie fallen lassen, also machen wir dies ein bisschen mehr als ein Rechteck. Ich ziehe nur da runter, und wir werden es auf unserem Brett zentrieren, und dann, da es ein Kippschalter ist, wird der Radius 100 machen und das erste, was wir wollen, dass der Kippschalter eingeschaltet ist, also werden wir gehen Sie voran und machen und als nächstes werden wir über machen. Es würde den Schalter geben und so wird wieder der Ursprung zum Zentrum machen, und wir werden das in die Mitte fallen lassen . Und wir werden die Option Shift benutzen, um das zu skalieren. Und hier drüben, der Größe, die Sie bemerkt haben, gibt es ein kleines Schloss. Und wenn wir das Glück auswählen, können wir diese Tasten verwenden, um es gleichmäßig skalieren zu lassen und dann die Tastatur benutzen, um es darüber zu stoßen , wo wir Teoh brauchen und die Farbe ändern. Ein bisschen ist hier unten gut. Wir können auch einen Schlagschatten hinzufügen und ich werde, weil es ein Element ist, das sich über der Hintergrundebene befindet . Und jetzt, da wir unseren Kippschalter gezeichnet haben, können wir ihn im Vorschaufenster betrachten und unseren Kippschalter haben. Der nächste Schritt, den wir hier machen werden, wenn Sie bemerken, hier zu klicken, tut noch nichts, und das liegt daran, dass wir keine Interaktionen hinzugefügt haben. Das wird also unser nächster Schritt sein 3. Schritt 2: Interaktionen hinzufügen: Okay, die erste Interaktion, die wir hinzufügen werden, wird sein, diesen Kippschalter nach linkszu bewegen links unser Leben effektiv auszuschalten. Also gehen wir, um Trigger hinzuzufügen und wir wollen tippen. Und wenn Sie schauen, gibt es hier eine Reihe von anderen Optionen, und Sie können wirklich einige ziemlich tiefe Interaktionen bekommen, aber wir werden es für dieses einfach halten. So oben und bat mich, eine Ebene auszuwählen, und ich habe über eine und Rechteck eine und eine kurze Notiz. Es ist immer hilfreich, Sie sind Ebenen angemessen zu benennen, da es bei einigen großen Dateien sehr einfach ist, diese durcheinander zu bringen. Also, jetzt, wenn wir über gehen, wollen sie sagen Schalter, und was wir tun wollen, ist nach links bewegt, simuliert es ausgeschaltet. Also, wenn wir hier rüber gehen, mussten wir uns auf der X-Achse bewegen. Wenn Sie also auf die Kunsttafel klicken, wissen wir, dass es eine Position zu 7.5 ist, und es ist hilfreich, diese Zahlen niederzuschreiben, entweder in Notizen oder auf Papier, was auch immer Sie bevorzugen, also verschieben wir es zu etwa wo Es sollte ausgeschaltet werden und wir sind 1 53.5 nicht Befehl Z, bis es wieder dort ist, wo es begonnen hat. Dann gehen wir zu X, und wir wissen, dass es auf 1 53.5 verschoben werden muss. Jetzt, wo wir diese Einrichtung haben, können wir es in unserem Vorschaufenster betrachten. Also, wenn wir tippen, bedeutet es immer, wo es sollte. Der nächste Schritt ist, dass wir nicht wollen, dass es sich nur bewegt. Wir wollen, dass sich die Farbe ändert, damit sie ausgeschaltet wird. Also werden wir Farbhintergrund gehen und dann füllen, um zu Grau zu wechseln. Wenn Sie hier bemerken, gibt es einige andere Lockerungs- und Animationszwecke, die Sie für die vornehmen können. Die Zwecke dieses Glases wird nur halten ist in und aus in einer Dauer von Punkt zu. Aber wenn Sie jemals erkunden möchten, gibt es einige ziemlich interessante Animationen, die Sie anpassen können und einige ziemlich einfache Dinge zu bekommen. Gehen wir zurück zu unserer Vorschau. Ich werde das hier runterwerfen, damit wir unser Vorschaufenster oben sehen können. Also, wenn wir klicken, wird es auch die Farbe ändern. Aber das Problem ist, wenn wir wieder klicken, Es bewegt sich nicht. Das ist, was wir brauchen, um dio ist eine bedingte Anweisung in setzen, um sicherzustellen, dass der Schalter ein- und ausgeschaltet werden könnte . Also, wenn unser Schalter, wenn ihre Schalter X Wert gleich 1 53.5 ist, so ist das der Wert dafür aus. Dann wollten wir zurück auf seine on-Position bei zwei von 7,5 bewegen. , Lassen Sie uns sehen,ob das funktioniert hat. Ok, großartig. Es hat geklappt. Jetzt bemerken Sie, dass wir es ein- und ausschalten können. , Alles,was wir tun müssen, ist bei einem Farbwechsel zurück zu Grün für diesen Zustand. Stellen Sie sicher, dass die richtigen Ebenen grün ausgewählt sind. Ok, perfekt. Alles andere sieht gut aus. Das ist eine Vorschau noch einmal. Ehrfürchtig. Jetzt, wo wir ihre Datei mit Interaktionen eingerichtet haben, ist das nächste, was wir tun werden, Befehle an einen anderen Prototyp zu senden 4. Schritt 3: Erstellung des Ausgangs (Licht): Okay, jetzt wollen wir sün-Befehle zu einem anderen Prototyp hinzufügen. Und so alles, was bedeutet, ist, wenn wir über den Schalter an und aus sprechen, wird es einen Befehl zu einem anderen Prototyp sitzen, um ein Licht eigenes Haus zu drehen. Also werden wir hierher gehen und Kommando schicken. Und wir haben gerade hinzugefügt, dass vor dieser Bedingung, und wir wissen, dass bedeutet, einschalten und keine Benachrichtigung können Sie Kanal auswählen erscheinen wir Kredit von Studios verwenden . Das bedeutet nur, dass es mit einem anderen Prototyp Android-Sendung kommunizieren wird, ist etwas anderes. Gehen Sie später hinein, die Nachricht wird eingeschaltet, und so wird hier unten unter der bedingten Anweisung. Wir fügen einen weiteren Sendebefehl hinzu, der ausgeschaltet werden soll. Und es ist wichtig, sich daran zu erinnern, wie Sie diese nennen, denn es muss genau das Ziel sein sich an den Befehl und andere Raubtiere zu erinnern. Also, jetzt, da das getan ist, können wir Datei speichern gehen, und wir werden diesen Schalter Eingang aufrufen. Wir werden das auf den Desktop sagen, und dann können wir eine neue Datei Supergröße erstellen. Ich werde es auf seinen Desktop setzen. Und der Grund, warum ich das mache, ist, dass wir wahrscheinlich einen anderen Computer oder einen Fernsehbildschirm oder vielleicht sogar einen Projektor zeigen werden. Es hängt wirklich nur davon ab, wie Sie einem Benutzer einen Prototyp anzeigen möchten. Und das, was wir tun werden, ist wichtig Allied, wir werden nicht importieren. Wir bringen ein Bild ein, das wir in diese Glühbirne bringen werden. Es wird das auf dem Bildschirm zentrieren, und dann gehen wir Rechteck. Wir werden ein Rechteck erstellen, das die Größe des Kunsttafels hat und in diesem Ebenenfenster bemerken , es nicht auftaucht. Alles, was Sie tun können, ist Drag & Drop, um neu anzuordnen. Und wir werden dieses Rechteck schwarz machen, damit das Licht ausgeschaltet ist, damit Sie nichts sehen können . Und dann, nachdem wir das bekommen haben, werden wir hier drüben Trigger hinzufügen, erhalten Sie? Und die Nachricht, die sie erhalten möchte, ist deaktiviert und stellt sicher, dass die Farbe des Rechtecks Zehe Schwarz ändert und die andere Nachricht, die wir erhalten möchten, aktiviert wird. Und wir wollen, dass sich die Farbe ändert. Nehmen wir an, orange, wenn es die Einschaltbefehl erhält, alles sieht gut aus, so dass wir Vorschau, die minimieren können. Und was wir jetzt tun können, ist, dass Sie Ihr Telefon aus und nach unten nehmen können die hübsche App, wenn Sie noch nicht getan haben, und wir können dieses erste Design auf sie Vorschau. 5. Schritt 4: Vorschau auf Mobilen: Also, wenn Forschung verschönert Spieler im APP Store, werden wir finden, was wir brauchen. Und wenn du das erst geöffnet hast, wirst du es ganz oben bemerken. Wir haben den Typ in US-Geschwindigkeit gescannt. Sie können alle drei verwenden, um eine Verbindung mit einem Prototyp herzustellen, und Sie haben auch aktuelle Verbindungen. Die Unterseite Wenn Sie bereits WiFi verbunden haben, aber werden Sie nach diesem scannen? Es ist normalerweise ziemlich sicher in Ihrer ersten Verwendung, und Sie können zu den beiden obersten Gerät gehen, um den Barcode, den sie bemerkt haben, hochzuziehen. Ihr Prototyp kommt automatisch auf Ihr Telefon, und wir verwenden ihn für den nächsten Schritt. 6. Endgültiger Schritt: Betrachte deine Interaktion: Sobald Sie Ihr Guthaben per APP heruntergeladen haben, können Sie den Prototyp scannen oder verwenden, um den Prototyp hochzuziehen oder WiFi nutzen, wenn es vorher verbunden . Aber sobald wir es hochgezogen haben, können wir unseren Lichtprototyp an ihrem Computer hochziehen, und Sie werden feststellen, dass, wenn wir über das Ein- und Ausschalten unserer Lichtreaktion und die Schönheit dieses Wesens auf einem Computer sprechen , wenn Sie es brauchen, können Sie es an einen Fernseher oder einen Projektor anschließen. Wenn Sie in einem Meetingraum mit Benutzer sind, ist es wirklich einfach, dies in ein wenig professioneller Umgebung zu verspotten. Aber das Tolle daran ist, dass wir beginnen, die Interaktion zwischen einem digitalen und einem physischen Produkt zu testen , und es ist eine gute Möglichkeit, die Benutzerfokussierung ein wenig zu teilen und sie dazu zu bringen, zu verstehen, wie es im Kontext verwendet wird, ein wenig mehr als so etwas wie schnelle Prototypen oder einfach nur ein Papierprototyp und Vorwärtsfahren mit den nächsten Klassen. Was wir in die Ausführung eines mehr High-Fidelity-Prototyps mit Mawr-Interaktionen und einer glaubwürdigeren Umgebung bekommen könnten, die wir rendern können. Aber für jetzt, bitte zögern Sie nicht zu versuchen, Übung zu unterrichten und lassen Sie es mich wissen. Ihr denkt, danke