Share
Prototyping sollte eine schnelle und einfache Möglichkeit sein, Vertrauen in Ihre Entwürfe zu gewinnen. Prototyping wird nicht mehr nur als eine Möglichkeit betrachtet, bewegungszauber oder überpolierte Designs zu besprühen, sondern ist ein Kommunikationsmittel. Bei der Kommunikation mit Stakeholdern, Design-Managern oder Benutzern hilft ein guter Prototyp, Konstruktionsentscheidungen zu kommunizieren und Ideen zu testen.
In diesem Tutorial erstellen wir in Atomic einen grundlegenden Prototyp für die „Bordkarte“, den Sie hier ansehen können. Der Prototyp beginnt mit einem Ladezustand, bevor Sie Ihre kommenden Flüge durchsuchen und eine Vorschau Ihres Boarding-QR-Codes anzeigen können. Zur Erstellung dieses Prototyps verwenden wir interaktive Komponenten, Daten, Variablen und Seitenübergänge. Keine Sorgen machen! Ich werde dir durch jeden Schritt helfen.
Hier ist eine Demo von dem, was wir erstellen werden:
Es gibt einige Dinge, die Sie benötigen, um mitzukommen:
atomic.ioWenn Sie zu irgendeinem Zeitpunkt des Tutorials eine Frage haben, wenden Sie sich an mich (@femkesvs) oder an das Atomic-Support-Team (@we_are_atomic) auf Twitter.
Lass uns gehen!
Ich habe eine Beispieldatei mit den Assets erstellt, die Sie zum Erstellen Ihres Prototyps benötigen. Diese Beispieldatei enthält alle von uns verwendeten Assets sowie vorgefertigte Komponenten.
Sie können hier auf die Assets zugreifen. Um die Assets verwenden zu können, müssen Sie den Prototyp in Ihr Konto kopieren. Sie können dies tun, indem Sie auf klicken Kopieren und bearbeiten und wählen Sie ein Projekt aus, in das Sie es kopieren möchten. Ich empfehle, ein neues Projekt für dieses Tutorial zu erstellen.
Bevor wir mit der Erstellung unseres Prototyps beginnen, müssen wir zunächst die Datenquelle zu Atomic hinzufügen. Ich habe ein Google Sheet mit einigen grundlegenden Daten zusammengestellt, die wir in unserem Prototyp verwenden werden.
Sie können hier auf die Daten zugreifen. Bei geöffneter Datenquelle gehen Sie zu Datei> Zu meinem Laufwerk hinzufügen (Sie benötigen dazu ein Google-Konto).
Wählen Sie anschließend bei geöffnetem Projekt in Atomic die Option Daten Tab. Hier klicken Daten importieren, und suchen Sie die Datenquelle über die Suche. Wenn Sie sich lokalisiert haben, wählen Sie die Datenquelle aus. Sie werden sehen, wie Atomic die Daten in Ihr Projekt lädt. Auf diese Datenquelle kann jetzt in jedem Prototyp innerhalb des Projekts zugegriffen werden.
Wir sind bereit!
Beginnen wir mit der Montage unseres Prototyps, indem wir den Ladezustand erstellen. Dazu erstellen wir eine benutzerdefinierte Überblendung und eine zeitgesteuerte Seitenaktion.
Wählen Sie zuerst die Ladekomponente auf der Assets-Seite aus, um sie zu kopieren (CMD-C und fügen Sie sie (CMD-V) auf Seite 1 ein. Sie wird groß sein und positioniert sie nicht in der Größe, sondern in ihrer Startposition.
Kopieren Sie dann das soeben auf Seite 1 platzierte Ladeelement, und fügen Sie es auf Seite 2 ein. Positionieren Sie es in seinen endgültigen Zustand (um 75 ° im Uhrzeigersinn gedreht, sodass die Ebene von der rechten Seite der Leinwand entfernt ist)..
Um unseren Übergang zu erstellen, kehren Sie zu Seite 1 zurück. Im rechten Bereich der Eigenschaften wird ein Abschnitt mit dem Namen angezeigt Seitenaktionen. Klicken Sie auf die Plus-Schaltfläche und legen Sie Folgendes fest:
Lassen Sie uns eine Vorschau anzeigen und unseren Übergang in Aktion sehen - Sie sollten das Flugzeug von links nach rechts über zwei Sekunden hinweg gleiten sehen. Ordentlich!
Um es weiter auszudrücken, können Sie das Fly-Logo auch auf Seite 1 und Seite 2 kopieren und einfügen (unter der Ladekomponente im Seitenbereich und hinter diesem platziert). Stellen Sie sicher, dass Sie die gleiche Technik anwenden, indem Sie sie auf jeder Seite an die Start- und Endposition setzen. Sie müssen wahrscheinlich die Reihenfolge Ihrer Ebenen anpassen, damit sie von hinten erscheint.
Als letztes müssen wir eine Aktion erstellen, die den Benutzer automatisch zu Seite 3 von Seite 2 führt. Fügen Sie auf Seite 2 eine weitere zeitgesteuerte Seitenaktion hinzu. Dieses Mal verwenden wir die folgenden Einstellungen:
Spitze: Wenn Sie das Timing der beiden animierten Elemente zeitlich verschieben möchten, können Sie dies mit der Erweiterte Bewegungszeitleiste.
Kopieren Sie anschließend die für Seite 3 erforderlichen Elemente und fügen Sie sie auf Seite 3 ein. Sie müssen die Anordnung der Elemente auf der Seite anpassen und anpassen.
Fast alle Elemente, die für diese Seite benötigt werden, sind Komponenten.
Komponenten in Atomic sind wie Symbole. Jede Komponente kann im gesamten Projekt bearbeitet und wiederverwendet werden. Alle an einer Komponente vorgenommenen Änderungen werden in jeder Instanz aktualisiert. Komponenten können auch interaktiv sein und mehrere Status eines Symbols enthalten. Dies macht es sehr einfach, Ihren Prototyp zu strukturieren.
Fügen wir der boardingPasses-Komponente etwas Interaktivität hinzu. Doppelklicken Sie zum Öffnen der Komponente auf das Komponentensymbol im Ebenenfenster neben dem Ebenennamen. Nach dem Öffnen werden drei Seiten angezeigt. eine, die jeden Flug darstellt. Im Moment sind diese Pässe identisch, wir werden das bald ändern.
Wir wissen, dass der Benutzer drei Flüge hat und wir möchten, dass er jeden Flug durchblättern kann. Es gibt auch ein QR-Code-Symbol, mit dem bei der Interaktion der Code für die Bordkarte angezeigt werden soll.
Wenn Sie im Ebenenfenster nachsehen, werden Sie feststellen, dass jede Seite eine Instanz einer Komponente ist, die als BoardingCard bezeichnet wird. Lassen Sie uns jetzt die BoardingCard-Komponente öffnen, um zu sehen, wie die Daten angewendet wurden.
Die BoardingCard-Komponente ist eine in eine Komponente eingebettete Komponente. Auf diese Weise können wir ein Boarding-Kartensymbol erstellen, das bei Anzeige verschiedener Datensätze wiederverwendet werden kann.
Bei geöffneter BoardingCard-Komponente werden zwei Seiten angezeigt. die Vorder- und Rückseite des Passes. Hier werden die Daten den einzelnen Textelementen zugeordnet.
Vom Elternteil geerbte DatenMarkieren Sie den ABC-Text und sehen Sie sich das an Texteigenschaften. Sie werden Folgendes bemerken:
Wenn Sie anschließend auf das Google Sheet schauen, aus dem diese Daten abgerufen werden, wird eine Spalte mit dem Titel "Abfahrtscode" angezeigt. Das heißt, das Textelement ABC zeigt an, welche Daten in der Spalte "Abgangscode" angezeigt werden..
Der gesamte dynamische Text in dieser Komponente wurde auf festgelegt Von Elternteil erben. Dies ermöglicht uns, auf einer Gruppenebene mit dem Datenblatt zu verknüpfen und daher die Daten Zeile für Zeile anzuzeigen und zu sortieren. Wir werden bald dazu kommen.
Als Nächstes richten wir einen seitenbasierten Übergang ein, um zwischen dem Pass- und QR-Code zu wechseln. Drücken Sie auf der Vorderseite der BoardingCard-Komponente H um das Hotspot-Tool aufzurufen. Zeichnen Sie dann einen Hotspot über das QR-Code-Symbol auf der Startseite.
Mit Hotspots können Sie interaktive Bereiche Ihres Prototyps definieren. Wenn Ihr Hotspot ausgewählt ist, legen Sie im Interaktionsbereich Folgendes fest:
Dann erstellen Sie auf der Rückseite einen weiteren Hotspot (H), der uns zurück zur Startseite führt. Diesmal zeichnen Sie es über die schließen Icon und setze folgendes:
Zeit, um Ihre Interaktion zu testen! Drücken Sie in der rechten unteren Ecke die Taste Vorschau Taste. Im Vorschaumodus können Sie Ihre Übergänge testen und über Hotspots mit Ihrem Prototyp interagieren. Versuchen Sie, auf die QR-Karte zu klicken oder das Symbol zu schließen. Die Karte sollte zwischen den beiden Zuständen wechseln. Sie können die Vorschau schließen, indem Sie drücken X.
Durch die Verwendung dieser Boarding-Karte als interaktive Komponente können wir auswählen, welche Daten dynamisch angezeigt werden, ohne dass mehrere Status und Interaktionen erstellt werden müssen.
Um zurückzukehren, klicken Sie auf das Lila zurück Taste oben links. Jetzt sollten Sie wieder in der Komponente boardingPasses sein. In dieser Komponente haben wir drei Durchgänge, die aktuell dieselben Daten anzeigen. Lassen Sie uns dies jetzt aktualisieren.
Denken Sie daran, wie die Daten in der BoardingCard-Komponente eingestellt waren Von Elternteil erben? In diesem Fall ist das übergeordnete Element die Komponenteninstanz.
Wählen Sie auf der Seite Flight 1 die BoardingCard-Instanz aus. In dem Komponenteneigenschaften verlassen Zustand wie es ist. Unter Daten, Wählen Sie die Datenquelle und stellen Sie sicher, dass Reihe ist auf Zeile 1 gesetzt. Die Instanz sollte jetzt Daten aus der ersten Zeile des Datenblattes anzeigen.
Wenn Sie die Zeile umschalten, werden Sie feststellen, dass die angezeigten Daten aktualisiert werden. Lassen Sie es jetzt in der ersten Reihe bleiben, aber setzen Sie in Flug 2 und Flug 3 die Daten der Reihen 2 und 3 ein.
Damit Benutzer ihre Bordkarten durchziehen können, müssen wir einige Wischinteraktionen einrichten.
Erstellen und zeichnen Sie einen Hotspot (H) auf der rechten Seite der Flight 1-Seite (stellen Sie sicher, dass oben oberhalb des Symbols auf der Rückseite der BoardingCard-Komponente etwas Platz für den Hotspot vorhanden ist und dass dies nicht der Fall ist.) (den QR-Code auf der Titelseite verdecken). Verwenden Sie zum Erstellen der Wischgeste die folgenden Einstellungen:
Machen Sie dasselbe auf der Flugseite 2 und fügen Sie einen zweiten Hotspot auf der linken Seite der Flugseite 2 und Flugseite 3 hinzu Nach rechts drücken und Nach links drücken stattdessen. Fühlen Sie sich frei zu drücken Vorschau um die Komponente zu testen und damit zu interagieren, und passen Sie Ihre Wischeinstellungen entsprechend an.
Um den Prototyp fertig zu stellen, müssen wir eine Variable erstellen und verwenden. Diese Variable ermöglicht es unseren Komponenten, miteinander zu sprechen und ihren Zustand zu beeinflussen.
Die Variable, die wir erstellen, wird verwendet, um die Fortschrittspunkte basierend auf der angezeigten Bordkarte zu aktualisieren.
Um eine Variable zu erstellen, drücken Sie V die öffnen Variablen modal. Hier klicken Neue Variable erstellen und geben Sie "flightDisplayed" in die Name Feld. Lassen Sie den Standardwert leer.
Toll, Sie haben Ihre Variable eingerichtet! Schließen Sie das Variablenmodal durch Drücken von X oder Flucht auf deiner Tastatur.
Navigieren Sie zurück zum Prototyp. Wenn wir jetzt von der Startseite aus eine Vorschau anzeigen, sollten Sie in der Lage sein, zwischen den Karten zu streichen und auch mit dem QR-Code zu interagieren.
Während wir jetzt durch die Pässe streichen können, gibt es ein paar weitere Dinge zu konfigurieren, um die Fortschrittspunkte zu beeinflussen, die aufgrund des Fortschritts der Bordkarten aktualisiert werden sollen.
Öffnen Sie dazu die Komponente boardingPasses. Auf Seite 1 erstellen wir die folgende Seitenaktion:
Wiederholen Sie diesen Vorgang auf Seite 2 und 3 und stellen Sie sicher, dass der Wert auf 2 oder 3 eingestellt ist, um die Seite anzuzeigen, auf der Sie sich gerade befinden.
Wir haben der Komponente boardingPass effektiv gesagt, dass sie den Wert der variablen Fluganzeige je nach angezeigtem Flug (Seite) aktualisieren soll. Wir können diesen Wert jetzt verwenden, um den Status der Fortschrittspunkte zu beeinflussen.
So geht's: Gehen Sie zurück zum Prototyp und öffnen Sie die progressDots-Komponente.
Sie werden drei Seiten (Zustände) mit den Namen 1, 2 und 3 bemerken. Diese Benennung stimmt mit den Werten überein, die in der flightDisplayed-Variablen festgelegt sind. Es ist wichtig, dass diese Seitennamen den eingestellten Werten entsprechen.
Gehen Sie zurück zum Prototyp, wählen Sie die progressDots-Komponente aus und:
Wir haben nun die progressDots-Komponente mit der Variable flightDisplayed verbunden. Das heißt, wenn sich der Wert der Variablen in einen Wert ändert, zeigt die progressDots-Komponente die Seite an, die dem Variablenwert entspricht.
Versuchen Sie jetzt, eine Vorschau Ihres Prototyps anzuzeigen und mit den Bordkarten zu interagieren, indem Sie durch Wischen nachsehen, ob die Fortschrittspunkte aktualisiert werden.
Zuletzt können Sie die Seite "Assets" löschen oder verschieben, um sicherzustellen, dass Ihre freigegebene Vorschau auf der richtigen Startseite angezeigt wird. Um die Seite zu löschen, wählen Sie das Hamburger-Menü in der Seitenminiatur und klicken Sie auf Seite löschen.
Spitze: Prüfen Sie, ob Sie herausfinden können, wie die PromoCard-Komponente ihren Status basierend auf dem angezeigten Flug aktualisieren kann. Sie möchten eine neue Variable namens cardDisplayed erstellen.
Hier hast du es! Ihre ganz eigene Boarding Pass App. Wenn Sie die iOS-App heruntergeladen haben, versuchen Sie, den Prototyp zu öffnen und auf Ihrem iPhone damit zu interagieren. Es sollte sich genau so anfühlen, als wäre es das Richtige.
Gut gemacht, wenn Sie dieses Tutorial bis zum Ende durchlaufen haben. Sie sollten jetzt gründlich wissen, wie Sie Ihren eigenen Prototyp in Atomic erstellen können. Wenn Sie bereits vorhandene Assets in Sketch haben, können Sie sie mit dem Atomic Plugin für Sketch importieren oder, wenn Sie möchten, nativ in Atomic entwerfen.
Fragen? Bemerkungen? Lass sie unten oder kontaktiere mich auf Twitter (@femkesvs).
Accentsconagua