Verwenden von Framer X, um interaktive Prototypen zu erstellen

Als Designer gibt es immer die Frage, welche Prototyping-Tools Sie für Ihr Projekt verwenden sollten. Es gibt viel Software für Aufgaben wie Wireframing (siehe unsere Spitze) Wireframing-Tools. und ausgezeichnet Website-Builders. ), Prototyping und Gebäudekomplexinteraktionen; Sehr wenige Werkzeuge sind jedoch in der Lage, all diese zu handhaben. Framer ist ein Werkzeug, das all diese Funktionen hat und den Prozess der Erstellung winziger Animationen und Interaktionen erheblich beschleunigt.

Die neueste Iteration, Framer X. , nutzt nun Reaging und Javascript, anstatt Kaffeespiegel für die Entwicklung von Mikrointeraktionen und Animationen zu verwenden. Dies hilft, schnellere Ladezeiten und eine bessere Leistung zu liefern. Außerdem bedeutet die Verwendung von Reaktionskomponenten, dass Benutzer mehr Geltungsbereich haben, um hinzuzufügen und zu verlängern, einschließlich der Einbettung von Media-Playern, Echtzeitdaten und -diagrammen in Prototypen.

Die Prüfung ist ein Kernteil des Prototyps-Bauprozesses, und während Framer X großartig ist, um interaktive Prototypen zu erstellen, benötigen sie Hilfe, um zu sehen, wie gut seine Kreationen sind. Schauen Sie sich unsere an Benutzertest Post für einige der besten Tools zum Ergänzen von Framer und helfen, reale Prototypen aufzubauen, und stellen Sie sicher, dass Sie das Beste verwenden Web-Hosting Service für Sie.

So erstellen Sie eine App mit Framer X

Um die Macht des Framer X vollständig zu schätzen, erstellen wir ein Real-Life-Projekt: Eine einfache Kochrezept-Anwendung mit einigen Inhalten und Medien (Vermögenswerte, die in zuverlässig unterstützt werden Cloud-Speicherung. ). Das erste, was man baut, ist die Homepage. Wir werden die Dinge mit den folgenden Elementen einfach halten:

• Standard-Suchleiste, um Rezepte zu finden
• Aktuelle Aktivitäten, um die neuesten Rezepte anzuzeigen
• Rezeptkarten, die Dinge wie die beliebtesten Rezepte zeigen
• Erstellen einer detaillierten Ansicht des Rezepts mit Video- und Freigabeoptionen

Um mit dem Start zu beginnen, müssen Sie einen neuen Frame (eine Artboard) erstellen, indem Sie auf das + Symbol auf der linken Navy klicken. Wählen Sie einen beliebigen Art Board-Stil aus einer Liste von Standard-iPhone / Android-Vorlagen auf der rechtens Bar. Jetzt bist du bereit zu gehen.

01. Erstellen Sie eine Suchleiste

Beginnen wir mit dem Bau der Suchleiste. Anstatt ein Rechteck zu erstellen und ein Suchsymbol hinzuzufügen, könnten wir normalerweise schnell wiederverwendbare Komponenten in Framer X verwenden, diese werden Pakete bezeichnet. Es gibt Tausende von Paketen, die in der linken Navigationsleiste untergebracht sind. Klicken Sie auf Aufbewahren, suchen Sie nach Android Kit und Beispielkit und installieren Sie sie anschließend.

Diese Pakete enthalten Elemente wie Karten, Schaltflächen, Keyboards, Slider, Ein- und Navigationsmenüelemente. Sobald Sie diese Pakete installiert haben, können Sie die Elemente aus dem Menü Komponenten auf der linken Seite verwenden.

Finden Sie die gewünschten Elemente, indem Sie im Filter suchen - in diesem Fall eine Suchleiste, die unter Beispiel Kit gefunden wird. Ziehen Sie einfach auf den Rahmen. Jetzt können Sie Eigenschaften wie Platzhaltertext, Schriftgröße und Farbe mit der rechten Leiste ändern.

02. Erstellen Sie einen Inhaltsstapel

Fügen Sie für diesen letzten Aktivitätsblock zuerst den Text "Neue Aktivität" hinzu, der ziemlich unkompliziert ist. Jetzt können wir ein neues Merkmal von Framer X namens Stacks verwenden. Dies kann erfolgen, indem Sie auf das Symbol + klicken und Stapel S aus dem Menü auswählen. Ziehen Sie nach der Auswahl des Stapels einen Bereich von 600 x 300 auf den Arbeitsrahmen, um einen Stapel zu erstellen. Dieser Stapel wird als blau angezeigt.

Nun gehen wir wieder in den Abschnitt Komponenten und unter Android Kit, suchen Sie nach dem Element Card-5 und ziehen Sie ihn in den gerade erstellten Stapel. Duplizieren Sie diese Karten zweimal und stellen Sie sicher, dass sich alle drei Karten im Stapel befinden.

Solange sie im Stapel sind, können diese drei Karten leicht neu angeordnet werden, ohne dass Sie sich um den Abstand machen müssen. Wenn Sie den Abstand zwischen den Karten erhöhen möchten, können Sie die Breite des gesamten Stapels erhöhen. So einfach ist das. Sie können diese Karten auch anpassen, indem Sie den Namen des Titels und den Hintergrund entsprechend Ihrem Geschmack ändern.

Nun, da wir einen Stapel erstellt haben, lassen Sie es scrollbar machen. Bewegen Sie es aus dem Rahmen / Artboard. Klicken Sie im linken NAV auf das Symbol +, und klicken Sie auf die Scroll-Option. So wie wir einen Bereich mit dem Stapel erstellt haben, erstellen Sie einen scrollbaren Bereich auf dem Rahmen / Artboard, der die gleiche Größe wie der Stapel ist.

Ändern Sie nun die Eigenschaft der Schriftrolle in der rechten Balken, indem Sie die Richtungspfeile ändern, um eine horizontale Schriftrolle zu erstellen. Nachdem unser Rollcontainer erstellt wurde, benötigen wir Inhalte dafür, wodurch der von uns erstellte Stapel serviert wird. Schließen Sie den Scroll-Container einfach mit der Pfeilaufforderung auf dem Bildlaufbehälter an den Stapel an. Es funktioniert, indem Sie den Mauszeiger auf den Stapel ziehen.

03. Erstellen Sie einen vertikalen Stapel

Für die Rezeptkarten müssen Sie einer ähnlichen Methode wie Schritt 2 verfolgen Für diese Übung hat jede Karte für ein Rezept vier Elemente - ein Bild-Miniaturansicht, Rating, Name des Rezepts und der Zeit, um es vorzubereiten.

Machen Sie sich keine Sorgen über die Details jeder Karte. Sie können basierend auf Ihrem Design-Geschmack personalisiert werden. Folgen Sie der gleichen Methode, um eine Karte von den Komponenten zu verwenden, um sie zu doppelt, und sie alle mit vertikaler Schriftrolle zu einem Stapel hinzufügen.

04. Erstellen Sie eine neue Seite

Lassen Sie uns nun eine neue Seite erstellen, um in die Details eines bestimmten Rezepts zu gelangen. Nehmen wir zum Beispiel den Fall der zweiten Karte hier: französische Pasta. Um diese neue Seite zu erstellen, erstellen Sie ein neues Frame / Artboard und stellen Sie die Elemente ein, die wir benötigen, um weitere Informationen zum französischen Teigwarenrezept zu zeigen. Diese neue Seite kann in ein Video, einen Titel, das Rating, die Zeit, die erforderlich ist, um ihn und ein paar Aktionsschaltflächen zu trennen, z. B. aufzulisten, z. B. in der Liste und Freigabe an Social Media.

Gehen Sie zum Hinzufügen von Video zum Speichern und installieren Sie das YouTube-Paket, mit dem Sie Ihren Prototyp mühelos Videos hinzufügen können. Gehen Sie nun zu Ihrer Komponenten-Panel und ziehen Sie das YouTube-Element von unter der YouTube-Komponente in den Rahmen.

Stellen Sie die Breite der Miniaturansicht so ein, dass sie die Breite des Rahmens passt. Im Bereich der richtigen Eigenschaften können Sie die URL des Videos einfügen, das Sie im Prototyp abspielen möchten. Wenn Sie möchten, gibt es auch einen Weg, um Videos über das Kontrollkästchen in der Eigenschaften-Panel zu autoPlay zu bringen.

Unter diesem Video können Sie den Titel, die Bewertung und verschiedene Symbole hinzufügen. Um Symbole für unser Beispiel hinzuzufügen, habe ich die Komponente aus dem Symbolgeneratorspeicher benutzt. Es ist ein einfacher Prozess: Ziehen Sie einfach das Basissymbol in den Rahmen und ändern Sie dann die Eigenschaft namens Symbol auf der rechten Seite des rechten Seites in 'Heart' und 'Share'. Dadurch werden die Basis-Symbole in den Save and Share-Symbolen geändert. Ihre Farben können auch mit dem rechten Bereich leicht geändert werden.

Um den Besuchern die Dinge einfach zu machen, könnten Sie einen Abschnitt mit dem Namen Zutaten hinzufügen, der alle für unser Rezept benötigten Zutaten auflisten - in diesem Fall, französische Pasta.

05. Interaktionen einführen

Nun machen wir unser Design, indem wir mit Interaktionen für eine Schaltfläche interessuierender machen. Im Idealfall, wenn Sie auf das Share-Symbol klicken, sollten Sie mit einem Bildschirm dazu aufgefordert werden, das Rezept über verschiedene Social-Media-Kanäle zu teilen. Lassen Sie uns das mit einem neuen Rahmen bauen.

Stellen Sie sicher, dass die Breite und Höhe dieses Rahmens die gleiche Breite und Höhe ist wie die anderen beiden Bildern, die wir erstellt haben. Die Idee ist für diesen neuen Freigabebildschirm, um den aktuellen Bildschirm zu rutschen, und ersetzen Sie den aktuellen Bildschirm, wenn das Share-Symbol geklickt wird.

Um den Bildschirm zu erleichtern, fügen wir ihm etwas Farbe hinzu und füllen Sie es mit Social-Media-Symbolen wie Facebook, Instagram, WhatsApp und E-Mail. Dieser Anteilsbildschirm sollte auch ein X-Symbol haben, das dazu hinzugefügt wird, was, wenn Sie auf klicken, wieder in den ursprünglichen Zustand bringen würde.

Stellen Sie sicher, dass alle Symbole in einem Stapel angeordnet sind. Sobald das X-Symbol enthalten ist, ist der nächste Schritt, diesen Frame zu verknüpfen, sodass er auftaucht, wenn Sie auf das Share-Symbol klicken.

Um dies zu tun, wählen Sie den Rahmen aus, der das Share-Symbol enthält. Im rechten Panel befindet sich eine Eigenschaft, die als Link bezeichnet wird. Sobald Sie darauf klicken, bietet Ihnen die Anwendungsschnittstelle einen Pfeil, den Sie in den neuen Aktienrahmen ziehen können. Dies erstellt einen Link im Hintergrund.

Wenn Sie jetzt das Share-Symbol auswählen, beobachten Sie neue Eigenschaften in der rechten Seite unter Link, die Ziel, Übergang und Richtung sind. Mit jedem dieser Eigenschaften können Sie die Elemente ändern, z. B. Art der Übergänge und die Richtung, in der der Bildschirm angezeigt wird, usw.

Sie können testen, wenn der Prototyp arbeitet oder nicht, indem Sie auf das auf dem obere rechte Ecke der Benutzeroberfläche gefundene Play-Symbol klicken. In ähnlicher Weise müssen Sie den Anteilsbildschirm auf den Videobildschirm verknüpfen, sodass er, wenn der Benutzer auf das X-Symbol klickt, zum vorherigen Bildschirm zurückkehrt.

Dies kann mit einer ähnlichen Link-Eigenschaft erreicht werden und das Ziel als Videobildschirm hinzufügen. Wenn Sie beim Hinzufügen von ein bisschen Variation hinzufügen möchten, können Sie die Richtung anstelle von oben links abgeben und dann den Wiedergabebefehl verwenden, um zu testen, ob die Interaktion funktioniert oder nicht.

06. Fügen Sie eine Speichern-Taste hinzu

Fügen Sie nun eine Overlay-Interaktion zum Speichern-Symbol hinzu. Hier ist unser Ziel, dass ein Besucher, wenn ein Besucher auf das herzförmige Symbol klickt, ein Popup-Fenster erscheint, das aufgefordert wird, ob Sie das Rezept in einer benutzerdefinierten Liste speichern möchten.

Beginnen wir mit dem Erstellen eines neuen Rahmens namens gespeicherte Listen. So wie Sie mit dem vorherigen getan haben, stellen Sie sicher, dass dieser Frame die gleiche Breite hat, aber diesmal müssen Sie seine Höhe reduzieren, da er als Überlagerung erscheint, wenn Sie auf klicken. Fügen Sie für das Styling des gespeicherten Listens Frame einen Header hinzu, einen Texteingang, um den Namen der Liste einzugeben, und einen Button, der ein CTA zum Speichern ist.

Um zum Verknüpfen, wählen Sie das herzförmige Symbol auf dem Video-Frame aus und fügen Sie einen Link zum gespeicherten Listen-Rahmen hinzu. Nun, anstelle der Übergangseigenschaft, die ein Push ist, macht es eine Überlagerung. Stellen Sie es auf 80% ein und testen Sie ihn dann mit der Wiedergabetaste. Ändern Sie, bis Sie mit der Überlagerung zufrieden sind. Verknüpfen Sie das X-Symbol auf dem Symbol gespeicherter Listen auf die Videoseite zurück.

So verwenden Sie ein Framer X, um aktualisierbare interaktive Prototypen einfach zu erstellen. Es gibt auch fortgeschrittene Werkzeuge, die Sie verwenden können, sowie das Hinzufügen von Reaktierungscodiers-Snippets an den Elementen der Frames. Auch der beste Teil des Framer X ist, dass jeder, der ihn beherrschen kann, indem Sie es auf ein paar Prototypen ausprobieren können.

Dieser Artikel wurde ursprünglich in Ausgabe 325 von Net, dem weltweit besten Verkaufsmagazin für Webdesigner und Entwickler, veröffentlicht. Ausgabe 325 kaufen oder abonnieren sich vernetzten.

Begleiten Sie uns im April 2020 mit unserer Aufstellung von JavaScript-Superstars bei GenerateJs - der Konferenz, die Ihnen dabei hilft, besser JavaScript zu bauen. Jetzt buchen generateconf.com

Weiterlesen:

• Wie hervorsteht und sich als UX-Designer angeheuert?
• Die 20 UX-Tipps, die Sie kennen müssen
• 22 beste UI-Design-Tools