Prototyping für Mobile Apps: Entwerfen benutzerdefinierter Interaktionen

1. Einführung: Hi. Ich bin Noah, und ich bin ein Product Designer, der derzeit in San Francisco lebt, und in dieser Klasse geht es um benutzerdefinierte High-Fidelity-mobile Prototypen, die Framer verwenden. In den letzten viereinhalb Jahren leitete ich das Design-Team bei Google, das an der Google-App für iOS arbeitete, und unser Ziel ist es, einen mobilen Assistenten direkt in der Tasche zu bauen , mit dem Sie alle Arten von Informationen aus der Google-Suche nachschlagen können . Wenn du wie ich bist, und du schon eine Weile entworfst, als wir den Übergang zum Handy zum ersten Mal gemacht haben, gab es eine Menge neuer Dinge zu holen. Nicht nur, dass die Menschen schneller Informationen erwarten, Aufgaben waren ein wenig vorübergehender, es gibt auch eine ganz neue Ebene von Arten von Interaktionen, einschließlich Wischen, Ziehen und sogar Sprechen mit Ihrer Stimme, und doch wir hatten nicht wirklich die Design-Tools, die mit dieser Art von Design aufholen konnten. Glücklicherweise lernte ich vor ein paar Jahren etwas über Framer und fing an, es in unserem Prozess zu verwenden, um diese Arten von Interaktionen zu definieren. Das heißt, wenn Sie Ihr Telefon direkt verwenden um Ihre Ideen zu zeigen, anstatt auf einem Bildschirm zu suchen, könnten Sie anfangen, das Gefühl dafür zu bekommen wie viel mehr Gelegenheit Sie hatten, Ihr Design zu ändern, um die Dinge einfacher zu bedienen, und die Dinge wirklich entzückend zu machen, damit zu spielen. Es gibt drei verschiedene Übungen, die wir in diesem Kurs durchmachen werden. Wenn Sie alle drei getan haben, dann werden Sie die Grundlagen von Framer lernen, einschließlich Animation, einschließlich Ereignisse wie Klicken, Ziehen und Wischen, und alles wie das, und auch einschließlich Sketch Importieren. Eines der großartigen Dinge an Framer ist, dass Sie, wenn Sie Sketch bereits verwendet haben, einem Klick Ihre Entwürfe in Ihren Prototyp importieren und sofort mit der Bearbeitung beginnen können . Also, für das erste Beispiel, werden wir über die Grundlagen der Animation gehen. animiere ich es, wenn ich auf ein Objekt klicke Wieanimiere ich es, wenn ich auf ein Objekt klicke? Das schließt auch Dinge wie Physik ein. Ich denke immer noch mehr über das Timing und die Kurven, die passieren, wenn sich etwas über den Bildschirm bewegt, um Ihnen im Grunde mehr Details zu geben. Für die zweite Übung werden wir eine exemplarische Vorgehensweise einer mobilen App durchlaufen. Grundsätzlich, wenn Sie zum ersten Mal eine App öffnen, werden Sie manchmal feststellen, dass es ein paar Bildschirme gibt , die Sie durch wischen, um den Kern der App zu erhalten. Das ist ein ziemlich häufiges mobiles Muster, und so werden wir darüber hinweggehen. Sie können sogar Ihre eigenen Beispiele in diesem verwenden, wenn Sie möchten, aber ich habe Beispiele für jedes von ihnen für Sie bereitgestellt. Für die dritte werden wir eine To-Do-Listen-App aus Sketch importieren und lernen, wie Sie etwas wegwischen und lernen, wie Sie eine scrollbare Ansicht erstellen. Wenn Sie die Skillshare Klasse für Sketch absolviert haben, können Sie Ihr Design aus diesem Kurs tatsächlich verwenden und in Framer importieren und es zum Leben erwecken. Es gibt drei wichtige Dinge, die ich hoffe, dass Sie dieser Klasse wegnehmen werden. Der erste ist, dass Sie erfahren, warum Prototyping wichtig ist, warum es Ihnen in Ihrem Prozess helfen kann und wie Sie es wirklich auf Ihre tägliche Arbeit als Designer anwenden können? Sie lernen, wie Sie sehr High-Fidelity-Prototypen erstellen, benutzerdefinierte Prototypen, die viel mehr Details ermöglichen. Schließlich werden Sie hoffentlich tatsächlich abholen, wenn Sie noch nicht codiert haben. Dies ist eine gute Möglichkeit, die Grundlagen der Codierung zu reduzieren. Es ist keine Voraussetzung für diesen Kurs, dass Sie für die Verwendung von Framer codiert haben. Es hilft sicherlich, aber Sie können einfach mitverfolgen, und ich denke, Sie werden auf dem Weg mit vielen neuen Erkenntnissen kommen. Also, in dieser Klasse, für diese drei Übungen, können Sie entweder eine oder alle von ihnen hochladen, je nachdem, wie viele Sie zu tun haben. So oder so, bitte gehen Sie einfach voran und probieren Sie es aus, weil ich für Feedback zu diesen oder Ratschlägen bin, oder wenn Sie auf Probleme stoßen, können Sie es jederzeit erwähnen oder sogar auf der Facebook-Gruppe, mit der ich in der -Ressourcen. Also, stellen Sie sicher, dass Sie es eine Aufnahme geben, vielleicht laden Sie ein GIF davon, wenn Sie möchten, oder ein Bild oder einen Screenshot. Ein GIF-Tool, das ich gerne verwende, heißt LiceCap, und darüber werde ich auch in der Diskussion noch mehr erwähnen. Aber gehen Sie auf jeden Fall voran und laden Sie Ihr Projekt hoch, das diese drei Beispiele enthält, oder wieder, was auch immer Sie tun möchten. 2. Warum Prototyping?: Eine wirklich häufige Frage zum Prototyping ist, dass es so viele Werkzeuge gibt und wie sollten Sie herausfinden, welches Werkzeug Sie verwenden sollten. Ich werde im Grunde alle verschiedenen Optionen aufschlüsseln, die zumindest eine große Reihe von ihnen vorhanden sind , um Ihnen zu helfen, ein Framework im Kopf zu haben , wenn Sie jeden von ihnen verwenden könnten. An einem Ende des Spektrums haben Sie eine Reihe von einfachen Werkzeugen. Dies sind Dinge, die sehr einfach zu bedienen und schnell zu holen sind, und sie lassen Sie Dinge wie Click-throughs tun, sie lassen Sie grundlegende Animationen machen, und das sind Werkzeuge wie Envision und Flinto, die wirklich ziemlich beliebt, weil Sie einfach sofort anfangen können sie zu verwenden, um Bildschirme Ihrer Schnittstelle zusammenzustellen. Am anderen Ende des Spektrums haben wir Werkzeuge, die schwieriger zu erlernen sind, aber auch viel mehr tun können. Das sind höherwertige Werkzeuge, wie die, die wir heute verwenden, Framer. Diese Tools können ein wenig länger dauern, aber tatsächlich können Sie wirklich benutzerdefinierte Interaktionen der nächsten Generation anstelle von Dingen definieren , die nur direkt in Ihr Gerät integriert sind. Sie können auch manchmal in die nativen Funktionen des Telefons tippen , wie die Verwendung der Kamera und so weiter. Zwischen diesem Spektrum gibt es eine ganze Reihe von Tools, die nicht zu schwer zu bedienen sind, sie sind ziemlich anständig zu holen und tatsächlich lassen Sie einige Dinge tun, die benutzerdefinierte sind, und so mischen sie das Beste aus beiden Welten viele Arten, aber es hängt wirklich nur davon ab, was Sie wollen. Also, die nächste häufigste Frage, wenn es um Prototyping geht , ist, wann ist es eigentlich angemessen, Prototypen? Da sich herausstellt, dass es nicht immer der richtige Zeitpunkt dafür ist, und auch bestimmte Teile des Entwurfsprozesses erfordern möglicherweise unterschiedliche Werkzeuge an verschiedenen Orten. Also, es gibt wirklich fünf verschiedene Arten von Dingen zu denken, wenn Sie darüber nachdenken, wann ich Prototypen erstellen soll. Der erste ist der Prozess, in dem Sie sich entlang der Zeitachse Ihres Entwicklungsprozesses befinden? Wenn Sie auf dem Weg Ende sind und Sie bereits eine funktionierende App haben und Sie wirklich nur Details optimieren, es wahrscheinlich keinen Sinn für Sie, Tools zu verwenden , die Ihnen High-Level-Click-throughs der Dinge geben. Aber wenn Sie am Anfang eines Prozesses sind, möchten Sie wahrscheinlich nicht eine Tonne Zeit oder zu viel Zeit im Code verbringen, um die Fähigkeit zu behindern, nur wirklich zu identifizieren, was das Kernproblem ist, das Sie zu lösen versuchen. Es ist besser, sicherzustellen, dass Sie Werkzeuge verwenden, die schnell und einfach zu bedienen sind und Sie wirklich entscheiden können, in welchem Problemraum Sie arbeiten sollten. Die zweite ist Beschränkungen. Mit Einschränkungen möchten Sie wirklich darüber nachdenken, was Ihr Entwicklungsteam macht, was sind sie in der Lage? Wenn es ein paar Leute sind, die neu im Engineering sind, möchten Sie vielleicht nicht Dinge komplizieren oder sie mit benutzerdefinierten blinkenden Schnittstellen der nächsten Generation verwechseln , oder? Es ist wahrscheinlich besser, sich an die Grundlagen zu halten und die eingebauten Komponenten zu verwenden. Daher möchten Sie in diesem Fall möglicherweise kein fortgeschritteneres Tool verwenden. Das dritte, was man im Hinterkopf behalten muss, ist die Zeit. Wie viel Zeit haben Sie? Wenn Sie eine Tonne Zeit und alle Ressourcen in der Welt haben, dann großartig! Sie können mehrere Generationen von etwas Prototypen bis Sie wirklich zufrieden damit sind und dann einspringen und es entwickeln. Wenn Sie überhaupt nicht viel Zeit haben, ist ein Trick, den Sie tatsächlich tun können, vielleicht auf Ihr Engineering-Team für dieses Prototyping zu stützen , was Ihnen in diesem Fall ein wenig Zeit sparen kann , damit Sie erledigen Sie die redundante Arbeit, es einmal auf sich selbst zu spezifizieren, und dann macht der Ingenieur es trotzdem wieder. Das vierte, was man im Auge behalten muss, ist der Kontext. Was muss diese App haben? Muss es reaktionsschnell sein? Muss es mit echten Daten arbeiten? Alle diese verschiedenen Variablentypen können sich auf das Werkzeug auswirken, das Sie verwenden können. Zum Beispiel, wenn Sie echte Daten verwenden, erlauben nur einige der Tools, die wir erwähnt haben, das tatsächlich zu tun. Normalerweise diejenigen, die ohnehin etwas schwieriger zu holen sind. Wenn es etwas ist, das Sprachinteraktion benötigt, Ihre Kamera, können all diese Dinge beeinflussen, welches Werkzeug Sie verwenden. Der letzte ist persönlicher Komfort. Die Wahrheit der Sache ist, dass es kein vorherrschendes, bestes Prototyping-Tool gibt. Es gibt kein einziges Werkzeug, das du für alles verwenden sollst . Das ist einfach nicht der Fall. Denn ehrlich gesagt hängt es ein wenig von Ihnen ab und was Sie verwenden möchten, und ich denke, es ist am besten, nicht einen bestimmten Prozess und eine Art zu erzwingen, etwas zu machen. Sie sollten einfach das verwenden, was Sie sich wohl fühlen. Also, es liegt wirklich an dir. 3. Prototyp 1: Erstelle eine Animation: Hallo, und willkommen zu deiner ersten Framer-Übung. Wenn Sie es noch nicht getan haben, gehen Sie zu framerjs.com und laden Sie die kostenlose Testversion herunter, damit wir loslegen können. Wenn Sie das getan haben, öffnen Sie Framer, und Sie werden feststellen, dass Sie mit einem Willkommensfenster begrüßt werden, das eine Reihe von allgemeinen Beispielen für Interaktionskomponenten enthält, für die Sie Framer verwenden könnten, sowie einen Link, um mehr zu erfahren und auch einen Link zu unsere Community, die ein wirklich großartiger Ort ist, um Fragen zu stellen, Beispiele zu sehen, Feedback zu geben, was auch immer es sein mag. Wir beginnen, indem Sie auf das Plus-Symbol klicken, um ein neues Framer-Dokument zu starten. Ich habe Ihnen dafür ein Bild von Buzz Lightyear zur Verfügung gestellt, aber Sie sind wirklich willkommen, das Bild zu verwenden, das Sie aus dem Internet wollen. Das ist völlig in Ordnung. Wenn Sie das gewünschte Bild haben, ziehen Sie direkt auf das Telefon, und Sie werden feststellen, dass er direkt auf dem Bildschirm angezeigt wird. Als wir das taten, passierten ein paar Dinge. Sie werden auf dem Weg nach links bemerken, ein Codeausschnitt erschien, der Buzz Lightyear Breite, seine Höhe und einen Link zum Bild definiert . Dies wird in etwas namens CoffeeScript geschrieben, das eine einfachere, sauberere Version von JavaScript ist. Wenn Sie noch nicht kodiert haben, ist das völlig in Ordnung. Folgen Sie einfach, und wenn Sie irgendwelche Fragen haben, können Sie sich frei fühlen, um die Diskussion zu posten. Wir werden unser Bestes tun, um ihnen zu antworten. Sie werden feststellen, dass sich in der Mitte das Ebenenfenster befindet, das einen Link dazu hat, wo das Bild auf der rechten Seite angezeigt wird, und wenn Sie viele Ebenen haben, ist es sehr hilfreich zu sagen, wo alles ist. Moment werden wir beginnen, indem wir die Bildebene in Buzz umbenennen, nur um die Arbeit ein wenig einfacher zu machen, und Sie werden sehen, dass das Ebenenfenster entsprechend aktualisiert wird. Das erste, was wir tun werden, ist, über einige der Eigenschaften zu lernen , die Framer Sie für Ihre Bilder ändern können. Also, zum Beispiel, wenn Sie Buzz eingeben. Autocomplete gibt Ihnen eine Reihe von verschiedenen Optionen. Es gibt Ihnen seine x und y und Unschärfe. Es gibt Ihnen Größe und so weiter, Skala. Lasst uns voran gehen und mit Skala spielen, und vielleicht verdoppeln wir es. Sie können Buzz sofort Updates auf der rechten Seite sehen, was wirklich großartig für sofortiges Feedback ist. Sie können es wirklich klein machen. Moment machen wir es 0,8. Wir wollen auch Buzzs Position ändern. Wir können das kein Problem machen. Sie können sehen, wie er sich ein wenig nach unten bewegt. Wenn ich zu 500 gehe, noch weiter. Lass ihn uns hier ganz nah an den Boden bringen. Sieht ziemlich gut aus. Vielleicht möchten wir auch seine x-Position ändern. Sie können das tun, indem Sie seine x-Position direkt ändern. Wir können auch etwas verwenden, das wir Methoden nennen, um den Prozess zu beschleunigen, wenn es etwas Bestimmtes gibt, das Sie tun möchten, wie Zentrieren Sie es. Also, hier haben wir Buzzs x-Position horizontal zentriert. Sie können es vertikal zentrieren oder beides. In diesem Fall möchten wir es nur horizontal zentrieren. Nun, was wir tun wollen, ist damit anzufangen, dies zum Leben zu erwecken. Wir wollen anfangen zu tun, was Framer wirklich gut ist, das Hinzufügen von Ereignissen zum Klicken oder Ziehen und Animieren usw. Also gibt es alles, was wir tun können. Ein wirklich lustiger, mit dem ich manchmal anfangen möchte, ist es, den Gegenstand ziehbar zu machen. Alles, was Sie tun, ist ziehbar aktiviert auf true gesetzt, und schon können Sie Buzz herum fliegen, was wirklich cool ist. Sie werden feststellen, dass er sogar Momentum kostenlos eingebaut hat. Es macht eine Menge Spaß. Wir werden nicht viel mit dem Ziehen in diesem Beispiel tun. Wir werden es in zukünftigen Beispielen mehr tun. Aber es ist ein wirklich Spaß, mit dem man anfangen kann, weil es einfach ist. Aber was wir anfangen werden, ist das Hinzufügen eines Ereignisses, so dass, wenn ich auf Buzz klicke, etwas passiert. das zu tun, werden wir Buzz.on eingeben und uns die Reihe von Ereignissen ansehen, die Framer uns gibt. Für diesen Fall gehen wir einfach voran und mit einem Klick. Wir werden im Grunde Buzz in der Luft bewegen wollen, wenn Sie darauf klicken. Um das zu tun, können wir seine y-Position in etwas wie, ich weiß nicht, 100 ändern . Nun, wenn Sie Ihren Cursor nach rechts bewegen, klicken Sie auf Buzz, er springt in die Luft. Aber Sie werden bemerken, dass er einfach schnappt, und das ist nicht sehr interessant. Wir wollen ihn wirklich animieren und es so aussehen lassen, als würde er tatsächlich fliegen. Im wirklichen Leben teleportiert die Dinge nicht nur von A nach B, sei cool, wenn sie es taten, aber sie nicht. Also, wir wollen dies animieren, und um das zu tun, müssen wir nur Buzz.Animate eingeben und beginnen, einige Eigenschaften zu geben. Also, lassen Sie uns zum Beispiel das Gleiche animieren. Jetzt fliegt er in der Luft. Sie können entweder die Schaltfläche neu laden oder den Befehl R drücken, um zu aktualisieren und es erneut zu versuchen. Ziemlich cool. Nun, eine Sache, die darauf hingewiesen wird, ist, dass CoffeeScript etwas namens Einrückungen verwendet , um zu markieren, welche Codezeilen sich auf was beziehen. Also, in diesem Fall bezieht sich alles, was ich hier mit diesem x und y schreibe, auf das nächste Elternteil, wo die nächste Zeile dahinter, die nicht eingerückt ist, was in diesem Fall Eigenschaften ist. In ähnlicher Weise beziehen sich auf dem Weg nach oben, wenn wir die Breite und Höhe von Buzz angegeben haben, wenn wir die Breite und Höhe von Buzz angegeben haben, alle diese Dinge auf die Ebene selbst. Wenn Sie Dinge wie JavaScript verwendet haben, erkennen Sie möglicherweise Dinge wie Klammern, die dazu neigen, Dinge zu blockieren. Es ist so, nur ein bisschen sauberer. Also, das nächste, was wir tun wollen, ist zu bemerken, dass die Bewegung sehr langsam geschieht, und es geschieht auch mit der gleichen Geschwindigkeit im Laufe der Zeit. Also, lassen Sie uns zuerst die Geschwindigkeit einstellen. Sie können fortfahren und die Anzahl der Sekunden hinzufügen , die Sie für diese Animation bevorzugen. Also, in diesem Fall ist es eine Sekunde, ein bisschen besser. Aber ich kann es eine halbe Sekunde oder sogar eine Viertelsekunde machen und sehen, wie es die Dinge beeinflusst. Es macht Spaß. Du kannst schon ein Gefühl dafür bekommen, wie ich nur ein paar Dinge ändern und ein Gefühl dafür bekommen kann , wie es sich anfühlt, bis ich damit zufrieden bin. Ich möchte vielleicht sogar ein paar weitere Eigenschaften wie Rotation hinzufügen, vielleicht skalieren. Ziemlich cool. Also habe ich auch erwähnt, dass es nicht nur die Geschwindigkeit ist, die wir betrachten wollen, sondern auch die Geschwindigkeit im Laufe der Zeit, mit der es animiert. Also, dafür haben wir etwas, das Kurven genannt wird. Kurven können Sie verschiedene Arten von Möglichkeiten angeben, mit denen der Layer animiert werden soll. In diesem Fall möchte ich, dass es sich um ein echtes physisches Objekt handelt, es gibt etwas, als wäre es tatsächlich von den Regeln der Physik betroffen. Lassen Sie uns eine Feder geben, und ich erkläre, was das bedeutet. Also, jetzt werden Sie bemerken, wenn ich auf Buzz klicke, springt er und springt vom oberen Rand des Bildschirms, was ziemlich cool ist. Also, was ist das, und wie machen wir es? Sie werden feststellen, dass es drei Werte gibt. Gehen wir weiter und besuchen Sie die Framer-Website, um einen Blick darauf zu werfen, was diese tun. Es gibt ein großartiges kleines Werkzeug, mit dem Sie diese verschiedenen Variablen ändern können und sehen, wie sie sich auf die Animation auswirken, was eine wirklich lustige und schnelle Möglichkeit ist, zu entscheiden, wie Sie Ihre Animation fühlen möchten. Also, wenn ich das ändere, werden die Dinge bouncier oder weniger hüpfend. Wenn Sie ein wenig mehr darüber wissen wollen, warum das ist, eine Möglichkeit, darüber nachzudenken, ist es, diese als echte Objekte zu betrachten und darüber nachzudenken, wie sich diese Objekte bewegen würden, wenn sie real gewesen wären. Wenn ich zum Beispiel einen Ball gegen die Wand schmeiße, geht er nicht einfach mit einer glatten Geschwindigkeit im Laufe der Zeit und stoppt am Ende, es hat etwas Physik angewendet. Richtig? Wenn es auf die Wand trifft, könnte es springen. Wenn es ein Felsen ist, könnte es in einer bestimmten Weise betroffen sein, das Gewicht des Gesteins könnte die Dinge verändern. Also, in diesem Fall, diese drei Variablen beziehen sich auf Spannung, die als Sprungkraft gesehen werden könnte, wieder vielleicht die Form davon, könnte als Reibung gesehen werden, die vielleicht das Gewicht des Objekts ist und wie dies seine Geschwindigkeit im Laufe der Zeit, und auch Geschwindigkeit, die eine Windup ist , wie viel Anfangskraft Sie geben es am Anfang. Ich neige eigentlich nicht dazu zu finden, dass wir Geschwindigkeit verwenden müssen. Sie können es verwenden, wenn Sie möchten, aber ich mag es, die Dinge einfach zu halten, und verwenden Sie einfach zwei Eigenschaften, was ganz in Ordnung ist. Also, wenn sich das zu federnd anfühlt, kannst du einfach rumspielen, bis du glücklich bist. Also, das nächste, was wir tun wollen, ist Buzz als eine Reihe von Staaten zu geben, mit denen wir spielen können. Also, im Moment fliegt er einfach in der Luft, aber was, wenn wir wollen, dass sie ein paar verschiedene Dinge tun? Nun, Framer macht das wirklich einfach mit etwas namens „Zustände“. Was wir tun wollen, ist einen Namen für den Staat zu definieren , den wir fliegen nennen, und geben ihm eine Reihe von Eigenschaften. Wir können die gleichen verwenden, die wir dort oben verwendet haben, Sie können sie sogar kopieren und einfügen, wenn Sie wollen. Sie können die Befehlszeile verwenden, um nach Belieben hin und her einzuziehen. Um diesen Zustand aufzurufen, müssen Sie nur states.next eingeben. Jetzt, wenn ich auf ihn klicke, animiert er nach oben und rechts zurück. Nun, der Grund, warum es weiß, zurück nach unten zu gehen, ist, weil Framer-Status verstehen, wo das Element anfänglich positioniert wurde, und erinnert sich daran, dass es sich als Standardzustand von seinem Standardstatus in den Zustand umkehrt , den Sie definiert haben. Aber es passiert wieder langsam. Wir möchten uns daran erinnern, diese Kurve zurückzubringen, die wir benutzt haben. Um dies zu tun, müssen Sie nur Animationsoptionen eingeben und ihm diese Eigenschaften geben. Jetzt springt es. Sie können beliebig viele Zustände hinzufügen. Also, wenn ich ein weiteres hinzufügen möchte und ich anfangen möchte, Dinge etwas zu ändern, Dinge zwischen ihnen zu spielen, vielleicht möchte ich vielleicht einen Flip-Effekt geben, der cool sein könnte. Also, ich möchte es um seine Y-Achse drehen, also dreht es horizontal. Vielleicht will ich, dass seine Skala in irgendeiner Weise bewegt wird, und da gehst du. Drei verschiedene Zustände. Ziemlich cool. Jetzt, nur um es ein bisschen interessanter zu machen, haben wir gerade nur eine Schicht. Was wäre, wenn wir den Hintergrund ändern wollten, indem wir eine andere Ebene hinzufügen? Alles, was Sie tun müssen, ist einen Hintergrund hinzuzufügen. Standardmäßig gilt es weiß, aber Sie können wirklich jede gewünschte Farbe hinzufügen. Also, in diesem Fall, lassen Sie uns voran und fügen Sie ein schönes weiches Blau hinzu. Sieht ziemlich gut aus. Schließlich können wir dies mit jedem teilen, den wir wollen, mit nur einem Klick. Indem Sie auf die Freigabe-Schaltfläche in der Symbolleiste gehen, wird es Sie bitten, zu speichern, was eine gute Sache ist, in die Gewohnheit zu tun. Wenn Sie dies tun, haben wir einen Link zum Prototyp, kopieren Sie in die Zwischenablage, und es ist bereits in Chrome geladen. Sie können mit ihm direkt im Browser spielen, was großartig ist, weil Sie es mit Freunden oder Kollegen teilen können, wer auch immer nur, indem Sie diese URL teilen. Wenn Sie sich Framer-Prototypen ansehen, werden Sie feststellen, dass Sie auch auf Öffnen klicken können, wenn Sie den Prototyp eines anderen betrachten , um ihn direkt in Framer zu öffnen und zu sehen, wie er es gemacht hat, oder laden Sie ihn herunter, wenn Sie das bevorzugen. Sie können diese auch direkt auf Ihrem Telefon anzeigen, was wirklich nützlich ist, während Sie Prototyping sind. Einige Leute mögen auf die Spiegelschaltfläche klicken, die Ihnen eine Reihe von Apps gibt, die Sie auf Ihrem Telefon herunterladen können, und sie im Vollbildmodus anzeigen, und sie ermöglichen sogar eine Vorschau in Echtzeit, so dass Sie ändert sich und sehen, wie sie sich anfühlen, was super nützlich ist. Das Letzte, was ich erwähnen werde, sind nur ein paar Tipps für den Fall, dass du stecken bleibst oder so. Wir haben in der Symbolleiste etwas namens Snippets, die Ihnen eine Reihe von häufig verwendeten Elementen in den Codeausschnitten gibt, die verwendet werden, um sie zu erstellen. Also, heute haben wir über Staaten gesprochen. Sie können also darauf klicken, und Sie werden feststellen, dass eine Reihe von Code hinzugefügt wird. Es erinnert Sie daran, wie man diese Dinge macht, und Sie können mit ihnen direkt auf der rechten Seite spielen, die ich gerne verwende, damit ich Dinge kopieren und einfügen kann, wenn ich einige der Syntax vergesse. Aber eine andere Sache, die Sie tun können, ist, dass Sie auf die Dokumentation klicken, die alles auf der linken Seite zur Verfügung hat. Sie können es sogar durchsuchen. Heute haben wir wieder über Staaten gesprochen. Also haben wir über Animationsoptionen gelernt, wir haben gelernt, wie man zwischen ihnen animiert, und es gibt sogar alle anderen, die wir nicht benutzt haben, mit denen du spielen kannst, wann immer du willst. Sie abschließend, dass bei der Eingabe BeachtenSie abschließend, dass bei der Eingabeverschiedene Eigenschaften angezeigt werden. Sie können sogar auf eine kleine Verknüpfung unten rechts klicken, um zu sehen, worauf sich diese Eigenschaft bezieht und was sie tut, was wirklich nützlich ist. So haben Sie jetzt die Grundlagen zum Klicken und Animieren von Dingen gelernt, Sie haben etwas über Ereignisse und Eigenschaften und das Ebenenfenster, wie Sie freigeben können. Mit all diesem Wissen wird es großartig sein, wenn du in Skillshare ein Projekt erstellt hast und uns gezeigt hast, was du hast. Spielen Sie mit verschiedenen Arten von Eigenschaften herum, animieren Sie sie, machen Sie es interessant und teilen Sie es, damit wir darüber sprechen können. 4. Prototyp 2: Erstelle einen Übergang: Was wir in dieser Übung lernen werden, ist, wie Sie Skizze verwenden und Ihre Dateien direkt in Framer importieren, um Ihre Prototypen so viel schneller zu machen. Wir werden das mit einem Beispiel aus Google Docs tun, das die Onboarding- oder erste Lauferfahrung ist und Sie können die Bilder verwenden , die Sie dafür wirklich wollen, aber in der Zwischenzeit habe ich Ihnen ein Skizzendokument zur Verfügung gestellt. Wenn Sie Sketch noch nicht haben, stellen Sie sicher, dass Sie auf sketchapp.com gehen und die kostenlose Testversion abrufen. Wenn Sie es nicht benutzt haben, empfehle ich Andrew Markandos Skizzenkurs auf Skillshare zu nehmen, es ist eine wirklich gute Möglichkeit, um loszulegen und wenn Sie es nicht haben, ist es völlig in Ordnung, folgen Sie einfach mit. Wir öffnen die Skizzendatei und Sie werden feststellen , dass die Bilder in verschiedene Kunsttafeln unterteilt sind. Diese Bilder sind jeweils wischbare Bildschirm, die Sie haben werden. Sie werden auch feststellen, dass unten Indikatorpunkte angezeigt werden. Also, wenn diese Datei geöffnet ist, werden wir nur ein neues Framer-Dokument mit dem Befehl N starten und die Skizzendatei importieren. Framer weiß bereits, welche Skizzendatei geöffnet ist , was diese super schnell und einfach macht, klicken Sie einfach auf eine Schaltfläche und Ihre Datei ist schon da. Sie werden feststellen, wenn Sie die Maus über die Mitte hier, dass ich alle die gleichen Ebenen habe , auf die ich in Skizze direkt in Framer zugreifen konnte , was super nett ist. Standardmäßig sind alle verschiedenen Kunsttafeln deaktiviert, die nicht die ersten waren. Framer geht also davon aus, dass Sie sofort mit dem ersten arbeiten wollen. Also, eine Sache, die darauf hingewiesen wird, ist, dass diese Struktur, die Ebenenhierarchie, wenn Sie so wollen, die Gruppierung in Sketch ist die gleiche wie in Framer, was super schön ist. Wenn ich also jederzeit Änderungen vornehme, sage ich, dass ich diese Indikatorpunkte oder etwas umbenenne, ist es am besten, keine Leerzeichen zu verwenden, die ich empfehle, es einfach zu halten , es wird es einfacher machen, damit Sie keine Unterstriche und Code eingeben müssen und wenn Sie „Speichern“, gehen Sie zurück zu Framer und Sie können entweder Command Shift I verwenden oder einfach erneut auf „Importieren“ klicken, was Sie bevorzugen, um die Datei erneut zu importieren, und Sie werden feststellen, dass sie aktualisiert wurde. Gleiche gilt für alle Bilder oder Dinge, die Sie auf dem Bild selbst ändern, es wird einfach hochgeladen, ohne Ihren Code überhaupt zu verletzen, was wirklich schön ist. Also, das erste, was wir tun werden, ist beginnen, mit einigen dieser Ebenen und Code herumzuspielen. Wir müssen jeder Ebene, die wir ändern, den Namen dieses Objekts vorstellen , das all diese Informationen enthält , und wir können es benennen, was wir wollen, so dass wir in Sketch eingeben können, wenn das etwas kürzer ist. Sie werden feststellen, dass wir bereits in der automatischen Vervollständigung der Ebenen vorangegangen sind , die ich möglicherweise manipulieren möchte , was super nett ist und wenn ich seinen Wert so ändern möchte , wie wir es in der ersten Übung gelernt haben, kann ich das einfach tun. Also, ich kann es nach unten bewegen. Auf diese Weise werden wir jede Ebene so ändern, wie wir es brauchen. Das erste, was wir tun wollen, ist, einige dieser Kunsttafeln sichtbar zu machen. Wirklich alle von ihnen, weil wir wollen, dass sie alle angezeigt werden , während der Benutzer scannt von Seite zu Seite. Um dies zu tun, setzen Sie sichtbar gleich true, und Sie werden feststellen, dass der Layer jetzt angezeigt wird. Alles, was wir tun müssen, ist das ein paar Mal zu kopieren und sicherzustellen, dass alle Ebenen nach Bedarf angezeigt werden. Eine Sache, die ordentlich ist, ist, wenn Sie die Maus über diese bewegen, bemerken, wie der Code auf der linken Seite tatsächlich auf die Ebene hervorhebt, die diesen Code in irgendeiner Weise verwendet. Dies wird besonders bei längeren Dokumenten sehr nützlich , so dass Sie finden können, wo Sie auf jede Sache verwiesen werden. Also, das nächste, was wir tun wollen, ist, dass diese Indikatorpunkte auf dem Weg oben im Dokument erscheinen, so dass wir sie nie verlieren. Moment werden sie nur versteckt in der Kunsttafel A gezeigt . Wenn Sie also durch wischen würden, würden Sie sie nicht mehr sehen. Also, die Art, das zu tun, ist, dass wir den Namen eingeben und wir ändern seine Superschicht, die sich auf sein übergeordnetes Element bezieht, von dem was Art Board A war, zum gesamten Framer-Dokument. Wir können das tun, indem wir uns nur auf den Framer-Bildschirm beziehen. Jetzt werden Sie auf der rechten Seite bemerken, es wird am Anfang des Dokuments angezeigt und sie sind auf allen Ebenen, die wirklich großartig sind. Das nächste, was wir tun möchten, ist, alle diese verschiedenen Kunsttafeln in das einzuwickeln , was wir eine Seitenkomponente nennen Denken Sie daran, als ob Sie eine Bindung für ein Buch haben und Sie alle verschiedenen Seiten in diese Bindung einfügen möchten , damit Sie ein nahtloses Buch, das ist, was wir tun. Wir möchten sicherstellen, dass die Kunsttafel A, B, C, D und E alle innerhalb des gleichen Buches einwickeln. Also, der Weg, dies zu tun, ist, indem Sie Seiten eingeben gleich Seitenkomponente. Seiten ist nur der Name, den wir zufällig dafür wählen können Sie es wirklich nennen, was Sie wollen. Seitenkomponente ist der Name der Framer-Referenz für eine swipeable Paging-Ansicht, und wir wollen die erste Art Board wickeln, um das zu tun, nur um loszulegen. Jetzt gibt es wirklich nur eine Seite in diesem Buch, oder? Wir haben diese erste Art Board, wir wollen wirklich alle anderen hinzufügen, und wir tun das einfach, indem wir pages.addPage eingeben und dann die Art Boards nacheinander eingeben. Sie werden jedes Mal bemerken , dass die Seiten innerhalb dieses Wrapper in Artboard A platziert werden. Sie können sogar sehen, ob Sie mit der Maus über Seiteninhalte bewegen, die wir sie jetzt nebeneinander einrichten. Framer erledigt die ganze harte Arbeit für dich, du musst nichts selbst positionieren. Es weiß nur, basierend auf der Breite jedes Bildes, dass Sie es Seiten mit der gleichen Breite sein sollen. Sobald wir jede einzelne Seite hinzugefügt haben, fahren Sie fort und versuchen Sie, zu wischen. Ziemlich cool, in nur wenigen Codezeilen haben wir eine Wischansicht, aber wir sind noch nicht fertig. Beachten Sie, wie jedes Mal, wenn ich wische, ob horizontal oder vertikal alles verschoben wird, es nicht seltsam wäre , wenn das in Ihrer App passiert. Das wollen wir nicht. Framer gibt uns also nur eine Codezeile, um das zu beheben. Alles, was wir tun müssen, ist in pages.scrollVertical gleich falsch und da haben Sie es, alles ist wischbar. Aber es ist nicht getan, weil diese Indikatorpunkte im unteren Bereich bleiben und wir möchten, dass sich diese bewegen, je nachdem, auf welcher Seite Sie sich befinden. Also werden wir im Grunde etwas ändern müssen, basierend auf einem Ereignis, das passiert. Das Ereignis, das wir in diesem Fall hören möchten, ist also, wenn sich die Seite ändert. Um dies zu tun, haben wir etwas, das wir ändern aktuelle Seite, die etwas, das wir hören können, dass lassen Sie uns wissen, wenn die Seite geändert wird, dass etwas passiert ist. Die Art und Weise, wie wir sicherstellen können, dass es funktioniert, ist, indem Sie eine Debug-Einstellung namens print eingeben Sie können dort eingeben, was Sie wollen, und wenn Sie die Seite ändern, bemerken Sie, wie Framer dieses kleine Fenster mit dem Text erscheint, den Sie sich entschieden haben stellen Sie sicher, dass das Ereignis ausgelöst wurde. Also, jedes Mal, wenn ich wische, heißt es „Yay! Ehrfürchtig. Sie können Dinge immer auskommentieren indem Sie den Befehlsschrägstrich drücken oder am Anfang einen Hashtag eingeben, was bedeutet, dass es einfach nicht als Code gelesen wird, aber es ist schön, als Notizen herumzuhalten, damit Sie sich daran erinnern können, was Sie getan haben. Wie Sie oben sehen können, erinnert uns dieser Kommentar daran, dass dies alle Ebenen aus Sketch sind, die in eine importiert wurden. Also, was wir jetzt tun wollen, ist, wenn Sie die Seite ändern, müssen wir diese Indikatorpunkte aktualisieren. Also, ich werde aktualisieren, um das Druckdokument zu löschen , und jetzt werde ich diesen Indikator Punkt ändern indem ich in Sketch.IndicatorDots aber wirklich, was ich möchte, ist, nur den ausgewählten Punkt zu verschieben. Also, wirklich werden wir ausgewählt anrufen. Alles, was ich tun möchte, ist, dass ich seine x-Position ändern möchte, abhängig davon, auf welcher Seite wir gerade sind. Also, um das zu tun, werden wir seine x-Position für jetzt bewegen , können Sie etwas albern wie plus gleich ausprobieren , was bedeutet, dass es von seiner aktuellen Position nehmen Sie es zu jeder Zahl hinzufügen, die Sie eingeben, wie 20. Jedes Mal, wenn ich gehe, wird es sich ein wenig bewegen. Aber das ist nicht wirklich das, was wir wollen, oder? Denn wenn ich nach links gehe, wird es weitergehen , denn jedes Mal, wenn ich die Seite ändere, fügen wir 20 hinzu, und das wird nicht wirklich helfen. Also, was ich versuchen möchte, ist, es abhängig von der Seite zu setzen, auf der wir uns befinden. Um dies zu tun, kann ich im Grunde nachschlagen, auf welcher Seite wir sind, mit einer einfachen Methode namens horizontaler Seitenindex nachschlagen. Das bedeutet, weil wir horizontal wischen, wollen wir wissen, auf welchem Index der Seite wir gerade sind. Aber im Moment, wenn wir das zum Beispiel drucken würden, um zu sehen, was es tut, weil Sie bemerken, dass nichts passiert. Wir können einfach voran gehen und die gleiche Zeile drucken und Sie werden sehen, dass sie sich tatsächlich bewegt, aber nur um eins und wie Sie rückwärts und vorwärts entsprechend gehen, druckt es, auf welcher Seite Sie sich befinden. Also, gehen Sie weiter und kommentieren Sie das aus und jetzt, da wir wissen, dass es die Anzahl jeder Seite zurückgeben wird, müssen wir das im Grunde mit der Breite von irgendetwas zwischen den Punkten multiplizieren , damit es in diesen Zustand springt. So können wir die Breite des ausgewählten Punkts durch Eingabe in Skizze zu nehmen.Ausgewählt.Breite und multiplizieren, dass mit dem Index. Wenn Sie aktualisieren, streichen Sie über, werden Sie feststellen, dass es fast da ist, es bewegt sich vorwärts und rückwärts nach Bedarf, aber nicht ganz die richtige Entfernung. Das liegt daran, dass wir einen Abstand von einem Punkt bewegen , aber sie sind wirklich zwei Punkte voneinander entfernt. Also, ich muss tun, ist es mit zwei multiplizieren und da haben Sie es. Also, wir werden dort aufhören, wenn Sie mehr fortgeschrittene Dinge hier lernen möchten, können Sie tatsächlich einen Blick auf das Beispiel werfen, das ich in der Diskussionsrunde zur Verfügung gestellt habe, dem Sie eine erweiterte Methode sehen können, die Dinge animiert, während Sie rüber ziehen, aber im Moment sollte dies gut genug sein, um zu gehen, also warum gehen Sie nicht voran und versuchen Sie, Ihr eigenes Onboarding-Beispiel zu importieren und es als Projekt im Kurs zu teilen. 5. Prototyp 3: Erstelle eine To-do-App-Aktion: Für dieses letzte Beispiel werden wir lernen, wie man eine interaktive App macht. Dies beinhaltet, was wir aus den ersten beiden Lektionen über Animationen und Skizzenimport gelernt haben und hinzufügen, wie eine Bildlaufkomponente verwendet wird, um eine scrollbare Liste zu haben, sowie eine ziehbare Komponente, die Inhalte wie diese animiert Häkchen während des Ziehens. Ich habe bereits eine Beispielskizzendatei namens getan erstellt, die wir für diese Übung verwenden können. Wenn Sie es noch interessanter machen möchten, können Sie tatsächlich Ihre eigenen benutzerdefinierten verwenden, um App-Design zu machen , wenn Sie Andrews Skizzenklasse auf Skillshare genommen haben. Also, um zu beginnen, gehen wir voran und öffnen Sie die Beispieldatei und werfen einen Blick darauf, wie sie strukturiert ist. Sie werden zuerst feststellen, dass es eine Gruppe namens „Inhalt auflisten“ gibt, dass dies gut unter die Kopfzeile oben und unterhalb der schwebenden Aktionsschaltfläche am unteren Rand passt . Sie werden feststellen, dass jede Ebene mit einem sehr leicht lesbaren Namen gruppiert ist , den wir dann verwenden können, um sie zu ändern, wenn wir in Framer springen. Also, es ist wichtig, das sauber und ordentlich zu halten. Also, mit dem gesagt, lasst uns direkt in Framer springen und sehen, wie wir anfangen können, dieses Ding zum Leben zu erwecken. Also, wir werden ein neues Dokument erstellen. Ich werde die Skizzendatei importieren, die wir geöffnet haben , und wir werden diese Skizze wie im letzten Beispiel umbenennen, nur um das Schreiben zu erleichtern. Das erste, was wir tun werden, ist, den Listeninhalt scrollbar zu machen. Wir werden dies tun, indem wir ein neues Objekt namens Scroll erstellen und genau wie wir es mit der Seitenkomponente in der letzten Übung getan haben, werden wir es zu einer Bildlaufkomponente machen und die Listeninhaltsschicht umschließen. Also, wie Sie bemerken werden, ist es bereits scrollbar, was ziemlich cool ist. Alles, was wir tun mussten, war, es mit der richtigen gruppierten Ebene zu wickeln. Nun ist das nächste, was wir tun wollen, ist sicherzustellen , dass es nicht horizontal scrollen, wie es jetzt tut. Wenn Sie sich an das letzte Beispiel erinnern, ist es tatsächlich das gleiche Stück Code. Also, jetzt geht es nur auf und ab. Großartig. Das nächste, was wir tun möchten, ist die erste Aufgabe namens Task one call mom zu animieren und zu erlauben, dass sie ziehbar ist. Um dies zu tun, beziehen wir uns auf die Ebene und wir geben in draggable.enabled ist wahr. Sie werden bemerken, dass es funktioniert. Ich kann es herumziehen, aber es ist nicht die Interaktion, die wir wollen. Es fliegt vom Bildschirm, Sie werden feststellen, dass, wenn ich hier aktualisiere, ich die gesamte Scrollansicht und das Element gleichzeitig ziehen kann, es ist nicht ganz ideal. Es gibt also eine Menge Dinge, die wir tun wollen. Das erste, was ist, zu sperren und sicherzustellen, dass Sie es nicht vertikal scrollen können , weil das einfach redundant ist, nicht sehr gut funktioniert. Also, nehmen wir all das und stellen Sie sicher, dass wir vertikal auf false setzen. Jetzt können wir es nur horizontal scrollen. Großartig. Eine Sache, die Sie vielleicht bemerken, ist in diesem Beispiel, und im letzten, mussten wir skizzenpunkt eingeben, bevor wir auf die Layer zugreifen, die wir aus Sketch importiert haben. Im Laufe der Zeit kann das ein wenig ermüdend und so Framer tatsächlich gibt Ihnen eine kleine Abkürzung, um die Dinge zu beschleunigen. Sie müssen lediglich ein Dienstprogramm namens Globale Layer aufrufen und den Namen des Objekts eingeben, das alle Skizzen-Layer enthält. Jetzt können wir das Präfix einfach nicht einschließen und alles sollte immer noch so funktionieren, wie es getan hat. Toll, das beschleunigt die Dinge ein wenig. Als nächstes möchten wir etwas hinzufügen, das als Richtungssperre bezeichnet wird, damit ich nicht zwei Dinge gleichzeitig ziehen kann, wenn ich nicht möchte. Zum Beispiel, wenn ich nur versuche, diese erste Aufgabe zu ziehen und die Liste auf mir scrollt, ist das vielleicht nicht großartig. Ähnlich, wenn ich versuche zu scrollen und ich auch die oberste Liste verschiebe, die sich auch seltsam anfühlen könnte. Glücklicherweise macht Framer das super einfach. Alles, was ich tun muss, ist in diesem Fall Scroll-Eingabe, weil das die Scroll-Komponente ist , die wir bewirken möchten , und wir möchten sicherstellen, dass, wenn Sie es ziehen, dass es gesperrt ist und wir das sowohl für den Scroll tun möchten Inhalt und wir wollen es auch für die Aufgabe Inhalt tun. Was bedeutet, wenn Sie sich bewegen, kann ich hier nicht gehen und da ich das scrollen würde, kann ich nicht nach oben und unten scrollen. Wunderbar. Das nächste, was wir tun möchten, ist eine Animation hinzuzufügen, so dass, wenn ich die Aufgabe ziehe, wenn ich sie nicht über einen bestimmten Schwellenwert hinaus schiebe, sie einfach wieder an den Anfang rasten sollte. Also, um das zu tun, müssen wir im Grunde ein Ereignis aufrufen, sobald ich den Zug losgelassen habe , weil es nicht passieren sollte, wenn ich mich bewege oder wenn ich beginne, sollte es passieren, wenn ich loslasse. Also, um das zu tun, alles, was ich tun möchte, ist zu hören, wenn ich diese Aufgabe verschoben habe. Also task1.on Events und wieder, wenn ich es beendet habe, möchte ich hier einige Animation aufrufen. Also, alles, was wir tun, ist die Aufgabe zu animieren. Wir wollen im Grunde, dass sein x auf Null zurückgesetzt wird. Vielleicht wollen wir eine kleine Feder hinzufügen, damit es sich schön anfühlt. In diesem Fall können Sie sehen, dass es leicht wieder an Ort und Stelle springt , was eine schöne Erinnerung daran ist, dass dieses Ding in irgendeiner Weise physisch ist, dass es etwas ist, das sich bewegen kann. Aber wir wollen nicht, dass es jedes Mal wieder an Ort und Stelle kommt, oder? Wenn Sie einen bestimmten Punkt überschreiten, möchten wir, dass es einen Weg animiert. Also, um das zu tun, was wir tun wollen, ist zu überprüfen, wo diese Position ist, wie Sie es ziehen. Damit wir wissen, an welchem Punkt wir eine Flagge auslösen und sagen, hey, ich bin genau da, wo ich sein muss, um den Übergang abzuschalten und was wir tun können, um das einfacher zu machen, ist, dass wir nacheinem anderen Ereignis namens drag move suchenkönnen einem anderen Ereignis namens drag move suchen und das -Ereignis wird jedes Mal aufgerufen, wenn Sie ein Element über den Bildschirm verschieben. Also, in diesem Fall wollen wir im Grunde betrachten, indem es drucken, wo die x-Position dieser Aufgabe ist. Sie werden unten feststellen, dass jeder einzelne x-Wert gedruckt wird, während ich ihn über den Bildschirm verschiebe. Man kann also sagen, dass, wenn es wirklich weit nach links ist, es in den Negativen liegt, weil es hinter Null liegt. Wenn man es wirklich weit nach rechts bewegt, geht es nach oben in die 200er und weiter. Wir wollen wirklich so vollständig vermarkten, was immer Sie wollen und eines der schönen Dinge über Proto-Typing ist , dass Sie diese Entscheidung treffen können , anstatt es Ihren Ingenieuren zu überlassen. Sie als Designer können einige Auswirkungen auf die genaue Art und Weise haben, die etwas wirklich fühlt. Also, in diesem Fall denke ich, etwas um 250 sollte sich ziemlich gut anfühlen. Also, wir brauchen das nicht mehr wirklich, ich werde nur dazu kommen, und stattdessen wollen wir etwas schreiben, das eine if-Anweisung genannt wird. Um zu sehen, ob die Aufgabe einen bestimmten Betrag über den Bildschirm verschoben hat , tun Sie etwas, wenn es nicht etwas anderes tun. Also in diesem Fall wollen wir sehen, dass es über 250 Pixel gegangen ist. Also, wenn es weniger als 250 ist, lassen Sie es uns gleich wieder schnappen und wenn es nicht so anders ist, dann lassen Sie uns jetzt einfach etwas drucken, nur damit wir sicherstellen können, dass es funktioniert. Auch hier, weil Kaffeeskript Einrückung verwendet, alles, was nach dieser if-Anweisung eingerückt wird , bezieht sich auf etwas, das hier alles passieren sollte , nachdem das andere danach passiert. Also, hier können Sie überprüfen, ob ich es ziemlich weit über den Bildschirm schiebe, es steht „Hallo“ und wenn ich es nur ein wenig schiebe, schnappt es gleich zurück oder selbst wenn ich in die Negative gehe , weil das immer noch weniger als 250 ist. Also, es funktioniert ziemlich gut, aber anstatt „Hallo“ zu drucken was wir wirklich tun wollten, ist, vom Bildschirm zu rutschen. So können Sie sich frei fühlen, die vorhandene Animation zu kopieren und einzufügen , aber anstatt das x Null ist, möchten wir, dass es ziemlich weit vom Bildschirm entfernt ist. Also, ich werde 750 schreiben, die die Breite des Bildschirms ist , so dass es zumindest abgeht. Mal sehen, ob es funktioniert hat. Also, wenn ich etwas weniger als 250 ziehe, schnappt es zurück, wenn ich mehr als 250 gehe, gleitet es ab. Awesome, es ist ein ziemlich guter Anfang. Es gibt noch einen Haufen mehr zu tun, oder? Wir möchten dieses Häkchen so animieren, dass es beim Ziehen und wir möchten auch sicherstellen, dass wir den Rest der Elemente abschieben. Wir wollen sie ein wenig nach oben schieben, damit sie das ersetzen, was du gerade gezogen hattest. Lasst uns das zuerst machen. Also, was wir sagen, ist, wenn es vom Bildschirm zieht, lassen Sie uns einen Kommentar hinzufügen, um dies klarer zu machen. Also, alles, was in dieser Einrückung passiert, passiert, nachdem diese andere Anweisung aufgerufen wurde. Also, was wir tun wollen, ist im Grunde alle diese verschiedenen Objekte nach oben zu bewegen, Aufgabe zwei, Aufgabe drei und alles erledigt und einfach nach oben verschieben. Also, um das zu tun, lasst uns zuerst mit dem erledigten beginnen. Lassen Sie uns erledigen und animieren. Wir wollen es in Y-Wert bringen und wir wollen es bringen, vorerst, sagen wir, wo Aufgabe drei begonnen hat. Um dies zu tun, wollen wir nur seinen Y-Wert auf den Punkt bringen , wo Aufgabe 3 gerade positioniert ist, was aussieht, als wären es etwa 380 Pixel, wenn man sich das anschaut. Wir können ihm eine Kurve geben, wenn wir wollen, oder wir können es einfach vereinfachen und als Zeitfunktion behalten. Sie können sogar verwenden, wenn Sie CSS zuvor verwendet haben, haben Sie wahrscheinlich von kubischen Beziers gehört, und Sie können eines davon verwenden oder Sie können sogar einfach so etwas verwenden. In diesem Fall können wir einfach einfach verwenden, was anstelle einer Feder nur eine Lockerungsfunktion ist, so dass wir sehen können, wie es hier aussieht. Also, es sieht so aus, als ob ich über gleitete, diese Gegenstände nach oben verschoben wurden, wie ich es erwartet hatte. Es war ein bisschen zu schnell. Also, mal sehen, ob ich es verlangsamen würde. Es wird besser, aber wir müssen noch Aufgaben eins, Aufgaben zwei und drei verschieben . Also, lasst es uns tun. Aufgabe zwei, lassen Sie es uns animieren. Lassen Sie uns hier noch mehr Platz geben, damit Sie ein bisschen besser lesen können. Lassen Sie uns seinen Y-Wert auf die Stelle setzen, an der die erste Aufgabe war. Wir können die gleiche Zeit einstellen und lassen Sie uns dasselbe für Aufgabe drei tun. Wir wollen es auf die Stelle setzen, wo Aufgabe zwei war. Also, während ich hinübergehe, gleitet alles nach oben. Nun, wenn Sie sorgfältig bemerken, der Abstand zwischen getan unten in dieser Gruppe bewegt sich der Abstand zwischen getan unten in dieser Gruppe nicht genau mit der gleichen Rate. Es sieht fast so aus, als wäre es ein bisschen parallaxiert, was eine ordentliche Wirkung ist, aber vielleicht nicht das, was wir wollen. Also, ich möchte nur die fertige Y-Positionierung etwas weiter unten optimieren und ich kann einfach Mathematik verwenden und ich kann einfach hinzufügen, lass es uns 20 Pixel weiter unten setzen. Das sieht ein bisschen besser aus, vielleicht sogar ein bisschen mehr. Das war zu viel. Vielleicht, 20 war einfach in Ordnung. Ja, es sieht ziemlich gut aus. So können wir jetzt erfolgreich etwas abwischen und den Inhalt auf dem Bildschirm animieren. Aber was wir als nächstes tun möchten, ist, wie Sie das Element ziehen, lassen Sie das Häkchen zu bewegen. Also, wenn wir zurück schauen, wo wir nach der X-Positionierung dieses Elements namens Aufgabe 1 gesucht haben, können wir das jetzt entkommentieren und es ein wenig wiederverwenden oder wenn Sie es gerade gelöscht haben, das ist in Ordnung, geben Sie es einfach erneut ein. Was wir tun wollen, ist, dass wir etwas über dieses Häkchen ändern wollen , das abgeschlossene Prüfung genannt wird. Für jetzt, lasst uns mit seiner Deckkraft durcheinander bringen. Standardmäßig wurde die Deckkraft auf eins festgelegt. Also, wenn wir es einfach so lassen, wird sich nichts wirklich ändern. Es ist nur die ganze Zeit bei einem geblieben. Wenn wir es auf Null setzen, merken Sie, dass es weg ist. Aber was wir wirklich wollen, ist, dass es animiert wird, während Sie ziehen, nicht um das eine oder andere zu tun. Also, um das zu tun, was wir tatsächlich tun können, ist eine Methode namens modulate zu verwenden, die verrückt klingt, aber es ist eigentlich ziemlich einfach. Um mehr darüber zu erfahren, wie es funktioniert, können wir tatsächlich einfach direkt in die Dokumente gehen und einen Blick darauf werfen. Also, es sieht so aus, als ob es einen Wert annimmt, der die Eingabe des Modulats ist, was bedeutet, was ich in das füttere, das sich im Laufe der Zeit ändern sollte. Also, Sie können es sich vorstellen, als ob Sie vielleicht Celsius in Fahrenheit konvertieren und in diesem Fall, Celsius in Fahrenheit konvertieren und in diesem Fall,wenn es zwischen Null und 100 bewegt, würden Sie wollen, dass Fahrenheit irgendwo zwischen 32 und 212 liest, so dass sie einander entsprechend zueinander. In diesem Fall möchten wir also die X-Position der Aufgabe einem Opazitätswert zwischen Null und einem der Häkchen zuordnen . Also, lassen Sie es uns ausprobieren. Wenn ich den X-Wert der Aufgabe als Eingabe nehme, dann, wenn Sie sich von den Dokumenten erinnern, und Sie können immer wieder suchen, wenn Sie sie referenzieren möchten, haben wir zwei Bereiche, die Sie einfügen müssen. Der erste Bereich sollte sein, wenn wir im Grunde diese Animation starten wollen, die, ich weiß nicht, irgendwo um 100 bis 250 sein sollte . Richtig? Das bezieht sich auf die X-Position der Aufgabe. Dann wollen wir die Deckkraft während dieses Bereichs von Null zu eins gehen. Also, lassen Sie es uns eine Chance geben. Ziemlich gut. Also, jetzt haben wir das Häkchen mit seiner Deckkraft mit Ihrer Ziehposition animiert. Nun, für ein letztes kleines Detail, lassen Sie uns dasselbe tun, aber lassen Sie uns es mit dem Skalenwert des Häkchens tun. So können wir es kopieren und einfügen, ändern, um zu skalieren und sehen, was passiert. Jetzt werden Sie bemerken, dass es viel zu weit geht, wenn ich herausgehe , und wenn wir uns die Dokumentation nochmal für modulate ansehen, werden Sie feststellen, dass es etwas namens Limit gibt. Es ist standardmäßig auf false gesetzt, es gibt wirklich keine Begrenzung. Also, wenn Sie über diesen Punkt gehen, zum Beispiel in dieser Konvertierung, wäre es immer noch in der Lage, es zu tun. Aber wir wollen das nicht wirklich, weil wir nicht wollen, dass es an der Position des Ziehens vorbei geht. Also, was wir hier tun wollen, ist zu sagen: „Hey, wir wollen eigentlich, dass das Limit real ist.“ Dann, wie Sie bemerken, bleibt es an Ort und Stelle, wie Sie wollen. Ziemlich gut. Das deckt also einen guten Teil von vielen Tipps und Tricks ab, mit denen Sie animierte Prototypen in Framer erstellen können. Eine weitere Verknüpfung, die interessant ist, ist, dass Sie tatsächlich angeben können, anstatt alle Kurven immer wieder einzugeben. Sie können tatsächlich eine Standardanimation eingeben, was Sie möglicherweise tun möchten. Die Art und Weise, wie Sie dies tun, ist, dass Sie Standardwerte für Ihre Animation festlegen, und wir möchten im Grunde eine Standardkurve und in diesem Fall eine Feder festlegen. Wählen Sie einfach eins und jetzt können Sie tatsächlich Dinge loswerden, die Sie einzeln angegeben haben. Beachten Sie, dass es immer noch ein bisschen springt und wenn ich diese auch herausnehme , animiert alles noch. Geh weiter und gib dem eine Chance. Ich würde gerne sehen, wie Sie eine Projektdatei hochladen, indem Sie sie teilen. Auf diese Weise können wir sie ansehen und zu Ihrem Projekt hinzufügen. Wenn Sie verrückt sein wollten, um Ihr eigenes benutzerdefiniertes Design für die Skizzendatei zu verwenden, wäre das auch großartig. Eine Sache, die zu bemerken ist, dass die Skizzendatei hier, werden Sie feststellen, wenn Sie auf den Flughafen klicken ist 750 Pixel breit. Wenn Sie die Skizzenklasse nehmen, werden Sie wahrscheinlich Dinge in einem x tun, also in diesem Fall 375 Breite. Aber Framer benötigt eigentlich, dass Sie die genaue Auflösung dessen verwenden , was Sie in Ihrem Prototyp hinzufügen. Also, Sie möchten alles verdoppeln, wenn Sie diese Klasse verwenden, aber für diesen Fall sollte das Beispiel, das ich bereitgestellt habe, ausreichen und Sie können sogar den Stil selbst anpassen und voran gehen und alle Änderungen hochladen, die Sie können Denken Sie daran, vielleicht können Sie den Hintergrund der ändern , wenn ich das über Sie haben diese grüne Farbe hier, können Sie gehen und vielleicht ändern, dass ein bisschen, wenn Sie etwas anderes tun wollen. Werde kreativ und ich würde gerne sehen, was du hast. Fühlen Sie sich frei, Fragen entweder an die Diskussionsgruppe zu posten oder wenn Sie nach einer schnelleren Antwortzeit suchen, würde ich facebook.com/groups/FramerJS, die eine wirklich aktive Community hat , in der Leute Fragen beantworten die ganze Zeit sehr schnell statt nur ich zu sein. 6. Deine fertigen Prototypen: Also, an diesem Punkt, hoffentlich, haben Sie diese drei Übungen erstellt, die wirklich die Grundlagen für die Erstellung eines High-Fidelity-mobilen Prototypen direkt auf Ihrem Handy gelehrt . Damit haben Sie gelernt, Dinge zu animieren und ein wenig mehr über Frühlingsphysik nachzudenken, Sie haben gelernt, wie Sie eine Reihe von Bildschirmen mit Skizze zusammenbinden und sie direkt in Ihren Prototyp importieren können, und Sie haben lernte, wie man alle Arten von Benutzereingaben vom Ziehen über Wischen bis hin zum Paging übernimmt und diese wirklich integriert, um diese komplexen Prototypen zu erstellen, wann immer Sie brauchen. Also, wieder, gehen Sie und laden die Projekte, die Sie getan haben, hoch, damit wir mehr über sie reden können, und ich hoffe, Sie haben die Klasse genossen. 7. Entdecke Design auf Skillshare: Art und Weise.