Verwenden Sie Framer X, um interaktive Prototypen zu erstellen

Framer X - Prototypen schnell entwerfen
(Bildnachweis: Framer)

Als Designer stellt sich immer die Frage, welche Prototyping-Tools Sie für Ihr Projekt verwenden sollten. Es gibt eine Menge Software für Aufgaben wie Wireframing (siehe oben) Wireframing-Tools und ausgezeichnet Website-Ersteller ), Prototyping und Aufbau komplexer Interaktionen; Nur sehr wenige Werkzeuge sind jedoch in der Lage, all dies zu handhaben. Framer ist ein Tool, das all diese Funktionen bietet und das Erstellen winziger Animationen und Interaktionen erheblich beschleunigt.

Die neueste Iteration, Framer X. , verwendet jetzt React und JavaScript anstelle von CoffeeScript für die Entwicklung von Mikrointeraktionen und Animationen. Dies sorgt für schnellere Ladezeiten und eine bessere Leistung. Durch die Verwendung von React-Komponenten haben Benutzer mehr Möglichkeiten zum Hinzufügen und Erweitern, einschließlich der Einbettung von Mediaplayern, Echtzeitdaten und Grafiken in Prototypen.

Das Testen ist ein zentraler Bestandteil des Prototypenerstellungsprozesses. Framer X eignet sich zwar hervorragend zum Erstellen interaktiver Prototypen, benötigt jedoch Hilfe, um festzustellen, wie gut seine Kreationen sind. Schauen Sie sich unsere Benutzertests Veröffentlichen Sie einige der besten Tools, um Framer zu ergänzen, reale Prototypen zu erstellen und sicherzustellen, dass Sie die besten verwenden Web-Hosting Service für Sie.

So erstellen Sie eine App mit Framer X.

Um die Leistungsfähigkeit von Framer X voll zu nutzen, erstellen wir ein reales Projekt: eine einfache Kochrezeptanwendung mit einigen Inhalten und Medien (Assets, die zuverlässig gesichert sind Cloud-Speicher ). Das erste, was zu erstellen ist, ist die Homepage. Wir werden die Dinge mit den folgenden Elementen einfach halten:



am besten 2 in 1 zum Zeichnen
  • Standardsuchleiste zum Finden von Rezepten
  • Letzte Aktivität, um die neuesten Rezepte anzuzeigen
  • Rezeptkarten mit Dingen wie den beliebtesten Rezepten
  • Erstellen einer detaillierten Ansicht des Rezepts mit Video- und Freigabeoptionen

Um zu beginnen, müssen Sie einen neuen Rahmen (eine Zeichenfläche) erstellen, indem Sie auf das Symbol + in der linken Navigationsleiste klicken. Wählen Sie einen Zeichenflächenstil aus einer Liste von Standard-iPhone / Android-Vorlagen in der rechten Leiste aus. Jetzt können Sie loslegen.

Beginnen wir mit dem Erstellen der Suchleiste. Anstatt wie gewohnt ein Rechteck zu erstellen und ein Suchsymbol hinzuzufügen, können wir in Framer X schnell wiederverwendbare Komponenten verwenden, die als Pakete bezeichnet werden. Es gibt Tausende von Paketen, die in der linken Navigationsleiste unter Store zu finden sind. Klicken Sie auf Store, suchen Sie nach Android Kit und Example Kit und installieren Sie sie.

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

Suchen Sie die gewünschten Elemente, indem Sie im Filter suchen - in diesem Fall in einer Suchleiste, die Sie unter Example Kit finden. Ziehen Sie es einfach per Drag & Drop auf den Rahmen. Jetzt können Sie Eigenschaften wie Platzhaltertext, Schriftgröße und Farbe mithilfe der rechten Leiste ändern.

02. Erstellen Sie einen Inhaltsstapel

Fügen Sie für diesen letzten Aktivitätsblock zuerst den Text 'Letzte Aktivität' hinzu, der ziemlich einfach ist. Jetzt können wir eine neue Funktion von Framer X namens Stacks verwenden. Klicken Sie dazu auf das Symbol + und wählen Sie im Menü Stapel S aus. Ziehen Sie nach Auswahl des Stapels einen Bereich von 600 x 300 per Drag & Drop auf den Arbeitsrahmen, um einen Stapel zu erstellen. Dieser Stapel wird blau angezeigt.

Kehren wir nun zum Abschnitt 'Komponenten' zurück und suchen Sie unter 'Android-Kit' nach dem Card-5-Element und ziehen Sie es in den soeben erstellten Stapel. Dupliziere diese Karten zweimal und stelle sicher, dass alle drei Karten im Stapel sind.

Solange sie sich im Stapel befinden, können diese drei Karten leicht neu angeordnet werden, ohne dass Sie sich um den Abstand kümmern müssen. Wenn Sie den Abstand zwischen den Karten vergrößern möchten, können Sie die Breite des gesamten Stapels erhöhen. So einfach ist das. Sie können diese Karten auch personalisieren, indem Sie den Namen des Titels und den Hintergrund nach Ihren Wünschen ändern.

Nachdem wir einen Stapel erstellt haben, können Sie ihn scrollbar machen. Bewegen Sie es aus dem Rahmen / der Zeichenfläche. Klicken Sie auf das + -Symbol in der linken Navigation und dann auf die Option Scrollen. So wie wir mit dem Stapel einen Bereich erstellt haben, erstellen Sie auf dem Rahmen / der Zeichenfläche einen scrollbaren Bereich, der dieselbe Größe wie der Stapel hat.

Ändern Sie nun die Eigenschaft des Bildlaufs in der rechten Leiste, indem Sie die Richtungspfeile ändern, um einen horizontalen Bildlauf zu erstellen. Nachdem unser Bildlaufcontainer erstellt wurde, benötigen wir Inhalte dafür, die von dem zuvor erstellten Stapel bereitgestellt werden. Verbinden Sie also einfach den Bildlaufcontainer mit der Stapelaufforderung auf dem Bildlaufcontainer mit dem Stapel. Es funktioniert durch Ziehen des Mauszeigers auf den Stapel.

03. Erstellen Sie einen vertikalen Stapel

Interaktiver Framer X - 01

Mit Framer X können Sie horizontale und vertikale scrollbare Stapel einführen(Bildnachweis: Vamsi Batchu)

Für die Rezeptkarten müssen Sie eine ähnliche Methode wie in Schritt 2 anwenden. Anstatt jedoch eine horizontale Kartenrolle zu erstellen, erstellen Sie eine ähnliche vertikale Karte, die im Wesentlichen eine Liste der beliebtesten Rezepte mit Miniaturansichten enthält. Für diese Übung enthält jede Karte für ein Rezept vier Elemente - eine Miniaturansicht des Bildes, eine Bewertung, den Namen des Rezepts und die für die Vorbereitung erforderliche Zeit.

Sorgen Sie sich nicht um die Details jeder Karte. Sie können basierend auf Ihrem Designgeschmack personalisiert werden. Gehen Sie genauso vor, indem Sie eine Karte aus den Komponenten verwenden, sie duplizieren und alle mit vertikalem Bildlauf zu einem Stapel hinzufügen.

04. Erstellen Sie eine neue Seite

Erstellen wir nun eine neue Seite, um auf die Details eines bestimmten Rezepts einzugehen. Nehmen wir zum Beispiel die zweite Karte hier: Französische Pasta. Um diese neue Seite zu erstellen, erstellen Sie einen neuen Rahmen / eine neue Zeichenfläche und führen Sie die Elemente ein, die wir benötigen, um weitere Details zum französischen Pastarezept anzuzeigen. Diese neue Seite kann in ein Video, einen Titel, die Bewertung, die dafür erforderliche Zeit und einige Aktionsschaltflächen unterteilt werden, z. B. Speichern zum Auflisten und Freigeben für soziale Medien.

wie man die Unterseite eines Fußes zeichnet

Gehen Sie zum Hinzufügen von Videos in den Store und installieren Sie das YouTube-Paket, mit dem Sie Ihrem Prototyp mühelos Videos hinzufügen können. Gehen Sie nun zu Ihrem Komponentenbedienfeld und ziehen Sie das YouTube-Element unter der YouTube-Komponente in den Rahmen.

Passen Sie die Breite des Miniaturbilds so an, dass es der Breite des Rahmens entspricht. Im rechten Eigenschaftenbereich können Sie die URL des Videos, das Sie abspielen möchten, in den Prototyp einfügen. Wenn Sie möchten, können Sie Videos auch über das Kontrollkästchen im Eigenschaftenfenster automatisch wiedergeben.

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 Icon Generator Store verwendet. Es ist ein einfacher Vorgang: Ziehen Sie einfach das Basissymbol per Drag & Drop auf den Rahmen und ändern Sie die Eigenschaft 'Symbol' auf der rechten Seite in 'Herz' und 'Teilen'. Dadurch werden die Basissymbole in die Symbole zum Speichern bzw. Freigeben geändert. Ihre Farben können auch einfach über das rechte Bedienfeld geändert werden.

Um den Besuchern die Arbeit zu erleichtern, können Sie einen Abschnitt namens Zutaten hinzufügen, in dem alle für unser Rezept benötigten Zutaten aufgeführt sind - in diesem Fall französische Pasta.

05. Interaktionen einführen

Interaktiver Framer X - 02

Fügen Sie Schaltflächen und Elementen Interaktionen hinzu, um sie ansprechender zu gestalten(Bildnachweis: Vamsi Batchu)

Lassen Sie uns nun unser Design ansprechender gestalten, indem wir Interaktionen für eine Schaltfläche hinzufügen. Wenn Sie auf das Freigabesymbol klicken, sollten Sie im Idealfall mit einem Bildschirm aufgefordert werden, das Rezept für verschiedene Social-Media-Kanäle freizugeben. Erstellen wir das mit einem neuen Rahmen.

Stellen Sie sicher, dass die Breite und Höhe dieses Rahmens der Breite und Höhe der beiden anderen von uns erstellten Rahmen entspricht. Die Idee ist, dass dieser neue Freigabebildschirm nach oben verschoben wird und den aktuellen Bildschirm ersetzt, wenn auf das Freigabesymbol geklickt wird.

Fügen Sie dem Bildschirm eine Farbe hinzu und füllen Sie ihn mit Social-Media-Symbolen wie Facebook, Instagram, WhatsApp und E-Mail. Diesem Freigabebildschirm sollte auch ein X-Symbol hinzugefügt werden, das beim Klicken den ursprünglichen Zustand wiederherstellt.

Stellen Sie sicher, dass alle Symbole in einem Stapel angeordnet sind. Sobald das X-Symbol enthalten ist, besteht der nächste Schritt darin, diesen Rahmen so zu verknüpfen, dass er beim Klicken auf das Freigabesymbol angezeigt wird.

Wählen Sie dazu den Rahmen aus, der das Freigabesymbol enthält. Im rechten Bereich befindet sich eine Eigenschaft namens Link. Sobald Sie darauf klicken, erhalten Sie über die Anwendungsoberfläche einen Pfeil, den Sie auf den neuen von uns erstellten Freigaberahmen ziehen können. Dadurch wird im Hintergrund ein Link erstellt.

wie man eine benutzerdefinierte Textur in Illustrator hinzufügt

Wenn Sie nun das Freigabesymbol auswählen, werden im rechten Bereich unter Link neue Eigenschaften angezeigt, nämlich Ziel, Übergang und Richtung. Mit jeder dieser Eigenschaften können Sie die Elemente ändern, z. B. die Art der Übergänge und die Richtung, in die der Bildschirm eingeblendet werden soll.

Sie können testen, ob der Prototyp funktioniert oder nicht, indem Sie auf das Wiedergabesymbol in der oberen rechten Ecke der Benutzeroberfläche klicken. Ebenso müssen Sie den Freigabebildschirm mit dem Videobildschirm verknüpfen, damit der Benutzer beim Klicken auf das X-Symbol zum vorherigen Bildschirm zurückkehrt.

Dies kann erreicht werden, indem eine ähnliche Verknüpfungseigenschaft verwendet und das Ziel als Videobildschirm hinzugefügt wird. Wenn Sie versuchen möchten, ein wenig Variation hinzuzufügen, können Sie die Richtung links statt oben festlegen und dann mit dem Befehl play testen, ob die Interaktion funktioniert oder nicht.

wie man wie die Meister malt

06. Fügen Sie eine Schaltfläche zum Speichern hinzu

Fügen wir nun dem Speichersymbol eine Overlay-Interaktion hinzu. Unser Ziel ist es, dass jedes Mal, wenn ein Besucher auf das herzförmige Symbol klickt, ein Popup-Fenster angezeigt wird, in dem Sie gefragt werden, ob Sie das Rezept in einer benutzerdefinierten Liste speichern möchten.

Beginnen wir mit der Erstellung eines neuen Frames mit dem Namen 'Gespeicherte Listen'. Stellen Sie wie beim vorherigen Bild sicher, dass dieser Rahmen dieselbe Breite hat. Diesmal müssen Sie jedoch seine Höhe verringern, da er beim Klicken als Überlagerung angezeigt wird. Fügen Sie für die Gestaltung des gespeicherten Listenrahmens eine Kopfzeile, eine Texteingabe zur Eingabe des Namens der Liste und eine Schaltfläche als CTA zum Speichern hinzu.

Wählen Sie zum Verknüpfen das herzförmige Symbol im Videorahmen aus und fügen Sie dem gespeicherten Listenrahmen einen Link hinzu. Anstatt die Übergangseigenschaft als Push zu verwenden, sollten Sie sie jetzt als Overlay festlegen. Stellen Sie es auf 80% ein und testen Sie es dann mit der Wiedergabetaste. Ändern Sie, bis Sie mit dem Overlay zufrieden sind. Verknüpfen Sie das X-Symbol auf dem Symbol für gespeicherte Listen wieder mit der Videoseite.

So können Sie mit Framer X auf einfache Weise umsetzbare interaktive Prototypen erstellen. Es gibt auch erweiterte Tools, die Sie verwenden können, sowie das Hinzufügen von React-Codierungsschnipsel zu den Elementen der Frames. Das Beste an Framer X ist auch, dass jeder es beherrschen kann, indem er es an einigen Prototypen ausprobiert.

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

Ein Image für GenerateJS am Donnerstag, den 2. April 2020 in Rich Mix, Shoreditch, London, mit Remy Sharp, Phil Hawksworth, Jeremy Keith und Nadieh Bremer.

Erfahren Sie, wie Sie bei GenerateJS besseres JavaScript erstellen(Bildnachweis: Future / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Besuchen Sie uns im April 2020 mit unserer Reihe von JavaScript-Superstars bei GenerateJS - der Konferenz, die Ihnen hilft, besseres JavaScript zu erstellen. Buchen Sie jetzt bei generateconf.com

Weiterlesen: