Principii de animație UI: Disney este mort

Fotografia a fost prezisă a fi moartea picturii (Daguerreotip timpuriu)

(Dacă doriți să primiți articolele mele despre animația UI prin e-mail și să fiți adăugate la newsletter-ul meu, faceți clic aici.)

Un mediu nou

Când Paul Delaroche a întâlnit un Daguerreotip cândva în jurul anului 1839, a declarat celebru: „De astăzi, pictura este moartă!”

Până la acel moment, singurul mod de a documenta vizual lumea externă a fost prin utilizarea unui mediu aplicat pe o suprafață de mână. Secole de meșteșug în diferite discipline au dus la descoperirea a numeroase principii și tehnici din diferite medii. De-a lungul culturilor și pe măsură ce epocile au progresat, stilul și limbajul vizual a evoluat „ar trebui să arate” reprezentările vizuale - modelele originale de design.

Fotografii timpurii, care încercau să-și facă imaginile să semene cu picturile populare ale zilei, foloseau adesea o combinație de tehnici de iluminare și de imprimare pentru a le înmuia imaginile și a crea un aspect pictor. Înțelegerea lor de ceea ce a putut fi mediul fotografiei, a fost intim legată, influențată și limitată de înțelegerea lor despre lumea picturii.

A fost nevoie de aproape o sută de ani până când fotografi precum Ansel Adams, Imogen Cunningham, Edward Weston și alții din „Group f / 64” au adus o incursiune semnificativă în limbajul vizual care distinge fotografia pe lângă pictură ca mediu unic - cu propriul său vizual. limbajul și principiile și, în acest sens, au revoluționat domeniul fotografiei.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney a rezolvat o altă problemă

Din fericire, ne regăsim la o astfel de revoluție în animația UI.

În 1981, Ollie Johnston și Frank Thomas au lansat Disney Animation: the Illusion of Life și au introdus ceea ce sunt cunoscute acum drept „principiile de bază ale animației 12.” Aceste principii au rezolvat problema modului de a crea „mișcare realistă” care apare atunci când corpurile organice mișcați și reacționați în spațiul fizic (principiile acoperă și lucruri precum calendarul emoțional și atragerea personajului).

Animația UI, ca parte a experienței utilizatorului, are abia 20 de ani și încă este la început. Pe măsură ce domeniul de animație UI a apărut, singurele instrumente disponibile pentru a descrie cum se comportă interfața utilizator în timp au fost cele 12 principii de animație. Asemenea modului în care fotografii timpurii au încercat să înțeleagă fotografia prin regulile picturii, designerii au încercat să înțeleagă animația UI prin regulile animației Disney.

La suprafață, acest lucru este de înțeles, deoarece există un anumit grad de suprapunere. Mișcarea simplificată, unul dintre cele 12 principii de animație, consolidează sentimentul de „dreptate” prin mișcare, lucru care este esențial pentru experiența utilizatorului. Fără a ușura, animația UI se simte ciudată și ciudată.

Defalcarea completă este evidentă atunci când se aruncă o privire mai atentă la cele 12 principii în contextul interfeței de utilizator.

Squash and Stretch oferă o greutate și flexibilitate obiectelor, ceva care este excepția, mai degrabă decât regula în interfețele utilizatorului.

Anticiparea creează sensul că ceva este pe cale să se întâmple și este, de asemenea, aproape inutil când vine vorba de experiențele utilizatorului. Funcționează doar într-un mod limitat pentru interacțiunile micro selectate și stările butoanelor.

Punerea în scenă se referă la aspectul animației, ceea ce are sens pentru un desen animat Disney, deoarece personajele sunt în continuă mișcare, dar într-o experiență de utilizator, aceasta este gândită doar ca „designul”.

Straight Ahead Action și Pose to Pose sunt mai puține principii decât abordările procesului de desen / animație reală: puteți crea o animație mai fluidă dacă desenați cadre continue sau puteți pune pentru a pune câteva cadre-cheie și completați golurile . În experiențele utilizatorilor, acest proces se traduce cu greu, cu excepția cazului în care se întâmplă animație frame by frame. În mod implicit, indiferent de instrumentul pe care îl utilizați, aproape toată animația UI este creată folosind cadrele cheie.

Urmărirea și suprapunerea Acțiune are legătură cu respectarea legilor fizicii și a inerției și cu modul în care reacționează corpurile fizice, ambele având prea puțin de-a face cu interfețele utilizatorului, cu excepția cazului în care vă bazați pe următorul principiu, care este cel mai util în grup. .

Slow In and Slow Out spune că obiectele au nevoie de timp pentru a accelera și a încetini. Acest lucru este extrem de relevant, deoarece 100% din animația UI ar trebui să utilizeze acest principiu. Este de obicei denumită „relaxare” și este extrem de importantă.

Arcul (necesar pentru reproducerea mișcării fizice) este aproape inutil pentru animația UI și este, de asemenea, excepția, mai degrabă decât regula.

Acțiunea secundară este utilă și este excelentă pentru tranzițiile ecranului și configurarea ierarhiei vizuale.

Momentul este relevant atunci când desenăm caractere, dar în interfețele utilizatorului, unde mișcarea trebuie să fie crocantă pentru a se simți receptiv, mi se pare mai bine să mă bazez pe ușurarea proiectării interacțiunii, mai degrabă a duratei.

Exagerarea se referă la gradul de realism sau caricatură, din nou, greu relevant pentru animația UI, deoarece designul este predeterminat.

De asemenea, desenul solid este în cea mai mare parte, deoarece animația UI se ocupă cu comportamentul obiectelor de interfață în timp, nu cu designul propriu-zis al obiectelor.

De asemenea, apelul se referă la tratamentul vizual, din nou fără relevanță în ceea ce privește modul în care interfața se comportă în timp.

In concluzie

Rămâne deci întrebarea: de ce cele 12 principii de bază ale animației nu descriu cu exactitate animația UI?

Defalcarea poate fi înțeleasă cel mai bine prin simpla observație: animația UI nu respectă aceleași reguli și nici nu are aceleași principii ca și corpurile organice care se mișcă în spațiul fizic. Animarea UI este un mediu distinct, la fel de distinct ca fotografia este de la pictură - cu caracteristici suprapuse (atât fotografia cât și pictura sunt compoziții vizuale statice bazate pe lumină și compoziție), dar sunt în mod fundamental medii diferite.

Mai simplu spus, cele 12 principii de bază ale animației nu se aplică animației UI, deoarece rezolvă o altă problemă.

În următoarele câteva articole, voi explora care sunt aceste principii de animație a UI, care sunt problemele pentru care se rezolvă principiile de animație UI, cum diferă principiile de tehnici și cum puteți proiecta și utiliza animația UI în proiectele dvs. curente și viitoare pentru a avea impact asupra utilizabilității și creați experiențe de utilizator mai convingătoare și eficiente.