Învățați Framer prin crearea unui prototip de aplicație mobilă

Timpul interfețelor statice cu utilizatorul a trecut de mult. Proiectarea prototipurilor interactive este cea mai bună abordare pentru a vă exprima ideile și a le explica clienților și părților interesate. Sau, așa cum spune Jerry Cao de la UXPin: „Nimic nu vă aduce mai aproape de funcționalitatea produsului final decât prototipul. Este prototipul care dă viață experienței din spatele experienței utilizatorului ”.

Prototiparea este o parte importantă a procesului modern de design UX. Am încercat multe instrumente și cred că Framer Studio (produs de Framer Library) este unul dintre cele mai bune atunci când vine vorba de realizarea de prototipuri de interfață cu utilizatorul. Așadar, în următorul tutorial, aș dori să vă învăț câteva elemente de bază Framer.

Ce vei invata? Dacă știți ce este Framer și ați dori să aflați mai multe despre cum să îl utilizați sau dacă nu știți ce este Framer, dar doriți să aflați ceva mai multe despre tehnicile avansate de prototipare, cred că acesta este tutorialul pentru dvs.! Până la sfârșitul tutorialului, ar trebui să puteți crea un prototip de aplicație mobilă și veți învăța, de asemenea, ceva cod CoffeeScript. Vă voi ghida pe parcurs și vă voi oferi fișiere pentru a vă ajuta să începeți mai ușor.

O notă despre Framer Studio, biblioteca Framer, platforme și comenzi rapide

Înainte de a continua, o notă importantă : Acest tutorial este despre Framer Studio, care este o aplicație numai pentru Mac. Framer Studio este alimentat de Framer Library, care este open-source și gratuit. Biblioteca Framer în sine poate fi utilizată pe toate sistemele de operare (Mac, Windows și Linux). Până acum, nu este disponibilă nicio versiune Windows a Framer Studio; cu toate acestea, există o modalitate de a face Framer Library să funcționeze pe sistemul de operare Windows cu Atom. (Dacă sunteți curios despre bitul Windows, citiți „Cum să rulați Framer JS pe Windows” sau „Utilizarea Framer pe Windows cu Atom.”) De asemenea, rețineți că, deoarece folosesc Framer Studio pe un Mac, în tutorialul meu Voi folosi notația Mac pentru comenzi rapide.

Ce este Framer?

Există două categorii principale de instrumente de prototipare (mai multe despre acestea mai târziu), dar Framer este un instrument care se încadrează într-o categorie proprie. Îl puteți folosi pentru tranziții simple și prototipare rapidă, precum și pentru crearea de microinteracțiuni și animații avansate. Îți oferă – designerului – puterea supremă de a crea interacțiuni fără limitări impuse de o interfață grafică de utilizator și instrumente predefinite.

Învățarea unui cod

În Framer, codul este superputerea voastră supremă de design. Înseamnă că trebuie să înveți să codificăm? Da. Ar trebui să codifice designerii? Acest subiect este vechi și au existat câteva puncte bune atât pentru „da” cât și pentru „nu”; aici, aș dori să vă prezint o abordare ușor diferită a întrebării.

Într-un articol recent, Shawn Hickman a spus:

„Există o dezbatere constantă despre dacă designerii ar trebui sau nu să învețe să codifice. Deși sunt bucuros să vorbesc despre asta pe larg, cred că este util să privesc din altă perspectivă. Ce încerci să realizezi? În cazul meu , am vrut să expediez un produs."

Si deasemenea:

„Framer este un instrument atât de uimitor pentru designeri pentru a învăța cum să codifice. A putea vedea rezultatele codului tău în direct m-a ajutat să mă învețe ce se întâmplă de fapt. Framer m-a învățat lucruri de bază precum variabile, bucle for și funcții. Nimic de lux. , dar absolut necesar.”

Acest lucru mă duce la următorul meu punct important. În opinia mea, Framer este una dintre cele mai prietenoase abordări ale designerilor pentru codificare. Și în timp ce prototipurile nu sunt niciodată realizate cu cod gata de producție, programatorii vor beneficia în continuare și vor putea folosi unele informații din codul dvs. În cele din urmă, veți obține, de asemenea, o mai bună înțelegere a modului în care funcționează totul sub capotă și veți construi o bază pentru dezvoltarea în continuare a abilităților dumneavoastră.

Ce este CoffeeScript?

Limbajul folosit în Framer este CoffeeScript. Vești grozave pentru începători: este o versiune simplificată de JavaScript și, prin urmare, curba de învățare nu este prea abruptă.

Conform site-ului oficial:

CoffeeScript este un limbaj care se compilează în JavaScript. Este o încercare de a expune părțile bune ale JavaScript într-un mod simplu.

Mai există un mare avantaj în utilizarea CoffeeScript: este, în esență, o tehnologie web, așa că tot ceea ce creați în Framer rulează ca JavaScript mai târziu! Pentru a urma acest tutorial, va trebui să cunoașteți doar o mică parte de programare.

Resurse utile

Deoarece vom scrie ceva CoffeeScript, dacă aveți nevoie de ajutor pentru a începe, vă recomand să consultați mai întâi următoarele resurse:

• „Cod”, Framer
  Ghidul de programare al lui Framer.
• „Curs de cadre”, Greg Rog
  Tutorialul meu video despre CoffeeScript.
• „O introducere în CoffeeScript”, Jeffrey Biles, SitePoint
• „Scurtă introducere în CoffeeScript”, JumpstartLab
• „Intro to Framer”, Meng To
  O resursă foarte recomandată pentru a învăța câteva lucruri de bază cheie despre Framer.

Notă despre versiunile Framer

Tutorialul rulează (și a fost testat) pe Framer versiunea 111 . Dacă nu ați actualizat încă la 111, vă recomand cu tărie să îl descărcați și să actualizați. În ceea ce privește actualizările viitoare ale Framer, este probabil ca o versiune viitoare a Framer să introducă mai multe funcții noi și ar putea avea un impact asupra codului acestui tutorial.

De ce este importantă prototiparea?

Comparați aceste abordări pentru a prezenta aceeași idee. Ai putea folosi un cadru fir, ca acesta:

Sau aceeași idee ar putea fi prezentată cu un prototip simplu, dar puternic:

Imaginați-vă că prezentați această idee unui grup de oameni. Ce părere aveți: care dintre ele ar avea rezultate mai bune? Chiar dacă wireframe ar conține informații mai relevante, ar avea un impact vizual mai mic. Și oamenii tind să nu citească cu atenție documentația wireframe.

Explicarea ideii cu un prototip interactiv le-ar oferi o mai bună înțelegere a viziunii dumneavoastră. Uneori, chiar și un prototip de joasă fidelitate spune câte o mie de cuvinte. (Aceeași idee a fost împărtășită de Paul Boag: „Oamenii au adesea probleme în a-și imagina cum arată mai bine . Un prototip le permite să-l vadă. Poate vinde potențialul mult mai bine decât orice număr de documente sau prezentări.”)

Dacă o imagine valorează 1000 de cuvinte, un prototip valorează 1000 de întâlniri.

— Daniel Burka, #aeadenver 2017

Se întâmplă adesea să trebuiască să convingi oameni ale căror cunoștințe despre conceptul prezentat sunt limitate. Pe de altă parte, a avea un prototip funcțional înainte ca aplicația reală să fie dezvoltată vă poate aduce o perspectivă cu adevărat semnificativă din etapa de testare a utilizatorului. De aceea cred că prototiparea este atât de importantă și atrăgătoare.

În general, puteți împărți prototipurile în două categorii principale. Mai întâi este prototiparea rapidă , în care legați ecrane statice cu hotspot-uri pentru a crea tranziții simple. Acest lucru poate fi realizat cu instrumente precum Marvel, Adobe XD și Figma.

A doua categorie este prototipurile detaliate cu microinteracțiuni , cum ar fi animațiile concentrate pe o singură sarcină (de exemplu, setarea unei alarme, alegerea unei acțiuni etc.). Puteți crea acest tip de prototip cu instrumente precum Principle, Flinto și Origami. Rafinarea prototipului cu animații vă oferă posibilitatea de a crea o experiență de prototipare mai captivantă.

Vă amintiți că am spus că Framer este un instrument care se încadrează într-o categorie proprie? Acest lucru se datorează faptului că îl puteți folosi atât pentru prototipare rapidă, cât și pentru crearea de microinteracțiuni și animații destul de avansate. Să vedem cum!

Primul tău design realizat cu Framer

Să începem cu interfața cu utilizatorul Framer.

Framer are două vederi bine integrate: cod și design. Vă creați machetele și imaginile în vizualizarea design, apoi adăugați toată interactivitatea necesară în vizualizarea cod. În vizualizarea cod, veți putea apoi să adăugați animații și microinteracțiuni. Framer nu ar trebui să înlocuiască instrumentul de design ales de dvs. (deși, odată cu actualizarea recentă din decembrie, Framer începe să vizeze și piața instrumentelor de proiectare a ecranului, se pare; a postat o prezentare generală a noilor caracteristici de design), dar pentru prototipuri rapide, aspectul de design se simte bine.

Mai târziu, cu modele mai sofisticate, veți putea importa și fișiere din Sketch sau Figma. Dar mai întâi, să trecem direct în vizualizarea de proiectare și să creăm un aspect simplu folosind câteva instrumente de proiectare de bază.

Lucrul în vizualizarea design

Când deschideți pentru prima dată Framer Studio, acesta se va deschide în vizualizarea design. Veți descoperi că majoritatea comenzilor rapide pe care le cunoașteți din alte instrumente de proiectare (cum ar fi Sketch) funcționează și aici. Apăsați A (sau F ) pentru a comuta la instrumentul Cadru și selectați o presetare predefinită pentru iPhone 8 din panoul de proprietăți din dreapta.

Notă: în cea mai recentă actualizare Framer, planurile de artă au fost redenumite în „cadre” și întregul concept s-a schimbat. Ce sunt cadrele exact? Cadrele sunt containere inteligente care pot fi folosite atât ca ecrane, cât și ca elemente de interfață. Cadrele pot fi, de asemenea, folosite ca felii pentru a exporta rapid pictograme la anumite dimensiuni. Dacă cunoașteți puțin HTML, ați putea să vă gândiți la cadre ca pe elemente div și, de asemenea, puteți imbrica cadre unul în celălalt, pentru a defini elemente de aspect, cum ar fi bare de navigare, bare de file, carduri, butoane etc. Mai târziu în tutorial , uneori mă voi referi la cadre ca „ecrane” (pentru a vă oferi o idee generală că acesta este un ecran separat al aplicației noastre) — dar, din punct de vedere tehnic, ecranele sunt doar cadre.

Puteți citi mai multe despre cadre în pagina de ajutor „Frames vs Shapes”.

O notă despre unități

În Framer, măsurăm lucrurile în unități numite puncte . Fiecare punct poate reprezenta un număr diferit de pixeli, în funcție de densitatea de pixeli a dispozitivului fizic pe care îl veți testa. Deoarece orice proiectați în Framer este creat ca un vector, nu este nimic de care să vă faceți griji. De asemenea, cel mai bine este să utilizați fișiere SVG vectoriale, care sunt acceptate de Framer; dacă trebuie să importați fișiere PNG sau JPG, asigurați-vă că acestea au o rezoluție suficient de mare.

Am pregătit astfel logo-ul Smashing Magazine. Pentru a-l importa în Framer, îl trag și plasez pe pânză.

Ultimul element din acest cadru este un buton simplu, realizat cu ajutorul unui alt cadru imbricat (apăsați F sau A ), cu un cadru de text în el. Apăsați T pentru instrumentul Text și desenați un câmp de text de la stânga la dreapta, aliniind textul la centrul câmpului din panoul de proprietăți și adăugând ceva text.

Sfat util : textul este aplicat automat ca substrat obiectului cadru pe care l-ați creat. Pentru a-l accesa direct pe pânză, țineți apăsat Command în timp ce faceți clic pe el.

Să proiectăm al doilea ecran (cadru). Vom folosi un antet și un subsol generice, care vor fi aplicate automat prototipului nostru (aceasta înseamnă că veți sări peste înălțimea atât a antetului, cât și a subsolului în timp ce lucrați la design).

Elementul principal de pe acest ecran va fi lista cu șase butoane, cu 115 puncte în înălțime fiecare. În total, cadrele noastre ar trebui să aibă 6 × 115 = 690 points în înălțime. Deoarece este puțin mai înalt decât dispozitivul în sine, mai târziu va derula automat în previzualizare. Am folosit o pictogramă hamburger din panoul de pictograme:

De asemenea, am adăugat câteva câmpuri de text, precum și degrade ca umplere. Iată cum arată:

Să selectăm toate butoanele și să apăsăm Command + Return pentru a le îmbina într-un nou cadru - un nou container pentru aceste articole (pe care le-am numit „articole”). Acum, adăugați cadre de sus și de jos (care vor fi folosite pentru antet și subsol), apoi puneți-le în partea de sus a elementelor din listă.

Pentru celelalte cadre, utilizați forme și instrumente simple similare pentru a crea structura pe care o vedeți mai jos.

Nu voi intra în detaliile fiecărui element de design din cauza naturii de bază a instrumentelor pe care le veți folosi. Cu toate acestea, dacă doriți să începeți cu un fișier Framer gata de utilizat, puteți descărca unul.

Înainte de a continua, sunt câteva lucruri pe care aș dori să le verificați:

• Al treilea ecran cu meniu trebuie să aibă aceeași înălțime cu cel mai înalt (puteți duplica cu ușurință cadrul anterior apăsând Command + D ).
• Convenția de denumire a elementelor din panoul de straturi este critică. Vă rog, păstrați-l așa cum este în fișierul meu de design sau acordați atenție modului în care le aduc numele.

Tranziția de la design la cod

Pentru a pune lucrurile în mișcare, va trebui să accesați vizualizarea codului. Puteți comuta între vizualizări apăsând Command + 1 și Command + 2 . Înainte de a începe să codificați interacțiunile, va trebui să activați cadrele din vizualizarea design pentru a fi disponibile în vizualizarea cod (ele nu sunt activate în mod implicit). Pentru a activa un cadru pentru lucrul în vizualizarea cod, faceți clic pe pictograma țintă de lângă numele său în panoul de straturi.

Acum puteți viza acest cadru în cod pur și simplu folosind numele său.

Sfat util: Păstrați convenția de denumire simplă pentru elementele din panoul de straturi; încercați să evitați spațiile și semnele speciale; nu începe un nume cu o cifră. Utilizarea camelCase sau caractere de subliniere ( _ ) este o idee bună. Dar dacă utilizați liniuțe ( - ), va trebui să le înlocuiți cu caractere de subliniere ( _ ) în cod.

Mai întâi, asigurați-vă că toate cadrele au fost activate pentru a le viza în vizualizarea codului cu pictograma țintă (pentru a vedea lista completă de cadre, faceți clic oriunde pe pânza goală în afara oricărui cadru). De asemenea, activați toate cadrele din primul cadru pentru vizualizarea codului. Acum, apăsați Command + 2 și haideți să rulăm un cod!

Actualizare importantă: Începând cu actualizarea Framer din 20 decembrie 2017 ( versiunea 108 ), puteți viza în cod numai cadre și obiecte text; dar într-o actualizare mai recentă ( versiunea 109 , lansată pe 23 ianuarie 2018), echipa Framer a adăugat opțiunea de a viza și forme și căi. În timp ce tutorialul meu folosește numai cadre și obiecte text, este, de asemenea, bine de știut că acum formele și căile pot fi vizate și în cod. Veți observa, de asemenea, că (după cum sa menționat deja) instrumentul Artboard a fost înlocuit cu instrumentul Frame, astfel încât bara laterală a instrumentelor ar putea arăta ușor diferit față de capturile de ecran; acest lucru se datorează faptului că cea mai mare parte a articolului a fost pregătită înainte de actualizarea Framer din 20 decembrie 2017.

Adăugarea de interactivitate în Framer

Nu este intenția mea să vă învăț CoffeeScript în acest articol, dar voi încerca tot posibilul să explic codul pe care l-am folosit în acest exemplu. Sperăm că veți putea înțelege chiar și fără experiență anterioară în CoffeeScript. Acestea fiind spuse, dacă sunteți nou la CoffeeScript sau JavaScript, vă sugerez cu tărie să parcurgeți mai întâi ghidul de ajutor.

Acum, să creăm primele noastre animații. Vom explora tranzițiile simple prin crearea unei animații introductive pentru primul ecran. Ceea ce am configurat în vizualizarea design este modul în care aplicația noastră ar trebui să aibă grijă după ce elementele sunt animate. Pentru primul nostru ecran, dorim să animem proprietățile de scale și rotation ale logo-ului. Mai întâi, setăm proprietatea scale la 0 (ceea ce va face logo-ul invizibil), apoi setăm rotația acesteia la -360 :

 logo.scale = 0 logo.rotation = -360
logo.scale = 0 logo.rotation = -360

După aceea, le vom anima la valorile lor originale. Iată blocul de cod pe care îl puteți folosi:

 logo.animate properties: scale: 1 rotation: 0
logo.animate properties: scale: 1 rotation: 0

Țineți cont de indentare . Proprietățile care se animate ar trebui să fie indentate pe linii noi și folosim metoda animației pentru a le pune în mișcare. Acum, ar trebui să puteți vedea prima animație funcționând! Îl poți modifica puțin creând o mișcare mai naturală. Vom face acest lucru datorită relaxării — un concept care ne permite să schimbăm mișcarea, astfel încât să pară mai reală. Să mai adăugăm o linie în partea de jos:

 logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"
logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"

Din nou, vă rugăm să rețineți indentarea. Experimentați cu valorile din paranteze pentru a obține rezultate diferite. Puteți citi mai multe despre relaxare în documentația Framer.

Animația ar trebui să arate acum astfel:

Să mai setăm câteva proprietăți de pornire:

 bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200
bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200

Pe ultima linie, setăm poziția butonului astfel încât să fie sub pânză — mai întâi verificăm poziția curentă cu button.y , apoi adăugăm încă 200 de puncte pe axa verticală pentru a o deplasa în jos. Următorul pas este să creați o animație; hai să o facem mai întâi pentru fundal:

 bg.animate backgroundColor: "#FF7744"

Și acum, vrem să așteptăm până când animația logo-ului s-a terminat și apoi să rulăm animația butonului. O abordare ar fi amânarea animației, astfel:

 button.animate properties: scale: 1 y: button.y - 200 delay: .5

Acest lucru îl întârzie cu o jumătate de secundă. O soluție mult mai plăcută ar fi să așteptați ca animația logo-ului să se termine și apoi să rulați codul. Acea bucată de cod introduce evenimente Framer (pe care le vom explora puțin mai târziu în acest articol). Arata cam asa:

 logo.onAnimationEnd -> button.animate scale: 1 y: button.y - 200

După cum puteți vedea, puteți chiar sări peste properties: line atunci când nu utilizați easing; dar dacă vrei să adaugi niște relaxare cool, trebuie să fie acolo. Să terminăm cu ceva de genul acesta:

 logo.onAnimationEnd -> button.animate properties: scale: 1 y: button.y - 200 curve: "spring"

Deci, aceasta este o modalitate de a crea animații în Framer; altele ar fi să folosească obiecte de animație sau stări. Un sfat suplimentar ar fi să explorați proprietăți făcând clic pe pictograma de lângă numărul liniei, unde puteți modifica diferite valori.

OK, animația arată acum așa:

Scriptarea Interacțiunilor

În Framer, există o mulțime de componente și fragmente gata făcute - bucăți de cod pe care le puteți utiliza în prototipurile dvs. Una dintre ele este componenta flux, care permite tranziția automată a ecranelor, precum și unele funcții suplimentare, cum ar fi definirea antetului și a subsolului care vor apărea pe fiecare ecran. Să începem prin a crea o componentă de flux:

 flow = new FlowComponent flow.showNext(home)

Prima linie este ca o declarație a unei variabile. Dar valoarea de aici creează de fapt un nou obiect FlowComponent . Acum, putem folosi acest nume personalizat, flow , pentru a accesa componenta flux în orice moment. A doua linie folosește una dintre metodele încorporate în componenta flux - showNext , care, după cum sugerează și numele, afișează ecranul pe care vrem să-l vedem în continuare. În acest caz, ne va afișa primul ecran al prototipului nostru. Trecem numele primului cadru ca parametru. Atât este nevoie pentru a-l înfășura în componenta de flux și pentru a afișa primul ecran.

În continuare, definim antetul și subsolul. Dacă nu le-ați activat în vizualizarea design, va trebui să reveniți cu Command + 1 și, în vizualizarea design, faceți clic pe pictograma țintă pentru cadrele „bara de sus” și „bara de jos”. După cum vedeți, puteți, de asemenea, să grupați conținutul împreună în vizualizarea design Command + Return ) și, ulterior, să permiteți accesul noului cadru în cod. Înapoi în vizualizarea cod, acum puteți utiliza următoarele linii:

 flow.header = top_bar flow.footer = bottom_bar

Probabil ați observat că atunci când apelați flow și puneți apoi punctul, Framer afișează o listă de metode și proprietăți comune pe care le puteți utiliza. Merită să parcurgeți lista și să verificați sugestiile pentru metode și proprietăți. Și, dacă doriți să aflați mai multe, o mică pictogramă duce la documentație.

În programarea orientată pe obiecte, acest concept este foarte important. Luați ca exemplu un obiect auto; proprietățile ar fi lucruri precum culoarea, marca, cai putere și așa mai departe. Metodele ar fi funcții gata făcute pe care le puteți rula atunci când este cazul (de exemplu, startTheEngine() ). Puteți recunoaște metoda după paranteze și, uneori, s-ar putea să doriți să treceți câțiva parametri acestei anumite funcții (de exemplu, startTheEngine(gear1) ). Am folosit deja metoda showNext() în acest context; acum folosim proprietățile header și footer și le setăm pe straturile corespunzătoare.

O altă tehnică pe care o vei folosi des în Framer este ascunderea și dezvăluirea straturilor. De exemplu, ca decizie de proiectare, dorim să ascundem antetul și subsolul de pe primul ecran. Puteți face acest lucru cu următoarele linii de cod:

 flow.header.visible = false flow.footer.visible = false

Aici, folosim proprietatea visible din antetul și subsolul componentei flux. CoffeeScript este menit să fie cât mai intuitiv și aproape de limba engleză simplă posibil; deci, în loc de false , poți chiar să spui no pentru a-l ascunde și yes pentru a-l dezvălui (în loc de true ).

Sfat: Încercați să selectați orice rând de cod și apăsați Command + / pentru a le comenta, astfel încât să nu fie executate.

Este timpul să folosiți puterea componentei de flux pentru a călători la următorul ecran al aplicației noastre. Mai întâi, asigurați-vă că următorul cadru este disponibil în vizualizarea cod, precum și cadru button_get_started pe care îl vom folosi pentru a ajunge la următorul ecran. Următorul cod face exact asta:

 button_get_started.onTap -> flow.showNext(list) flow.header.visible = true flow.footer.visible = true

Ceea ce facem aici este o altă convenție: putem răspunde la intrarea utilizatorului și putem interacționa cu așa-numitele evenimente . Există diferite evenimente din care puteți alege, cum ar fi atingerea, clicul, atingerea forțată, hovering și multe altele. Puteți prinde astfel de evenimente și puteți executa un cod pe măsură ce utilizatorul efectuează acțiunea. Folosim evenimentul onTap și, ca răspuns la acesta ( -> ), executăm codul care este indentat mai jos. În componenta flux, arătăm cadrul listei, precum și dezvăluirea antetului și subsolului.

Acum că știți atât despre evenimente, cât și despre animații, puteți modifica și mai mult ecranul de pornire și puteți experimenta cu evenimentele. De exemplu, puteți adăuga o animație de atingere la butonul:

 button.onTouchStart -> this.animate properties: scale: 1.1 backgroundColor: "#f1f1f1" curve: "spring"

Aici, am folosit evenimentul onTouchStart pentru a vedea animația înainte de a merge la următorul ecran, care este declanșat atunci când utilizatorul eliberează degetul (evenimentul onTap sau onClick ).

Ați descoperit deja un potențial al componentei flux, cum ar fi tranziția automată la următorul ecran. Dar magia tocmai a început! După cum puteți vedea, lista se derulează automat. Problema este că putem vedea negru (fondul componentei de flux) când ajungem sus sau jos și derulăm și mai mult. Puteți schimba culoarea pur și simplu setând aceasta (culoarea gri pe care o avem în antet și subsol):

 flow.backgroundColor = "#555555"

Acum este timpul să afișați meniul. Asigurați-vă că ați activat menu_button pentru cod și executați următoarele rânduri de cod:

 menu_button.onTap -> flow.showOverlayLeft(menu)

Folosim metoda showOverlayLeft() și transmitem numele cadrului ca parametru. Ca urmare, ecranul se anime din partea stângă, iar meniul este ascuns cu o altă atingere și chiar este ascuns cu o atingere în afara meniului în sine. Toate acestea cu o singură linie de cod!

Apple nu pare să încurajeze utilizarea meniurilor de hamburger în aplicațiile iOS, așa că am folosit meniul doar ca un exemplu a ceea ce Framer poate face rapid și eficient. Dacă creați un prototip pentru o aplicație iOS reală, luați în considerare să urmați îndeaproape regulile de interfață Apple.

Puteți accesa acest mod minunat de prezentare făcând clic pe pictograma pe ecran complet din fereastra de previzualizare. De asemenea, este posibil să vă testați prototipul direct pe un dispozitiv mobil! Puteți folosi previzualizarea live cu aplicația gratuită, disponibilă atât pentru iOS, cât și pentru Android. Testarea prototipurilor dvs. pe dispozitive reale este esențială, deoarece vă oferă cea mai precisă previzualizare a modului în care va arăta și se va simți designul.

Dacă sunteți începător, probabil că ați înțeles cea mai mare parte a tutorialului de până acum, dar s-ar putea să nu credeți că încă îl puteți face singur. Deci, iată o mică misiune.

După cum ați văzut, am închis meniul pur și simplu făcând clic în zona goală din partea dreaptă (demonstrând magia componentei fluxului). Acum, aruncați o privire la documentația componentei de flux și încercați să vă dați seama cum să îndepliniți următoarea sarcină: Vrem să facem butonul „x” să închidă meniul și să afișăm ecranul anterior. Înainte de a merge mai departe, încercați să descoperiți care este modalitatea corectă de a face acest lucru și să scrieți singur liniile de cod.

Dacă încă nu este clar în acest moment, nu vă faceți griji! Până la sfârșitul tutorialului, va fi mai ușor de înțeles. CoffeeScript-ul pe care îl vom folosi aici (după activarea elementului close_button pentru vizualizarea codului) este acesta:

 close_button.onTap -> flow.showPrevious()

Aici, showPrevious() este doar o metodă de componentă a fluxului care vă va permite să mergeți la ultimul ecran. Acum, încercați să scrieți din nou un cod pe cont propriu. Va trebui să legați article_list și arrow_button cu codul și să faceți ca article_list să afișeze ecranul corespunzător, precum și să faceți arrow_button să treacă la cel anterior. De asemenea, va trebui să ascundem și să arătăm antetul și subsolul acolo unde este cazul.

Felicitări dacă ai reușit să o faci! Iată codul pe care l-am folosit:

 article_list.onTap -> flow.showNext(detail) flow.header.visible = false flow.footer.visible = false arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Preluarea datelor pentru prototipul nostru

Acum că avem coloana vertebrală a prototipului nostru, este timpul să explorăm câteva funcții mai avansate ale Framer. Asta o să fie amuzant! De fapt, vom folosi datele reale din aplicația noastră. Va părea mult mai semnificativ decât generarea unui conținut de umplere fals. Și ar putea să sune puțin înfricoșător, dar nu vă temeți - acesta este următorul lucru din setul dvs. de abilități. Dacă vi se pare dificilă această parte a articolului, rămâneți cu datele statice. Acest lucru este menit să arate unor utilizatori mai avansați că se pot ocupa de date reale în Framer.

Această abordare este similară cu cea utilizată atunci când lucrați cu variabile și seturi de date în Adobe Photoshop. Dacă sunteți curios, citiți mai multe: „Creați grafică bazată pe date în Photoshop”.

De fapt, mai întâi aș dori să vă prezint o soluție mai ușoară, dar totuși una care vă va oferi control asupra textului dvs. din cod! Reveniți la vizualizarea design și puneți textul în câmpuri între acolade, astfel: {item_1} {item_2} ...

Asigurați-vă că câmpurile de text sunt activate pentru vizualizarea cod, iar în vizualizarea cod puteți pune toate șirurile predefinite într-o matrice . (Recomand să citiți „Framer Cheat Sheet: Loops & Arrays” dacă doriți să aflați mai multe despre matrice.)

Pe scurt, o matrice acționează ca o variabilă care poate conține mai mult de un articol:

 categories = ["Graphic Design", "Mobile Apps", "Web Design", "User Experience", "Front-End Dev", "User Research"]

Acum că avem matricea noastră, să încercăm să afișăm datele. Pentru a face acest lucru, vom folosi mai întâi comanda print , care trimite rezultatul în consolă. Îl poți testa imediat:

 print "Hello World"

Consola poate fi reîmprospătată apăsând Command + R . Accesarea datelor este la fel de simplă:

 print categories

Această linie de cod va afișa toate datele din matricea categories . Cu matrice, puteți accesa cu ușurință elementele individuale care sunt indexate în matrice, punând numărul între paranteze, astfel:

 print categories[2]

Acest lucru va returna al treilea articol din colecție, deoarece începem să numărăm de la zero. Acum să folosim funcționalitatea șablonului TextLayer a Framer pentru a actualiza primele două șiruri:

 item1_txt.template = categories[0] item2_txt.template = categories[1]

Puteti completa restul campurilor! Acest exemplu simplu ne permite să gestionăm câmpurile de text direct din cod, astfel încât să putem schimba textul în mod dinamic!

Unde să mergi de aici

Bine făcut! În acest moment, ar trebui să vă puteți găsi drumul în jurul Framer și să creați câteva prototipuri simple.

Notă: vă încurajez să încercați propriul meu curs video pe Framer - puteți urmări câteva lecții gratuit. De asemenea, cartea Framer de Tes Mat este o resursă excelentă pentru a învăța și înțelege Framer și CoffeeScript. Cartea nu este gratuită, dar puteți citi un exemplu de capitol din ea (înainte de a decide dacă doriți să o cumpărați).

Sper că ați găsit utilă această parte a articolului. Până în acest moment, am urmat modalități simple de a face prototipul nostru să funcționeze. Dar Framer este mult mai mult decât atât! Acesta este motivul pentru care am scris o secțiune suplimentară de bonus cu tehnici mai avansate. Dacă sunteți pregătit pentru provocare, treceți la următoarea parte: JSON!

Accesarea datelor din JSON (secțiunea Tutorial bonus)

Ca o alternativă puternică la soluția anterioară, puteți utiliza un API extern și vă puteți conecta direct la acesta. Deși este puțin exagerat pentru acest exemplu special, utilizatorii mai avansați vor beneficia de pe urma acestei idei. Mai întâi, comentați codul care este responsabil pentru completarea câmpurilor de text (selectați codul și apăsați Command + / ). Modul simplu este să aveți fișierul local și să îl încărcați în Framer. De preferință, acesta ar fi un fișier JSON și îl puteți obține în diferite moduri, cum ar fi:

• folosiți exemplul meu de fișier JSON,
• creați-l de la zero folosind un instrument precum Dummi sau JSON Editor Online,
• folosiți niște date false din liste,
• obțineți fișierul relevant de la dezvoltatorul cu care lucrați.

Dar stai, ce este JSON?

JSON (JavaScript Object Notation) este un format ușor de schimb de date. Este ușor pentru oameni să citească și să scrie. Este ușor pentru mașini să analizeze și să genereze. JSON este un format de text care este complet independent de limbaj, dar utilizează convenții familiare pentru programatorii din familia C de limbi, inclusiv C, C++, C#, Java, JavaScript, Perl, Python și multe altele. Aceste proprietăți fac din JSON un limbaj ideal pentru schimbul de date.

Puteți folosi date reale pentru întregul proces de proiectare! Dacă utilizați Sketch, acest lucru se poate face cu extensia Craft a InVision. Poate încărca un fișier JSON local sau la distanță și poate prelua datele pentru a fi utilizate în aspect. Pentru a afla mai multe, consultați articolul detaliat al lui Christian Krammer „Craft for Sketch Plugin: Designing With Real Data”. De asemenea, citiți tutorialul Framer al lui Wojciech Dobry, „Prototiparea cu date reale”.

Acum, să punem acest fișier în folderul proiectului. De fiecare dată când salvați un nou proiect Framer, acesta creează un folder cu numele proiectului dumneavoastră. Accesați-l în Finder și puneți fișierul JSON lângă fișierul .coffee din această structură.

Fișierul JSON cu care lucrez arată astfel:

Vom folosi datele categoriilor din Framer și vom înlocui conținutul fals pe care îl avem în butoanele de pe ecranul cu listă. Doar asigurați-vă că ați dat nume proprii câmpurilor (în cazul meu, item1-txt , item2-txt etc.) și că le-ați activat pentru vizualizarea codului cu pictograma țintă.

Să încărcăm feedul în Framer:

 data = JSON.parse Utils.domLoadDataSync "feed.json"

Folosim JSON.parse , precum și clasa Utils — o pereche care va face toată munca grea de a traduce JSON într-un limbaj uman și de a pune totul în data (numele pe care l-am folosit). Pentru a afișa acum datele din partea de sus a fișierului nostru .json , le putem tipări:

 print data.categories

Din obiectul de date, putem extrage anumite elemente, ca în exemplul anterior.

 print data.categories[2]

Să creăm o matrice cu toate câmpurile de text:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt]

Acesta este un exemplu simplificat, astfel încât, chiar dacă sunteți mai puțin experimentat, ar trebui să puteți urmări. Ai putea încerca să faci mai bine rulând bucla dacă te simți mai încrezător. Vorbind de bucle, vom folosi una, în orice caz, pentru a pune elementele în câmpurile de text. Merge asa:

 for i in [0...6] textfields[i].text = data.categories[i]

Loops enable you to run the same code many times. It starts with for , and then we define a variable, which I've called i . This variable will hold whatever information we pass and then will increment with each loop. In this case, we pass numbers from 0 to 5 — [0...6] is just a way of saying this. You can check out the values of i in the loop by doing the following:

 print i

We need it to loop exactly six times (0,1,2,3,4,5), so that we can address each fild on one iteration. Putting i at the end of textfields will return textfields[0] , textfields[1] , and so on; this way, we can address all of the text fields in the array. Again, if you want to double-check, print it! Put more simply, what we've done here is just an easier way of saying this:

 item1_txt.text = data.categories[0] item1_txt.text = data.categories[1] item1_txt.text = data.categories[2] ...

It's easier to grasp, but code-wise, this solution is not elegant at all. That is why we were using a loop here.

The result of our work is that all of the data is populated in the text fields:

Let's add some links to these items so that we can go to the detail screen. Doing it in the loop is a smart move because we can again add it all at once. Here is the next part of the for in loop (remember to keep the indentation).

 textfields[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to be more elegant, you can make the items tappable, not only the text. Remember, however, that you have to add them to an array first; so, just before the loop, you can put this:

 items = [item1, item2, item3, item4, item5, item6]

Then, in the loop, change textfields[i] to items[i] . This whole code block will now look like this:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt] items = [item1, item2, item3, item4, item5, item6] for i in [0...data.categories.length] textfields[i].text = data.categories[i] items[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to take this to the next level and display different data depending on the button clicked, my hint is to use this in the event, or get the information from the event by putting (e) next to onTap . I do not recommend doing that now, though: Going crazy with the data is not necessary here. Our main goal is to create a prototype, not a real complex application. Keep that in mind. This JSON example was merely to demonstrate that it is possible to use real data in a Framer prototype.

You probably noticed that we're hiding the header here. That is because we've created a separate header for the detail view. There is a simple arrow icon that we want to link back to the previous screen. This is the block of code we'll use:

 arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Again, showPrevious() is a ready-made method of the flow component, and I just looked it up in the docs!

Our simple prototype is ready, and it looks like this:

You can download the complete Framer file. Surely, you can tweak it with extra animations, screens and even more data (loaded from a JSON file). I did not want to make it more complex because I wanted to keep the tutorial concise. But trust me, you have enough information to finish this prototype yourself. Just start experimenting with it and you'll see: It's so much fun. Codare fericită!