Accentsconagua
Share
Limbajul de design material a fost creat pentru a aborda problemele cu design plat pe ecrane mai mici, oferind elemente vizuale elementelor interactive. În acest articol veți învăța despre unele dintre conceptele fundamentale ale animației și despre modul în care acestea pot fi folosite pentru a oferi o senzație naturală, asemănătoare vieții elementelor. Veți vedea cum să utilizați aceste idei pentru a vă încânta utilizatorii, ajutându-i în același timp să înțeleagă interfața UI a aplicației.
Google sugerează că toate animațiile trebuie să fie receptive, naturale, conștiente și intenționate. Obiectele de pe ecran ar trebui să se comporte ca și cum ar fi făcute din materiale specifice, cu greutatea și volumul lor care dictează modul în care se mișcă și acționează pe ecran.
Animațiile care apar vor fi corelate direct cu o acțiune și ar trebui să se simtă intenționate și vii. Acestea ar trebui să fie semnificative și să ajute ghidul prin intermediul aplicației dvs., având un scop și servind acest scop. Animațiile ar trebui să creeze un context pentru utilizatorii dvs. și să-și ghideze ochii pe ecran, astfel încât aceștia să fie conștienți de ce este posibil cu aplicația dvs..
Propunerea ar trebui să fie mai preocupată de timpul necesar pentru a ajunge de la punctul A la punctul B, mai degrabă decât distanța care trebuie acoperită. Distanțele se vor schimba în funcție de dimensiunea ecranului, dar viteza unui obiect va adăuga accent și îi va ajuta pe utilizatori să înțeleagă ce se întâmplă.
Când un obiect trebuie eliminat și altul adăugat pe ecran (cum ar fi un buton care se schimbă de la redare la pauză), atunci ar trebui să transformați primul obiect în al doilea. De asemenea, puteți semnala o modificare semnificativă a unui obiect schimbând culoarea și alfa pentru elementul de pe ecran. În acest fel, utilizatorii sunt conștienți de ce s-au schimbat și puteți sublinia ce este disponibil în aplicațiile dvs. pentru ca utilizatorii să interacționeze.
Una dintre cele mai bune referințe pentru înțelegerea animațiilor naturale este cartea Iluzia vieții de Frank Thomas și Ollie Johnston, care are un capitol care detaliază principiile animației folosite de Disney în filmele lor de animație. Thomas și Johnston prezintă 12 principii fundamentale în cartea lor. În această secțiune vom discuta câteva din aceste principii și modul în care acestea pot fi legate de proiectarea materialelor.
Când un obiect avansează printr-o acțiune, va afișa modificări în forma sa pe baza materialului din care este compus.
Acest concept este reprezentat de principiul Squash și Stretch, care poate fi ilustrat cel mai bine gândindu-se o minge de bouncing. Pe măsură ce forțele externe acționează asupra mingii, cum ar fi gravitatea sau accelerația în sus, mingea se va întinde. Atunci când obiectul atinge pământul, acesta se va agăța și se va prăji spre suprafață. Obiectele care se mișcă și interacționează cu suprafețele din aplicația dvs. ar trebui să utilizeze această idee pentru a da iluzia greutății și a volumului obiectului în timp ce se mișcă.
Nu ar trebui să se întâmple acțiuni majore în albastru. Când efectuați o animație în aplicațiile dvs., ar trebui să aveți o altă acțiune mai mică, care duce la animația principală. Acest principiu se numește anticipare și ajută la prevenirea situației în care utilizatorul dvs. întreabă: "De ce sa întâmplat acest lucru?" Mișcarea naturală începe, în general, cu o încălzire mai degrabă decât pur și simplu pornind. În Android, puteți utiliza AnticipateInterpolator pentru a crea o animație care mai întâi susține o mică distanță înainte de a merge mai departe.
Scopul etapizării este de a vă face conținutul clar și ușor de înțeles pentru utilizatorii dvs. Interfața dvs. și animațiile ar trebui să vă simțiți naturale și ancorate într-o sarcină sau concept de bază, mai degrabă decât să lăsați utilizatorul să nu știe de ce sa întâmplat ceva într-un anumit mod. Ar trebui să efectuați o singură acțiune majoră la un moment dat pentru a menține lucrurile simple și deliberate.
Atunci când un obiect în mișcare se oprește, nu se oprește la o dată (fără să lovească un alt obiect solid, dar acolo intră Stretch și Squash). Aplicațiile unui obiect vor continua să se miște pentru o perioadă scurtă de timp după ce nucleul obiectului sa oprit.
Atunci când creați animații de material, ar trebui să încercați să folosiți două poziții diferite: punctul de oprire dorit și cel care se află puțin mai departe, pe care animația dvs. se poate opri complet și apoi să reveniți la poziția finală. Acest lucru împiedică animația dvs. să pară plană și mecanică. Acest tip de animație poate fi realizat folosind BounceInterpolator sau OvershootInterpolator clase.
Miscarea naturala nu se intampla cu o viteza consistenta si nici animatiile tale.
Când un obiect se mișcă din afara câmpului de vedere și intră pe ecran, ar trebui să facă acest lucru rapid și apoi să încetinească în măsura în care ajunge la poziția sa finală. Mișcarea rapidă va atrage atenția utilizatorului și va oferi suficient timp pentru a observa unde se termină.
Invers, un obiect care iese de pe ecran trebuie să înceapă încet și să se accelereze în timp ce părăsește ecranul. Acest lucru va oferi utilizatorului suficient timp pentru a observa că obiectul se mișcă și, pe măsură ce accelerează până la plecare, vor înțelege că ar trebui să nu mai aibă grijă de acel element pe ecran.
Atunci când un obiect se deplasează dintr-o poziție pe ecran pe altul, fără a părăsi ecranul în vreun moment, ar trebui să combinați aceste două idei astfel încât utilizatorul să vadă ce se întâmplă în timp ce animația dvs. păstrează o senzație naturală. Acest principiu este aplicat și listelor, deoarece acestea se vor derula rapid atunci când un utilizator le aruncă, apoi vor încetini până când se vor opri. Atunci când o listă sare între secțiuni, devine mai puțin imersivă și se simte mecanică. Puteți utiliza funcția LinearOutSlowInInterpolator, FastOutLinearInInterpolator, sau FastOutSlowInInterpolator pentru a adăuga aceste efecte de animație.
Cu foarte puține excepții, mișcarea naturală are loc în arce, mai degrabă decât în linii drepte precise. Atunci când se deplasează obiecte pe ecran, în plus față de principiul lent în interior și în exterior, ar trebui să încercați să mutați obiectul într-o arcadă pentru a evita o simțire mecanică, nenaturală în animație. Puteți utiliza Android ArcMotion obiect pentru a vă deplasa obiectele de-a lungul unei căi curbe.
Acțiunile secundare sunt acțiuni mai mici, mai simple, care susțin ideea acțiunii principale care apare. Acțiunile secundare nu ar trebui să fie umbrite sau să pară mai interesante decât acțiunea principală, deoarece există doar pentru accentuare.
Un exemplu de acțiune secundară ar fi atunci când deschideți sertarul de navigare într-o aplicație Android. În timp ce sertarul glisant deschis este acțiunea principală, pictograma hamburger pentru animația săgeată este un efect simplu care accentuează ceea ce se întâmplă fără a umple schimbarea principală pe ecran.
Când lucrați cu animații, calendarul este totul. Dacă o animație se mișcă prea încet sau rapid, utilizatorul va observa că ceva se simte "oprit".
Este important să ne amintim că materialul de design solicită ca obiectele să apară ca și cum ar fi făcute dintr-un fel de material. Dacă un obiect este destinat să se simtă ca hârtia culisantă pe o suprafață, atunci nu ar trebui să se miște repede pe ecran. În mod evident, nu există o formulă sigură pentru viteze de animație în aplicații, dar cu puțin timp și practică, ar trebui să puteți crea animații bine programate care să se potrivească temei și scopului aplicației dvs..
Acum că sunteți conștient de conceptele majore ale materialului Motion și de unele dintre principiile fundamentale ale animației, puteți începe să jucați cu diferitele instrumente disponibile pentru a anima aplicația dvs. și pentru a adăuga puținul extra pop pentru a vă încânta utilizatorii.
Dacă doriți să aflați mai multe despre crearea animației în Android, consultați cursul în profunzime Animați-vă aplicația Android de la Ashraff Hathibelagal, aici pe Envato Tuts+.
Sau verificați câteva din celelalte tutoriale ale noastre despre animație în Android!
