Az UI animációs alapelvei: A Disney meghalt

A fotográfia várhatóan a festészet halála (korai dagerotípus)

(Ha e-mailben szeretné megkapni az UI-animációról szóló cikkeimet, és fel szeretne venni a hírlevelemet, kattintson ide.)

Egy új médium

Amikor Paul Delaroche valamikor 1839 körül felfedezte a dagerotípust, híresen kijelentette: "A festészet ma mára meghalt!"

Addig az időpontig a külső világ vizuális dokumentálásának egyetlen módja a felületre kézzel felvitt közeg használata volt. A különböző tudományágak közötti évszázados kivitelezés számos elvet és technikát fedezett fel a különféle médiumokban. A kultúrák között és a korszak előrehaladtával kialakult a vizuális ábrázolás „megjelenésének” stílusa és vizuális nyelve - az eredeti tervezési minták.

A korai fotósok, akiknek képei megpróbálták képeiket a mai népszerű festményekhez hasonlítani, gyakran világítási és nyomtatási technikák kombinációját alkalmazták képeik lágyításához és festői megjelenés létrehozásához. A festészet világának megértésével szorosan összekapcsolták, befolyásolták és korlátozták azt, hogy mire képes a fotózás közepe.

Közel száz év telt el, mire a fotósok, mint Ansel Adams, Imogen Cunningham, Edward Weston és mások a 'Group f / 64' csoportjában, jelentősen bejutottak a vizuális nyelvbe, amely megkülönbözteti a fényképezést a festménytől, mint egyedülálló médiumtól - saját vizuális képeivel a nyelv és az alapelvek, és ennek során forradalmasították a fotózás területét.

Edward Weston, Imogen Cunningham, Ansel Adams

A Disney egy másik problémát oldott meg

Szerencsére az UI animációjában ilyen forradalom van.

1981-ben Ollie Johnston és Frank Thomas kiadta a Disney Animation: Az élet illúzióját, és bevezette az úgynevezett „animáció 12 alapelveit”. Ezek az elvek megoldották a „valósághű mozgás” létrehozásának problémáját, amely akkor fordul elő, ha a szerves testek mozogni és reagálni a fizikai térben (az alapelvek kiterjednek olyan kérdésekre is, mint az érzelmi időzítés és a karakter vonzereje).

A felhasználói felület animációja, mivel a felhasználói élmény része alig húsz éves, és még gyerekcipőben jár. A felhasználói felület animációjának doménjének megjelenésekor a 12 animációs alapelv volt az egyetlen elérhető eszköz, amely leírja, hogyan viselkedik a felhasználói felület időben. Ugyanúgy, ahogyan a korai fotósok megpróbálták megérteni a fényképezést a festészet szabályain keresztül, a tervezők megkíséreltek megérteni az UI animációt a Disney animáció szabályain keresztül.

A felszínen ez érthető, mivel van bizonyos mértékű átfedés. A könnyített mozgás, a 12 animációs alapelv egyike, a mozgás révén erősíti a „helyesség” érzetét, ami kritikus a felhasználói élmény szempontjából. Megkönnyebbülés nélkül az UI animáció nehézkes és furcsa.

A teljes lebontás akkor nyilvánvaló, ha közelebbről megvizsgáljuk a 12 alapelvet a felhasználói felület összefüggésében.

A Squash és a Stretch súlyt és rugalmasságot ad az objektumoknak, ami inkább kivétel, mint szabály a felhasználói felületekben.

A várakozás azt az érzést kelti, hogy valami történni fog, és szintén szinte hiábavaló, ha a felhasználói élményekről van szó. Csak korlátozott módon működik a kiválasztott mikrointerakciók és gombállapotok esetében.

A színpad az animáció elrendezésére utal, ami értelme egy Disney rajzfilmnek, mivel a karakterek folyamatosan mozgásban vannak, de felhasználói élményben ezt csak a „tervezésnek” gondolják.

Az „Egyenesen előre” fellépés és a Pose-Pose kevésbé alapelvek, mint a tényleges rajz- / animációs folyamat megközelítései: Folyékonyabb animációt készíthet, ha folyamatos kereteket rajzol, vagy a Pose használatával jelenthet néhány kulcskeretet, és kitöltheti a hiányosságokat . A felhasználói tapasztalatok szerint ez a folyamat aligha fordul le, kivéve, ha tényleges képkockánkénti animáció történik. Alapértelmezés szerint, függetlenül a használt eszköztől, szinte minden felhasználói felület animációt kulcskeretekkel hoznak létre.

Az átfedés és az átfedés közötti cselekvés a fizika és a tehetetlenség törvényeinek követésével, valamint azzal, hogy a fizikai test hogyan reagál, mindkettőnek kevés köze van a felhasználói felületekhez, hacsak nem számítunk a következő alapelvre, amely a csoportban a leghasznosabb .

A Slow In és Slow Out szerint a tárgyaknak időre van szükségük a gyorsuláshoz és a lassuláshoz. Ez rendkívül fontos, mivel a felhasználói felület animációjának 100% -ánál kell ezt az elvet alkalmazni. Ezt általában enyhítésnek nevezik, és rendkívül fontos.

Az ív (a fizikai mozgás reprodukálásához szükséges) szinte hiábavaló az UI animációhoz, és inkább kivétel, mint szabály.

A másodlagos művelet hasznos, és nagyszerű a képernyő átmenetekhez és a vizuális hierarchia beállításához.

Az időzítés releváns a karakterek rajzolásakor, de azokban a felhasználói felületekben, ahol a mozgásnak élesnek kell lennie ahhoz, hogy érzékenyen reagáljon, jobbnak tartom, hogy inkább az interakció érzésének megtervezésének megkönnyítésére támaszkodom, inkább az időtartamra.

Az eltúlzás a realizmus vagy a karikatúra mértékére vonatkozik, ismét alig releváns a felhasználói felület animációja szempontjából, mivel a terv előre meghatározott.

A szilárd rajzok szintén többnyire vitathatatlanok, mivel az UI animáció az interfész objektumok viselkedésével foglalkozik idővel, nem pedig az objektumok tényleges tervezésével.

A fellebbezés a vizuális kezelésre is vonatkozik, szintén nem releváns az interfész időbeli viselkedése szempontjából.

Összefoglalva

Tehát a kérdés továbbra is fennáll: miért nem írja le pontosan az animáció 12 alapelve a felhasználói felület animációját?

A bontást legjobban az egyszerű megfigyeléssel lehet megérteni: a felhasználói felület animációja nem felel meg ugyanazoknak a szabályoknak, és nem ugyanazok az alapelvek, mint a fizikai térben mozgó szerves testek. Az UI animáció különálló közeg, ugyanúgy különbözik a fényképezéstől, mint a festményektől - átfedő jellemzőkkel (a fényképészet és a festészet egyaránt statikus vizuális kompozíciók, amelyek fényre és kompozícióra támaszkodnak), de alapvetően eltérő médiumok.

Egyszerűen fogalmazva, az animáció 12 alapelve nem vonatkozik az UI animációra, mivel más problémát oldanak meg.

A következő néhány cikkben megvizsgálom, melyek ezek az UI-animációs alapelvek, milyen problémák megoldják az UI-animációs alapelveket, mennyiben különböznek az alapelvek a technikáktól, és hogyan lehet az UI-animációt megtervezni és használni a jelenlegi és a jövőbeli projektjeiben a használhatóság befolyásolása érdekében. hozzon létre vonzóbb és hatékonyabb felhasználói élményeket.