Tutorial Framer: 7 microinteracțiuni simple pentru a vă îmbunătăți prototipurile

Bun venit la a doua parte a seriei noastre de tutoriale Framer. În ultimul articol, am învățat despre elementele de bază ale utilizării Framer în modul Design, precum și despre cum să scriem un cod simplu pentru a face ca design-urile noastre să prindă viață. În această piesă, ne vom concentra pe utilizarea Framer pentru a crea microinteracțiuni și tranziții animate. Vom explica cum să creați șapte interacțiuni utile pentru prototipurile dvs.

De ce ar trebui să prototipați interacțiuni mici?

Mișcarea lină, schimbările de stare și tranzițiile subtile ajută un utilizator să înțeleagă cum să folosească interfața, oferindu-i feedback cu privire la anumite acțiuni. Adesea, aceste tranziții vor ecou analogii din lumea reală (cum ar fi glisarea unui comutator de comandă) sau vor utiliza modele comune de interacțiune cu dispozitivul (cum ar fi atingerea pentru extindere). În acest tutorial, ne vom concentra pe interacțiunile care adaugă o notă finală interfeței pentru a ghida înțelegerea și a stârni bucuria utilizatorului.

Aruncă o privire la exemplele de mai jos. Designerii din întreaga lume creează aceste microinteracțiuni în diferite produse.

Cele 7 prototipuri

În acest tutorial, vă voi oferi o prezentare generală a fiecărei microinteracțiuni și câteva fragmente de cod. Vom folosi mai multe tehnici diferite, astfel încât să o puteți alege pe cea care se potrivește cel mai bine produsului dumneavoastră. Nu există o modalitate „corectă” de a crea ceva în cadrul Framer Studio - așa cum am menționat în articolul meu anterior, Framer vă oferă multă libertate de a crea așa cum doriți.

Ați mai văzut astfel de interacțiuni? Sigur, ai! Le vezi în fiecare zi pe smartphone-ul tău. Este timpul să-ți creezi propriul tău.

1. Buton de acțiune

Butonul de acțiune reprezintă adesea acțiunea principală a ecranului curent. Uneori conține mai multe acțiuni în interior. Vom crea o interacțiune pentru al doilea caz. Descărcați prototipul de lucru aici: https://framer.cloud/ShBnH

Pasul 1: Creați trei butoane în formă de cerc

Pentru a începe, creați un buton principal în formă de cerc cu o pictogramă în interior și două butoane mai mici plasate sub butonul principal. Nu uitați să marcați toate aceste straturi ca interactive în modul de proiectare (cu indicatorul țintă).

Pasul 2: Proiectați două stări pentru toate straturile

Creați două stări diferite pentru straturi. Utilizați codul de mai jos pentru a face ca butoanele mai mici să se miște deasupra celui principal și pentru a roti pictograma la 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Pasul 3: Adăugați un eveniment

Pentru a face acest prototip animat, trebuie să adăugăm un eveniment. După ce atingeți butonul de acțiune, schimbați stările tuturor straturilor:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Pasul 4: Animație de primăvară

În acest moment, animația pare foarte mecanică. Pentru a adăuga o notă umană, vom adăuga o animație de primăvară pentru toate straturile:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Butonul de acțiune este gata de funcționare!

2. Comutatoare interactive

Pașii de mai jos vă vor permite să vă creați propria interacțiune cu comutatorul. Descărcați prototipul de lucru aici: https://framer.cloud/ieypV

Pasul 1: Proiectați un loc de joacă cu comutare

Veți avea nevoie doar de două lucruri: comutatorul în sine, care conține cel puțin două straturi (fond și punct) și câteva straturi de animat după folosirea comutatorului.

Pasul 2: Creați stări

Vă amintiți din primul articol cum să proiectați stări direct în Framer Studio? Proiectați-vă stările cum doriți sau utilizați setările mele:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Pasul 3: Adăugați un eveniment

Pentru ca prototipul să funcționeze, trebuie să adăugăm un eveniment la comutator. După ce atingem comutatorul, vom schimba starea tuturor straturilor:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Pasul 4: Reglați sincronizarea

Pentru a face totul mai natural, ajustați timpul și întârzierea tuturor stărilor:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Acum prototipul nostru este gata!

3. Acțiunea de glisare a elementului din listă

Aceasta este o interacțiune tipică pentru eliminarea, arhivarea sau salvarea elementelor dintr-o listă. Glisați la stânga sau la dreapta și un element va fi șters. Descărcați prototipul aici: https://framer.cloud/rzMWP

Pasul 1: Creați un prototip în modul Design

Puteți folosi propriul design, dacă doriți. Trebuie doar să păstrați aceeași structură a straturilor. După cum puteți vedea în imaginea de mai sus, toate elementele din listă au un buton „Anulați” sub ele.

Pasul 2: faceți elementele trasabile

Pentru a rămâne simplu, vom crea o interacțiune numai pentru primul element din listă. În primul rând, faceți elementul din listă draggable: item.draggable = true .

Apoi blocați axa verticală: item.draggable.vertical = false .

Configurați constrângerile zonei draggable: item.draggable.constraints

Și în cele din urmă setați dimensiunea la dimensiunea articolului: size: item .

Așa arată întregul cod:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Acum puteți glisa la stânga și la dreapta, iar articolul va reveni întotdeauna la poziția inițială.

Pasul 3: Creați starea

Apoi, creați starea pentru elementul din listă când este eliminat. Pur și simplu l-am mutat în afara ecranului folosind axa x.

 item.states.a = x: -360

Pasul 4: Schimbați starea după glisare

În cele din urmă, trebuie să creăm un declanșator pentru a începe interacțiunea. Când tragem elementul în partea stângă a ecranului, acesta ar trebui să fie eliminat. Codul va arăta astfel:

 item.onMove -> if item.x < -70 item.stateCycle("a")

În acest caz, folosim o declarație „dacă”. Codul de mai sus spune practic, atunci când mutăm stratul elementului cu mai mult de 70 px, apoi schimbăm starea articolului în starea „a”. Puteți citi despre declarațiile if în documentația Framer Studio: https://framer.com/getstarted/programming/#conditional

Pasul 5: Anulați acțiunea după atingere

Aproape am terminat cu această interacțiune. Singurul lucru rămas este să anulați această acțiune:

 item_bg.onTap -> item.stateCycle("default")

Ar trebui să fiți familiarizați cu acest cod din tutorialul anterior.

Pasul 6 (opțional): Ajustați sincronizarea animației

Dacă doriți, puteți ajusta sincronizarea animației:

 item.animationOptions = time: 0.75 curve: Spring

4. Buton loader

Aceasta este o interacțiune foarte utilă pentru acțiunile care necesită încărcare sau timpi de așteptare pentru utilizator. Când creăm această interacțiune, veți învăța cum să gestionați multe animații care au loc una câte una. Descărcați prototipul aici: https://framer.cloud/FxmHN

Pasul 1: Creați un prototip în modul Design

Creați un buton simplu cu patru substraturi: o bară de progres și trei pictograme pentru diferite stări. Mi-am proiectat butonul cu o pictogramă de încărcare vizibilă, o bară de progres în partea de jos cu o lățime de 0 și încă două pictograme ascunse.

Pasul 2: Adăugați un eveniment

Întregul prototip poate fi realizat fără a scrie o singură linie de cod, doar folosind funcțiile de codare automată ale Framer.

Mai întâi, adăugați un eveniment. Vom declanșa întreaga interacțiune cu o atingere pe stratul de butoane:

Acesta este codul pe care Framer l-a scris pentru tine:

 button.onTap (event, layer) ->

Pasul 3: Proiectați animații

Vom folosi funcțiile de codare automată ale Framer pentru a proiecta toate animațiile:

Am conceput patru animații cu sincronizare diferită:

• Prima animație este modificarea lățimii barei de progres.
• Al doilea este ascunderea pictogramei de încărcare cu opacitate.
• Al treilea se rotește și arată pictograma încărcător.
• Ultima afișează și scalează pictograma de verificare.

Iată codul pe care Framer l-a scris pentru fiecare dintre aceste animații:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Pasul 4: Resetați animația de încărcare

După cum probabil ați observat, nu am ascuns pictograma de încărcare după terminarea animației. Pentru a finaliza acest prototip, declanșați o altă animație folosind acest eveniment: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Trageți pentru a reîmprospăta

Aproape fiecare produs cu o listă în interior folosește acest tip de interacțiune. Utilizatorul trage în jos întreaga listă pentru a o reîmprospăta. Este foarte ușor de creat. Descărcați prototipul de aici: https://framer.cloud/DgMDw

Pasul 1: Creați o listă simplă cu pictograma de reîmprospătare

Putem sări direct în modul design. Avem nevoie de două lucruri: o listă și o pictogramă de reîmprospătare. Lucrul crucial aici este să ascundem pictograma de reîmprospătare cu opacitate și să o punem pe lista noastră:

Pasul 2: Creați o componentă de defilare

Vrem să facem lista noastră derulabilă. Pentru a face acest lucru, utilizați o componentă de defilare și adăugați-i un strat de listă:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Pasul 3: Faceți vizibilă pictograma de reîmprospătare

Creați o stare simplă pentru pictogramă:

 icon.states.a = opacity: 1

Pasul 4: Adăugați un eveniment după ce trageți în jos

Lista noastră poate fi derulată chiar acum. Asta înseamnă că atunci când derulăm în sus sau în jos, întregul conținut al defilării se mișcă pe axa „y”. Cu aceste cunoștințe, putem crea un eveniment:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Din nou, folosim o declarație „dacă”. Dacă lista este trasă în jos (mutată pe axa y) mai mult de 180 px, vom declanșa o acțiune. În acest caz, vom anima două straturi: lista și pictograma de reîmprospătare.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Folosim „animare” pentru a muta lista în jos cu 210 px și pentru a roti pictograma de reîmprospătare la 360°.

Pasul 5: Resetați toate stările

Prototipul este aproape de lucru, dar trebuie să resetam toate straturile după animația de reîmprospătare. Pentru a face acest lucru, vom folosi un eveniment după terminarea animației:

 icon.onAnimationEnd ->

Animam rotația pictogramei de reîmprospătare înapoi la poziția inițială și, folosind ciclul de stare, resetăm lista și starea de fundal a pictogramei:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

Asta e!

6. Tragerea interacțiunii

Ați observat vreodată că, în timp ce trageți un element într-o aplicație, întotdeauna se întâmplă ceva cu elementul în sine? Uneori, elementul se micșorează, poate alte elemente sunt neclare sau opacitatea se modifică. Să învățăm cum să creăm acest tip de interacțiune. Descărcați prototipul de lucru aici: https://framer.cloud/YstiW

Pasul 1: Proiectați o grilă simplă cu plăci

Creați o grilă de plăci și asigurați-vă că acestea sunt în interiorul elementului părinte.

Pasul 2: Folosiți bucla „for” pentru a viza toate piesele

„ for loop” poate suna înfricoșător, dar este foarte simplu. Dacă nu sunteți familiarizat cu buclele for , puteți citi mai întâi un pic de fundal: https://framer.com/getstarted/programming/#loops-and-arrays

Vom folosi bucla for pentru a viza toate plăcile din interiorul grilei noastre:

 for item in grid.subLayers

Cu această linie simplă de cod, ați vizat toate straturile din interiorul stratului grilă.

Pasul 3: Faceți plăcile trasabile

Faceți ca fiecare element din grilă să fie trasabil:

 for item in grid.subLayers item.draggable = true

Pasul 4: Proiectați o stare de glisare

Toate elementele ar trebui să aibă o stare în timp ce sunt trase. Trebuie să începeți de la cod, dar mai târziu veți putea edita această stare în Editorul de straturi:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Pasul 5: Trageți evenimente

Trebuie să creăm evenimente pentru a declanșa stări diferite în timp ce elementul este tras. Primul eveniment va declanșa o acțiune în timp ce începem să tragem:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Am folosit this.bringToFront() pentru a mă asigura că elementul este întotdeauna deasupra celorlalte straturi.

Al doilea declanșator va reseta starea articolului:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

În acest moment, avem un prototip funcțional.

Pasul 6 (opțional): Joacă cu sincronizarea

Interacțiunea are loc întotdeauna de-a lungul unei linii temporale. Este bine să ajustați cronologia pentru a obține un efect perfect:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Mai multe butoane „like” (avansate)

În acest prototip, vom folosi tehnici mai avansate pentru a vă arăta o modalitate diferită de direcționare a straturilor în Framer Studio, care va crea interacțiuni mai receptive cu mai puțin timp. Dacă nu sunteți familiarizat cu codarea de bază, vă încurajez să citiți mai întâi acest articol: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Pentru această interacțiune, vom sări peste partea de design și vom folosi un prototip pe care l-am creat special pentru acest articol: https://framer.cloud/SZMCH

Pasul 1: Creați matrice

Aruncă o privire asupra structurii straturilor din Framer Studio:

Avem un „buton” în interiorul unui „rând” în grupul „listă”. Vom crea o interacțiune pe straturile butoanelor, așa că trebuie să le vizam. Dar mai întâi, trebuie să găsim toate straturile de rând și să le punem într-o matrice:

 rows = list.children buttons = []

De asemenea, am creat o matrice goală pentru toate straturile „buton”: buttons = [] .

Pasul 2: Adăugați un substrat la matrice

Să începem de la „bucla for”:

 for i in rows buttons.push(i.children[0])

Pentru a adăuga straturi în matrice, vom folosi: buttons.push() . Aceasta înseamnă că plasăm primul strat al fiecărui grup de „rânduri” într-o matrice.

Pasul 3: Creați stare și eveniment

Acum vom crea o stare pentru butoanele noastre „like” și le vom adăuga un eveniment în timp ce atingem:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Puteți folosi această tehnică pentru a recrea toate prototipurile anterioare și a le face mai complexe.

Notă finală

Când creați microinteracțiuni, vă concentrați pe cele mai mici detalii. Puteți crea animații declanșate de orice tip de acțiune și le puteți face absolut perfecte. Rețineți că există sute de moduri de a crea același prototip și ar trebui să utilizați metoda care se potrivește abilităților dvs. și nevoilor modelelor dvs. de produs.

• • •

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