In diesem Tutorial werde ich Ihnen beibringen, wie Sie einen animierten Prototyp Ihres Designs für mobile Anwendungen erstellen können.  Der Prototyp sieht und fühlt sich an wie eine echte Anwendung auf Ihrem Telefon; Sie können mit Gesten und benutzerdefinierten Animationen navigieren und durch Ihr Design scrollen.

Am Ende dieses Tutorials können Sie mit Pixate eine animierte Prototypversion eines beliebigen Anwendungsdesigns erstellen. Lass uns anfangen!

Lernprogramm-Assets

Für dieses Tutorial benötigen Sie drei Dinge, die Sie beachten sollten:

• Die iOS Fitness Application Sketch-Datei aus meinem vorherigen Tutorial
• Ein kostenloses Konto in Pixate
• Die kostenlose Pixate-Anwendung aus dem App Store

Warum Pixate verwenden?

Aus meiner Sicht ist Pixate das beste Werkzeug, das Designern zur Verfügung steht, um vollständig funktionsfähige, benutzerdefinierte animierte Prototypen für mobile Anwendungen zu erstellen, ohne eine einzelne Codezeile zu schreiben.

Im Gegensatz zu anderen Prototyping-Tools, wie Flinto oder Marvel, können Sie mit Pixate Ebenen trennen und Interaktionen einbetten, z. B. Ziehen, Tippen, Doppeltippen, Scrollen, Quetschen und mehr.   

Der Prototyp selbst existiert im Internet. Während dieses Tutorials werden wir die Web-Version von Pixate verwenden, aber wir werden die Endergebnisse in einer nativen Anwendung auf unserem Handy erhalten, die eine großartige flüssige Erfahrung bietet.

1. Neues Pixate-Projekt

Bevor wir mit der Erstellung unseres ersten Prototyps beginnen können, müssen wir ein neues Projekt in Pixate einrichten.

Schritt 1

Nachdem Sie sich bei Ihrem Konto angemeldet haben, klicken Sie auf die Schaltfläche Neues Projekt und wählen Sie die Option Neuer Prototyp.

Schritt 2

Hier können wir den spezifischen Gerätetyp auswählen, für den wir arbeiten. In diesem Fall wählen wir das iPhone 6, da wir die Fitness-Anwendung für dieses spezielle Gerät in Sketch entworfen haben.

Hinweis: Wir können auch Smartwatch-Bildschirmgrößen wie die Apple Watch, LG G Watch oder das Moto 360 auswählen. 

2. Importieren von Assets in Pixate

Pixate ermöglicht es uns, jedes einzelne Objekt in unserem Prototyp zu animieren, basierend auf verschiedenen Ereignissen und Interaktionen, wie das Laden des Bildschirms, Tippen, Doppeltippen oder Scrollen. Das bedeutet auch, dass wir die Elemente, die wir animieren wollen, separat in unseren Prototyp exportieren müssen.

Schritt 1

Öffnen wir unsere Sketch-Datei und beginnen Sie, jedes Element einzeln zu exportieren. Wenn man sich den fertigen Prototyp anschaut, sieht man, dass ich beim "GO-Screen" die Navigationsleiste, die Tab-Leiste, jede einzelne Spalte der Wettervorhersage und die Zielkreise separat exportiert habe.

Sie sollten in PNG exportieren, da der Schlüssel für transparente Ebenen ist.

Tipp: Konzentrieren Sie sich immer auf einen Bildschirm. Zu diesem Zeitpunkt sollten Sie nur die Ebenen des "GO-Bildschirms" exportieren, damit Sie bei Bedarf leichter mit den Dingen arbeiten und diese ändern können.

Schritt 2

Beim Importieren von Assets in Pixate müssen die exportierten PNG-Dateien in das Browserfenster gezogen und dort abgelegt werden:

Schritt 3

Jetzt ist es an der Zeit, unseren Bildschirm in Pixate neu aufzubauen. Diese Arbeit kann viel schneller erledigt werden, wenn wir uns auf das Inspektor-Panel in Pixate und Sketch beziehen. Wenn dies der Fall ist, müssen wir nur den X- und Y-Wert jedes Elements kopieren und einfügen.

Hinweis: Beachten Sie, dass unser Sketch-Design mit 2x Auflösung erstellt wurde, während Pixate mit @ 1x Auflösung arbeitet. Das bedeutet, dass wir jede Zahl von Sketch durch 2 teilen müssen, bevor wir sie bei Pixate anwenden.

3. Animieren des GO-Bildschirms

Lassen Sie uns die Pixate-Anwendung auf unserem iPhone öffnen, wo wir sehen können, dass unser Design angefangen hat, zusammen zu kommen. Jedes Mal, wenn wir etwas an der Webanwendung ändern, wird es automatisch mit unseren Telefonen synchronisiert.

Schritt 1

Nachdem wir die erste Spalte der Wettervorhersage ausgewählt haben, können wir auf der linken Seite in unserem Browser sehen, welche Arten von Animationen verfügbar sind. Lassen Sie die Fade-Animation auf die gegenüberliegende Seite, die rechte Seitenleiste, ziehen.

Schritt 2

Jetzt müssen wir angeben, wann diese Animation angezeigt werden soll.  Setzen Sie die Based-on-Werte auf * SCREEN *, Loaded.

Das bedeutet, dass unsere Animation direkt nach dem Laden des ersten Bildschirms abgespielt wird.Dies geschieht sofort, wenn der Prototyp ausgeführt wird.

Schritt 3

Da unser Ziel ein Einblendeffekt ist, legen wir die anfängliche Deckkraft im Eigenschaftenpanel auf 0% und im Animationsbedienfeld auf 100% fest.

Schritt 4

Am unteren Rand des Animationsbedienfelds können wir auch die Beschleunigungskurve, die Dauer und die Verzögerungswerte einstellen.

Sie sollten die Dauer zwischen 0,2-0,4 Sekunden einstellen, aber es gibt hier keinen offiziellen Weg, also ermutige ich Sie, mit diesen Werten zu spielen, bis Sie das Gefühl haben, dass sie genau richtig sind.

Hinweis: In meinem Prototyp bevorzuge ich etwas langsamere Animationen, damit Sie sie deutlicher sehen können. In einem realen Projekt würde ich eine schnellere und subtilere Bewegung empfehlen.

Schritt 5

Nun wählen wir die zweite Spalte der Wettervorhersage aus und setzen genau die gleiche Fade-Animation wie zuvor, mit nur einem Unterschied: diesmal wurde die Animationsverzögerung auf 0,1-0,3 Sekunden eingestellt. Auf diese Weise werden die Animationen in einer Sequenz abgespielt.

Fahren Sie mit der gleichen Methode für alle Elemente fort, denen Sie eine Fade-Animation hinzufügen möchten, aber vergessen Sie nicht, den Wert der Animationsverzögerung kontinuierlich zu erhöhen.

Schritt 6

Lassen Sie uns nun die Interaktion zwischen den Kreisen im Zielbereich einrichten. Um horizontal zwischen den Zielringen scrollen zu können, müssen wir sie als drei separate PNG-Dateien importieren.

Nachdem Sie sie an der richtigen Position platziert haben, erstellen wir in Pixate eine neue Ebene. notwendig, um horizontales Scrollen zu ermöglichen. Stellen Sie in der Eigenschaftenpalette sicher, dass Sie die Darstellung auf Kein Bildsatz festlegen. Bevor wir dieser Ebene eine Interaktion hinzufügen, fügen wir die PNG-Dateien für den Zielring der neuen Ebene im Ebenenbedienfeld hinzu. In einfachen Worten ähnelt dies dem Gruppenwerkzeug in Sketch.

Jetzt können wir dieser neuen Ebene eine Drag-Interaktion hinzufügen und das horizontale Scrollen mit minimaler Position: -255pt und maximaler Position: 120pt im Animationsbedienfeld einstellen.

Schritt 7

Für den kleinen Bounce-Effekt während des horizontalen Scrolls habe ich eine benutzerdefinierte Animation mit speziellen Bedingungen erstellt. Fügen Sie zum Starten eine Verschiebungsanimation zur neuesten Ebene hinzu, die alle Ringlayer enthält.

Setzen Sie nun im Animationsbedienfeld den Wert Basierend auf Wert auf Zieleinstellungen und ziehen Sie die Maustaste los.

Für die erste IF-Bedingung habe ich die folgende Formel verwendet: goal_settings.x> -255 && goal_settings.x <-67, was bedeutet, dass die Position des Zielgruppen-Layers (Layer-ID: goal_settings) höher als -255 pt und kleiner ist als -67 pt, verschiebt es die linke Seite der Ebene zum -67 pt-Punkt.

Für die Animation habe ich eine Feder-Entspannungskurve mit einem Reibungswert von 25 und einer Spannung von 600 verwendet.

Meine zweite IF-Bedingung ist: goal_settings.x <= -67 && goal_settings.x > -255, dann verschiebe die linke Seite des Layers auf -255 pt.

Die dritte Bedingung lautet: goal_settings.x > -67 && goal_settings.x < 150, dann verschiebe die linke Seite des Layers auf 150 pt.

Zu guter Letzt ist die letzte IF-Anweisung: goal_settings.x < 150 && goal_settings.x > -67, wodurch die linke Seite des Layers auf -67 pt verschoben wird.

Hinweis: Ich weiß, dass dies zum ersten Mal ein wenig kompliziert aussieht, aber ich ermutige Sie, meine Lösung zu kopieren und einzufügen und sie zu versuchen, dann etwas zu ändern und es erneut zu versuchen. Meine Bedingungen sind in keiner Weise perfekt, so dass Sie sie sogar verbessern und optimieren können, bis sie sich für Sie richtig anfühlen.

Schritt 8

Wie wir es mit der Zielringe, lasst uns eine weitere neue Ebene erstellen und jede Ebene auf die Ebene setzenhabe so weit hineingegangen. Wir gruppieren gerade die Ebenen des "GO-Bildschirms".

4. Animieren des Bildschirms Herausforderungen

Bevor wir mit dem Importieren und Wiederherstellen des "Challenges-Bildschirms" in Pixate beginnen, müssen wir eine neue Ebene erstellen, die als Gruppenebene für jedes Element auf diesem Bildschirm fungiert. Stellen wir das direkt neben den "GO-Bildschirm", ohne dass dazwischen ein Abstand oder eine Lücke entsteht.

Schritt 1

Nachdem wir unseren Bildschirm Schicht für Schicht importiert und neu aufgebaut haben, müssen wir den vertikalen Bildlauf für die Karten mit den Herausforderungen festlegen.

Lassen Sie uns eine neue Ebene ohne Bildhintergrund erstellen und fügen Sie ihr Kartenlayer hinzu. Vertikales Scrollen ist sogar einfacher als horizontales Scrollen, da wir nur eine Scroll-Interaktion zu dieser neuen Ebene hinzufügen müssen.

Schritt 2

Um den "Challenges-Bildschirm" auch auf unserem iPhone zu sehen, müssen wir zurück zu unserem "GO-Bildschirm" gehen und eine neue Rechteck-Ebene oben auf der Challenges-Schaltfläche in der Tab-Leiste hinzufügen.

Setzen Sie die Darstellung auf kein Bild und fügen Sie eine Tap-Interaktion hinzu. Gehen wir nun zurück, wählen Sie den Gruppen-Layer "Herausforderungen" aus, der alle Elemente auf dem Bildschirm "Herausforderungen" enthält, und fügen Sie ihm eine Bewegungs-Animation hinzu.

Animation in der Navigation verschieben Die einzigen verbleibenden Dinge, die wir tun müssen, ist, das Based-on-Ereignis auf die Taste zu setzen, die wir kürzlich zu unserem GO-Bildschirm mit Tap-Interaktion hinzugefügt haben, und den Wert Verschieben auf 0 pt einzustellen. Wenn wir dann die Schaltfläche "Herausforderungen" auf dem "GO-Bildschirm" drücken, wird die Gruppenebene "Herausforderungen" an ihren richtigen Platz verschoben.

Schritt 3

Um die Herausforderungskarten zu animieren, verwenden wir gleichzeitig zwei Animationen, eine Fade und eine Move. Stellen Sie sicher, dass Sie den Wert Basiert auf die Schaltfläche Challenges festgelegt haben.

Für die Fade-Animation verwenden wir die gleiche Technik wie für den GO-Bildschirm. Stellen Sie also die Deckkraft im Bedienfeld Eigenschaften auf 0% und im Animationsbedienfeld auf 100%. Für die Dauer habe ich 0.5s mit einer 0.2s Verzögerung verwendet.

Hinweis: Vergessen Sie nicht, den Wert der Verzögerung für jede Karte kontinuierlich zu erhöhen.

Unsere zweite Animation ist eine Move-Animation. Wie bei der Fade-Animation legen wir den Wert Basiert auf die Schaltfläche Herausforderungen fest und verwenden genau die gleiche Animationsdauer und Verzögerung wie im Falle der Fade-Animation. Stellen Sie nun den Move to Top-Wert auf 10px, was unsere Challenge-Karte um 10px nach oben bewegt, wenn die Animation startet.

Da am Ende der Animation jede Herausforderungskarte 10px aufwärts ist, müssen wir sie 10px auf unserer Pixate Leinwand nach unten bewegen.

5. Das DurchsuchenHerausforderungen Abschnitt

Schritt 1

Lassen Sie uns noch einmal eine neue Ebene erstellen, die den Abschnitt Herausforderungen durchsuchen enthält. Wie im Abschnitt "Meine Herausforderungen" fügen wir eine Scroll-Interaktion hinzu.

Schritt 2

Um zwischen den Bereichen "Meine Herausforderungen" und "Herausforderungen durchsuchen" wechseln zu können, müssen wir oben im Titel "Herausforderungen durchsuchen" eine neue Ebene erstellen, die als Schaltfläche fungiert. Setzen Sie die Ebenenfüllung auf Kein Bildsatz und fügen Sie eine Tap-Interaktion hinzu.

Jetzt, wenn wir zurückgehenauf unsere Gruppenebene "Herausforderungen" (im vorherigen Schritt erstellt)Basierend auf dieser neuen Schaltfläche können wir eine Fade-Animation hinzufügen. Also, bis wir die Schaltfläche "Herausforderungen durchsuchen" drücken, beträgt die Deckkraft des Abschnitts "Herausforderungen durchsuchen" 0% und nach dem Tippen 100%.

Schritt 3

Als letzten Schritt habe ich eine Scale- und Fade-Animation zu den Zeitleisten-Fortschrittsbalken imAbschnitt "Browse-Herausforderungen" hinzugefügt.

Hinweis: Vergessen Sie nicht, für die Animationen "Fade" und "Scale" dieselben Animationsdauer- und Verzögerungswerte zu verwenden.

6. Animieren des Aktivitätenbildschirms

Bevor wir mit der Animation des "Activities Screen" beginnen, müssen wir einige Schritte wiederholen, die auch im "Challenges Screen" durchgeführt wurden.

Schritt 1

Lassen Sie uns eine neue Ebene direkt neben dem "Challenges-Bildschirm" ohne Auffüllung erstellen. Diese Ebene ist der Gruppen-Layer für die Elemente im "Aktivitäten-Bildschirm".

Schritt 2

Nun kehren wir zu unserem "GO-Bildschirm" zurück und erstellen oben auf der Registerkarte "Aktivitäten" eine neue Ebene. Fügen Sie dieser neuen Ebene eine Tap-Interaktion hinzu.

Gehen Sie zurück zu unserer Gruppenebene "Aktivitäten" und fügen Sie basierend auf unserer neuen Schaltfläche eine Interaktion "Verschieben" hinzu.

Schritt 3

Fügen Sie jetzt eine Fade-Animation zu jedem Ergebnis auf dem Aktivitäten-Bildschirm mit einer Animationsdauer von 0,4s und einer Verzögerung von 0,1s zwischen den Ergebnissen hinzu.

Hinweis: Vergessen Sie nicht, den Wert Basiert auf den Button "Aktivitäten" zu setzen, den wir auf dem "GO-Bildschirm" platziert haben.

Schritt 4

Erstelle eine weitere Gruppenebene und platziere jede Trainingseinheit, außer der ersten. Wir werden dies für die Animation "Nach unten bewegen" benötigen, da es einfacher ist, nur eine Ebene nach unten zu bewegen, als sechs oder sieben Ebenen gleichzeitig zu durchlaufen.

Fügen Sie nun der ersten Trainingssitzung eine Tap-Interaktion hinzu und fügen Sie dann der gerade erstellten Gruppenebene eine Move-Animation hinzu.  Setzen Sie im Animationsbedienfeld den Wert Basierend auf auf die erste Trainingssitzung und fügen Sie einen Wert zum Verschieben nach oben um 277 Punkte hinzu. Wenn wir auf die erste Trainingseinheit tippen, wird sich alles andere auf dem Bildschirm nach unten bewegen.

Schritt 5

Für die Detailansicht des Workouts habe ich nur die Fade- und Move-Animationen verwendet, die auf dem Tippen auf die erste Trainingseinheit basieren.

Zu Beginn, einfach verblassen und im Hintergrund bewegen, dann die Grafik und schließlich die spezifischen Zahlen und Details des Trainings.

Sie sollten hier ein wenig mit den Animationsdauern und Verzögerungen spielen.

Herzliche Glückwünsche!

Du bist unglaublich! Sie haben gerade Ihren ersten voll funktionsfähigen, benutzerdefinierten animierten Pixate-Prototyp erstellt. Nach diesem Tutorial hoffe ich, dass Sie mehr Vertrauen in die Verwendung von Pixate für Prototypen für mobile Anwendungen haben.

Demo: Prototyping a Fitness Application with Pixate

Ich bin neugierig, Ihre Ansichten zu diesem Tutorial zu hören, und zögern Sie nicht, Fragen in den Kommentaren zu stellen, ich werde hier sein, um zu helfen und sie zu beantworten.