Tutorial Framer: Cum să creați prototipuri interactive uimitoare

Aruncă o privire la exemplele de prototipuri de mai jos. Acestea au fost făcute în Framer. După acest tutorial, veți putea începe să vă creați propriile prototipuri animate uimitoare în cel mai scurt timp.

Framer a apărut cu cea mai nouă versiune în urmă cu o săptămână, iar piața de prototipuri nu va mai fi niciodată aceeași. Instrumentul de prototipare Framer era greu de stăpânit, dar util ca cel mai precis și nelimitat software de prototipare. Acum, lucrurile s-au schimbat. Framer vine acum cu funcții Design + Code + Collaborate, ceea ce înseamnă că vă puteți crea prototipul direct în Framer, dezvoltând un prototip complet funcțional fără niciun software terță parte și fără abilități de codare.

Aici, vă voi învăța cum să utilizați codul Framer simplu, fără a fi necesare cunoștințe prealabile de codare. Veți învăța cum să combinați cele mai bune caracteristici din modul design și cod în Framer pentru a crea prototipuri animate și interactive. Așa că haideți să accesăm acest tutorial și să luăm câteva fragmente de cod mici pentru a vă îmbunătăți prototipurile.

Elementele de bază ale cadrelor

Să începem! Accesați framer.com și descărcați o versiune de probă. Vă oferă două săptămâni din demonstrația lor complet funcțională și, credeți-mă, este suficient timp pentru a afla multe despre acest software de prototipare.

După instalare, poate doriți să parcurgeți câteva dintre exemplele pe care le oferă și să vă jucați puțin cu ele. Când ați terminat, este timpul să începeți să faceți prototipuri.

(În acest tutorial Framer, mă voi concentra pe crearea de prototipuri direct în Framer.js. De asemenea, ar trebui să știți că există și alte modalități de a începe prototiparea în Framer. De exemplu, puteți lucra direct cu fișierele Sketch. Voi acoperi acest flux de lucru în alt articol.)

Noul Framer – Modul Design

În acest articol, vom crea trei prototipuri interesante în câteva minute, cu o utilizare minimă a codului: interacțiuni de bază, componentă de defilare și componentă de pagină

Cea mai nouă versiune de Framer are o nouă caracteristică grozavă: modul design. Vă permite să lucrați aproape în același mod ca și în Sketch sau Figma. Puteți crea straturi vectoriale, puteți importa imagini sau puteți crea și stiliza straturi de text. Toate acestea devin foarte utile atunci când doriți să prototipați rapid fără aplicații terțe.

Să creăm un design de tip aplicație

În prima parte a acestui tutorial, vom pregăti un loc de joacă pentru prototipul nostru Framer. Vom crea un design de tip aplicație, cu trei tipuri diferite de straturi: vector, imagine și text.

Pasul 1: Creați un buton simplu și un fundal.

Pentru a începe designul, selectați prima filă – care este modul design – și adăugați o panou de desen, la fel ca în Sketch. În acest tutorial, vom lucra la un prototip iPhone 7, așa că am ales această presetare ca dimensiune a tablei de desen. Am adăugat și o umplere de fundal albastru.

Apoi, selectați instrumentul dreptunghi și creați o formă sub forma unui simplu buton rotund.

Pasul 2: Adăugați un card cu o imagine.

A doua metodă de a adăuga straturi este funcția de glisare și plasare . Puteți selecta orice fișier imagine de pe computer, îl puteți plasa în Framer și îl puteți modela folosind bara laterală din dreapta. Am folosit o ilustrație simplă și am stilat-o ca o felicitare.

Pasul 3: Adăugați un titlu pentru aplicație.

Framer vă permite, de asemenea, să adăugați un strat de text. Din nou, stilul este practic același ca în orice software grafic. Puteți alege fontul, dimensiunea, alinierea, spațierea dintre litere și multe altele.

Pasul 4: Spune-i lui Framer care straturi sunt interactive.

Mai avem un pas înainte de a începe prototipul Framer. Trebuie doar să îi spunem lui Framer care straturi vor fi interactive. Doar faceți clic pe punctul de lângă numele stratului din interiorul panoului de straturi. Este bine să denumești corect fiecare strat pentru utilizare ulterioară. Mi-am numit straturile card și butonul .

Pasul 5 (Bonus): Definiți-vă culorile globale.

O bună practică este definirea unor variabile pentru întregul prototip. Puteți seta paleta de culori, tipografia și dimensiunile de bază pe care le veți utiliza de la început. Acest lucru ajută la economisirea de timp.

Când vă configurați culorile, numiți-le în editorul de cod și furnizați valori HEX, RGB sau RGBa după semnul „=” corespunzător. Nu uitați să păstrați toate variabilele în partea de sus a codului.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Pasul 6 (Bonus): Adăugarea unei poziții relative.

Cu noul Framer, este foarte ușor să vă mențineți prototipul receptiv. Puteți seta poziții relative din modul de proiectare , așa cum se arată mai jos:

Iată o listă scurtă de proprietăți care sunt utile pentru alinierea și calcularea poziției stratului direct în cod. Puteți face calculele necesare pentru a calcula pozițiile straturilor. Acest lucru devine necesar atunci când adăugați interacțiuni mai târziu și doriți să vă păstrați prototipul receptiv.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Acum sunteți pregătit – Să începem proiectul nostru

Am creat diferite tipuri de straturi Framer. Acum, locul nostru de joacă pentru interacțiune este gata.

In cele din urma! Partea plictisitoare a ajuns la final. Acum este timpul pentru un design de interacțiune.

Descărcați întregul prototip aici.

1. Crearea unei interacțiuni de feedback cu butonul

Pentru a proiecta orice interacțiune, avem nevoie de un declanșator pentru ca aceasta să se întâmple. Poate fi aproape orice: o atingere de ecran, sfârșitul unei animații, sfârșitul încărcării unei imagini sau accelerometrul telefonului.

Pasul 1: Crearea evenimentului pentru interacțiune.

O vom păstra simplă. Să creăm un feedback de buton atunci când îl atingeți, folosind următoarea comandă:

 layerA.onTap (event, layer) ->

Framer tocmai a scris această linie de cod pentru tine. Înseamnă că atunci când atingeți stratul de buton, se va întâmpla ceva.

Pasul 2: Adăugarea de animație la eveniment.

Să începem o animație după acest declanșator. Pentru a face acest lucru, faceți clic pe punctul de lângă stratul de butoane din panoul de straturi, apoi alegeți Adăugare animație . Când adăugați o animație, Framer trece în modul de editare a animației. Puteți scala, muta, roti sau modifica orice parametru al stratului:

Framer a adăugat încă câteva linii de cod. (Nu vă faceți griji - puteți încă să editați animația cu panoul de animație.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

Felicitări! Tocmai ați creat prima interacțiune. Funcționează o singură dată acum, dar vom remedia asta. Motivul pentru care puteți declanșa această animație o singură dată este că nu este nimic setat să se întâmple după ce animația este terminată. Trebuie să resetam toți parametrii după terminarea primei animații la cum erau înainte.

Pasul 3: Resetarea animației.

Adăugați un alt eveniment, aproape așa cum am făcut înainte. Diferența este că căutăm un eveniment când animația se termină:

De data aceasta, codul adăugat de Framer va arăta astfel:

 button.onAnimationEnd (event, layer) ->

Deci, când animația de pe stratul de buton este terminată, putem adăuga următoarea animație care va reseta parametrii stratului de buton :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Asta e! Acum avem feedback de lucru după o apăsare pe butonul nostru.

2. Crearea diferitelor state pentru interacțiunile stratului cardului

Ok, acum știți cum să proiectați o animație și să o declanșați. Mai des, trebuie să proiectați diferite stări ale unui strat. Puteți proiecta mai multe stări ale aceluiași strat modificând doar unii parametri, cum ar fi poziția, dimensiunea sau opacitatea.

Pasul 1: Adăugarea și crearea stărilor pentru un strat de card.

Modul de a adăuga o stare pe card este aproape același cu adăugarea unei animații. Trebuie să faceți clic pe punctul de lângă stratul cardului și apoi să faceți clic pe Adăugare stare . Acum ați sărit în modul de editare a stării. Proiectați-l așa cum doriți:

Vă rugăm să acordați atenție indentării codului. Ar trebui să înceapă de la primul rând.

Am proiectat două stări diferite pentru stratul cardului meu:

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Pasul 2: Adăugarea evenimentelor.

Mai este un singur pas pentru ca acesta să funcționeze. Trebuie să creăm un eveniment pentru schimbarea acestor stări.

 button.onTap -> card.stateCycle()

Acest lucru face este să schimbe toate stările stratului una câte una, de fiecare dată când faci o acțiune. Deci, în cazul nostru, de fiecare dată când atingem stratul de buton , trecem la starea cardului . Dacă doriți să creați mai multe stări și să le declanșați corect, fragmentul de mai jos vă va funcționa mult mai bine:

 button.onTap -> card.stateSwitch("b")

Acest fragment este util atunci când doriți să declanșați o anumită stare a stratului.

Ultima ajustare pe care am făcut-o prototipului meu este o schimbare a vitezei și curbei animației între stări:

 card.animationOptions = curve: Spring time: 0.8 

Există mult mai multe lucruri pe care le poți face cu evenimentele , dar în acest moment, vei putea crea aproape orice interacțiune de bază. Este una dintre cele mai bine scrise documentații pe care le-am văzut vreodată.

Accelerarea activității în Framer: Componente

A sosit timpul să adăugați componente pentru a vă accelera munca. Pentru a profita la maximum de acest tutorial din acest moment, descărcați acest prototip.

1. Prima componentă: derularea

Am modificat un pic prototipul nostru. Acum avem o listă înăuntru, dar înălțimea acesteia este deasupra rezoluției ecranului. Trebuie să creăm derulare pentru a putea vedea întreaga listă în prototip.

Pasul 1: Crearea straturilor și configurarea componentelor.

Să începem prin a crea un strat cu o înălțime mai mare decât ecranul nostru. Marcați acest strat ca interactiv și denumiți-i listă . Apoi treceți la modul cod. Nu vom folosi bara laterală din stânga la îndemână de data aceasta. Să ne configuram întregul ecran pentru a putea fi derulat:

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Acest cod creează o zonă invizibilă cu lățimea și înălțimea dispozitivului curent.

Pasul 2: Spuneți lui Framer ce straturi doriți să derulați.

Nu sa întâmplat nimic încă. Trebuie să îi spunem lui Framer care straturi ar trebui să poată fi derulate. Pentru a face acest lucru, adăugăm stratul nostru de listă la componenta de defilare:

 list.parent = scroll.content

Pasul 3: Blocarea derulării verticale.

Avem voie să defilăm acum, dar se întâmplă în toate direcțiile. Trebuie să blocăm derularea pe o axă verticală:

 scroll.scrollHorizontal = false 

Wow! Ați creat un defilare în interiorul aplicației dvs. cu doar cinci linii de cod simplu.

2. Componenta pagină: trecerea ecranului la ecran

O interacțiune foarte populară pentru comutarea între ecrane este glisarea. Ideea de aici este foarte asemănătoare cu componenta de defilare. Puteți descărca un prototip funcțional aici.

Pasul 1: Configurarea componentei.

În primul rând, trebuie să creăm o „cutie” în editorul de cod unde se va întâmpla magia:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

În acest moment, ar trebui să fii familiarizat cu tot codul de aici. Este doar o simplă setare a componentei și a zonei acesteia. Acum trebuie să creăm niște straturi pentru a glisa.

Pasul 2: Crearea straturilor

Vom folosi primul nostru design de prototip și îl vom modifica puțin. În loc de o imagine de card, de data aceasta am importat două imagini.

La început, trebuie să facem artboard-ul de două ori mai lat. În panoul de proprietăți a planșei de desen, găsiți lățimea și înmulțiți-o cu două (sau adăugați doar *2 ). Așezați cărțile una lângă alta, activează-le cu punctul albastru și denumește-le corect: card1 și card2 .

Pasul 3: Adăugarea de straturi la componenta paginii.

La sfârșitul codului nostru în editorul de cod, trebuie să adăugăm:

 card1.parent = page.content card2.parent = page.content

Asta înseamnă că adăugăm aceste straturi la componentă.

Componenta pagină este acum gata de funcționare!

Cuvântul final

Asta e tot, oameni buni! Sper că ați găsit acest tutorial Framer util pentru a vă începe călătoria cu cel mai puternic instrument de prototipare de pe piață. De asemenea, ar trebui să vă alăturați grupului Framer de pe Facebook. Există o comunitate imensă în jur și sunt de ajutor atunci când începi.

Dacă doriți să aprofundați și mai mult în Framer, încercați să citiți documentația Framer.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator