Utilizarea celor 12 principii ale animației Disney în următorul dvs. proiect de web design

În momentul exact în care scriu asta, biroul meu are 17 lucruri sau altele Disney pe pereți și rafturi. Şaptesprezece. Chiar și eu sunt surprins. Oricât de mult îmi place totul, Disney, magia creată prin cele 12 principii ale animației îmi scapă chiar și atunci când mă uit la unul dintre filmele lor.

Și acesta este punctul. Cele 12 principii ale animației sunt subtile. Acestea fac impresii asupra spectatorilor fără ca aceștia să-și dea seama. Ne fac să râdem, să plângem, să simpatizăm și să visăm, uneori în aceeași scenă. Și creează personaje și obiecte care arată și se mișcă atât de realist încât vrei să le întinzi și să le atingi. (Ați văzut vreodată Coco ? Îmi odihnesc cazul.)

Aceste 12 principii ale animației oferă acum baza pentru toate lucrările de mișcare, Disney și altele. Sunt relevante și pentru câmpurile din afara animației, cum ar fi designul web.

O scurtă istorie a celor 12 principii ale animației

Cele 12 principii ale animației au fost introduse de Ollie Johnston și Frank Thomas, doi dintre Disney's Nine Old Men, grupul principal de animatori care s-au alăturat în anii 1920 și 30. Johnston și Thomas au scris Iluzia vieții: animație Disney în 1981 și a rămas „biblia” animației. Cartea aruncă o privire atentă asupra abordărilor celor mai buni animatori Disney pentru a extrage cele 12 principii. În timp ce aceste principii au fost inițial destinate animației desenate manual, au supraviețuit prin schimbări tehnologice și sunt acum utilizate de animatorii de computer (cum ar fi Pixar) și de designerii de web.

Cele 12 principii ale animației și modul în care acestea informează proiectarea web

Există un motiv pentru care aceste principii au rezistat testului timpului. Uneori elementele de bază sunt încă cele mai bune.

1. Squash și Stretch

Sursa: Chris Gannon prin Giphy

„Squash and Stretch” este cel mai important dintre principiile animației. Oferă animațiilor flexibilitate, gravitație, greutate și masă. Când un obiect este în mișcare, acesta nu rămâne aceeași formă.

Totuși, volumul trebuie să rămână consistent. Întinderea necesită ca obiectul să fie mai subțire și mai lung; strivirea îl face mai scurt și mai larg. Dacă l-ai face mai subțire sau mai scurtă, nu ar păstra același volum.

În designul web, „Squash and Stretch” este utilizat atunci când obiectele trebuie să fie atrăgătoare. Dacă există un obiect care trebuie să arate ca având o masă fizică, acest principiu poate face trucul.

2. Anticipare

Sursa: CentoLodigiani via Giphy

Anticiparea pregătește privitorul pentru ceea ce urmează să aibă loc și poate face acțiunea rezultată mai realistă. Nu te-ai așeza fără a-ți îndoi genunchii mai întâi sau nu ai prinde ceva fără să scoți brațul, nu? Anticiparea pune personajul sau obiectul printr-una sau două mișcări realiste pentru a indica spectatorul despre ceea ce urmează să se întâmple.

În designul web, anticiparea este utilizată în tranziții. De exemplu, dacă un vizitator completează o casetă de informații și lasă în afară informațiile solicitate, caseta ar putea sări puțin pentru a le atrage atenția și a comunica „Hei, ceva nu este în regulă”. O altă modalitate de a utiliza anticiparea este de a micșora ușor articolele și apoi de a le face să crească la plimbare.

3. Punerea în scenă

Punerea în scenă conduce privirea privitorului astfel încât să se uite unde vrei să se uite („linii principale” în fotografie). Minimați restul scenei, astfel încât privitorul să se concentreze exact pe ceea ce doriți. O altă componentă a montării este că fiecare acțiune pe care o face un personaj are o intenție în spatele ei. Dacă ați izolat fiecare cadru al animației, ați putea spune intenția din spatele posturii.

Punerea în scenă este unul dintre principiile mai ușor de aplicat pentru designul web și vizualele utilizate pe site-uri web. Așa se întâmplă când apare o fereastră pop-up pe o pagină web - mișcarea ferestrei pop-up vă face să vă concentrați asupra ei, iar restul paginii este neclară, estompată sau acoperită. Iluminați figurativ cea mai importantă parte a „scenei” și păstrați tot restul în fundal. Lumina și umbra pot fi folosite și pentru acest lucru sau designerii de web pot aplica acest principiu pur și simplu scăpând de detalii inutile.

4. Îndreptat în față și Pose to Pose

„Chiar înainte” și „pozează pentru a poza” sunt două moduri diferite de a crea animații. Cu „drept înainte”, cadrele sunt create în ordine de la început până la sfârșit. Acest lucru oferă animației mișcare fluidă și dinamică. Cu „poză pentru poză”, se creează primul și ultimul cadru, apoi se adaugă pozițiile intermediare necesare.

Sursa: Vincenzo Lodigiani, artist de muzică

Astăzi, animația pe computer folosește „poză pentru poză”, deoarece computerul poate completa automat cadrele lipsă. Consultați animațiile de pe Cehov - puteți spune că nu sunt fluide în mod realist (și nu ar trebui să fie). Dacă doriți să creați o animație „direct înainte” pe site-ul dvs. web, puteți utiliza funcția de sincronizare step (), care vă permite să definiți mai multe cadre și să le afișați într-o succesiune.

5. Urmăriți acțiunea și acțiunea care se suprapune

Principiul „acțiune de urmărire și suprapunere” spune că, atunci când un personaj sau obiect este în mișcare și apoi se oprește, părți ale subiectului se vor mișca și se vor opri cu ritmuri diferite. Aceasta imită legile fizicii din viața reală.

• Acțiune suprapusă: Diferite părți ale subiectului se deplasează la ritmuri diferite.
• Urmăriți: părțile conectate slab ale obiectului continuă să se miște timp de câteva secunde după ce obiectul principal a încetat să se miște. Aceste părți se vor deplasa dincolo de punctul de oprire și apoi se vor retrage spre obiect.

În exemplul de mai jos, brațele și picioarele lui Rapunzel se mișcă cu o viteză diferită de cea a capului ei - aceasta este o acțiune care se suprapune. Când încetează să se răsucească, părul ei continuă să se balanseze pentru o secundă - asta este urmarea.

„Trageți” este o tehnică asemănătoare în care se întâmplă opusul - părți ale obiectului se mișcă și apoi restul prinde din urmă. Toate aceste tehnici prezintă mișcare realistă sau pot exagera mișcarea pentru un efect comic.

„Ținerea în mișcare” este legată și de aceasta. Personajele care rămân au încă o mișcare ușoară, astfel încât animația să nu stagneze.

În designul mobil și web, „urmăriți” și „acțiune suprapusă” arată spectatorului că o acțiune se oprește în mod intenționat . În caz contrar, puteți crede că pur și simplu nu mai funcționează. De exemplu, uită-te cum arată aplicația Wunderlist de pe iPhone-ul meu că mut un articol din listă. Elementul devine o culoare diferită și devine mai mare pe măsură ce îl mut, apoi revine la culoarea și dimensiunea originală după ce am terminat. Așa știu că acțiunea este completă.

De asemenea, puteți vedea acest principiu în acțiune pe iPhone. Pe măsură ce faceți tranziția între vizualizări sau deplasați pictogramele pe ecranul de pornire, elementele se deplasează la ritmuri ușor diferite. Acesta este modul în care iPhone-ul dvs. comunică „Lucrurile se schimbă”.

6. Slow In și Slow Out

Principiul „încetinește și încetinește” afirmă că un obiect începe să se miște încet, capătă impuls și accelerează, apoi încetinește din nou pe măsură ce se oprește. Practic, mișcările trebuie să accelereze și să încetinească pentru a fi naturale. Pentru a obține acest efect, există cadre suplimentare la începutul și la sfârșitul unei acțiuni pentru a sublinia creșterea și scăderea treptată a mișcării.

Sursa: Iluzia vieții pe Tumblr

Pentru designul web, CSS are două funcții de sincronizare legate de acest principiu: ușurința și ușurința. Puteți vedea un exemplu dacă este pe site-ul dvs. Planul dvs., Planeta dvs. (faceți clic mai întâi pe „Să începem”).

7. Arc

La fel ca multe alte 12 principii ale animației, „arc” se bazează pe fizică. Obiectele urmăresc de obicei un anumit tip de arc pe măsură ce se mișcă din cauza gravitației. Dacă ar rămâne drepți, mișcarea ar fi mecanică, nu realistă.

Acest lucru este valabil și pentru toate tipurile de mișcare, nu doar pentru arcurile joase până la mari spre mici:

În designul web, principiul „arc” poate fi utilizat prin crearea de animații care se arc, desigur, dar și prin rotirea unui element, ca în timpul timpilor de încărcare.

8. Acțiune secundară

O acțiune secundară accentuează acțiunea principală, fără a distrage atenția de la ea. De asemenea, conferă personajelor și obiectelor mai multă dimensiune și inspiră viață într-o scenă. Principiul punerii în scenă joacă un rol deoarece acțiunea principală trebuie să fie în continuare accentul.

O acțiune secundară nu trebuie să cadă în afara obiectului principal. Poate fi un personaj care fluieră în timp ce merge sau exprimă emoție ridicând sprâncenele.

În designul mobil și web, principiul „acțiunii secundare” este văzut atunci când elementele se îndepărtează pentru a face loc unui element nou, ca atunci când rearanjați aplicații pe iPhone. Acest lucru poate merge mână în mână cu „acțiunea de urmărire și suprapunere”, care subliniază acele acțiuni.

9. Sincronizarea

Timpul este destul de simplu și este legat de „încetinirea și încetinirea”. Principiul spune că elementele ar trebui să se miște în mod constant într-un mod natural, așa cum s-ar întâmpla în lumea reală. Pentru accentuare, acestea pot fi accelerate în mod intenționat sau încetinite. Numărul de cadre utilizate va stabili temporizarea - mai multe cadre creează o acțiune mai lentă, mai puține cadre creează una mai rapidă.

În acest exemplu, primele acțiuni ale lui Daffy Duck au o sincronizare naturală, iar ultima acțiune, când vine aproape de privitor, este în mod intenționat rapidă pentru accentuare.

Sincronizarea ajută, de asemenea, privitorul să înțeleagă greutatea obiectelor în raport unul cu celălalt. În acest exemplu, personajul ridică greutățile încet și le lasă rapid, arătând că sunt grele pentru el:

Sursa: @scottthigpen pe Giphy

În designul web, sincronizarea este utilizată pentru a face ca elementele să rămână puțin mai lungi sau să dispară rapid, în special atunci când răspund la interacțiunea utilizatorului. De exemplu, dacă un utilizator dorește să renunțe la un meniu, puteți seta temporizarea astfel încât să rămână în jur de 300 ms. Dacă ating un element din bara de navigare, veți dori ca acțiunea să se întâmple rapid (100 ms).

10. Exagerare

Chiar dacă multe dintre cele 12 principii de animație se concentrează asupra realității, frumusețea de animație este că nu e real. Principiul „exagerării” spune că prea mult realism poate afecta ceea ce este mai bun în animație: distracție. Exagerarea este folosită pentru a face personajele și obiectele mai interesante. Este nevoie de realitate și o transformă într-o crestătură, suficient încât scena să fie încă credibilă. Exagerarea necesită reținere, astfel încât scena să nu devină abstractă sau suprarealistă.

În designul web, obiectele sunt reduse în sus sau în jos pentru a atrage sau a scădea atenția. Când un utilizator este activ pe o anumită parte a site-ului web, cum ar fi un formular, acesta poate crește în timp ce alte elemente se micșorează. Acest lucru este similar cu principiul „înscenării”, mai ales atunci când vă gândiți la formele pop-up.

11. Desen solid

Sursa: Iluzia vieții pe Tumblr

Chiar dacă animația este tehnic 2D, trebuie să se prezinte în mod realist în 3D. Principiul „desenului solid” ar putea fi numit și „perspectivă”, deoarece este vorba de capacitatea de a desena și de înțelegerea elementelor de bază, cum ar fi:

• Anatomie
• Echilibru
• Coerență
• Lumină și umbră
• Volum
• Greutate

Pentru designerii de web, adăugarea adâncimii unui element arată utilizatorilor că pot interacționa cu acesta. Puteți vedea acest lucru în acțiune pe site-ul nostru web. Urmăriți cum butonul „Alăturați-vă pentru a descărca” devine roz în timp ce derulez în jos:

12. Apel

Poate cel mai complicat dintre cele 12 principii ale animației de stăpânit, „apelul” spune că personajele, obiectele și lumea lor trebuie să facă apel la public. Ar trebui să fie atrăgători și fermecători într-un fel, fizic sau altfel. Nu există o rețetă pentru a obține acest lucru corect, dar dezvoltarea solidă a personajelor și povestirea sunt ingrediente cheie.

În animație, fiecare personaj nu va fi atrăgător - ticălosul este piatra de temelie a filmelor Disney. Cu toate acestea, modul în care sunt prezentate ar trebui să aibă totuși carismă și să intereseze publicul.

În designul web, „recurs” înseamnă că site-ul în ansamblu este captivant, plăcut și ușor de utilizat.

Încheierea

Cele 12 principii Disney vă pot ajuta cu animații simple, cum ar fi dacă creați un joc interactiv pe site-ul dvs., dar pot ajuta și la proiectarea pentru tot felul de pagini web. Majoritatea consumatorilor sunt ca mine atunci când vine vorba de filmele Disney: știu că îmi place ceva și creierul meu procesează indicii, dar nu pot să pun degetul pe motivul pentru care am acele reacții. Sarcina proiectantului web este de a anticipa ce va gândi și va face un vizitator, apoi să-i ghideze subtil să ia măsurile corecte.

Căutați și mai multe modalități de a vă conecta cu publicul dvs.? Citiți postarea noastră pe blog despre utilizarea emoției culorilor.