Crearea de prototipuri cu date reale – Un tutorial Framer

Framer este unul dintre cele mai puternice instrumente de prototipare a aplicațiilor de acolo. Poate fi folosit pentru a proiecta pentru orice dispozitiv mobil, de la iOS la Android. Dacă cunoașteți un pic de programare, capacitățile sale sunt practic nelimitate, deoarece se bazează pe CoffeeScript - un limbaj de programare relativ ușor. Un designer ar fi limitat doar de imaginația și abilitățile sale de codare.

Pentru a urma acest articol, ar trebui să aveți cel puțin cunoștințe de bază despre Framer. Vom folosi Design Mode și Code Editor. Dacă doriți să vă completați cunoștințele, puteți citi articolele noastre anterioare Framer: Cum să creați prototipuri interactive uimitoare, 7 microinteracțiuni simple pentru a vă îmbunătăți prototipurile

De ce ar trebui să utilizați Framer cu date reale

O problemă comună în proiectarea sau prototiparea este lipsa datelor reale. Atunci când o nouă funcție este proiectată pentru un produs existent, în loc de a utiliza conținut fictiv, poate fi afișat conținut logic, relevant și cu aspect real. Poate fi orice tip de date - fotografii ale utilizatorului, de exemplu. În acest fel, nu se pierde timp încercând să vină cu conținut fals, iar greșelile care provin din utilizarea datelor nevalide vor fi evitate. Toate datele disponibile sunt vizibile și se poate stabili ce conținut ar mai fi necesar - ca urmare, comunicarea cu părțile interesate și cu echipa de dezvoltare este mai eficientă. De asemenea, este posibil să proiectați în jurul diferitelor scenarii de utilizare.

Când proiectăm o nouă funcție, uităm uneori că nu fiecare profil de utilizator este complet, nu toate categoriile din magazin au aceeași cantitate de produse și nu fiecare produs afișează aceleași date. Prototiparea cu date reale poate fi comparată cu construirea a ceva din blocuri LEGO: în loc să lucrăm cu forme imaginare, libere, putem folosi componentele existente din cutie și construim ceva real.

Să realizăm prototipuri cu date reale!

Adevărata distracție în Framer începe atunci când sunt utilizate date reale care sunt actualizate în timp real dintr-o bază de date. Se pot aplica orice fel de date, de exemplu: profiluri de utilizator cu fotografii, adrese de stradă, cotații bursiere, cursuri de schimb, prognoze meteo, informații despre tranzacții - orice date pe care aplicațiile le folosesc de obicei. Designul unui produs cu adevărat puternic începe să se întâmple atunci când combinați prototipul în timp real cu date reale. Și nu va mai fi necesar să folosiți piese de text de substituent „lorem ipsum” în limba latină.

API-ul folosind date reale: ce este? Cum îl folosim?

O interfață de programare a aplicațiilor (API) este interfața prin care comunicăm cu aplicațiile. Imaginați-vă o aplicație ca un restaurant. Mâncarea sunt datele, iar chelneriții sunt API-ul. Cereți chelnerii să mănânce - asta este tot ce trebuie să faceți. De restul se ocupă chelneritorii (API) și bucătăria (baza de date).

Totul este despre accesul la date reale care trăiesc într-o anumită bază de date.

Fiecare aplicație are un API care permite capturarea și afișarea datelor. Unele API-uri sunt disponibile public, iar unele sunt utilizate numai în produsele interne.

API-urile disponibile public sunt utilizate pe scară largă pentru a construi aplicații noi. De exemplu, pentru a construi o aplicație meteo, sunt necesare câteva date meteo. Cu ajutorul numeroaselor site-uri web de prognoză meteo care își partajează API-urile publice, este foarte ușor. În plus, multe API-uri diferite pot fi combinate pentru a crea un produs complet nou.

De unde putem obține date reale? Listele Open API

Există multe API-uri disponibile public care oferă diverse date. Iată o listă scurtă de cinci, care sunt grozave pentru prototipuri cu date reale în Framer. Fiecare dintre aceste API-uri returnează, de asemenea, date în format JSON, care pot fi gestionate cu ușurință în cadru.

Utilizator aleatoriu – Cu siguranță cel mai bun API pentru începători. Acesta generează profiluri de utilizator complete, aleatorii, de la un avatar la o adresă de e-mail.

OpenWeatherMap – acesta este un API foarte ușor de utilizat. Vă permite să verificați vremea actuală și prognozele în orice locație. Folosind acest API, putem afișa date precum temperatura, umiditatea sau viteza vântului.

Pokeapi – unul dintre cele mai bune API-uri create în scopuri educaționale. Cauți ceva despre Pokemon? Poate fi găsit aici. Acesta este un API RESTful complet legat de o bază de date extinsă care detaliază totul despre seria de jocuri principale Pokemon.

Instagram – primul API din listă care necesită autorizare pentru utilizare. Serviciul său, însă, este foarte simplu. Puteți obține acces la toate fotografiile și utilizatorii Instagram și le puteți afișa în noua dvs. aplicație.

Mapbox – oferă o serie de servicii incredibile care sunt ușor de integrat cu o aplicație, de la hărți și indicații până la geocodare și chiar imagini prin satelit. Foursquare, Evernote, Instacart, Pinterest, GitHub și Etsy au toate ceva în comun – hărțile lor sunt alimentate de Mapbox.

Acest API este diferit de cele anterioare deoarece nu returnează fișiere JSON, dar oferă acces la toate funcționalitățile Mapbox. Mapbox a produs, de asemenea, un tutorial grozav despre cum să-și folosească API-ul în Framer.

Tutorial API pentru utilizator aleatoriu în Framer folosind date reale

Pentru a înțelege cum să lucrați cu API-urile în Framer, să începem cu API-ul Random User. Vom avea nevoie de un singur ecran de aplicație - o listă de utilizatori.

Pasul 1: Modul de proiectare

Iată o listă de utilizatori care conține nume, prenume și avatare. Asta e tot ce se cere. Cea mai importantă parte a acestui proces este denumirea și gruparea corectă a tuturor elementelor. Avatarurile și numele sunt grupate în stratul de casete, iar toate casetele sunt grupate în interiorul listei:

Ultimul lucru care trebuie făcut în Modul Design este să marcați stratul listă ca strat interactiv. Pentru a face acest lucru, faceți clic pe pictograma țintă.

Pasul 2: înțelegerea JSON

În primul rând, este necesar să înțelegeți ce este JSON și cum să îl obțineți în afara Framer. În documentele Random User API, găsiți o solicitare de date din API. Arata cam asa: https://randomuser.me/api/?results=20. După cum puteți vedea, este un link obișnuit care deschide un fișier JSON în browser:

Așa cum este, nu pare deloc clar. Pentru a vizualiza fișiere JSON formatate corect, utilizați pluginul Chrome numit JSONview. Cu pluginul, fișierul va arăta astfel:

Mult mai bine. Acum ar trebui să fie ușor de citit. Fișierul conține o serie de rezultate cu datele utilizatorului, care au fost primite după ce s-a solicitat API-ului. Deci, ce este fișierul JSON? Fără a intra în detalii tehnice, este un fișier text bazat pe sintaxa JavaScript care conține date specifice dintr-o bază de date. JSON poate fi folosit în Framer pentru a afișa date din acesta.

Pasul 3: importați fișierul JSON în Framer

Acum, fișierul JSON poate fi importat în Framer cu o singură linie de cod:

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

Creați obiectul numit date care va conține fișierul JSON. Utilizați funcția de imprimare pentru a vedea dacă fișierul JSON a fost importat corect:

 print data 

Pasul 4: Accesarea datelor specifice din fișierul JSON

Acum reveniți la structura fișierului JSON:

În acest fișier JSON, results este o matrice care conține mai multe obiecte. Fiecare obiect este un utilizator diferit. În primul rând, unul dintre aceste obiecte trebuie să fie vizat. Utilizați funcția de imprimare pentru a înțelege mai bine ce se întâmplă:

 print data.results[1]

Consola Framer:

 {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"}

Figura dintre paranteze reprezintă un număr al obiectului din matrice. Folosind data.results[1] , se primește accesul la toate datele primului utilizator din fișierul JSON.

Apoi, pot fi afișate elemente precum numele sau prenumele:

 print data.results[1].name.first

Framer răspunde cu: "benjamin" . Et voila! Accesul la datele din API a fost realizat!

Pasul 5: Afișarea datelor din JSON

In cele din urma! Singurul lucru rămas este să afișați datele. Acum, trebuie creată o buclă simplă care va viza toate straturile din modul de proiectare. Citiți mai multe despre direcționarea straturilor cu o buclă în acest articol anterior.

Folosim x = 0 pentru a viza primul obiect din matrice din datele JSON. Apoi, pentru fiecare element copii din listă , atribuim datele din datele JSON. La sfârșitul buclei, adăugăm +1 pentru a folosi datele de la următorul obiect din matrice:

 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++

Asta e! Acum puteți reveni la modul design și vă puteți juca cu designul, iar datele reale vor fi afișate în prototipul dvs.!

Puteți descărca fișierul Framer de mai sus aici: https://framer.cloud/djmvG

API Instagram – Date în timp real în Framer

Instagram este un punct de plecare interesant pentru a începe o călătorie cu date în timp real. Instrucțiunile sunt relativ ușor de urmat, iar API-ul oferă date interesante – primești acces complet. În această parte a articolului, API-ul Instagram este folosit pentru a construi un prototip simplu care afișează datele profilului meu Instagram: numele, cea mai recentă fotografie și numărul de aprecieri.

Pasul 1: Obțineți un token de acces

Pentru a utiliza API-ul Instagram, este necesar un token de acces. Poate fi obținut în două moduri diferite:

1. Cea mai obișnuită modalitate este să accesați site-ul web Instagram for Developers și să urmați instrucțiunile. Acest proces ar putea fi complicat pentru persoanele netehnice.
2. Din fericire, există o modalitate simplă și sigură de a-l obține. Pixel Union a dezvoltat un proces mult mai ușor cu un singur clic: accesați site-ul lor web și faceți clic pe butonul Obțineți simbolul de acces.

Pasul 2: Activați solicitările pe mai multe domenii

După primirea unui token de acces, este necesar un mic truc. Instagram nu permite solicitări API de la gazda dvs. locală (Framer) și, prin urmare, trebuie utilizate interogări pe partea serverului. Unul dintre ele este JSONProxy. Accesați site-ul lor, inserați o solicitare din API-ul Instagram și apăsați GO.

Odată terminat, în loc să utilizați linkul API Instagram, linkul JSONProxy poate fi folosit.

Pasul 3: Proiectați o aplicație simplă în Framer

Există doar trei elemente cruciale în acest design: substituentul numelui, un dreptunghi care va afișa cea mai recentă fotografie și numărul de aprecieri sub imagine. Toate acestea sunt marcate ca straturi interactive pentru a fi reutilizate în editorul de cod.

Pasul 4: Scrieți patru linii de cod pentru a utiliza datele de pe Instagram

Fluxul de aici este același ca în API-ul utilizator aleatoriu. Orice date de utilizator pot fi accesate de pe Instagram:

 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

Asta e! Cinci linii de cod și puteți prototipa folosind date live și reale furnizate de Instagram. Descărcați un prototip funcțional aici: https://framer.cloud/iYAXl. (Vă rugăm să rețineți că trebuie să adăugați propria CHEIE DE ACCES pentru a rula acest prototip.)

Rezumat – argumente pro și contra

Prin crearea de prototipuri care utilizează date reale obținute printr-un API dintr-o bază de date, sunt scoase la iveală noi posibilități creative și capacitatea de a verifica designul produsului - pot fi construite prototipuri care sunt 100% conforme cu produsul și pot fi testate noi funcții pe utilizatori reali. . Cu o previzualizare a tuturor datelor din sistem, este mai greu să ratezi un element care trebuie inclus în design, iar cu acces la date reale, greșelile de proiectare care provin din utilizarea datelor false sunt evitate.

Acestea fiind spuse, prototiparea de înaltă fidelitate în Framer este destul de costisitoare. Este nevoie de multe modificări pentru a obține efectul dorit, ceea ce consumă timp și bani. După cum se arată în exemplul Random User API, comunicarea cu API-ul nu este dificilă, dar este încă nevoie de mult timp pentru a crea un prototip grozav din acesta.

Cu toate acestea, atunci când i se oferă măsura completă, merită cu siguranță luat în considerare. Prototipări fericite cu date reale!

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Cele mai bune practici de design UI și greșeli comune
• State goale – Cel mai neglijat aspect al UX
• Simplitatea este cheia – Explorarea designului web minimal
• Principii euristice pentru interfețele mobile
• Proiectare pentru lizibilitate – Un ghid pentru tipografia web