Prototyping mit echten Daten – Ein Framer-Tutorial

Framer ist eines der leistungsfähigsten App-Prototyping-Tools auf dem Markt. Es kann verwendet werden, um für jedes mobile Gerät zu entwerfen, von iOS bis Android. Wenn Sie sich ein wenig mit Programmierung auskennen, sind seine Möglichkeiten praktisch unbegrenzt, da es auf CoffeeScript basiert – einer relativ einfachen Programmiersprache. Ein Designer wäre nur durch seine Vorstellungskraft und Programmierfähigkeiten begrenzt.

Um diesem Artikel folgen zu können, sollten Sie zumindest über Grundkenntnisse von Framer verfügen. Wir werden den Designmodus und den Code-Editor verwenden. Wenn Sie Ihr Wissen ergänzen möchten, können Sie unsere vorherigen Framer-Artikel lesen: So erstellen Sie atemberaubende interaktive Prototypen, 7 einfache Mikrointeraktionen zur Verbesserung Ihrer Prototypen

Warum Sie Framer mit echten Daten verwenden sollten

Ein häufiges Problem beim Design oder Prototyping ist das Fehlen realer Daten. Wenn eine neue Funktion für ein bestehendes Produkt entwickelt wird, können anstelle von fiktiven Inhalten logische, relevante und real aussehende Inhalte angezeigt werden. Das können beliebige Daten sein – zum Beispiel Benutzerfotos. Auf diese Weise wird keine Zeit damit verschwendet, gefälschte Inhalte zu finden, und Fehler, die durch die Verwendung ungültiger Daten entstehen, werden vermieden. Alle verfügbaren Daten sind sichtbar und es kann festgestellt werden, welche Inhalte möglicherweise noch benötigt werden – die Kommunikation mit Stakeholdern und dem Entwicklungsteam wird dadurch effektiver. Es ist auch möglich, verschiedene Anwendungsszenarien zu entwerfen.

Wenn wir eine neue Funktion entwerfen, vergessen wir manchmal, dass nicht jedes Benutzerprofil vollständig ist, nicht alle Kategorien im Shop die gleiche Menge an Produkten haben und nicht jedes Produkt die gleichen Daten anzeigt. Das Prototyping mit realen Daten ist vergleichbar mit dem Bauen aus LEGO-Steinen: Anstatt mit imaginären, losen Formen zu arbeiten, können wir vorhandene Komponenten aus der Kiste verwenden und etwas Reales bauen.

Lassen Sie uns Prototypen mit echten Daten erstellen!

Der wahre Spaß in Framer beginnt, wenn echte Daten verwendet werden, die in Echtzeit aus einer Datenbank aktualisiert werden. Jede Art von Daten kann angewendet werden, zum Beispiel: Benutzerprofile mit Fotos, Straßenadressen, Aktienkurse, Wechselkurse, Wettervorhersagen, Transaktionsinformationen – alle Daten, die Apps normalerweise verwenden. Wirklich leistungsstarkes Produktdesign entsteht, wenn Sie Echtzeit-Prototyping mit echten Daten kombinieren. Und es wird nicht länger notwendig sein, die berüchtigten lateinischen „lorem ipsum“-Platzhaltertextstücke zu verwenden.

Die API mit echten Daten: Was ist das? Wie verwenden wir es?

Eine Anwendungsprogrammierschnittstelle (API) ist die Schnittstelle, über die wir mit Anwendungen kommunizieren. Stellen Sie sich eine App als Restaurant vor. Das Essen sind die Daten und das Personal die API. Sie fragen den Kellner nach dem Essen – das ist alles, was Sie tun müssen. Den Rest erledigen die Kellner (API) und die Küche (Datenbank).

Es dreht sich alles um den Zugriff auf echte Daten, die in einer bestimmten Datenbank gespeichert sind.

Jede App verfügt über eine API, mit der Daten erfasst und angezeigt werden können. Einige APIs sind öffentlich verfügbar, andere werden nur in internen Produkten verwendet.

Öffentlich verfügbare APIs werden häufig zum Erstellen neuer Anwendungen verwendet. Um beispielsweise eine Wetteranwendung zu erstellen, sind einige Wetterdaten erforderlich. Mit Hilfe zahlreicher Wettervorhersage-Websites, die ihre öffentlichen APIs teilen, ist es super einfach. Darüber hinaus können viele verschiedene APIs kombiniert werden, um ein völlig neues Produkt zu erstellen.

Woher bekommen wir echte Daten? Die Open-API-Listen

Es gibt viele öffentlich verfügbare APIs, die verschiedene Daten bereitstellen. Hier ist eine Auswahlliste von fünf, die sich hervorragend für das Prototyping mit echten Daten in Framer eignen. Jede dieser APIs gibt auch Daten im JSON-Format zurück, die im Framework einfach gehandhabt werden können.

Random User – Definitiv die beste API für Anfänger. Es generiert vollständige, zufällige Benutzerprofile, von einem Avatar bis zu einer E-Mail-Adresse.

OpenWeatherMap – dies ist eine sehr einfach zu verwendende API. Es ermöglicht Ihnen, das aktuelle Wetter und die Vorhersagen an jedem Ort zu überprüfen. Mit dieser API können wir Daten wie Temperatur, Luftfeuchtigkeit oder Windgeschwindigkeit anzeigen.

Pokeapi – eine der besten APIs, die für Bildungszwecke entwickelt wurden. Suchen Sie etwas über Pokemon? Es kann hier gefunden werden. Dies ist eine vollständige RESTful-API, die mit einer umfangreichen Datenbank verknüpft ist, die alles über die Pokemon-Hauptspielserie enthält.

Instagram – die erste API in der Liste, für deren Verwendung eine Autorisierung erforderlich ist. Sein Service ist jedoch sehr einfach. Sie können auf alle Instagram-Fotos und -Benutzer zugreifen und diese in Ihrer neuen App anzeigen.

Mapbox – bietet eine Reihe unglaublicher Dienste, die einfach in eine Anwendung integriert werden können, von Karten und Wegbeschreibungen bis hin zu Geokodierung und sogar Satellitenbildern. Foursquare, Evernote, Instacart, Pinterest, GitHub und Etsy haben alle etwas gemeinsam – ihre Karten werden von Mapbox unterstützt.

Diese API unterscheidet sich von früheren, da sie keine JSON-Dateien zurückgibt, aber Zugriff auf alle Mapbox-Funktionen gewährt. Mapbox hat auch ein großartiges Tutorial zur Verwendung ihrer API in Framer erstellt.

API-Tutorial für zufällige Benutzer in Framer unter Verwendung echter Daten

Um zu verstehen, wie man mit APIs in Framer arbeitet, beginnen wir mit der Random User API. Wir benötigen einen einzigen App-Bildschirm – eine Benutzerliste.

Schritt 1: Designmodus

Hier ist eine Liste von Benutzern mit Namen, Nachnamen und Avataren. Das ist alles, was erforderlich ist. Der wichtigste Teil dieses Prozesses besteht darin, alle Elemente richtig zu benennen und zu gruppieren. Avatare und Namen sind in der Box-Ebene gruppiert, und alle Boxen sind in der Liste gruppiert:

Das letzte, was im Designmodus getan werden muss, ist, die Listenebene als interaktive Ebene zu markieren. Klicken Sie dazu einfach auf das Zielsymbol.

Schritt 2: JSON verstehen

Zunächst einmal ist es notwendig zu verstehen, was JSON ist und wie man es außerhalb von Framer erhält. Suchen Sie in den Random User API-Dokumenten nach einer Anfrage für Daten von der API. Es sieht so aus: https://randomuser.me/api/?results=20. Wie Sie sehen können, handelt es sich um einen normalen Link, der eine JSON-Datei in Ihrem Browser öffnet:

So wie es ist, sieht es überhaupt nicht klar aus. Um richtig formatierte JSON-Dateien anzuzeigen, verwenden Sie das Chrome-Plug-in namens JSONview. Mit dem Plugin sieht die Datei so aus:

Viel besser. Jetzt sollte es leicht zu lesen sein. Die Datei enthält das Array von Ergebnissen mit Benutzerdaten, die empfangen wurden, nachdem die API danach gefragt wurde. Was ist also die JSON-Datei? Ohne auf die technischen Details einzugehen, handelt es sich um eine auf JavaScript-Syntax basierende Textdatei, die bestimmte Daten aus einer Datenbank enthält. JSON kann in Framer verwendet werden, um Daten daraus anzuzeigen.

Schritt 3: Importieren Sie die JSON-Datei in Framer

Jetzt kann die JSON-Datei mit einer einzigen Codezeile in Framer importiert werden:

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

Erstellen Sie das Objekt namens data , das die JSON-Datei enthalten wird. Verwenden Sie die Druckfunktion , um zu sehen, ob die JSON-Datei korrekt importiert wurde:

 print data 

Schritt 4: Zugriff auf bestimmte Daten aus der JSON-Datei

Gehen Sie nun zurück zur JSON-Dateistruktur:

In dieser JSON-Datei ist results ein Array, das weitere Objekte enthält. Jedes Objekt ist ein anderer Benutzer. Zunächst muss eines dieser Objekte anvisiert werden. Verwenden Sie die Druckfunktion, um besser zu verstehen, was los ist:

 print data.results[1]

Framer-Konsole:

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

Die Zahl in Klammern repräsentiert eine Nummer des Objekts im Array. Mit data.results[1] wird der Zugriff auf alle Daten des ersten Benutzers in der JSON-Datei empfangen.

Dann können Elemente wie Name oder Nachname angezeigt werden:

 print data.results[1].name.first

Framer antwortet mit: "benjamin" . Et voila! Der Zugriff auf die Daten von der API wurde erreicht!

Schritt 5: Anzeigen der Daten aus JSON

Endlich! Das Einzige, was übrig bleibt, ist die Anzeige der Daten. Jetzt muss eine einfache Schleife erstellt werden, die alle Ebenen aus dem Designmodus anvisiert. Lesen Sie mehr über das Targeting von Layern mit einer Schleife in diesem vorherigen Artikel.

Wir verwenden x = 0 , um das erste Objekt im Array aus den JSON-Daten anzusprechen. Dann weisen wir jedem untergeordneten Element der Liste die Daten aus den JSON-Daten zu. Am Ende der Schleife fügen wir +1 hinzu, um Daten vom nächsten Objekt im Array zu verwenden:

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

Das ist es! Jetzt können Sie zum Designmodus zurückkehren und mit dem Design spielen, und die echten Daten werden in Ihrem Prototyp angezeigt!

Sie können die obige Framer-Datei hier herunterladen: https://framer.cloud/djmvG

Instagram API – Echtzeitdaten in Framer

Instagram ist ein interessanter Ausgangspunkt, um eine Reise mit Echtzeitdaten zu beginnen. Die Anleitung ist relativ einfach zu befolgen und die API liefert interessante Daten – Sie erhalten vollen Zugriff. In diesem Teil des Artikels wird die Instagram-API verwendet, um einen einfachen Prototyp zu erstellen, der meine Instagram-Profildaten anzeigt: Name, letztes Foto und Anzahl der Likes.

Schritt 1: Holen Sie sich ein Zugriffstoken

Um die Instagram-API zu verwenden, ist ein Zugriffstoken erforderlich. Es kann auf zwei verschiedene Arten erhalten werden:

1. Der gebräuchlichste Weg ist, auf die Instagram for Developers-Website zu gehen und den Anweisungen zu folgen. Dieser Prozess kann für nicht-technische Personen kompliziert sein.
2. Glücklicherweise gibt es einen einfachen und sicheren Weg, es zu bekommen. Pixel Union hat einen viel einfacheren One-Click-Prozess entwickelt: Gehen Sie zu ihrer Website und klicken Sie auf die Schaltfläche Get Access Token.

Schritt 2: Domänenübergreifende Anfragen aktivieren

Nach dem Erhalt eines Zugriffstokens ist ein kleiner Trick erforderlich. Instagram lässt keine API-Anfragen von Ihrem Localhost (Framer) zu, daher müssen serverseitige Abfragen verwendet werden. Einer davon ist JSONProxy. Gehen Sie zu ihrer Website, fügen Sie eine Anfrage von der Instagram-API ein und klicken Sie auf GO.

Sobald dies erledigt ist, kann anstelle des Instagram-API-Links der JSONProxy-Link verwendet werden.

Schritt 3: Entwerfen Sie eine einfache App in Framer

Es gibt nur drei entscheidende Elemente in diesem Design: den Namensplatzhalter, ein Rechteck, das das neueste Foto anzeigt, und die Anzahl der Likes unter dem Bild. Alle diese sind als interaktive Ebenen gekennzeichnet, die im Code-Editor wiederverwendet werden können.

Schritt 4: Schreiben Sie vier Codezeilen, um Daten von Instagram zu verwenden

Der Ablauf hier ist derselbe wie in der Random User API. Alle Benutzerdaten können von Instagram aus abgerufen werden:

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

Das ist es! Fünf Zeilen Code, und Sie können Prototypen mit Live- und echten Daten erstellen, die von Instagram bereitgestellt werden. Laden Sie hier einen funktionierenden Prototyp herunter: https://framer.cloud/iYAXl. (Bitte denken Sie daran, dass Sie Ihren eigenen ACCESS KEY hinzufügen müssen, um diesen Prototyp auszuführen.)

Zusammenfassung – Vor- und Nachteile

Durch die Erstellung von Prototypen, die echte Daten verwenden, die über eine API aus einer Datenbank gewonnen werden, werden neue kreative Möglichkeiten und die Möglichkeit zur Überprüfung des Produktdesigns ans Licht gebracht – Prototypen, die zu 100 % mit dem Produkt übereinstimmen, können gebaut und neue Funktionen an echten Benutzern getestet werden . Mit einer Vorschau aller Daten im System ist es schwieriger, ein Element zu übersehen, das in das Design aufgenommen werden muss, und durch den Zugriff auf echte Daten werden Designfehler vermieden, die durch die Verwendung gefälschter Daten entstehen.

Allerdings ist High-Fidelity-Prototyping in Framer ziemlich teuer. Um den gewünschten Effekt zu erzielen, ist viel Feintuning erforderlich – was Zeit und Geld verschlingt. Wie im Random User API-Beispiel gezeigt, ist die Kommunikation mit der API nicht schwierig, aber es wird noch viel Zeit benötigt, um daraus einen großartigen Prototyp zu erstellen.

Dennoch ist es bei vollem Maß sicherlich eine Überlegung wert. Viel Spaß beim Prototyping mit echten Daten!

• • •

Weiterführende Literatur im Toptal Design Blog:

• UI-Design Best Practices und häufige Fehler
• Leere Zustände – Der am meisten übersehene Aspekt von UX
• Einfachheit ist der Schlüssel – Erforschung des minimalen Webdesigns
• Heuristische Prinzipien für mobile Schnittstellen
• Lesbares Design – Ein Leitfaden zur Web-Typografie