Erfahren Sie, wie Sie einen Prototyp in Atomic erstellen

Prototyping sollte eine schnelle und einfache Möglichkeit sein, Vertrauen in Ihre Designs zu gewinnen. Prototyping wird nicht mehr nur als eine Möglichkeit angesehen, Bewegungsmagie zu verbreiten oder Designs zu überpolieren, sondern ist ein Kommunikationswerkzeug. Ob bei der Kommunikation mit Stakeholdern, Designmanagern oder Benutzern, ein guter Prototyp hilft, Designentscheidungen und Testideen zu kommunizieren.

Unser Prototyp

In diesem Tutorial erstellen wir in Atomic einen einfachen Prototyp der "Bordkarte", den Sie hier in der Vorschau anzeigen können. Der Prototyp beginnt mit einem Ladezustand, bevor Sie Ihre bevorstehenden Flüge durchsuchen und eine Vorschau Ihres Boarding-QR-Codes anzeigen können. Um diesen Prototyp zu erstellen, verwenden wir interaktive Komponenten, Daten, Variablen und Seitenübergänge. Keine Sorgen machen! Ich helfe Ihnen bei jedem Schritt.

Hier ist eine Demo dessen, was wir erstellen werden:

Tutorial-Assets

Es gibt ein paar Dinge, die Sie benötigen, um mitzumachen:

1. Ein Atomic-Konto: Beginnen Sie mit einer kostenlosen Testversion (es gibt auch einen kostenlosen Plan).
2. Design-Assets: Dies ist die Datei, in der Sie die Design-Assets finden und Ihren Prototyp erstellen.
3. Datenquelle: Eine Google Sheet-Datei mit den Daten, die wir in unserem Prototyp verwenden.
4. Atomic iOS App: Laden Sie die App aus dem App Store herunter, um Ihren Prototyp auf Ihrem Telefon zu testen.

Wenn Sie während des Tutorials zu irgendeinem Zeitpunkt eine Frage haben, können Sie sich gerne an mich (@femkesvs) oder das Atomic-Supportteam (@we_are_atomic) auf Twitter wenden.

Lassen Sie uns gehen!

1. Kopieren Sie die Vermögenswerte auf Ihr Konto

Ich habe eine Beispieldatei mit den Assets erstellt, die Sie zum Erstellen Ihres Prototyps benötigen. Diese Beispieldatei enthält die von uns verwendeten Assets sowie vorgefertigte Komponenten.

Hier können Sie auf die Assets zugreifen. Um die Assets nutzen zu können, müssen Sie den Prototyp in Ihr Konto kopieren. Sie können dies tun, indem Sie unten rechts auf Kopieren und Bearbeiten klicken und dann ein Projekt auswählen, in das Sie es kopieren möchten. Ich schlage vor, ein neues Projekt für dieses Tutorial zu erstellen.

2. Laden Sie die Daten auf Atomic hoch

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.

Hier können Sie auf die Daten zugreifen. Gehen Sie bei geöffneter Datenquelle zu Datei > Zu meinem Drive hinzufügen (hierfür benötigen Sie ein Google-Konto).

Wählen Sie als Nächstes, während Ihr Projekt in Atomic geöffnet ist, die Registerkarte Daten aus. Klicken Sie hier auf Daten importieren und suchen Sie die Datenquelle über die Suche. Sobald Sie gefunden haben, wählen Sie die Datenquelle aus. Sie sehen, wie Atomic die Daten in Ihr Projekt lädt. Auf diese Datenquelle kann nun zugegriffen und in jedem Prototyp innerhalb des Projekts verwendet werden.

Wir sind bereit!

3. Erstellen des Ladezustands

Beginnen wir mit dem Zusammenbau unseres Prototyps, indem wir den Ladezustand erstellen. Dazu erstellen wir sowohl einen benutzerdefinierten Übergang als auch eine zeitbasierte Seitenaktion.

Wählen Sie zunächst die Ladekomponente auf der Assets-Seite aus, um sie zu kopieren (CMD-C und fügen Sie sie in die Seite 1 ein. Sie wird groß sein, und anstatt die Größe zu ändern, positionieren Sie sie an ihrer Startposition.

Kopieren Sie dann das soeben auf Seite 1 platzierte Ladeelement, dieses Mal 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 außerhalb der rechten Seite der Leinwand liegt).

Um unseren Übergang zu erstellen, springen Sie zurück zu Seite 1. Im rechten Eigenschaftenbereich sehen Sie einen Abschnitt namens Seitenaktionen. Klicken Sie auf die Plus-Schaltfläche und stellen Sie dann Folgendes ein:

• Machen Sie etwas: Nach einer festgelegten Zeit
• Warten: 0
• Gehen Sie zu Seite 2
• Bewegung: Benutzerdefinierter Übergang
• Easing: Einfach rein- raus
• Dauer: 2000

Sehen wir uns unseren Übergang in der Vorschau an – Sie sollten sehen, wie das Flugzeug im Verlauf von zwei Sekunden von links nach rechts gleitet. Ordentlich!

Um es weiter zu bringen, können Sie das Fly-Logo auch kopieren und sowohl auf Seite 1 als auch auf Seite 2 einfügen (unter der Ladekomponente im Seitenbereich und dahinter platziert). Stellen Sie sicher, dass Sie dieselbe Technik befolgen, um es auf jeder Seite an seiner Anfangs- und Endposition zu platzieren. Sie müssen wahrscheinlich die Reihenfolge Ihrer Ebenen anpassen, damit sie von hinten angezeigt werden.

Schließlich müssen wir eine Aktion erstellen, die den Benutzer automatisch von Seite 2 zu Seite 3 führt. Fügen Sie auf Seite 2 eine weitere zeitgesteuerte Seitenaktion hinzu. Diesmal verwenden wir die folgenden Einstellungen:

• Machen Sie etwas: Nach einer festgelegten Zeit
• Warte: 1000
• Zur Startseite
• Bewegung: Nach oben schieben
• Easing: Einfach rein-raus
• Dauer: 300

Tipp: Wenn Sie das Timing der beiden Animationselemente versetzen möchten, können Sie dies mit der Advanced Motion Timeline tun.

4. Komponenten verstehen

Kopieren Sie als Nächstes die für Seite 3 benötigten Elemente und fügen Sie sie auf Seite 3 ein. Sie müssen ein wenig neu anordnen und anpassen, um die Elemente nach Bedarf auf die Seite zu passen.

Fast alle für diese Seite benötigten Elemente sind Komponenten.

Ein Wort zu Komponenten

Komponenten in Atomic sind wie Symbole. Jede Komponente kann in einem Projekt bearbeitet und wiederverwendet werden. Alle an einer Komponente vorgenommenen Änderungen werden in jedem Fall aktualisiert. Komponenten können auch interaktiv sein und mehrere Zustände eines Symbols enthalten. Dies macht es wirklich einfach, Ihren Prototypen zu strukturieren.

Lassen Sie uns der BoardingPasses-Komponente etwas Interaktivität hinzufügen. Um die Komponente zu öffnen, doppelklicken Sie auf das Komponentensymbol im Ebenenbedienfeld neben dem Ebenennamen. Nach dem Öffnen sehen Sie drei Seiten; eine für jeden Flug. Im Moment sind diese Pässe identisch, bald werden wir dies ändern.

Wir wissen, dass der Benutzer drei Flights hat und möchten, dass er jeden durchblättern kann. Es gibt auch ein QR-Code-Symbol, das bei Interaktion den Bordkartencode anzeigen sollte.

Wenn Sie im Ebenenbedienfeld nachsehen, werden Sie feststellen, dass jede Seite eine Instanz einer Komponente namens "boardingCard" ist. Öffnen wir jetzt die BoardingCard-Komponente, um zu sehen, wie die Daten angewendet wurden.

5. Verwendung der Daten

Die BoardingCard-Komponente ist eine in eine Komponente eingebettete Komponente. Auf diese Weise können wir ein Bordkartensymbol erstellen, das wiederverwendet werden kann und gleichzeitig verschiedene Datensätze anzeigt.

Wenn die boardingCard-Komponente geöffnet ist, sehen Sie zwei Seiten; die Vorder- und Rückseite des Passes. Hier werden die Daten den einzelnen Textelementen zugeordnet.

Wählen Sie den ABC-Text aus und sehen Sie sich die Texteigenschaften an. Sie werden Folgendes bemerken:

• Inhalt: Set aus Datenspalte
• Daten: Von Eltern erben
• Spalte: Abfahrtscode

Wenn Sie sich anschließend das Google Sheet ansehen, aus dem diese Daten stammen, sehen Sie eine Spalte mit dem Titel "Abflugcode". Das bedeutet, dass das Textelement ABC alle Daten anzeigt, die in der Spalte "Abfahrtscode" angezeigt werden.

Der gesamte dynamische Text in dieser Komponente wurde auf Vom übergeordneten Element erben gesetzt. Dies ermöglicht es uns, auf Gruppenebene auf das Datenblatt zu verlinken und somit die Daten Zeile für Zeile anzuzeigen und zu sortieren. Dazu kommen wir gleich.

6. Hinzufügen einer Flip-Interaktion

Als Nächstes richten wir einen seitenbasierten Übergang ein, um zwischen dem Pass und dem 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 Titelseite.

Mit Hotspots können Sie interaktive Bereiche Ihres Prototyps definieren. Wenn Ihr Hotspot ausgewählt ist, legen Sie im Interaktionsfeld Folgendes fest:

• Geste: Klicken oder tippen
• Gehen Sie zu: > Nächste Seite
• Bewegung: Flip
• Easing: Einfach rein-raus
• Dauer: 300MS

Erstellen Sie dann auf der Rückseite einen weiteren Hotspot (H), der uns zurück zur Vorderseite führt. Ziehen Sie es dieses Mal über das Schließen-Symbol und stellen Sie Folgendes ein:

• Geste: Klicken oder tippen Sie auf
• Gehe zu: > Vorherige Seite
• Bewegung: Flip
• Lockerung: Einfaches Ein- und Aussteigen
• Dauer: 300MS

Zeit, Ihre Interaktion zu testen! Klicken Sie in der unteren rechten Ecke auf die Schaltfläche Vorschau. Im Vorschaumodus können Sie Ihre Übergänge testen und über Hotspots mit Ihrem Prototyp interagieren. Versuchen Sie, auf die QR-Karte oder das Schließen-Symbol zu klicken; die Karte sollte zwischen den beiden Zuständen umgedreht werden. Sie können die Vorschau schließen, indem Sie X drücken.

Mit dieser Bordkarte als interaktive Komponente können wir auswählen, welche Daten dynamisch angezeigt werden, ohne mehrere Zustände und Interaktionen erstellen zu müssen.

7. Verbinden der Daten mit dem Elternteil

Um zurückzukehren, klicken Sie oben links auf den lila Zurück-Button. Jetzt sollten Sie wieder in der BoardingPasses-Komponente sein. In dieser Komponente haben wir drei Durchgänge, in denen derzeit dieselben Daten angezeigt werden. Lassen Sie uns das jetzt aktualisieren.

Erinnern Sie sich, wie in der boardingCard-Komponente die Daten auf Von übergeordnetem Element erben gesetzt wurden? In diesem Fall ist das übergeordnete Element die Komponenteninstanz.

Wählen Sie auf der Seite Flug 1 die BoardingCard-Instanz aus. Lassen Sie in den Komponenteneigenschaften den Zustand unverändert. Wählen Sie unter Daten die Datenquelle aus und stellen Sie sicher, dass die Zeile auf Zeile 1 gesetzt ist. Die Instanz sollte jetzt Daten aus der ersten Zeile des Datenblatts anzeigen.

Wenn Sie die Zeile umschalten, werden Sie feststellen, dass die angezeigten Daten aktualisiert werden. Belassen wir es vorerst in Zeile 1, aber bei Flug 2 und Flug 3 stellen Sie dies so ein, dass Daten aus Zeile 2 bzw. Zeile 3 angezeigt werden.

8. Hinzufügen von Wischgesten

Damit Benutzer durch ihre Bordkarten wischen können, müssen wir einige Wischinteraktionen einrichten.

Erstellen und zeichnen Sie einen Hotspot (H) auf der rechten Seite der Seite Flug 1 (achten Sie darauf, dass Sie oben etwas Platz für den Hotspot über dem Schließen-Symbol auf der Rückseite der BoardingCard-Komponente lassen und dass dies nicht der Fall ist. t verdeckt den QR-Code auf der Titelseite). Um die Wischgeste zu erstellen, verwenden Sie die folgenden Einstellungen:

• Geste: Wischen Sie nach links
• Wischabstand: 200
• Gehe zu: > Nächste Seite
• Bewegung: Nach links drücken
• Easing: Einfach rein-raus
• Dauer: 300MS

Machen Sie dasselbe auf der Seite von Flight 2 und fügen Sie einen zweiten Hotspot auf der linken Seite der Seiten von Flight 2 und Flight 3 hinzu, die stattdessen auf Push Right und Push Left eingestellt sind. Zögern Sie nicht, auf Vorschau zu drücken, um die Komponente zu testen und mit ihr zu interagieren, und passen Sie Ihre Wischeinstellungen entsprechend an.

9. Erstellen Sie eine Variable

Um die Erstellung des Prototyps abzuschließen, müssen wir eine Variable erstellen und verwenden. Diese Variable wird es unseren Komponenten ermöglichen, miteinander zu kommunizieren und gleichzeitig 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, um das Variables Modal zu öffnen. Klicken Sie hier auf Neue Variable erstellen und geben Sie "flightDisplayed" in das Feld Name ein. Lassen Sie den Standardwert leer.

Großartig, Sie haben Ihre Variablen eingerichtet! Schließen Sie die Variablen modal, indem Sie das X drücken oder die Escape-Taste auf Ihrer Tastatur drücken.

10. Variablen verwenden

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 wischen und auch mit dem QR-Code zu interagieren.

Während wir jetzt durch die Pässe streichen können, müssen noch ein paar weitere Dinge konfiguriert werden, um die Fortschrittspunkte zu beeinflussen, die basierend auf dem Fortschritt der Bordkarten aktualisiert werden.

Öffnen Sie dazu die BoardingPasses-Komponente. Auf Seite 1 erstellen wir die folgende Seitenaktion:

• Nach einer festgelegten Zeit
• Warten Sie: 0
• Set: FlightDisplay (variabel)
• An: Wert...
• Wert: 1

Wiederholen Sie dies auf Seite 2 und 3 und stellen Sie sicher, dass der Wert auf 2 oder 3 eingestellt ist, um die Seite wiederzugeben, auf der Sie sich befinden.

Wir haben die Komponente boardingPass effektiv angewiesen, den Wert der Variablen flightDisplayed abhängig vom angezeigten Flug (Seite) zu aktualisieren. Mit diesem Wert können wir nun den Status der Fortschrittspunkte 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 Variable flightDisplayed festgelegt sind. Es ist wichtig, dass diese Seitennamen mit den festgelegten Werten übereinstimmen.

Gehen Sie zurück zum Prototyp, wählen Sie die progressDots-Komponente aus und:

1. Öffnen Sie im Abschnitt Komponente im Eigenschaftenfenster die Dropdown-Liste Status.
2. Wählen Sie die Variable flightDisplayed aus.

Wir haben nun die progressDots-Komponente mit der Variablen flightDisplayed verbunden. Das bedeutet, dass die progressDots-Komponente die Seite anzeigt, die dem Variablenwert entspricht, wenn sich der Wert der Variablen in einen Wert ändert.

Versuchen Sie jetzt, eine Vorschau Ihres Prototyps anzuzeigen, interagieren Sie mit den Bordkarten durch Wischen und sehen Sie, ob die Fortschrittspunkte aktualisiert werden.

Schließlich können Sie die Assets-Seite löschen oder verschieben, um sicherzustellen, dass Ihre freigegebene Vorschau auf der richtigen Startseite geöffnet wird. Um die Seite zu löschen, wählen Sie das Hamburger-Menü auf der Seitenminiatur und klicken Sie auf Seite löschen.

Tipp: Sehen Sie nach, wie Sie herausfinden können, wie die promoCard-Komponente ihren Status basierend auf dem angezeigten Flug aktualisiert. Sie möchten eine neue Variable namens cardDisplayed erstellen.

Ta-da!

Hier hast du es! Ihre eigene Bordkarten-App. Wenn Sie die iOS-App heruntergeladen haben, versuchen Sie, den Prototyp zu öffnen und mit ihm auf Ihrem iPhone zu interagieren. es sollte sich wie das echte anfühlen.

Gut gemacht, dass Sie dieses Tutorial bis zum Ende verfolgt haben. Sie sollten jetzt ein gründliches Verständnis dafür haben, wie Sie Ihren eigenen Prototyp in Atomic erstellen. Wenn Sie in Sketch vorhandene Assets haben, können Sie diese mit dem Atomic Plugin für Sketch importieren oder auf Wunsch nativ in Atomic entwerfen.

Fragen? Bemerkungen? Lassen Sie sie unten oder kontaktieren Sie mich auf Twitter (@femkesvs).