Share
Framer.js und das dazugehörige Ökosystem Framer Studio sind großartige Werkzeuge zum Komponieren, Präsentieren und Wiederholen von Interaktionsdesign. In diesem Beitrag werde ich Sie durch den Aufbau eines interaktiven Prototyps für die Produkttour einer fiktiven iOS-App mit Adobe Photoshop CC 2014 und Framer Studio 1.9.29 führen. Wir gehen davon aus, dass wir eine News-Feed-App erstellen, in der Updates aus dem Netzwerk des Benutzers in einer Zeitleiste angezeigt werden, während Einstellungen und zusätzliche Optionen in einer Seitenleiste angezeigt werden.
Spielen Sie mit dem Prototyp auf der Demoseite (webkit-basierte Browser - Chrome, Safari usw. werden unterstützt)..
Erstellen Sie zunächst Ihre Assets in Photoshop. Die Produkttour besteht aus vier Schritten:
Bei der Arbeit mit Framer ist es wichtig zu wissen, dass nur gruppierte, sichtbare Photoshop-Ebenen in Framer Studio importiert werden. Gruppieren Sie Ihre Ebenen nach Interaktion (d. H., Dinge, die dieselbe Interaktion aufweisen, sollten in Gruppen zusammengefasst werden), da Sie bei der Arbeit in Framer auf den Gruppennamen zugreifen. Für diese Produkttour habe ich meine Layer nach ihrer Funktion gruppiert:
Diese Ebenen sind später im Code über erreichbar myLayers.doneButton, myLayers.dots, usw.
Importieren Sie anschließend Ihre Assets aus Photoshop in Framer Studio. Ihr Photoshop-Dokument muss beim Importieren geöffnet und gespeichert sein. Drücke den Einführen und Sie sehen einen Dialog, der ungefähr so aussieht:
Framer reduziert Ihre Gruppen beim Importieren in Bilder und Ihre Assets sind in Framer verfügbar, nachdem der Import abgeschlossen ist.
Es empfiehlt sich, die importierten gruppierten Objekte nach dem Import in Framer in Variablen umzuwandeln, da Sie den Prototyp später bei Bedarf leichter bearbeiten können.
Beispielsweise möchten Sie möglicherweise zu einem späteren Zeitpunkt eine andere Photoshop-Datei mit anders benannten Gruppen verwenden, jedoch mit den gleichen Interaktionen, die Sie bereits erstellt haben. Dies ist viel einfacher, wenn Sie Ihre Interaktionen nach Variablennamen strukturieren, da Sie einfach den Verweis der Variablen in einer Zeile ändern und im Rest des Dokuments anzeigen lassen können:
# Dies importiert alle Layer für "tour" in tourLayers. Ly = Framer.Importer.load "importiert / tour" ## ------------------- VARIABLES ---- ----------------- welcome = ly.willcome dots = ly.dots moveDot = ly.movingDot done = ly.doneButton login = ly.login logo = ly.logo news = ly .newsFeed siderbar = ly.siderbar gradient = ly.gradient background = ly.background feedDescription. ly.feedDescription
Jetzt, da wir über einige Ressourcen verfügen, mit denen Sie arbeiten können, können Sie die Interaktionen erstellen, die Ihren Prototyp zum Leben erwecken.
Wenn Sie über Assets verfügen, die unterschiedliche Interaktionen innerhalb Ihrer Komposition haben, können Sie den Code mithilfe von Status stark strukturieren. In diesem Prototyp werden die vier Schritte der Tour jeweils auf unterschiedliche Art und Weise verwendet. Staaten geben uns die Flexibilität, jedes Stück der Komposition unabhängig voneinander zu definieren, wodurch die Modularität und Lesbarkeit des Codes erhöht wird.
Unser Newsfeed-Bildschirm hat beispielsweise vier Status:
Unsere Staaten werden diese Positionen widerspiegeln, indem sie unterschiedliche Einstellungen vornehmen x Werte basierend darauf, wo sich der Newsfeed in einem bestimmten Teil der Tour befinden sollte:
news.states.add Ursprung: x: 750 angezeigt: x: news.originX Seitenleiste: x: 655 hidden: x; -750
Für die Produkttour möchten wir verschiedene Bereiche der App veranschaulichen, nachdem ein Benutzer nach links geklickt hat, um zum nächsten Teil der Produkttour zu gelangen. Aktivieren Sie dazu zunächst das Ziehen auf den Ebenen, auf denen Sie dies zulassen möchten.
Erstellen Sie ein Array:
dragLayers = [welcome, gradient, gradient2]
Dann erstellen Sie eine zum Schleife zum Durchlaufen dieses Arrays und Hinzufügen von ziehbaren Eigenschaften zu diesen Ebenen:
für ziehen in dragLayers # Aktivieren Sie das Ziehen von drag.draggable.enabled = true drag.draggable.speedY = 0 # Verhindern Sie das Ziehen von links nach rechts. maxDragFrame.x = Drag.x-Drag.width
Accentsconagua
enabled = true ermöglicht das Ziehen der EbenespeedY = 0 Deaktiviert das Ziehen entlang der Y-AchsemaxDragFrame = drag.frame Legt den Rahmen fest, innerhalb dessen gezogen werden kann, um innerhalb der Ebene selbst zu bleibenmaxDragFrame.x = Drag.x-Drag.width erlaubt das negative Ziehen des Frames entlang der x-Achse (d. h. von rechts nach links)Nachdem Sie das Ziehen auf den gewünschten Ebenen aktiviert haben, zielen Sie auf die Ebenen und ändern Sie den Status Ihrer Assets, wenn sie in einem bestimmten Ausmaß gezogen werden.
welcome.on Events.DragEnd, -> if welcome.screenFrame.x < -150
Wenn der Benutzer das Ziehen beendet hat herzlich willkommen Ebene, wenn sie über 150 Pixel nach links gezogen wurden (screenFrame.x < -150), dann ändern Sie den Status des Prototyps in den Status des Newsfeeds:
welcome.on EventsDragEnd, -> if welcome.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"
Die Zustände der anderen Elemente müssen sich entsprechend ändern (den Begrüßungsstatus ausblenden, den Punkt am unteren Rand verschieben, um Schritt 2 der Tour darzustellen usw.). Dann wiederholen wir die anderen ziehbaren Ebenen (Farbverlauf, Farbverlauf2) und ändern die Zustände entsprechend. Auf diese Weise können wir einen vollständig ausgearbeiteten Prototyp für unsere Produkttour erstellen.
Das Animieren der einzelnen Statusaktualisierungen im News-Feed anstelle der gesamten Gruppe verleiht dem Prototyp ein schlankeres Gefühl, wie in der (sehr kleinen) animierten GIF unten gezeigt wird:
Erstellen Sie zunächst ein Array der Ebenen, die Sie animieren möchten:
newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]
Erstellen Sie dann eine Funktion, um jede Ebene auf die gewünschte Ebene zu animieren x Standort, Hinzufügen einer Verzögerung von 0,1 zwischen jeder Animation:
newsCurve = 'spring (50, 30, 30)' newsAnimation = -> für i in [0… newsLayers.length-1] newsLayers [i] .animate delay: i * 0,1 Eigenschaften: x: 0 Kurve: newsCurve
Wenn Sie bestimmte Interaktionen an verschiedenen Stellen Ihres Prototyps wiederverwenden möchten, sollten Sie Funktionen erstellen, um sie später erneut verwenden zu können. Anstatt Ihre Animation mehrmals zu schreiben, schreiben Sie sie einmal und verwenden Sie sie bei Bedarf erneut. Erstellen Sie eine Animation, die mit einer Methode wie der folgenden erneut verwendet werden kann:
Layer :: fadeOut = -> this.animate Eigenschaften: Deckkraft: 0 Kurve: Zeit zum "Inaktivität": 0.5
Danach können Sie jede Ebene "fadeOut" durch Aufruf von: myLayer.fadeOut ()
Framer ist ein großartiges Werkzeug, um moderne, seidige, hoch interaktive Prototypen schnell zu erstellen. Wenn Sie Ihre Layouts in Ihren Workflow integrieren, erstellen Sie Ihre Layouts in Photoshop (oder Sketch) und bearbeiten diese dann über Framer. So können Sie schneller robuste Prototypen erstellen.
Sie können auch Ihre Entwürfe in Ihrem visuellen Layout-Tool ändern und anschließend direkt in Framer importieren, um im Laufe der Entwicklung eine effizientere Iteration zu ermöglichen. Wenn Sie Ihr Dokument ordnungsgemäß mit Variablen eingerichtet haben, werden Ihre Interaktionen auf die neu importierten Assets angewendet, sodass eine schnelle Wiederholung der Interaktion und visuelle Designideen möglich ist. Wenn Sie ein statisches Interaktionsdesign bereitstellen sollten, müssen Sie mehrere statische Kompositionen mit neuen visuellen Elementen aktualisieren. Mit diesem Workflow nehmen Sie jedoch nur eine Änderung in einem einzelnen übergeordneten Dokument vor, und importieren Sie erneut in Framer und voila!
Bleiben Sie dran für weitere Tutorials zum Prototyping. Fühlen Sie sich auch frei, unten zu kommentieren, und ich werde mich so schnell wie möglich bei Ihnen melden. Viel Spaß beim Prototyping!
