Share
In diesem Tutorial werde ich Ihnen zeigen, wie Sie einen animierten Prototyp Ihres mobilen Anwendungsdesigns erstellen. Der Prototyp wird auf Ihrem Telefon wie eine echte Anwendung aussehen und sich anfühlen; Mit Gesten und benutzerdefinierten Animationen können Sie durch Ihr Design navigieren und blättern.
Am Ende dieses Tutorials können Sie mit Pixate eine animierte Prototypversion eines beliebigen Anwendungsdesigns erstellen. Lass uns anfangen!
Für dieses Tutorial benötigen Sie drei Dinge, die Sie befolgen müssen:
Meiner Ansicht nach ist Pixate das beste Werkzeug, das Designern zur Verfügung steht, um vollständig funktionsfähige, benutzerdefinierte, animierte Protokolle für mobile Anwendungsanwendungen zu erstellen, ohne eine einzige Codezeile zu schreiben.
Im Gegensatz zu anderen Prototyping-Tools wie Flinto oder Marvel können Sie in Pixate Ebenen trennen und Interaktionen einbetten, z. B. Ziehen, Tippen, Doppeltippen, Scrollen, Pinch und mehr.
Der Prototyp selbst existiert im Web. In diesem Lernprogramm werden wir die Webversion von Pixate verwenden. Das Endergebnis wird jedoch in einer nativen Anwendung auf unserem Telefon abgerufen, die ein flüssiges Erlebnis bietet.
Bevor wir unseren ersten Prototyp erstellen können, müssen wir ein neues Projekt in Pixate einrichten.
Nachdem Sie sich in Ihrem Konto angemeldet haben, klicken Sie auf Neues Projekt und wählen Sie dann die Neuer Prototyp Möglichkeit.
Hier können wir den spezifischen Gerätetyp auswählen, für den wir entwerfen. In diesem Fall wählen wir das iPhone 6, da wir die Fitnessanwendung für dieses bestimmte Gerät in Sketch entwickelt haben.
Hinweis: Wir können auch Smartwatch-Bildschirmgrößen wie die Apple Watch, LG G Watch oder die Moto 360 auswählen.
Mit Pixate können wir jedes einzelne Objekt in unserem Prototyp animieren, basierend auf verschiedenen Ereignissen und Interaktionen, z. B. Laden des Bildschirms, Tippen, Doppeltippen oder Scrollen. Das bedeutet auch, dass wir die Elemente, die wir in unserem Prototyp animieren möchten, separat exportieren müssen.
Öffnen wir unsere Sketch-Datei und beginnen Sie, jedes Element einzeln zu exportieren. Wenn Sie sich den endgültigen Prototyp ansehen, können Sie im Fall des „GO-Bildschirms“ sehen, dass ich die Navigationsleiste, die Registerkartenleiste, jede einzelne Spalte der Wettervorhersage und die Zielkreise separat exportiert habe.
Sie sollten in PNG exportieren, da transparente Ebenen erforderlich sind.
Spitze: Fokussieren Sie immer auf einen Bildschirm. An diesem Punkt des Prozesses sollten Sie nur die Ebenen des „GO-Bildschirms“ exportieren, damit Sie leichter mit anderen Elementen arbeiten und diese gegebenenfalls ändern können.
Beim Importieren von Assets in Pixate müssen die exportierten PNG-Dateien in das Browserfenster geladen und dort abgelegt werden:
Jetzt ist es Zeit, unseren Bildschirm in Pixate neu aufzubauen. Diese Arbeit kann viel schneller erledigt werden, wenn wir uns auf die beziehen Inspektorentafel sowohl in Pixate als auch in Sketch. In diesem Fall müssen Sie lediglich den X- und Y-Wert jedes Elements kopieren und einfügen.
Hinweis: Denken Sie daran, dass unser Sketch-Design mit einer @ 2x-Auflösung erstellt wurde, während wir in Pixate mit einer @ 1x-Auflösung arbeiten. Das bedeutet, dass wir jede Zahl aus Sketch durch 2 dividieren müssen, bevor sie bei Pixate angewendet werden.
Lassen Sie uns die Pixate-Anwendung auf unserem iPhone öffnen, wo wir sehen können, dass unser Design zusammenwächst. Von jetzt an wird jedes Mal, wenn wir etwas an der Webanwendung ändern, diese automatisch mit unseren Handys synchronisiert.
Nachdem Sie die erste Spalte der Wettervorhersage ausgewählt haben, sehen Sie auf der linken Seite in unserem Browser die verfügbaren Animationsarten. Ziehen wir das per Drag & Drop Animation ausblenden auf der gegenüberliegenden Seite die rechte Seitenleiste.
Nun müssen wir angeben, wann diese Animation erscheinen soll. Stellen Sie das ein Beyogen auf Werte bis * SCREEN *, geladen.
Dies bedeutet, dass unsere Animation direkt nach dem Laden des ersten Bildschirms abgespielt wird. Dies geschieht sofort, wenn der Prototyp ausgeführt wird.
Da es unser Ziel ist, eine Einblendung vorzunehmen, setzen wir die anfängliche Deckkraft auf 0% auf der Eigenschaftenbereich, und zu 100% auf der Animations-Panel.
Am unteren Rand der Animations-Panel Wir können auch die Beschleunigungskurve, die Dauer und die Verzögerungswerte einstellen.
Sie sollten die Dauer zwischen einstellen 0,2-0,4s, aber es gibt keinen offiziell Ich möchte Sie dazu ermutigen, mit diesen Werten zu spielen, bis Sie der Meinung sind, dass sie genau richtig sind.
Hinweis: In meinem Prototyp habe ich es vorgezogen, etwas langsamere Animationen zu verwenden, damit Sie sie deutlicher sehen können. In einem echten Projekt würde ich schnellere und subtilere Bewegungen empfehlen.
Lassen Sie uns nun die zweite Spalte der Wettervorhersage auswählen und genau gleich einstellen Animation ausblenden wie zuvor, mit nur einem Unterschied: Dieses Mal setzen Sie die Animationsverzögerung zusammen zu sein 0,1-0,3 s. Auf diese Weise werden die Animationen in einer Sequenz abgespielt.
Fahren Sie mit der gleichen Methode für alle Elemente fort, zu denen Sie eine Fade-Animation hinzufügen möchten. Vergessen Sie jedoch nicht, den Wert der Animationsverzögerung kontinuierlich zu erhöhen.
Lassen Sie uns nun die Interaktion zwischen den Kreisen im Zielabschnitt einrichten. Um horizontal zwischen den Torringen scrollen zu können, müssen wir sie als drei separate PNG-Dateien importieren.
Nachdem wir sie in die richtige Position gebracht haben, lasst uns Erstellen Sie eine neue Ebene in Pixate; notwendig, um das horizontale Scrollen zu ermöglichen. Auf der Eigenschaftenbereich Stellen Sie sicher, dass Sie das Erscheinungsbild auf setzen Kein Bild eingestellt. Bevor wir dieser Ebene eine Interaktion hinzufügen, fügen wir die Zielring-PNG-Dateien der neuen Ebene auf der hinzu Schichten Panel. In einfachen Worten ist dies dem ähnlich Gruppe Werkzeug in der Skizze.
Jetzt können wir eine hinzufügen Interaktion ziehen auf diese neue Ebene und setzen Horizontales Scrollen mit minimaler Position: -255pt und maximale Position: 120pt auf der Animations-Panel.
Für den kleinen Abpralleffekt während des horizontalen Bildlaufs habe ich eine benutzerdefinierte Animation mit speziellen Bedingungen erstellt. Fügen Sie zunächst ein Animation verschieben auf die neueste Ebene, die alle Ringschichten enthält.
Jetzt in der Animationen Panel setzen die Beyogen auf Wert zu Zieleinstellungen und Ziehen Sie Release.
Zum ersten WENN Bedingung Ich habe die folgende Formel verwendet: goal_settings.x> -255 && goal_settings.x < -67, Dies bedeutet, dass die Position des Zielgruppen-Layers (Layer-ID: goal_settings) höher ist als -255 pt und kleiner als -67 pt, Es wird die linke Seite der Ebene in die Ebene verschoben -67 pt Punkt.
Für die Animation habe ich eine Entspannungskurve im Frühling mit einer Reibwert von 25 und Spannung von600.
Meine zweite IF-Bedingung ist: goal_settings.x <= -67 && goal_settings.x > -255, Bewegen Sie dann die linke Seite der Ebene nach -255 pt.
Die dritte Bedingung ist: goal_settings.x> -67 && goal_settings.x < 150, Bewegen Sie dann die linke Seite der Ebene nach 150 pt.
Zu guter Letzt lautet die letzte IF-Anweisung: goal_settings.x < 150 && goal_settings.x > -67, Dadurch wird die linke Seite der Ebene nach verschoben -67 pt.
Hinweis: Ich weiß, dass dies zum ersten Mal etwas kompliziert aussieht, aber ich möchte Sie dazu ermutigen, meine Lösung zu kopieren und einzufügen, es auszuprobieren, etwas zu ändern und es erneut zu versuchen. Meine Bedingungen sind keineswegs perfekt, so dass Sie sie sogar verbessern und optimieren können, bis sie sich für Sie richtig fühlen.
Wie bei den Torringen, erstellen wir eine weitere neue Ebene und fügen jede Ebene, die wir bisher haben, ein. Wir gruppieren gerade die Schichten des "GO-Bildschirms".
Bevor wir den „Challenges-Bildschirm“ in Pixate importieren und neu erstellen, müssen Sie eine neue Ebene erstellen, die als Gruppen-Layer für jedes Element in diesem Bildschirm fungiert. Platzieren Sie diese direkt neben dem „GO-Bildschirm“, ohne Abstand oder Lücke zwischen ihnen.
Nachdem wir unseren Bildschirm Schicht für Schicht importiert und neu erstellt haben, müssen wir die vertikale Bildlaufleiste für die Herausforderungskarten festlegen.
Lasst uns Erstellen Sie eine neue Ebene ohne Bildhintergrund und fügen Sie unsere Kartenebenen hinzu. Vertikales Scrollen ist noch einfacher als horizontales Scrollen, da wir lediglich eine hinzufügen müssen Blättern Sie durch die Interaktion zu dieser neuen Schicht.
Um den „Challenges-Bildschirm“ auch auf unserem iPhone zu sehen, müssen Sie zu unserem „GO-Bildschirm“ zurückkehren und eine neue Rechteckebene oben auf der Challenges-Schaltfläche in der Tab-Leiste hinzufügen.
Setzen Sie das Erscheinungsbild auf keine Bildfüllung und fügen Sie a hinzu Tippen Sie auf die Interaktion dazu Gehen wir nun zurück, wählen Sie die Gruppe "Challenges" aus, die alle Elemente auf dem Bildschirm "Challenges" enthält, und fügen Sie ein Animation verschieben dazu.
Das einzige, was wir noch tun müssen, ist die Einstellung Beyogen auf Ereignis zu dem Button, den wir kürzlich zu unserem „GO-Bildschirm“ hinzugefügt haben Tippen Sie auf die Interaktion und setze das Ziehen nach Wert zu 0 pt. Wenn Sie dann den Challenges-Button auf dem „GO-Bildschirm“ drücken, wird der Challenges-Gruppen-Layer an seinen richtigen Ort verschoben.
Um die Challenge-Karten zu animieren, verwenden wir zwei Animationen, eine Überblendung und eine Verschiebung gleichzeitig. Stellen Sie sicher, dass Sie das festgelegt haben Beyogen auf Wert für die Schaltfläche "Herausforderungen".
Für die Fade-Animation verwenden wir dieselbe Technik wie beim GO-Bildschirm Deckkraft bis 0% auf der Eigenschaften Panel und die Fade zu Wertzu 100% auf die Animationen Panel. Für die Dauer habe ich gebraucht 0,5 s mit einer 0,2 s verzögern.
Hinweis: Vergessen Sie nicht, den Wert der Verzögerung für jede Karte kontinuierlich zu erhöhen.
Unsere zweite Animation ist eine Animation verschieben. Wie bei der Fade-Animation setzen wir das Beyogen auf Verwenden Sie die Challenges-Schaltfläche und verwenden Sie die gleiche Animationsdauer und -verzögerung wie bei der Fade-Animation. Stellen Sie jetzt das ein Nach oben verschieben Wert zu 10px, Dadurch wird unsere Challenge-Karte beim Start der Animation um 10 Pixel nach oben verschoben.
Da am Ende der Animation jede Challenge-Karte 10 Pixel aufwärts liegt, müssen wir sie auf unserer Pixate-Leinwand um 10 Pixel nach unten verschieben.
Lassen Sie uns noch einmal eine neue Ebene erstellen, die den Abschnitt zum Durchsuchen von Herausforderungen enthält. Fügen Sie wie im Abschnitt "Meine Herausforderungen" ein Blättern Sie durch die Interaktion dazu.
Um zwischen den Abschnitten "Meine Herausforderungen" und "Browse-Herausforderungen" wechseln zu können, müssen Sie oben im Titel "Browse-Herausforderungen" eine neue Ebene erstellen, die als Schaltfläche fungiert. Legen Sie die Ebenenfüllung auf fest Kein Bild eingestellt und fügen Sie ein Tippen Sie auf die Interaktion dazu.
Wenn wir nun zu unserem Layer "Browse Challenges" (im vorherigen Schritt) zurückkehren, können wir ein hinzufügen Animation ausblenden dazu basiert auf diesem neuen Button. Bis wir auf die Schaltfläche zum Durchsuchen der Herausforderungen klicken, beträgt die Deckkraft des Abschnitts zum Durchsuchen der Herausforderungen 0% und nach dem Tippen 100%..
Als letzten Schritt fügte ich hinzu: a Animation skalieren und ausblenden zu den Zeitleisten-Fortschrittsbalken im Abschnitt Herausforderungen durchsuchen.
Hinweis: Vergessen Sie nicht, die gleichen Animationsdauer- und Verzögerungswerte für die Fade- und Scale-Animationen zu verwenden.
Bevor wir mit dem Animieren des „Aktivitätenbildschirms“ beginnen, müssen wir einige Schritte wiederholen, die auch für den „Challenges-Bildschirm“ ausgeführt wurden.
Lassen Sie uns direkt neben dem Bildschirm "Herausforderungen" eine neue Ebene ohne Auffüllung erstellen. Diese Ebene ist die Gruppenebene für die Elemente im Bildschirm "Aktivitäten"..
Gehen wir nun zurück zu unserem „GO-Bildschirm“ und erstellen Sie eine neue Ebene oben im Aktivitäten Schaltfläche in der Tab-Leiste. Füge hinzu ein Tippen Sie auf die Interaktion zu dieser neuen Schicht.
Gehen Sie zurück zu unserer Gruppe "Aktivitäten" und fügen Sie ein Interaktion verschieben dazu basiert unser neuer Button.
Fügen Sie jetzt eine Animation ausblenden zu jedem Ergebnis auf dem Bildschirm Aktivitäten mit einem 0,4 s Animationsdauer und ein 0,1 s Animationsverzögerung zwischen den Ergebnissen.
Hinweis: Vergiss nicht, das einzustellen Beyogen auf Wert auf "Aktivitäten", den wir auf dem "GO" -Bildschirm platziert haben.
Erstellen Sie eine weitere Gruppenebene und platzieren Sie jede Trainingseinheit darin, mit Ausnahme der ersten. Wir werden das für die brauchen Animation nach unten verschieben, Da sich nur eine Ebene nach unten bewegen kann, ist es viel einfacher als sechs oder sieben Ebenen gleichzeitig.
Fügen Sie jetzt eine Tippen Sie auf die Interaktion zu der ersten Trainingssitzung, dann fügen Sie ein Animation verschieben auf die Gruppenebene, die wir gerade erstellt haben. Stellen Sie im Animationsbedienfeld die Option ein Beyogen auf Wert für die erste Trainingseinheit und fügen Sie ein Nach oben verschieben Wert um 277pt. Wenn Sie auf die erste Trainingssitzung tippen, werden alle anderen auf dem Bildschirm nach unten verschoben.
Für die Trainingsdetailansicht habe ich nur verwendet Verblassen und Bewegen Animationen basierend auf dem Antippen der ersten Trainingssitzung.
Am Anfang blenden und bewegen Sie sich im Hintergrund, dann die Grafik und schließlich die spezifischen Zahlen und Details des Trainings.
Sie sollten hier etwas mit den Animationszeiten und Verzögerungen spielen.
Du bist unglaublich! Sie haben gerade Ihren ersten voll funktionsfähigen, benutzerdefinierten animierten Pixate-Prototyp erstellt. Nach diesem Tutorial hoffe ich, dass Sie bei der Verwendung von Pixate für mobile Anwendungsprototypen sicherer sind.
Ich bin neugierig darauf, Ihre Ansichten zu diesem Tutorial zu hören und in den Kommentaren Fragen zu stellen. Ich werde hier sein, um Ihnen zu helfen und sie zu beantworten.
Accentsconagua