Cum să utilizați Motion Design pentru a face experiența aplicației interesantă?

Cu doar câțiva ani în urmă, toate formele de mișcare și animație au fost asociate cu definirea unei interfețe de utilizare proaste a site-ului. Vă amintiți site-urile de reclame pentru bătrânețe care afișau oferte în bile circulare care sări dintr-un colț al ecranului în altul? Cazul mișcării în web design a fost un caz trist.

Dar, de la apariția aplicațiilor mobile, scenariul s-a schimbat atât de mult încât designul în mișcare a UI a devenit acum o tendință populară de design.

O interfață modernă nu mai este despre elemente statice. Cu UI motion design, mărcile acoperă acum golul dintre software și nevoia primordială umană de varietate și conexiune.

„Cel mai intuitiv și mai plăcut element al serviciilor de aplicații web și mobile este cel care implică Motion Design.”

Încorporat în diferite etape de călătorie a aplicației mobile, designul de mișcare pentru aplicații nu numai că poate face utilizatorii să leșine de mișcările aplicației dvs., ci și să mărească durata sesiunii în aplicație. Ele au devenit acum un simbol al distracției, al inovației și un mijloc sigur de a lega utilizatorii cu aplicațiile.

De ce să folosiți designul în mișcare pentru aplicații?

Există o serie de moduri prin care designul de mișcare a aplicațiilor a făcut ca interacțiunile mobile generale să fie una complet interesantă. Aici, să vedem cum.

Încărcările lente ale aplicațiilor sunt acum plăcute

Aplicațiile de încărcare lentă sunt la fel de frecvente ca zilele și nopțile, deoarece se întâmplă tot timpul. În spatele acestuia pot exista o serie de probleme, cum ar fi o rețea scăzută din partea utilizatorilor, o problemă tehnică pe backend sau prea multe solicitări care se fac pe server în același timp. Dar, indiferent de motiv, timpul de încărcare lent este motivul numărul unu care îi îndepărtează pe utilizatori de aplicație.

Ei bine, acest lucru poate fi prevenit complet prin utilizarea animației în designul interfeței de utilizare a aplicației, care a fost una dintre tendințele aplicațiilor mobile din 2018 . Adăugând elemente de mișcare în fiecare caz de încărcare redusă, designerii pot menține utilizatorii agățați doar pentru a vedea elementele sau animația să alunece pe ecran. De exemplu, luați pagina offline a Google Chrome cu un joc cu dinozauri.

O experiență de integrare pentru utilizatori

Unul dintre cele mai frecvente cazuri de utilizare a Motion Design pentru aplicații este văzut în etapa de integrare a aplicației mobile din călătoria aplicației. Folosită pentru a explica și a face utilizatorul să se familiarizeze cu aplicația, animația este încorporată de mărci pentru a le facilita utilizatorilor să-și găsească drumul pentru primele câteva rulări.

Aplicația Emboss în mintea utilizatorilor cu harta mentală

Ducând experiența de integrare la nivelul următor, design-urile pentru interfața de utilizare mobilă îi ajută pe utilizatori să creeze o hartă mentală care se potrivește fluxului aplicației din minte. V-ați observat vreodată că trageți bara de sus Gmail în jos pentru a vă reîmprospăta căsuța poștală? Ne îndoim de asta. Motivul este că a fost imprimat în noi la fel ca clipirea din ochi, așa că nu mai trebuie să ne gândim de două ori, se întâmplă automat.

Informarea utilizatorilor ce este greșit și ce este corect

Elementele de mișcare pot fi una dintre cele mai impactante modalități de a le informa utilizatorilor că au întâmpinat o problemă sau că au depășit cu succes un nivel. Atunci când proiectați pentru a evidenția o eroare, este important să subliniați utilizatorilor exact ce greșesc.

Scuturarea greșită a parolei este singura animație care o realizează perfect. Așa cum arătați ce fac utilizatorii greșit doar cu mișcarea dvs., mișcarea de feedback ar trebui să arate și evenimentele de succes. Un pop-up simplu cu o cutie poștală cu o animație de bifare le-ar arăta utilizatorilor că e-mailul lor a fost trimis.

În cele din urmă, nu lăsați niciodată utilizatorii să se întrebe ce greșesc sau dacă au reușit să facă ceva cu succes.

Acum că ați văzut cum elementele de mișcare fac călătoria aplicației mai distractivă și mai memorabilă, să ne uităm acum la principiile de proiectare a interfeței de utilizare a aplicației pe care ar trebui să le utilizați pentru a împiedica elementele dvs. de mișcare să treacă pe partea adezivității și a inutilității.

Principiile articulate Walt Disney pe care ar trebui să le încorporați în aplicația dvs. mobilă

Fiecare companie de dezvoltare de aplicații care a lucrat cu elemente de mișcare știe că linia dintre inovație și exagerare este foarte subțire și este locul în care acestea se estompează, începe problema. Utilizatorii devin dezinteresați, iar aplicațiile trec de la a fi utile la a deveni pur și simplu confuze.

Pentru a preveni semnele și mișcările tale să vadă o soartă similară, poți să urmezi aceste inspirații de design de interacțiune. Aceste principii au fost formulate pentru prima dată de Walt Disney, dar sunt încă capabile să ofere o experiență plăcută memorabilă, la fel ca Mickey Mouse.

1. Traiectoria mișcării

Principiul de design care a predominat în industrie urmează regula conform căreia formele animate ar trebui să urmeze în principal o mișcare de traiectorie dreaptă. Dar știm cu toții mai bine. Nu puteți oferi cu adevărat un serviciu de design de aplicații web și mobile cu un singur picior în vechile tradiții.
Pentru a-i face pe utilizatori să se îndrăgostească de elementele tale de mișcare, va trebui să adaugi noi traiectorii de mișcare, cum ar fi curbe, verticale și chiar ondulate și apoi să arăți oamenilor acele lucruri vizual.

2. Momentul când apare mișcarea

Ar trebui evitată orice indicație de mișcare care vine din senin pe ecranul utilizatorilor fără nicio acțiune care să-l motiveze. Dacă încorporați mișcare în designul interfeței de utilizare a aplicației, faceți-o la momentul în care vă solicită acest lucru. Există momente în care are sens să adăugați mișcare, cum ar fi atunci când utilizatorii introduc parola greșită, dar o bifare animată pentru a arăta că au introdus acreditările corecte poate fi ignorată.

Deci, înainte de a exagera cu ele, știți în ce stadiu sunt de fapt necesare.

3. Concentrați-vă pe focalizarea animației

Dacă aplicația dvs. se întâmplă multe pe ecran în ceea ce privește conținutul, elementele de design, imaginea sau videoclipul, aveți un element de mișcare care vine cu un fundal colorat care clipește sau se estompează, astfel încât utilizatorii să știe ce trebuie să facă în continuare. Toate caracteristicile tale de mișcare imobile își vor pierde valoarea dacă nu le arăți prezența pe ecranul aplicației.

4. Viteza animației

Presupunând că ați crea o aplicație mobilă pentru oameni obișnuiți și nu pentru Flash, elementele voastre de mișcare ar trebui să se miște cu viteza unei alunecări de pene. Oferă utilizatorilor timp să-și adapteze ochii la mișcare, în loc să o facă prea rapidă pentru ei.

Un sfat profesionist: adaugă ritm mișcării tale. În timp ce adăugarea mișcării în mișcare pare a fi un lucru fără sens, dar să știți că făcând-o, veți merge cu un pas înaintea întregului joc de rezonanță a aplicației direct de la nivelul subconștientului utilizatorilor.

5. Deveniți o piesă de mișcare pe față

Folosite mai ales în aplicații bazate pe chestionare și comerț electronic, aceste tipuri de mișcare fac ca următoarea mișcare să fie o problemă pentru utilizatori. Mișcându-vă prea evident, cum ar fi în cazul unei numărătoare inversă a reducerii sau a scăderii codului de locație în cazul Uber, veți putea conduce utilizatorii exact acolo unde doriți să fiți, creând o imagine de marcă memorabilă pentru dvs.

Cum se utilizează animația și mișcarea în aplicațiile mobile?

După cum am spus înainte, există o linie subțire între a face asta și a exagera. Există locuri în care crezi că poți folosi animația, dar, în realitate, o poți evita pur și simplu. Există câteva moduri în care puteți utiliza designul în mișcare, ceea ce face cel mai bun design UI pentru aplicații. Să aruncăm o privire la ele:

Gamificare

Adăugarea de emoji și mascote de animație poate face minuni pentru aplicația dvs. Aceste elemente fac ca aplicația să devină dependență și plăcută tuturor. Diferiți mesageri au autocolante animate, care oferă aplicației un avantaj față de toate celelalte aplicații de mesagerie simple.

Animație de progres

Așteptarea ca ceva să se încarce fără a cunoaște progresul testează răbdarea utilizatorilor. Acesta este motivul pentru care aplicațiile au animații de progres care arată cât de mult progres s-a făcut la încărcarea anumitor funcții. Animația de progres este una dintre cele mai apreciate caracteristici ale designului în mișcare pentru aplicații.

Notificări animate

Notificările sunt de obicei destul de plictisitoare, dar dacă se folosește o animație adecvată, aceasta îmbunătățește experiența generală a utilizatorului. Acest lucru se va asigura, de asemenea, că utilizatorii își amintesc fiecare notificare importantă pe care o primesc.

Se încarcă animația

Încărcarea animației este unul dintre cele mai comune tipuri de animație utilizate pentru interacțiunile cu interfața de utilizare a aplicației. Acest tip de animație informează utilizatorii că procesul de încărcare este activ și că aplicația rulează bine. Această animație este un subtip de animație de progres.

Animație de tranziție

Animația de tranziție oferă aplicației un aspect elegant. De asemenea, transmite o experiență pozitivă pentru utilizator. Permițând tranziția, dați mai multă viață aplicației atunci când treceți de la o pagină la alta.

Animație de marketing

Animația de marketing este excelentă pentru marca dvs. Animațiile utilizate în logo-uri sunt o modalitate excelentă de a atrage atenția utilizatorilor. Acest lucru creează, de asemenea, o imagine mentală a mărcii în mintea utilizatorilor.

Animație de defilare

Animația de defilare este un alt tip celebru de animație adăugat în aplicații și este considerată unul dintre cele mai bune design UI pentru aplicații. Nu numai că face aplicația frumoasă, dar îi oferă și un aspect elegant. Cu toate acestea, animația de defilare adecvată necesită o codare adecvată, altfel aplicația se poate îngheța sau încetini.

Atrage atentia

Animația de desen cu atenție este de obicei aplicată atunci când atenția utilizatorilor trebuie direcționată către anumite zone. Să presupunem că comandați dintr-o aplicație de comandă de alimente online și, de îndată ce adăugați articole, prețul se modifică cu un anumit tip de animație. Acest lucru ți-ar atrage atenția asupra numerelor, care este locul în care ar trebui să se concentreze.

În articol, am discutat despre modul în care elementele de mișcare sunt diferențierea cheie între o aplicație plictisitoare și una inovatoare, etapele potrivite pentru încorporarea lor și chiar principiile de design care ar trebui urmate. Suntem cea mai bună companie de design de aplicații mobile, urmați un proces simplu de proiectare a aplicațiilor mobile pentru a obține cele mai bune rezultate posibile. Chiar dacă pașii sunt simpli, munca este detaliată. Dacă aveți întrebări cu privire la designul de mișcare sau aveți nevoie de inspirație pentru designul de interacțiune, contactați-ne la Appinventiv .