Lernen von Framer durch Erstellen eines Prototyps für eine mobile App

Die Zeit statischer Benutzeroberflächen ist längst vorbei. Das Entwerfen interaktiver Prototypen ist der beste Ansatz, um Ihre Ideen auszudrücken und sie Kunden und Stakeholdern zu erklären. Oder, wie Jerry Cao von UXPin es ausdrückt: „Nichts bringt Sie der Funktionalität des Endprodukts näher als das Prototyping. Es ist der Prototyp, der die Erfahrung hinter der Benutzererfahrung zum Leben erweckt.“

Prototyping ist ein wichtiger Bestandteil des modernen UX-Designprozesses. Ich habe viele Tools ausprobiert und denke, dass Framer Studio (powered by Framer Library) eines der besten ist, wenn es darum geht, Prototypen für Benutzeroberflächen zu erstellen. Daher möchte ich Ihnen im folgenden Tutorial einige Framer-Grundlagen beibringen.

Was wirst du lernen? Wenn Sie wissen, was Framer ist und mehr darüber erfahren möchten, wie man es verwendet, oder wenn Sie nicht wissen, was Framer ist, aber etwas mehr über fortgeschrittene Prototyping-Techniken erfahren möchten, ist dies meiner Meinung nach das richtige Tutorial für Sie! Am Ende des Tutorials sollten Sie in der Lage sein, einen Prototyp einer mobilen App zu erstellen, und Sie werden auch etwas CoffeeScript-Code lernen. Ich werde Sie auf dem Weg begleiten und Ihnen Dateien zur Verfügung stellen, die Ihnen den Einstieg erleichtern.

Ein Hinweis zu Framer Studio, Framer-Bibliothek, Plattformen und Verknüpfungen

Bevor wir fortfahren, ein wichtiger Hinweis : In diesem Tutorial geht es um Framer Studio, eine reine Mac-App. Framer Studio wird von der Framer Library betrieben, die Open Source und kostenlos ist. Die Framer Library selbst kann auf allen Betriebssystemen (Mac, Windows und Linux) verwendet werden. Bisher ist keine Windows-Version von Framer Studio verfügbar; Es gibt jedoch eine Möglichkeit, die Framer-Bibliothek mit Atom auf Windows-Betriebssystemen zum Laufen zu bringen. (Wenn Sie neugierig auf den Windows-Teil sind, lesen Sie „Wie man Framer JS unter Windows ausführt“ oder „Framer unter Windows mit Atom verwenden“.) Beachten Sie auch, dass ich in meinem Tutorial Framer Studio auf einem Mac verwende Ich werde die Mac-Notation für Verknüpfungen verwenden.

Was ist Framer?

Es gibt zwei Hauptkategorien von Prototyping-Tools (mehr dazu später), aber Framer ist ein Tool, das in eine eigene Kategorie fällt. Sie können es für einfache Übergänge und schnelles Prototyping sowie zum Erstellen von Mikrointeraktionen und erweiterten Animationen verwenden. Es gibt Ihnen – dem Designer – die ultimative Möglichkeit, Interaktionen ohne Einschränkungen durch eine grafische Benutzeroberfläche und vordefinierte Tools zu erstellen.

Etwas Code lernen

In Framer ist der Code Ihre ultimative Design-Supermacht. Bedeutet das, dass Sie Programmieren lernen müssen? Jawohl. Sollten Designer programmieren? Dieses Thema ist uralt, und es gab einige gute Punkte für "Ja" und "Nein"; Hier möchte ich Ihnen eine etwas andere Sicht auf die Frage präsentieren.

In einem kürzlich erschienenen Artikel sagte Shawn Hickman:

„Es gibt eine ständige Debatte darüber, ob Designer Programmieren lernen sollten oder nicht. Obwohl ich gerne ausführlich darüber spreche, denke ich, dass es hilfreich ist, es aus einer anderen Perspektive zu betrachten. Was versuchen Sie zu erreichen? In meinem Fall , ich wollte ein Produkt versenden."

Und auch:

„Framer ist so ein tolles Werkzeug für Designer, um das Programmieren zu lernen. Die Möglichkeit, die Ergebnisse Ihres Codes live zu sehen, hat mir geholfen, zu lernen, was tatsächlich passiert. Framer hat mir grundlegende Dinge wie Variablen, For-Schleifen und Funktionen beigebracht. Nichts Besonderes , aber absolut notwendig."

Damit komme ich zu meinem nächsten wichtigen Punkt. Meiner Meinung nach ist Framer einer der Designer-freundlichsten Ansätze für die Codierung, die es gibt. Und obwohl Prototypen niemals mit produktionsreifem Code erstellt werden, profitieren Programmierer dennoch und können einige Informationen aus Ihrem Code verwenden. Schließlich erhalten Sie auch ein besseres Verständnis dafür, wie alles unter der Haube funktioniert, und legen eine Grundlage für die Weiterentwicklung Ihrer Fähigkeiten.

Was ist CoffeeScript?

Die in Framer verwendete Sprache ist CoffeeScript. Tolle Neuigkeiten für Anfänger: Es handelt sich um eine vereinfachte Version von JavaScript, sodass die Lernkurve nicht allzu steil ist.

Laut offizieller Website:

CoffeeScript ist eine Sprache, die in JavaScript kompiliert wird. Es ist ein Versuch, die guten Seiten von JavaScript auf einfache Weise aufzudecken.

Es gibt noch einen weiteren großen Vorteil bei der Verwendung von CoffeeScript: Es ist im Wesentlichen eine Webtechnologie, sodass alles, was Sie in Framer erstellen, später als JavaScript ausgeführt wird! Um diesem Tutorial folgen zu können, müssen Sie nur ein wenig Programmierkenntnisse haben.

Nützliche Ressourcen

Da wir etwas CoffeeScript schreiben werden, empfehle ich Ihnen, sich zuerst die folgenden Ressourcen anzusehen, wenn Sie Hilfe beim Einstieg benötigen:

• "Code", Framer
  Programmierhandbuch für Framer.
• "Framer-Kurs", Greg Rog
  Mein Video-Tutorial zu CoffeeScript.
• „Eine Einführung in CoffeeScript“, Jeffrey Biles, SitePoint
• "Kurze Einführung in CoffeeScript", JumpstartLab
• „Einführung in Framer“, Meng To
  Eine sehr empfehlenswerte Ressource, um einige wichtige grundlegende Dinge über Framer zu lernen.

Hinweis zu Framer-Versionen

Das Tutorial läuft (und wurde getestet) auf Framer Version 111 . Wenn Sie noch nicht auf 111 aktualisiert haben, empfehle ich Ihnen dringend, es herunterzuladen und zu aktualisieren. Was zukünftige Updates für Framer anbelangt, ist es wahrscheinlich, dass eine zukünftige Version von Framer weitere neue Funktionen einführt und sich auf den Code dieses Tutorials auswirken könnte.

Warum ist Prototyping wichtig?

Vergleichen Sie diese Ansätze mit der Präsentation derselben Idee. Sie könnten ein Wireframe wie folgt verwenden:

Oder die gleiche Idee könnte mit einem einfachen, aber leistungsstarken Prototyp präsentiert werden:

Stellen Sie sich vor, Sie präsentieren diese Idee einer Gruppe von Menschen. Was denkst du: Welches würde besser abschneiden? Selbst wenn das Wireframe relevantere Informationen enthalten würde, hätte es eine geringere visuelle Wirkung. Und die Leute neigen dazu, die Wireframe-Dokumentation nicht sorgfältig zu lesen.

Das Erklären der Idee mit einem interaktiven Prototyp würde ihnen ein besseres Verständnis Ihrer Vision vermitteln. Manchmal sagt sogar ein Low-Fidelity-Prototyp mehr als tausend Worte. (Die gleiche Idee wurde von Paul Boag geteilt: "Menschen haben oft Schwierigkeiten, sich vorzustellen, wie es besser aussieht. Ein Prototyp ermöglicht es ihnen, es zu sehen. Er kann das Potenzial viel besser verkaufen als jede Menge Dokumente oder Präsentationen.")

Wenn ein Bild mehr als 1000 Worte sagt, ist ein Prototyp mehr als 1000 Meetings wert.

— Daniel Burka, #aeadenver 2017

Es kommt oft vor, dass Sie Menschen überzeugen müssen, deren Wissen über das vorgestellte Konzept begrenzt ist. Auf der anderen Seite kann Ihnen ein funktionierender Prototyp vor der Entwicklung der eigentlichen App wirklich aussagekräftige Erkenntnisse aus der Phase der Benutzertests bringen. Deshalb finde ich Prototyping so wichtig und reizvoll.

Im Allgemeinen können Sie Prototypen in zwei Hauptkategorien unterteilen. Das erste ist Rapid Prototyping , bei dem Sie statische Bildschirme mit Hotspots verknüpfen, um einfache Übergänge zu erstellen. Dies kann mit Tools wie Marvel, Adobe XD und Figma erreicht werden.

Die zweite Kategorie sind detaillierte Prototypen mit Mikrointeraktionen , z. B. Animationen, die sich auf eine Aufgabe konzentrieren (z. B. einen Alarm einstellen, eine Aktion auswählen usw.). Sie können diese Art von Prototypen mit Tools wie Principle, Flinto und Origami erstellen. Das Verfeinern des Prototyps mit Animationen gibt Ihnen die Möglichkeit, ein ansprechenderes Prototyping-Erlebnis zu schaffen.

Erinnern Sie sich, dass ich sagte, dass Framer ein Tool ist, das in eine eigene Kategorie fällt? Dies liegt daran, dass Sie es sowohl für Rapid Prototyping als auch für die Erstellung von Mikrointeraktionen und recht fortgeschrittenen Animationen verwenden können. Mal sehen wie!

Ihr erstes Design mit Framer

Beginnen wir mit der Benutzeroberfläche von Framer.

Framer hat zwei gut integrierte Ansichten : Code und Design. Sie erstellen Ihre Layouts und Bilder in der Entwurfsansicht und fügen dann alle erforderlichen Interaktivitäten in der Codeansicht hinzu. In der Codeansicht können Sie dann Animationen und Mikrointeraktionen hinzufügen. Framer soll nicht das Design-Tool Ihrer Wahl ersetzen (obwohl Framer mit dem letzten Dezember-Update anscheinend auch auf den Markt der Screen-Design-Tools abzielt; es hat eine Übersicht über die neuen Design-Features veröffentlicht), sondern für schnelle Prototypen, die Designansicht fühlt sich gut an.

Später können Sie bei anspruchsvolleren Designs auch Dateien aus Sketch oder Figma importieren. Aber lassen Sie uns zuerst direkt in die Designansicht springen und ein einfaches Layout mit einigen grundlegenden Designwerkzeugen erstellen.

Arbeiten in der Entwurfsansicht

Wenn Sie Framer Studio zum ersten Mal öffnen, wird es in der Entwurfsansicht geöffnet. Sie werden feststellen, dass die meisten Shortcuts, die Sie von anderen Design-Tools (z. B. Sketch) kennen, auch hier funktionieren. Drücken Sie A (oder F ), um zum Rahmenwerkzeug zu wechseln, und wählen Sie rechts im Eigenschaftenbereich eine vordefinierte iPhone 8-Voreinstellung aus.

Hinweis: Im neuesten Framer-Update wurden Zeichenflächen in „Frames“ umbenannt, und das gesamte Konzept hat sich geändert. Was sind Frames genau? Frames sind intelligente Layout-Container, die sowohl als Bildschirme als auch als Elemente der Benutzeroberfläche verwendet werden können. Rahmen können auch wie Slices verwendet werden, um Symbole in bestimmten Größen schnell zu exportieren. Wenn Sie sich ein wenig mit HTML auskennen, können Sie sich Frames als div Elemente vorstellen, und Sie können Frames auch ineinander verschachteln, um Layoutelemente wie Navigationsleisten, Registerkartenleisten, Karten, Schaltflächen usw. zu definieren. Später im Tutorial , manchmal bezeichne ich Frames als „Bildschirme“ (um Ihnen eine allgemeine Vorstellung davon zu geben, dass dies ein separater Bildschirm unserer App ist) – aber technisch gesehen sind Bildschirme nur Frames.

Weitere Informationen zu Frames finden Sie auf der Hilfeseite „Frames vs. Shapes“.

Eine Anmerkung zu den Einheiten

In Framer messen wir Dinge in Einheiten, die als Punkte bezeichnet werden. Jeder Punkt kann abhängig von der Pixeldichte des physischen Geräts, auf dem Sie testen, eine unterschiedliche Anzahl von Pixeln darstellen. Da alles, was Sie in Framer entwerfen, als Vektor erstellt wird, müssen Sie sich keine Sorgen machen. Außerdem ist es am besten, Vektor-SVG-Dateien zu verwenden, die von Framer unterstützt werden. Wenn Sie PNG- oder JPG-Dateien importieren müssen, stellen Sie sicher, dass sie eine ausreichend hohe Auflösung haben.

Ich habe das Smashing Magazine-Logo auf diese Weise vorbereitet. Um es in Framer zu importieren, ziehe ich es einfach per Drag-and-Drop auf die Leinwand.

Das letzte Element in diesem Rahmen ist eine einfache Schaltfläche, die mit Hilfe eines anderen verschachtelten Rahmens (drücken Sie F oder A ) mit einem Textrahmen darin erstellt wurde. Drücken Sie T für das Textwerkzeug und zeichnen Sie ein Textfeld von links nach rechts, richten Sie den Text an der Mitte des Felds im Eigenschaftenbedienfeld aus und fügen Sie etwas Text hinzu.

Nützlicher Tipp : Text wird automatisch als Unterebene auf das von Ihnen erstellte Rahmenobjekt angewendet. Um direkt auf der Leinwand darauf zuzugreifen, halten Sie die Befehlstaste gedrückt, während Sie darauf klicken.

Lassen Sie uns den zweiten Bildschirm (Rahmen) entwerfen. Wir verwenden eine generische Kopf- und Fußzeile, die automatisch auf unseren Prototypen angewendet wird (das bedeutet, dass Sie die Höhe sowohl der Kopf- als auch der Fußzeile überspringen, während Sie am Design arbeiten).

Das Hauptelement auf diesem Bildschirm ist die Liste mit sechs Schaltflächen, die jeweils 115 Punkte hoch sind. Insgesamt sollten unsere Frames 6 × 115 = 690 points hoch sein. Da es etwas größer als das Gerät selbst ist, scrollt es später automatisch in der Vorschau. Ich habe ein Hamburger-Symbol aus dem Symbolfeld verwendet:

Ich habe auch einige Textfelder sowie Farbverläufe als Füllung hinzugefügt. So sieht es aus:

Lassen Sie uns alle Schaltflächen auswählen und Befehlstaste + Eingabetaste drücken, um sie in einem neuen Rahmen zusammenzuführen – einem neuen Container für diese Elemente (die ich „Elemente“ genannt habe). Fügen Sie nun obere und untere Rahmen hinzu (die für die Kopf- und Fußzeile verwendet werden) und platzieren Sie sie dann über den Listenelementen.

Verwenden Sie für die anderen Rahmen ähnliche einfache Formen und Werkzeuge, um die Struktur zu erstellen, die Sie unten sehen.

Ich werde nicht auf die Details der einzelnen Designelemente eingehen, da die Werkzeuge, die Sie verwenden werden, grundlegend sind. Wenn Sie jedoch mit einer gebrauchsfertigen Framer-Datei beginnen möchten, können Sie eine herunterladen.

Bevor wir fortfahren, gibt es einige Dinge, die Sie überprüfen sollten:

• Der dritte Bildschirm mit dem Menü muss die gleiche Höhe wie der höchste haben (Sie können den vorherigen Frame einfach duplizieren, indem Sie Befehlstaste + D drücken).
• Die Namenskonvention für Elemente im Ebenenbedienfeld ist entscheidend. Bitte behalten Sie es in meiner Designdatei bei oder achten Sie darauf, wie ich ihre Namen bringe.

Übergang vom Design zum Code

Um Dinge in Bewegung zu setzen, müssen Sie auf die Codeansicht zugreifen. Sie können zwischen den Ansichten wechseln, indem Sie Befehlstaste + 1 und Befehlstaste + 2 drücken. Bevor Sie mit dem Codieren von Interaktionen beginnen, müssen Sie Frames aus der Entwurfsansicht aktivieren, damit sie in der Codeansicht verfügbar sind (sie sind standardmäßig nicht aktiviert). Um einen Frame für die Arbeit in der Codeansicht zu aktivieren, klicken Sie im Ebenenbedienfeld auf das Zielsymbol neben seinem Namen.

Jetzt können Sie diesen Frame im Code anvisieren, indem Sie einfach seinen Namen verwenden.

Nützlicher Tipp: Halten Sie die Namenskonvention für Elemente im Ebenenbedienfeld einfach; versuchen Sie, Leerzeichen und Sonderzeichen zu vermeiden; Beginnen Sie einen Namen nicht mit einer Ziffer. Die Verwendung von CamelCase oder Unterstrichen ( _ ) ist eine gute Idee. Wenn Sie jedoch Bindestriche ( - ) verwenden, müssen Sie diese im Code durch Unterstriche ( _ ) ersetzen.

Stellen Sie zunächst sicher, dass alle Frames für das Targeting in der Codeansicht mit dem Zielsymbol aktiviert wurden (um die vollständige Framesliste anzuzeigen, klicken Sie auf eine beliebige Stelle auf der leeren Leinwand außerhalb eines Frames). Aktivieren Sie außerdem alle Frames innerhalb des ersten Frames für die Codeansicht. Drücken Sie jetzt Command + 2 und lassen Sie uns etwas Code ausführen!

Wichtiges Update: Ab dem Update vom 20. Dezember 2017 von Framer ( Version 108 ) konnten Sie im Code nur auf Frames und Textobjekte abzielen; aber in einem neueren Update ( Version 109 , veröffentlicht am 23. Januar 2018) fügte das Framer-Team die Option hinzu, auch Formen und Pfade anzuvisieren. Während mein Tutorial nur Rahmen und Textobjekte verwendet, ist es auch gut zu wissen, dass Formen und Pfade jetzt auch im Code als Ziel verwendet werden können. Sie werden auch feststellen, dass (wie bereits erwähnt) das Zeichenflächen-Werkzeug durch das Rahmen-Werkzeug ersetzt wurde, sodass die Seitenleiste der Werkzeuge möglicherweise etwas anders aussieht als in den Screenshots; Dies liegt daran, dass der Großteil des Artikels vor dem Update von Framer vom 20. Dezember 2017 erstellt wurde.

Hinzufügen von Interaktivität in Framer

Es ist nicht meine Absicht, Ihnen CoffeeScript in diesem Artikel beizubringen, aber ich werde mein Bestes geben, um den Code zu erklären, den ich in diesem Beispiel verwendet habe. Hoffentlich können Sie es auch ohne vorherige CoffeeScript-Erfahrung verstehen. Davon abgesehen, wenn Sie neu bei CoffeeScript oder JavaScript sind, empfehle ich Ihnen dringend, zuerst die Hilfeanleitung durchzugehen.

Lassen Sie uns nun unsere ersten Animationen erstellen. Wir untersuchen einfache Übergänge, indem wir eine Intro-Animation für den ersten Bildschirm erstellen. Was wir in der Designansicht einrichten, ist, wie unsere App aussehen soll, nachdem Elemente animiert wurden. Für unseren ersten Bildschirm möchten wir die scale und rotation des Logos animieren. Zuerst setzen wir die Eigenschaft scale auf 0 (wodurch das Logo unsichtbar wird), und dann setzen wir seine Drehung auf -360 :

 logo.scale = 0 logo.rotation = -360
logo.scale = 0 logo.rotation = -360

Danach animieren wir sie auf ihre ursprünglichen Werte. Hier ist der Codeblock, den Sie verwenden können:

 logo.animate properties: scale: 1 rotation: 0
logo.animate properties: scale: 1 rotation: 0

Denken Sie an die Einrückung . Animierte Eigenschaften sollten in neue Zeilen eingerückt werden, und wir verwenden die animate -Methode, um sie in Bewegung zu versetzen. Jetzt sollten Sie sehen können, wie Ihre erste Animation funktioniert! Sie können es ein wenig optimieren, indem Sie natürlichere Bewegungen erzeugen. Wir tun dies dank Easing – einem Konzept, das es uns ermöglicht, Bewegungen so zu verändern, dass sie sich lebensechter anfühlen. Fügen wir unten eine weitere Zeile hinzu:

 logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"
logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"

Bitte beachten Sie auch hier die Einrückung. Experimentieren Sie mit den Werten in Klammern, um andere Ergebnisse zu erhalten. Weitere Informationen zum Easing finden Sie in der Framer-Dokumentation.

Die Animation sollte nun so aussehen:

Lassen Sie uns ein paar weitere Starteigenschaften festlegen:

 bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200
bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200

In der letzten Zeile legen wir die Position der Schaltfläche so fest, dass sie sich unterhalb der Leinwand befindet – wir überprüfen zuerst die aktuelle Position mit button.y und fügen dann 200 weitere Punkte auf der vertikalen Achse hinzu, um sie nach unten zu verschieben. Der nächste Schritt besteht darin, eine Animation zu erstellen; machen wir es zuerst für den Hintergrund:

 bg.animate backgroundColor: "#FF7744"

Und jetzt wollen wir warten, bis die Logo-Animation beendet ist, und dann die Animation des Buttons ausführen. Ein Ansatz wäre, die Animation wie folgt zu verzögern:

 button.animate properties: scale: 1 y: button.y - 200 delay: .5

Dies verzögert es um eine halbe Sekunde. Eine viel schönere Lösung wäre, auf das Ende der Logoanimation zu warten und dann den Code auszuführen. Dieser Codeabschnitt führt Framer-Ereignisse ein (auf die wir später in diesem Artikel noch näher eingehen werden). Es sieht aus wie das:

 logo.onAnimationEnd -> button.animate scale: 1 y: button.y - 200

Wie Sie sehen, können Sie die properties: Linie, wenn keine Beschleunigung verwendet wird; aber wenn Sie etwas cooles Easing hinzufügen möchten, muss es da sein. Lassen Sie uns mit so etwas abschließen:

 logo.onAnimationEnd -> button.animate properties: scale: 1 y: button.y - 200 curve: "spring"

Dies ist also eine Möglichkeit, Animationen in Framer zu erstellen; andere würden Animationsobjekte oder -zustände verwenden. Ein zusätzlicher Tipp wäre, die Eigenschaften zu erkunden, indem Sie auf das kleine Symbol neben der Zeilennummer klicken, wo Sie verschiedene Werte anpassen können.

OK, die Animation sieht jetzt so aus:

Skripterstellung für die Interaktionen

In Framer gibt es viele vorgefertigte Komponenten und Snippets – Codeteile, die Sie in Ihren Prototypen verwenden können. Eine davon ist die Flow-Komponente, die den automatischen Übergang von Bildschirmen sowie einige zusätzliche Funktionen ermöglicht, z. B. die Definition der Kopf- und Fußzeile, die auf jedem Bildschirm angezeigt werden. Beginnen wir mit dem Erstellen einer Flow-Komponente:

 flow = new FlowComponent flow.showNext(home)

Die erste Zeile ist wie eine Deklaration einer Variablen. Aber der Wert hier erstellt tatsächlich ein neues FlowComponent Objekt. Jetzt können wir diesen benutzerdefinierten Namen, flow , verwenden, um jederzeit auf die Flow-Komponente zuzugreifen. Die zweite Zeile verwendet eine der in die Flow-Komponente integrierten Methoden — showNext , die, wie der Name schon sagt, den Bildschirm anzeigt, den wir als nächstes sehen möchten. In diesem Fall zeigt es uns den ersten Bildschirm unseres Prototyps. Als Parameter übergeben wir den Namen des ersten Frames. Das ist alles, was Sie brauchen, um es in die Flow-Komponente einzubinden und den ersten Bildschirm anzuzeigen.

Als nächstes definieren wir die Kopf- und Fußzeile. Wenn Sie sie in der Entwurfsansicht nicht aktiviert haben, müssen Sie mit Befehlstaste + 1 zurückgehen und in der Entwurfsansicht auf das Zielsymbol für die Rahmen „obere Leiste“ und „untere Leiste“ klicken. Wie Sie sehen, können Sie in der Entwurfsansicht auch Inhalte gruppieren ( Befehl + Eingabetaste ) und anschließend den neuen Rahmen im Code zugänglich machen. Zurück in der Codeansicht können Sie nun die folgenden Zeilen verwenden:

 flow.header = top_bar flow.footer = bottom_bar

Sie haben wahrscheinlich bemerkt, dass Framer eine Liste mit allgemeinen Methoden und Eigenschaften anzeigt, die Sie verwenden können, wenn Sie flow aufrufen und den Punkt danach setzen. Es lohnt sich, die Liste durchzugehen und Vorschläge für Methoden und Eigenschaften zu prüfen. Und wenn Sie mehr erfahren möchten, führt ein kleines Symbol zur Dokumentation.

In der objektorientierten Programmierung ist dieses Konzept sehr wichtig. Nehmen Sie als Beispiel ein Autoobjekt; Die Eigenschaften wären Dinge wie Farbe, Marke, PS und so weiter. Die Methoden wären vorgefertigte Funktionen, die Sie bei Bedarf ausführen können (z. B. startTheEngine() ). Sie können die Methode an den Klammern erkennen, und manchmal möchten Sie vielleicht einige Parameter an diese bestimmte Funktion übergeben (z. B. startTheEngine(gear1) ). Wir haben in diesem Zusammenhang bereits die Methode showNext() verwendet; Jetzt verwenden wir die header und footer und legen sie auf den entsprechenden Ebenen fest.

Eine weitere Technik, die Sie häufig in Framer verwenden werden, ist das Ausblenden und Aufdecken von Ebenen. Beispielsweise möchten wir als Designentscheidung die Kopf- und Fußzeile auf dem ersten Bildschirm ausblenden. Sie können dies mit den folgenden Codezeilen tun:

 flow.header.visible = false flow.footer.visible = false

Hier verwenden wir die Eigenschaft visible in der Kopf- und Fußzeile der Flow-Komponente. CoffeeScript soll so intuitiv und nah am einfachen Englisch wie möglich sein; Anstelle von false könnten Sie also sogar no sagen, um es zu verbergen, und yes , um es aufzudecken (anstelle von true ).

Tipp: Versuchen Sie, beliebige Codezeilen auszuwählen, und drücken Sie Befehlstaste + / , um sie auszukommentieren, damit sie nicht ausgeführt werden.

Es ist an der Zeit, die Kraft der Flow-Komponente zu nutzen, um zum nächsten Bildschirm unserer App zu gelangen. Stellen Sie zunächst sicher, dass der nächste Frame in der Codeansicht sowie der button_get_started -Frame verfügbar sind, den wir verwenden, um zu diesem nächsten Bildschirm zu gelangen. Der folgende Code tut genau dies:

 button_get_started.onTap -> flow.showNext(list) flow.header.visible = true flow.footer.visible = true

Was wir hier tun, ist eine andere Konvention: Wir können auf Benutzereingaben reagieren und mit sogenannten Ereignissen interagieren. Es stehen verschiedene Ereignisse zur Auswahl, wie z. B. Tippen, Klicken, Tippen erzwingen, Schweben und vieles mehr. Sie können solche Ereignisse abfangen und Code ausführen, während der Benutzer die Aktion ausführt. Wir verwenden das onTap Ereignis und als Antwort darauf ( -> ) führen wir den unten eingerückten Code aus. In der Flow-Komponente zeigen wir den Listenrahmen sowie die Kopf- und Fußzeile.

Jetzt, da Sie sowohl Ereignisse als auch Animationen kennen, können Sie den Startbildschirm noch weiter optimieren und mit den Ereignissen experimentieren. Sie können der Schaltfläche beispielsweise eine Tippanimation hinzufügen:

 button.onTouchStart -> this.animate properties: scale: 1.1 backgroundColor: "#f1f1f1" curve: "spring"

Hier habe ich das onTouchStart Ereignis verwendet, um die Animation zu sehen, bevor zum nächsten Bildschirm gewechselt wird, der ausgelöst wird, wenn der Benutzer seinen Finger loslässt (das onTap oder onClick Ereignis).

Sie haben bereits einige Potenziale der Flow-Komponente entdeckt, wie zum Beispiel den automatischen Übergang zu diesem nächsten Bildschirm. Aber die Magie hat gerade erst begonnen! Wie Sie sehen können, scrollt die Liste automatisch. Das Problem ist, dass wir schwarz sehen können (den Hintergrund der Flow-Komponente), wenn wir oben oder unten ankommen und noch weiter scrollen. Sie können die Farbe einfach ändern, indem Sie dies einstellen (die graue Farbe, die wir in der Kopf- und Fußzeile haben):

 flow.backgroundColor = "#555555"

Jetzt ist es an der Zeit, das Menü anzuzeigen. Stellen Sie sicher, dass Sie menu_button für den Code aktiviert haben, und führen Sie diese nächsten Codezeilen aus:

 menu_button.onTap -> flow.showOverlayLeft(menu)

Wir verwenden die Methode showOverlayLeft() und übergeben den Namen des Frames als Parameter. Dadurch wird der Bildschirm von der linken Seite animiert, und das Menü wird mit einem weiteren Antippen ausgeblendet und sogar mit einem Antippen außerhalb des Menüs selbst ausgeblendet. All dies mit einer einzigen Codezeile!

Apple scheint die Verwendung von Hamburger-Menüs in iOS-Apps nicht zu fördern, daher habe ich das Menü lediglich als Beispiel dafür verwendet, was Framer schnell und effizient tun kann. Wenn Sie einen Prototyp für eine echte iOS-App erstellen, befolgen Sie die Schnittstellenrichtlinien von Apple genau.

Sie können auf diesen coolen Präsentationsmodus zugreifen, indem Sie auf das Vollbildsymbol im Vorschaufenster klicken. Es ist auch möglich, Ihren Prototypen direkt auf einem mobilen Gerät zu testen! Sie können die Live-Vorschau mit der kostenlosen App nutzen, die sowohl für iOS als auch für Android verfügbar ist. Das Testen Ihrer Prototypen auf realen Geräten ist unerlässlich, da Sie so die genaueste Vorschau darauf erhalten, wie das Design aussehen und sich anfühlen wird.

Wenn Sie ein Anfänger sind, haben Sie wahrscheinlich den größten Teil des Tutorials bis jetzt verstanden, glauben aber vielleicht, dass Sie es noch nicht alleine schaffen. Also, hier ist eine kleine Aufgabe.

Wie Sie gesehen haben, habe ich das Menü geschlossen, indem ich einfach in den leeren Bereich auf der rechten Seite geklickt habe (um die Magie der Flusskomponente zu demonstrieren). Werfen Sie nun einen Blick auf die Dokumentation der Flow-Komponente und versuchen Sie herauszufinden, wie Sie die folgende Aufgabe ausführen können: Wir möchten, dass die Schaltfläche „x“ das Menü schließt und den vorherigen Bildschirm anzeigt. Bevor Sie fortfahren, versuchen Sie herauszufinden, wie dies der richtige Weg ist, und schreiben Sie die Codezeilen selbst.

Wenn es an dieser Stelle immer noch nicht klar ist, keine Sorge! Am Ende des Tutorials wird es einfacher geworden sein, es zu verstehen. Das CoffeeScript, das wir hier verwenden (nachdem das close_button Element für die Codeansicht aktiviert wurde), lautet wie folgt:

 close_button.onTap -> flow.showPrevious()

Hier ist showPrevious() nur eine Methode der Flow-Komponente, mit der Sie zum letzten Bildschirm wechseln können. Versuchen Sie nun erneut, selbst Code zu schreiben. Sie müssen article_list und arrow_button mit dem Code verknüpfen und article_list dazu bringen, den entsprechenden Bildschirm anzuzeigen, sowie arrow_button zum vorherigen Bildschirm wechseln. Außerdem müssen wir die Kopf- und Fußzeile gegebenenfalls ausblenden und anzeigen.

Herzlichen Glückwunsch, wenn Sie es geschafft haben! Hier ist der Code, den ich verwendet habe:

 article_list.onTap -> flow.showNext(detail) flow.header.visible = false flow.footer.visible = false arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Abrufen von Daten für unseren Prototyp

Nachdem wir nun das Rückgrat unseres Prototyps haben, ist es an der Zeit, einige erweiterte Funktionen von Framer zu erkunden. Das wird spaßig! Wir verwenden tatsächlich die echten Daten aus unserer App. Es wird so viel sinnvoller aussehen, als einen Dummy-Filler-Inhalt zu generieren. Und es mag auch ein bisschen beängstigend klingen, aber keine Angst – das ist das nächste Ding in Ihren Fähigkeiten. Wenn Sie diesen Teil des Artikels schwierig finden, bleiben Sie einfach bei den statischen Daten. Dies soll einigen fortgeschritteneren Benutzern zeigen, dass sie mit echten Daten in Framer umgehen können.

Dieser Ansatz ähnelt dem beim Arbeiten mit Variablen und Datensätzen in Adobe Photoshop. Wenn Sie neugierig sind, lesen Sie weiter: „Datengesteuerte Grafiken in Photoshop erstellen“.

Tatsächlich möchte ich Ihnen zuerst eine einfachere Lösung vorstellen, die Ihnen aber dennoch die Kontrolle über Ihren Text aus dem Code gibt! Gehen Sie zurück zur Entwurfsansicht und setzen Sie den Text in die Felder in geschweiften Klammern, wie folgt: {item_1} {item_2} ...

Stellen Sie sicher, dass die Textfelder für die Codeansicht aktiviert sind und dass Sie in der Codeansicht alle Ihre vordefinierten Zeichenfolgen in ein Array einfügen können. (Ich empfehle, „Framer Cheat Sheet: Loops & Arrays“ zu lesen, wenn Sie mehr über Arrays erfahren möchten.)

Kurz gesagt, ein Array fungiert als Variable, die mehr als ein Element enthalten kann:

 categories = ["Graphic Design", "Mobile Apps", "Web Design", "User Experience", "Front-End Dev", "User Research"]

Nun, da wir unser Array haben, versuchen wir, die Daten anzuzeigen. Dazu verwenden wir zunächst den print Befehl, der das Ergebnis auf der Konsole ausgibt. Sie können es gleich testen:

 print "Hello World"

Die Konsole kann durch Drücken von Command + R aktualisiert werden. Der Zugriff auf die Daten ist so einfach:

 print categories

Diese Codezeile zeigt alle Daten im categories -Array an. Mit Arrays können Sie einfach auf einzelne Elemente zugreifen, die im Array indiziert sind, indem Sie die Nummer wie folgt in Klammern setzen:

 print categories[2]

Dadurch wird das dritte Element in der Auflistung zurückgegeben, da wir bei Null beginnen. Verwenden wir nun die TextLayer-Vorlagenfunktion von Framer, um die ersten beiden Zeichenfolgen zu aktualisieren:

 item1_txt.template = categories[0] item2_txt.template = categories[1]

Die restlichen Felder können Sie ausfüllen! Mit diesem einfachen Beispiel können wir die Textfelder direkt aus dem Code heraus verwalten, sodass wir den Text dynamisch ändern können!

Wohin von hier aus

Gut gemacht! An diesem Punkt sollten Sie in der Lage sein, sich in Framer zurechtzufinden und einige einfache Prototypen zu erstellen.

Hinweis: Ich ermutige Sie, meinen eigenen Videokurs auf Framer auszuprobieren – einige Lektionen können Sie sich kostenlos ansehen. Auch das Framer-Buch von Tes Mat ist eine hervorragende Ressource zum Erlernen und Verstehen von Framer und CoffeeScript. Das Buch ist nicht kostenlos, aber Sie können ein Beispielkapitel daraus lesen (bevor Sie sich entscheiden, ob Sie es kaufen möchten).

Ich hoffe, Sie fanden diesen Teil des Artikels hilfreich. Bis zu diesem Punkt sind wir einfachen Wegen gefolgt, um unseren Prototyp zum Laufen zu bringen. Aber Framer ist viel mehr als das! Aus diesem Grund habe ich einen zusätzlichen Bonusabschnitt mit fortgeschritteneren Techniken geschrieben. Wenn Sie bereit für die Herausforderung sind, fahren Sie mit dem nächsten Teil fort: JSON!

Zugriff auf die Daten von JSON (Bonus-Tutorial-Abschnitt)

Als leistungsstarke Alternative zur vorherigen Lösung können Sie eine externe API verwenden und sich direkt mit ihr verbinden. Während es für dieses spezielle Beispiel ein bisschen übertrieben ist, werden fortgeschrittenere Benutzer von der Idee profitieren. Kommentieren Sie zunächst den Code aus, der für das Ausfüllen der Textfelder verantwortlich ist (wählen Sie den Code aus und drücken Sie Command + / ). Der einfache Weg ist, die Datei lokal zu haben und sie in Framer zu laden. Vorzugsweise wäre dies eine JSON-Datei, die Sie auf verschiedene Arten erhalten können, z. B.:

• Verwenden Sie meine Beispiel-JSON-Datei,
• Erstellen Sie es mit einem Tool wie Dummi oder JSON Editor Online von Grund auf neu.
• Verwenden Sie einige Dummy-Daten aus Listen,
• Holen Sie sich die entsprechende Datei von dem Entwickler, mit dem Sie zusammenarbeiten.

Aber warten Sie, was ist JSON?

JSON (JavaScript Object Notation) ist ein einfaches Datenaustauschformat. Es ist für Menschen einfach zu lesen und zu schreiben. Es ist einfach für Maschinen zu analysieren und zu generieren. JSON ist ein Textformat, das vollständig sprachunabhängig ist, aber Konventionen verwendet, die Programmierern der C-Familie von Sprachen vertraut sind, darunter C, C++, C#, Java, JavaScript, Perl, Python und viele andere. Diese Eigenschaften machen JSON zu einer idealen Datenaustauschsprache.

Sie können echte Daten für den gesamten Designprozess verwenden! Wenn Sie Sketch verwenden, können Sie dies mit der Craft-Erweiterung von InVision tun. Es kann eine lokale oder entfernte JSON-Datei laden und die Daten zur Verwendung im Layout abrufen. Um mehr zu erfahren, lesen Sie Christian Krammers ausführlichen Artikel „Craft for Sketch Plugin: Designing With Real Data“. Lesen Sie auch Wojciech Dobrys Framer-Tutorial „Prototyping with Real Data“.

Legen wir diese Datei nun in den Ordner des Projekts. Jedes Mal, wenn Sie ein neues Framer-Projekt speichern, wird ein Ordner mit dem Namen Ihres Projekts erstellt. Greifen Sie im Finder darauf zu und platzieren Sie die JSON-Datei neben der .coffee -Datei in dieser Struktur.

Die JSON-Datei, mit der ich arbeite, sieht so aus:

Wir werden die Kategoriedaten in Framer verwenden und den Dummy-Inhalt ersetzen, den wir in den Schaltflächen auf dem Listenbildschirm haben. Stellen Sie einfach sicher, dass Sie den Feldern richtige Namen gegeben haben (in meinem Fall item1-txt , item2-txt usw.) und dass Sie sie für die Codeansicht mit dem Zielsymbol aktiviert haben.

Laden wir den Feed in Framer:

 data = JSON.parse Utils.domLoadDataSync "feed.json"

Wir verwenden JSON.parse sowie die Utils -Klasse – eine Paarung, die die ganze harte Arbeit erledigt, JSON in eine menschliche Sprache zu übersetzen und alles in data (den Namen, den wir verwendet haben) zu packen. Um jetzt Daten vom Anfang unserer .json -Datei anzuzeigen, können wir sie ausdrucken:

 print data.categories

Aus dem Datenobjekt können wir bestimmte Elemente extrahieren, wie im vorherigen Beispiel.

 print data.categories[2]

Lassen Sie uns ein Array mit allen Textfeldern erstellen:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt]

Dies ist ein vereinfachtes Beispiel, sodass Sie auch weniger erfahrenen Personen folgen können. Sie könnten versuchen, es besser zu machen, indem Sie die Schleife laufen, wenn Sie sich sicherer fühlen. Apropos Schleifen, wir werden so oder so eine verwenden, um die Elemente in die Textfelder einzufügen. Es geht so:

 for i in [0...6] textfields[i].text = data.categories[i]

Loops enable you to run the same code many times. It starts with for , and then we define a variable, which I've called i . This variable will hold whatever information we pass and then will increment with each loop. In this case, we pass numbers from 0 to 5 — [0...6] is just a way of saying this. You can check out the values of i in the loop by doing the following:

 print i

We need it to loop exactly six times (0,1,2,3,4,5), so that we can address each fild on one iteration. Putting i at the end of textfields will return textfields[0] , textfields[1] , and so on; this way, we can address all of the text fields in the array. Again, if you want to double-check, print it! Put more simply, what we've done here is just an easier way of saying this:

 item1_txt.text = data.categories[0] item1_txt.text = data.categories[1] item1_txt.text = data.categories[2] ...

It's easier to grasp, but code-wise, this solution is not elegant at all. That is why we were using a loop here.

The result of our work is that all of the data is populated in the text fields:

Let's add some links to these items so that we can go to the detail screen. Doing it in the loop is a smart move because we can again add it all at once. Here is the next part of the for in loop (remember to keep the indentation).

 textfields[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to be more elegant, you can make the items tappable, not only the text. Remember, however, that you have to add them to an array first; so, just before the loop, you can put this:

 items = [item1, item2, item3, item4, item5, item6]

Then, in the loop, change textfields[i] to items[i] . This whole code block will now look like this:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt] items = [item1, item2, item3, item4, item5, item6] for i in [0...data.categories.length] textfields[i].text = data.categories[i] items[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to take this to the next level and display different data depending on the button clicked, my hint is to use this in the event, or get the information from the event by putting (e) next to onTap . I do not recommend doing that now, though: Going crazy with the data is not necessary here. Our main goal is to create a prototype, not a real complex application. Keep that in mind. This JSON example was merely to demonstrate that it is possible to use real data in a Framer prototype.

You probably noticed that we're hiding the header here. That is because we've created a separate header for the detail view. There is a simple arrow icon that we want to link back to the previous screen. This is the block of code we'll use:

 arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Again, showPrevious() is a ready-made method of the flow component, and I just looked it up in the docs!

Our simple prototype is ready, and it looks like this:

You can download the complete Framer file. Surely, you can tweak it with extra animations, screens and even more data (loaded from a JSON file). I did not want to make it more complex because I wanted to keep the tutorial concise. But trust me, you have enough information to finish this prototype yourself. Just start experimenting with it and you'll see: It's so much fun. Viel Spaß beim Codieren!