Cum să creați animații personalizate de încărcare pentru a reduce ratele de respingere

Cunoscută inițial sub numele de throbbber, o animație de încărcare este folosită pentru a indica progresul colectării datelor sau redării interfeței. Deși ați putea odată să folosiți o bară de progres plictisitoare pentru a indica acest lucru, acele zile au trecut.

Astăzi, o animație bine realizată care folosește CSS, jQuery sau GIF-uri animate simple este o oportunitate de a vă anima interfețele și de a adăuga personalitate produsului dumneavoastră.

Animațiile bine gândite vă pot distra pe utilizatori în timp ce așteaptă încărcarea conținutului dvs. O animație bună de încărcare ajută la gestionarea așteptărilor și îmbunătățește experiența utilizatorului prin menținerea interesului.

În acest tutorial, vom folosi Sketch pentru a crea forme de bază și Principle pentru a crea rapid animații simple de încărcare personalizate. (Ambele aceste aplicații sunt pentru Mac.) Veți învăța cum să creați animațiile colorate de încărcare folosite de Trello, Flickr, Slack și multe altele.

Să ajungem la asta.

Slack Loading Animation

Pe Sketch, trasează patru pătrate rotunjite cu laturi de 50 px sau o rază de 100 px fiecare. Ar trebui să arate ca niște cercuri perfecte, dar folosim pătrate cu colțuri rotunjite pentru a crea efectul de întindere a liniilor în animație.

Așezați cele patru forme în așa fel încât să creați un pătrat imaginar cu 150px de spațiu între fiecare latură. Aplicați patru culori diferite (#35BA90 verde, #69CADD albastru, #EBA900 galben și #E20661 roz).

Importați formele în Principle, grupați-le și faceți clic pe „Creați componentă” pentru a imbrica grupul.

Intrați în grupul imbricat și rotiți tabloul de desen cu 15 grade. Apoi selectați fiecare cerc individual și rotiți-l înapoi în poziția inițială (înapoi cu 15 grade). Acest lucru creează efectul de întindere într-o linie dreaptă.

Aplicați un declanșator „Automat” pe planșa de desen, apoi întindeți fiecare dreptunghi rotunjit pe partea opusă a planului de lucru la o lungime de 295 px. Oferiți o opacitate de 75% fiecărei forme de pe ambele planșe.

Aplicați un alt declanșator „Automat” pe cea de-a doua planșă de desen. Pe noua planșă de desen, reduceți fiecare linie la lățimea inițială de 50 px, dar pe partea opusă față de poziția inițială.

Conectați ultima planșă de desen la prima cu un declanșator „Automat”. Faceți clic pe butonul „Înapoi la părinte” pentru a previzualiza rezultatul final.

Sfat: când accesați „Înapoi la părinte”, puteți roti grupul principal cu -30 de grade pentru a arăta mai mult ca Slack. De asemenea, puteți modifica ritmul de animație în interiorul panoului „Animare” și să aplicați un efect „Ușurează ambele” pentru a netezi tranzițiile.

Trello se încarcă animație

Folosind Sketch, trasează un pătrat albastru de 100 px. Desenați un dreptunghi alb de 60 px lățime pe 140 px înălțime. Aliniați-l cu partea din stânga sus a pătratului anterior cu o margine de sus și stânga de 30 px. Duplicați acel dreptunghi alb, aliniați-l la dreapta pătratului cu o marjă dreaptă de 30 px și reduceți-i înălțimea la 70 px.

Importați tabloul de desen în Principle și aplicați declanșatorul „Automat” pentru a crea un nou cadru cheie. Pe noua panou de artă, inversați înălțimile dreptunghiurilor albe (faceți dreptunghiul din stânga la 70 px înălțime și dreptunghiul drept 140 px). Aplicați un efect „Ease-Both” în panoul „Animate” pentru a netezi tranziția.

Cercul de rulare

Trasează un cerc pe Sketch. Aplicați un chenar de 10 px cu valorile „Dash” și „Gap” și fără umplere. Utilizați o culoare „Gradient unghiular” pentru chenar, care va accentua efectul de rotație pe care îl veți crea mai târziu.

Deschideți un nou fișier Principle și utilizați butonul „Importați” pentru a transfera cercul din Sketch. Aplicați două declanșatoare „Auto” la rând.

Pentru a crea efectul de rotație, selectați cercul din panoul de desen din mijloc și modificați valoarea „Unghiului” la 360 de grade. Apoi selectați cel de-al treilea cerc și dați-i un nume diferit (adică, „copiere”) în interiorul panoului din stânga. Acest lucru va simula rotația infinită.

În cele din urmă, legați înapoi a treia planșă de artă la cea inițială cu un alt declanșator „Automat”. Aplicați o tranziție „liniară” la cronologia dintre planurile de desen 1 și 2. Verificați animația pe care tocmai ați creat-o în fereastra de previzualizare.

Flickr se încarcă animație

Trasează unul lângă altul un cerc albastru și un cerc roz. Importați-le în Principle și aplicați un declanșator „Automat” pentru a crea o nouă planșă de desen.

Inversați pozițiile cercurilor și aplicați un nou declanșator „Automat” pentru a crea o a treia planșă de desen. Pe acea nouă planșă, inversați ordinea stratului cercurilor din panoul din stânga.

Aplicați un al treilea declanșator „Automat” pentru a crea o a patra planșă de desen. Pe ultima planșă, inversează încă o dată poziția cercurilor și aplică un ultim declanșator „Automat” de la ultima planșă înapoi la cea inițială.

Tip de încărcare

Creați un nou proiect pe Principiu și, folosind instrumentul Text, scrieți „ÎNCĂRCARE”. Aliniați textul la stânga și centrați-l vertical în tabloul de desen.

Aplicați un declanșator „Automat” de cinci ori la rând. Reveniți la cel de-al cincilea declanșator de la ultima buclă a planșei de grafică la tabloul de grafic inițial.

Pornind de la tabloul de desen inițial și deplasându-vă spre dreapta, editați textul de pe fiecare planșă pentru a adăuga zero, una, două, trei, două și, respectiv, o perioadă lângă textul original „ÎNCĂRCARE”. Progresia tablourilor de artă ar trebui să arate cam așa:

ÎNCĂRCARE ÎNCĂRCARE. ÎNCĂRCARE.. ÎNCĂRCARE… ÎNCĂRCARE.. ÎNCĂRCARE.

Acum puteți previzualiza animația pe care tocmai ați creat-o.

Puncte Pulsante

Trasează un punct de 60 px. Copiați și lipiți încă un punct și plasați-l la 60 de pixeli la dreapta. Asigurați-vă că ambele puncte, inclusiv decalajul de 60 de pixeli, sunt perfect centrate în tabloul de desen.

Aplicați un declanșator „Automat” de patru ori la rând.

Pe a doua planșă de desen, reduceți al doilea punct la 30 px.

Pe cea de-a treia planșă, reduceți al doilea punct la 0px și primul la 30px.

Pe a patra planșă, scalați al doilea punct înapoi până la 30 px și reduceți primul punct la 0 px.

Pe cea de-a cincea planșă de desen, scalați primul punct la 30 px și conectați tabloul de desen înapoi la prima placă cu un declanșator „Automat”.

Puncte rulante

Puneți cinci puncte în aranjamentul pe care l-ați găsi pe o matriță cu șase fețe. Importați planșa în Principle și centrați-o.

Aplicați un declanșator „Automat” pe tabloul de desen.

Pe noua planșă de desen, rotiți grupul de puncte cu 360 de grade.

Conectați a doua planșă de desen la prima cu un declanșator „Automat”.

Cercul pulsatoriu

Începeți cu un cerc de 50 px aliniat la centru într-un cerc de 150 px care are un chenar de 5 px, dar fără umplere.

Aplicați un declanșator „Automat” de trei ori la rând.

Pe prima planșă de desen, scalați cercul liniei până la 50 px și cercul interior până la 10 px.

Pe cea de-a treia planșă de desen, scalați cercul liniei până la 200 px și acordați-i opacitate 0%. Scalați cercul interior până la 150 px și acordați-i o opacitate de 50%.

Pe ultima planșă de desen, scalați cercul interior până la 200 px și acordați-i opacitate 0%. Scalați cercul liniei la 50 px și acordați-i o opacitate de 25%.

Aplicați un declanșator „Automat” ultimei planșe. Reduceți cercul interior la 10px cu 50% opacitate.

Conectați ultima planșă de desen la prima cu un declanșator „Automat”.

Puncte săritoare

Aliniați trei cercuri perfecte de 50 px înălțime cu o distanță de 50 px între ele.

Aplicați un declanșator „Automat”. Pe a doua planșă de desen, mutați primul cerc în sus cu 50 px.

Aplicați un declanșator „Automat” pe a doua placă. Pe a treia planșă de desen, selectați primele două cercuri și mutați-le în sus cu 50 de pixeli. Cele trei cercuri ar trebui să se afle pe o linie diagonală.

Aplicați un declanșator „Automat” pe a treia placă. Pe cea de-a patra planșă, deplasați primul cerc în jos cu 50 de pixeli. Selectați ultimele două cercuri și mutați-le în sus cu 50 de pixeli.

Aplicați un declanșator „Automat” pe a patra placă. Pe cea de-a cincea planșă, mutați primele două cercuri cu 50 de pixeli în jos. Selectați ultimul cerc și mutați-l în sus cu 50 de pixeli.

Aplicați un declanșator „Automat” pe placa a cincea. Pe a șasea planșă de desen, mutați ultimele două cercuri în jos cu 50 de pixeli.

În cele din urmă, întoarceți-vă la prima planșă de desen, mutați primul punct cu 50 de pixeli în sus și conectați ultima planșă de grafică la prima cu un declanșator „Automat”. Puteți previzualiza rezultatul final.

Încărcător clasic

Trasează un cerc în Sketch și dă-i un chenar gri de 20 px fără umplere.

Lipiți o copie a aceluiași cerc deasupra acestuia și schimbați umplerea copiei la o culoare diferită. Pentru acest exemplu, vom folosi albastru.

Trasează un pătrat care se suprapune cu un sfert din cercul albastru. Mutați stratul dreptunghi sub cel cerc și aplicați „Mască” la stratul dreptunghi.

Treceți la Principiu și importați opera de artă Schiță cu butonul „Importați”.

Aplicați un declanșator „Automat” pe prima planșă și rotiți cercul albastru la 360 de grade.

Aplicați un al doilea declanșator „Automat” pe cea de-a doua planșă de desen. Redenumiți al treilea strat de cerc generat pentru a „copia” și conectați-l înapoi la prima planșă cu un declanșator „Automat”.

Concluzie

Odată ce ați exersat să creați câteva dintre aceste animații de încărcare testate și adevărate, ar trebui să vă simțiți încrezători în abilitățile dvs. de a crea o animație unică pentru propriile aplicații, folosind abilitățile învățate aici.

Cu puțină imaginație și instrumentele la îndemână găsite în Sketch and Principle, puteți crea o animație unică de încărcare care se potrivește cu designul aplicației dvs. în câteva minute. Utilizatorii dvs. vor aprecia aspectul profesional și indicatorul prietenos că aplicația dvs. lucrează din greu.

• • •

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