Načela animacije uporabniškega vmesnika: Disney je mrtev

Fotografije so predvidevale smrt slik (zgodnji Dagerereotip)

(Če želite prejemati moje članke o animaciji uporabniškega vmesnika po e-pošti in jih dodati v moje novice, kliknite tukaj.)

Nov medij

Ko je nekje okrog leta 1839 Paul Delaroche naletel na Dagereotip, je slavno izjavil: "Od danes je slika mrtva!"

Do takrat je bil edini način vizualnega dokumentiranja zunanjega sveta uporaba ročnega medija na površini. Večletna izdelava različnih disciplin je povzročila odkrivanje številnih načel in tehnik v različnih medijih. Skozi kulture in z razvojem ere sta se razvijala slog in vizualni jezik, kako naj bi vizualne predstavitve "izgledale" - originalni vzorci oblikovanja.

Zgodnji fotografi, ki so poskušali svoje slike spominjati na priljubljene slike tistega dne, so pogosto uporabljali kombinacijo tehnik osvetlitve in tiskanja, da so zmehčali svoje slike in ustvarili slikarski videz. Njihovo razumevanje tega, česa je sposoben medij fotografije, je bilo tesno povezano, vplivano in omejeno s svojim razumevanjem sveta slikarstva.

Skoraj sto let je trajalo, da so fotografi, kot so Ansel Adams, Imogen Cunningham, Edward Weston in drugi iz 'Group f / 64', močno posegli v vizualni jezik, ki fotografijo loči od slike kot edinstvenega medija - z lastnim vizualnim jezik in načela ter s tem spremenili področje fotografije.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney je rešil drugačno težavo

Na srečo smo se znašli pri taki revoluciji v animaciji uporabniškega vmesnika.

Leta 1981 sta Ollie Johnston in Frank Thomas izdala Disney Animation: The Illusion of Life in predstavila tisto, kar je danes znano kot "12 osnovnih načel animacije." Ta načela so rešila problem, kako ustvariti "realistično gibanje", ki se pojavi pri organskih telesih gibati se in reagirati v fizičnem prostoru (načela zajemajo tudi stvari, kot so čustvena časovnost in privlačnost likov).

Animacija uporabniškega vmesnika, ki je del uporabniške izkušnje komaj 20 let in je še v povojih. Ko se je pojavila domena animacije uporabniškega vmesnika, je bilo 12 orodij za animiranje edino orodje za opis načina delovanja uporabniškega vmesnika. Tako kot to, da so zgodnji fotografi s pomočjo slikarskih pravil poskušali razumeti fotografijo, so oblikovalci poskušali razumeti animacijo uporabniškega vmesnika prek pravil Disneyjeve animacije.

Na površini je to razumljivo, saj obstaja določena stopnja prekrivanja. Preostalo gibanje, eno od 12 načinov animacije, skozi gibanje krepi občutek pravilnosti, kar je ključno za uporabniško izkušnjo. Brez sproščanja se animacija uporabniškega vmesnika počuti nerodno in čudno.

Popolna razčlenitev je vidna, ko podrobneje pogledamo 12 načel v kontekstu uporabniškega vmesnika.

Squash in Stretch dajeta težo in prožnost predmetom, kar je bolj izjema kot pravilo v uporabniških vmesnikih.

Predvidevanje ustvarja občutek, da se bo nekaj zgodilo in je tudi skoraj neuporabno, ko gre za uporabniške izkušnje. Deluje le na omejen način za izbrane mikro interakcije in stanja gumbov.

Uprizoritev se nanaša na postavitev animacije, kar je smiselno za Disneyjevo risanko, ker so liki nenehno v gibanju, v uporabniški izkušnji pa je to samo zamisel kot "dizajn".

Straight Ahead Action in Pose to Pose sta manj načela kot pristopi k dejanskemu postopku risanja / animacije: lahko ustvarite bolj tekočo animacijo, če rišete neprekinjene okvirje, ali uporabite pozi za poziranje, da nastavite nekaj ključnih okvirjev in zapolnite vrzeli . V uporabniških izkušnjah ta postopek skorajda ni preveden, razen če se dejansko zgodi kadrovska animacija. Skoraj vsa animacija uporabniškega vmesnika je privzeto, ne glede na orodje, ki ga uporabljate, ustvarjena s pomočjo okvirjev s ključi.

Sledite skozi in prekrivajoče se delovanje je povezano z upoštevanjem fizikalnih zakonov in inertivnosti ter odzivanjem fizičnih teles, ki nimajo nobene zveze z uporabniškimi vmesniki, razen če računate na naslednje načelo, ki je najbolj uporabno v skupini .

Slow In in Slow Out pravi, da predmeti potrebujejo čas, da pospešijo in upočasnijo. To je izjemno pomembno, saj naj bi to načelo uporabljalo 100% animacije uporabniškega vmesnika. Običajno ga imenujemo "lajšanje" in je izjemno pomembno.

Lok (potreben za reprodukcijo fizičnega gibanja) je skorajda neuporaben za animacijo uporabniškega vmesnika in je tudi prej izjema kot pravilo.

Sekundarno dejanje je koristno in je odlično za prehod na zaslonu in vzpostavitev vizualne hierarhije.

Čas je pomemben pri risanju znakov, toda v uporabniških vmesnikih, kjer mora biti gibanje jasno, da se lahko odzovemo, se mi je bolje zanesti na lajšanje oblikovanja občutka interakcije, namesto na trajanje.

Pretiravanje se nanaša na stopnjo realizma ali karikature, spet težko vpliva na animacijo uporabniškega vmesnika, saj je zasnova vnaprej določena.

Tudi trdna risba je večinoma nespremenjena, saj se animacija uporabniškega vmesnika ukvarja z vedenjem vmesniških predmetov skozi čas, ne z dejanskim oblikovanjem samih predmetov.

Pritožba govori tudi o vizualni obravnavi, ki spet ni pomembna za to, kako se vmesnik obnaša skozi čas.

V zaključku

Torej ostaja vprašanje: zakaj 12 osnovnih načinov animacije ne opisuje natančno animacije uporabniškega vmesnika?

Razčlenitev je mogoče najlažje razumeti s preprostim opazovanjem: animacija uporabniškega vmesnika ne upošteva istih pravil niti nima enakih načel kot organska telesa, ki se gibljejo v fizičnem prostoru. Animacija uporabniškega vmesnika je izrazit medij, tako različen, kot je fotografija od slikarstva - s prekrivajočimi se značilnostmi (tako fotografija kot slikanje sta statični vizualni kompoziciji, ki se opirata na svetlobo in kompozicijo), vendar sta v osnovi različna medija.

Preprosto rečeno, 12 osnovnih načel animacije ne velja za animacijo uporabniškega vmesnika, ker rešujejo drugačen problem.

V naslednjih nekaj člankih bom preučil, kaj so ti načeli animacije uporabniškega vmesnika, za katere težave rešujejo načela animacije uporabniškega vmesnika, kako se načela razlikujejo od tehnik in kako lahko oblikujete in uporabljate animacijo uporabniškega vmesnika v svojih trenutnih in prihodnjih projektih, da vplivate na uporabnost in ustvarite bolj prepričljivo in učinkovito uporabniško izkušnjo.