Folosiți Framer X pentru a construi prototipuri interactive

Ca designeri, există întotdeauna problema instrumentelor de prototipare pe care ar trebui să le utilizați pentru proiectul dvs. Există o mulțime de software acolo pentru sarcini precum Wireframing (vezi partea de sus Instrumente de sârmă și excelent Constructori de site-uri web ), prototipuri și construirea interacțiunilor complexe; Cu toate acestea, foarte puține instrumente sunt capabile să se ocupe de toate acestea. Framer este un instrument care are toate aceste funcții și accelerează foarte mult procesul de a crea animații și interacțiuni mici.

Ultima iterație, Framer X. , utilizează acum reacția și JavaScript în loc de a utiliza Coffeescript pentru dezvoltarea micro-interacțiunilor și animației. Acest lucru ajută la obținerea unor perioade de încărcare mai rapide și o performanță mai bună. În plus, utilizarea componentelor reacționate înseamnă că utilizatorii au mai multe scopuri de a adăuga și extinde includerea ambalificării playerelor media, a datelor în timp real și a graficelor din prototipurile din interiorul prototipurilor.

Testarea este o parte esențială a procesului de construcție a prototipului și, în timp ce Framer X este excelent la crearea de prototipuri interactive pe care le are nevoie pentru a vedea cât de bune sunt creațiile sale. Verificați-vă Testarea utilizatorului post pentru unele dintre cele mai bune instrumente pentru a completa Framer și pentru a ajuta la construirea prototipurilor din lumea reală și asigurați-vă că utilizați cele mai bune web hosting Serviciu pentru tine.

Cum se creează o aplicație cu framer x

Pentru a aprecia pe deplin puterea Framerului X vom crea un proiect real-viață: o aplicație simplă de rețetă de gătit cu un anumit conținut și media (active care sunt susținute în fiabile Stocare in cloud ). Primul lucru pe care trebuie să-l construiești este pagina de pornire. Vom păstra lucrurile simple cu următoarele elemente:

• Bara de căutare standard pentru a găsi rețete
• Activitate recentă pentru a afișa cele mai recente rețete vizualizate
• Carduri de rețete care arată lucruri precum cele mai populare rețete
• Crearea unei vizualizări detaliate a rețetei cu opțiuni video și partajare

Pentru a începe, trebuie să creați un cadru nou (o placă de artă) făcând clic pe pictograma + din partea stângă NAVBAR. Selectați orice stil de tablă dintr-o listă de șabloane standard iPhone / Android din bara dreaptă. Acum sunteți gata să plecați.

01. Construiți o bară de căutare

Să începem prin construirea barei de căutare. În loc să creați un dreptunghi și adăugarea unei pictograme de căutare, cum ar fi în mod normal, putem folosi de fapt componente reutilizabile rapide în Framer X, acestea se numesc pachete. Există mii de pachete care pot fi găsite în bara de navigare din stânga în magazin. Faceți clic pe magazin, căutați kitul Android și setul de exemplu și apoi le instalați.

Aceste pachete conțin elemente cum ar fi carduri, butoane, tastaturi, glisoare, intrări și elemente de meniu de navigație. Odată ce ați instalat aceste pachete, puteți utiliza elementele din meniul componentelor din stânga.

Găsiți elementele pe care le doriți prin căutarea în filtru - în acest caz o bară de căutare, care se găsește sub setul de exemplu. Pur și simplu trageți-l pe cadru. Acum puteți modifica proprietățile, cum ar fi textul deținătorului, dimensiunea fontului și culoarea folosind bara dreaptă.

02. Creați un stivă de conținut

Pentru acest bloc recent de activitate, adăugați mai întâi textul "Activitatea recentă", care este destul de simplă. Acum putem folosi o nouă caracteristică a lui Framer X numite stive. Acest lucru se poate face făcând clic pe pictograma + și selectând Stack S din meniu. După selectarea stivei, trageți și plasați o suprafață de 600 x 300 pe cadrul de lucru pentru a crea un stack. Acest stivă va fi afișat ca albastru.

Acum, haideți să revenim la secțiunea componente și sub setul Android, să căutați elementul card-5 și să-l trageți în stivă pe care tocmai l-am creat. Duplicați aceste carduri de două ori și asigurați-vă că toate cele trei cărți sunt în stivă.

Atâta timp cât se află în stivă, aceste trei cărți pot fi ușor rearanjate fără să vă faceți griji cu privire la distanța. Dacă doriți să măriți distanța dintre carduri, puteți crește lățimea întregului teanc. Este la fel de simplu ca asta. De asemenea, puteți personaliza aceste carduri schimbând numele titlului și fundalului în funcție de preferințele dvs.

Acum că am creat un stack, să facem să-l scopi. Deplasați-l din cadru / tablă. Faceți clic pe pictograma + din partea stângă NAV și faceți clic pe opțiunea de defilare. Așa cum am creat o zonă cu stiva, creați o zonă scrollabilă pe cadru / tablă, care are aceeași dimensiune ca stiva.

Acum schimbați proprietatea derulare în bara dreaptă schimbând săgețile de direcție pentru a face o derulare orizontală. După crearea containerului nostru de defilare avem nevoie de conținut pentru el, care este servit de stackul pe care l-am creat anterior. Deci, pur și simplu conectați recipientul de defilare la stivă utilizând indicatorul săgeată de pe recipientul de defilare. Funcționează prin tragerea indicatorului mouse-ului la stivă.

03. Creați un stivă verticală

Pentru cardurile de rețetă, trebuie să urmați o metodă similară cu pasul 2, dar în loc să creați o derulare orizontală de carduri, veți crea o verticală similară, care este în esență o listă a celor mai populare rețete cu miniaturi. Pentru acest exercițiu, fiecare carte pentru o rețetă are patru elemente - o imagine thumbnail, rating, numele retetei și timpul necesar pentru pregătirea acestuia.

Nu vă faceți griji cu privire la detaliile fiecărei cărți. Ele pot fi personalizate pe baza gustului dvs. de design. Urmați aceeași metodă de utilizare a unei cărți din componente, duplicându-le și adăugați toate la o stivă cu parcurgere verticală.

04. Creați o pagină nouă

Acum, să creăm o pagină nouă pentru a intra în detaliile unei anumite rețete. De exemplu, să luăm cazul celui de-al doilea card aici: Paste franceză. Pentru a crea această nouă pagină, creați un nou cadru / tablă de artă și introduceți elementele de care avem nevoie pentru a afișa mai multe detalii despre rețeta franceză de paste. Această pagină nouă poate fi defalcată într-un videoclip, un titlu, ratingul, timpul necesar pentru a face acest lucru și câteva butoane de acțiune, cum ar fi salvarea în listă și partajați la social media.

Pentru a adăuga video, mergeți la magazin și instalați pachetul YouTube, care vă permite să adăugați fără efort videoclipuri la prototipul dvs. Acum mergeți la panoul dvs. de componente și trageți și plasați elementul YouTube de sub componenta YouTube în cadru.

Reglați lățimea miniaturii, astfel încât să se potrivească lățimii cadrului. În panoul de proprietăți potrivite, puteți introduce adresa URL a videoclipului pe care doriți să îl jucați în prototip. Dacă doriți, există, de asemenea, o modalitate de a reda videoclipuri prin caseta de selectare din panoul Proprietăți.

Sub acest videoclip, puteți adăuga titlul, evaluarea și diferite icoane. Pentru a adăuga pictograme pentru exemplul nostru, am folosit componenta de la magazinul generatoare de pictograme. Este un proces ușor: pur și simplu trageți pictograma de bază pe cadru și apoi modificați proprietatea numită pictogramă pe panoul din dreapta în "Inima" și "Share". Aceasta va schimba pictogramele de bază în pictogramele de salvare și partajare. Culorile lor pot fi, de asemenea, ușor de schimbat folosind panoul din dreapta.

Pentru a face lucrurile ușor pentru vizitatori, ați putea adăuga o secțiune numită ingrediente, care ar lista toate ingredientele necesare pentru rețeta noastră - în acest caz, pastele franceze.

05. Introduceți interacțiunile

Acum, să facem designul nostru mai angajat prin adăugarea de interacțiuni pentru un buton. În mod ideal, când faceți clic pe pictograma Share, trebuie să vi se solicite un ecran pentru a partaja rețeta pe diverse canale media sociale. Să construim că folosind un cadru nou.

Asigurați-vă că lățimea și înălțimea acestui cadru este aceeași lățime și înălțime ca celelalte două cadre pe care le-am creat. Ideea este pentru acest nou ecran de acțiuni pentru a aluneca și a înlocui ecranul actual atunci când este apăsată pictograma de partajare.

Pentru a vă ajuta să distingeți ecranul, să adăugăm o anumită culoare și să o umplem cu icoane media sociale, cum ar fi Facebook, Instagram, Whatsapp și e-mail. Acest ecran de partajare ar trebui, de asemenea, să aibă o pictogramă x adăugată la aceasta, ceea ce a făcut clic pe l-ar aduce înapoi la starea inițială.

Asigurați-vă că toate pictogramele sunt aranjate în interiorul unui stack. De îndată ce este inclusă pictograma x, următorul pas este să conectați acest cadru astfel încât să apară când faceți clic pe pictograma Share.

Pentru a face acest lucru, selectați cadrul care conține pictograma Share. În panoul din dreapta, există o proprietate numită legătură. Odată ce faceți clic pe acest lucru, interfața aplicației vă va oferi o săgeată pe care o puteți trage la noul cadru de acțiuni pe care l-am creat. Acest lucru va crea o legătură în fundal.

Acum, când selectați pictograma Share, veți observa noi proprietăți în panoul din dreapta sub link, care sunt țintă, tranziție și direcție. Fiecare dintre aceste proprietăți vă permite să schimbați elementele, cum ar fi tipul de tranziții și direcția în care ecranul ar trebui să pop, etc.

Puteți testa dacă prototipul funcționează sau nu făcând clic pe pictograma de redare găsită în colțul din dreapta sus al interfeței. În mod similar, trebuie să conectați ecranul de acțiuni la ecranul video, astfel încât atunci când utilizatorul face clic pe pictograma x, acesta revine la ecranul anterior.

Acest lucru poate fi realizat utilizând o proprietate de legătură similară și adăugarea țintei ca ecran video. Dacă doriți să aveți un acces la adăugarea unui pic de variație, puteți face direcția rămasă în loc de sus și apoi utilizați comanda de redare pentru a testa dacă interacțiunea funcționează sau nu.

06. Adăugați un buton de salvare

Acum, să adăugăm o interacțiune suprapusă la pictograma de salvare. Aici, obiectivul nostru este că ori de câte ori un vizitator dă clic pe pictograma în formă de inimă, ar trebui să existe o fereastră pop-up care întreabă dacă doriți să salvați rețeta la o listă personalizată.

Să începem prin crearea unui nou cadru numit liste salvate. Așa cum ați făcut cu cea precedentă, asigurați-vă că acest cadru are aceeași lățime, dar de data aceasta trebuie să vă reduceți înălțimea, deoarece va apărea ca o suprapunere când este făcută. Pentru stilul cadrului salvat, adăugați un antet, o introducere a textului pentru a introduce numele listei și a unui buton care este un CTA pentru salvarea acestuia.

Pentru a conecta, selectați pictograma în formă de inimă din cadrul videoclipului și adăugați un link către cadrul listelor salvate. Acum, în loc de proprietatea de tranziție fiind o împingere, faceți o suprapunere. Reglați-l la 80% și apoi încercați-l folosind butonul de redare. Modificați până când sunteți mulțumit de suprapunere. Conectați pictograma x de pe pictograma listelor salvate înapoi la pagina video.

Acesta este modul de utilizare a framerului X pentru a crea cu ușurință prototipuri interactive actionabile. Există, de asemenea, instrumente avansate pe care le puteți utiliza, precum și adăugarea de fragmente de codare reacționează la elementele cadrelor. De asemenea, cea mai bună parte a lui Framer X este că oricine îl poate stăpâni încercând cu câteva prototipuri.

Acest articol a fost publicat inițial în numărul 325 de net, cea mai bună revistă din lume pentru designeri de web și dezvoltatori. Cumpăra problema 325. sau Abonati-va la net.

Alăturați-vă în aprilie 2020 cu ajutorul superstarurilor JavaScript la Generatejs - conferința care vă ajută să construiți mai bine JavaScript. Rezervați acum la geneterconf.com.

Citeste mai mult:

• Cum să ieșiți și să vă angajați ca un designer UX
• Cele 20 de sfaturi UX trebuie să știi
• 22 cele mai bune instrumente de design UI