Käyttöliittymän animaation periaatteet: Disney on kuollut

Valokuvauksen ennustettiin olevan maalauksen kuolema (varhainen Daguerreotype)

(Jos haluat vastaanottaa UI-animaatioita koskevia artikkeleani sähköpostitse ja saada lisätietoja uutiskirjeeni, napsauta tätä.)

Uusi väline

Kun Paul Delaroche kohtasi dagerrotyypin joskus noin vuonna 1839, hän julisti kuuluisasti: "Tästä päivästä lähtien maalaus on kuollut!"

Siihen asti ainoa tapa dokumentoida ulkoinen maailma visuaalisesti oli käyttää käsin pintaan levitettyä väliainetta. Vuosisatojen käsityötaito eri aloilla oli johtanut siihen, että löydettiin lukuisia periaatteita ja tekniikoita erilaisista medioista. Kulttuurien välillä ja aikakausien edetessä tyylin ja visuaalisen kielen, kuinka visuaalisten esitysten pitäisi näyttää, kehittyi - alkuperäiset suunnittelumallit.

Varhaiset valokuvaajat, jotka yrittivät saada kuviaan muistuttamaan päivän suosittuja maalauksia, käyttivät usein valaistus- ja painotekniikoiden yhdistelmää kuvien pehmentämiseen ja maalauksellisen ilmeen luomiseen. Heidän ymmärryksensä siitä, mihin valokuvausväline kykeni, oli läheisesti yhteydessä toisiinsa, vaikutti niihin ja rajoitti heidän ymmärrystään maalausmaailmasta.

Kesti melkein sata vuotta, ennen kuin valokuvaajat, kuten Ansel Adams, Imogen Cunningham, Edward Weston ja muut ryhmässä f / 64, ryhtyivät merkittävään tunkeutumiseen visuaaliseen kieleen, joka erottaa valokuvauksen maalauksesta erillisenä välineenä - jolla on oma visuaalinen kieli ja periaatteet, ja näin toimiessaan ne mullistivat valokuvauksen alueen.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney ratkaisi toisen ongelman

Onneksi havaitsemme tällaisen vallankumouksen käyttöliittymien animaatiossa.

Vuonna 1981 Ollie Johnston ja Frank Thomas julkaisivat Disney Animation: The Illusion of Life -elokuvan ja esittelivät ns. "Animaation 12 perusperiaatetta". Nämä periaatteet ratkaisivat ongelman, miten luodaan "realistinen liike", joka tapahtuu orgaanisissa elimissä. liikkua ja reagoida fyysisessä tilassa (periaatteet kattavat myös asiat, kuten tunneajoituksen ja hahmon vetoomuksen).

UI-animaatio, osana käyttäjäkokemusta on tuskin 20 vuotta vanha ja on vielä lapsenkengissä. Kun käyttöliittymäanimaation alue syntyi, ainoat käytettävissä olevat työkalut kuvaamaan käyttöliittymän käyttäytymistä ajoissa olivat 12 animaation periaatetta. Aivan kuten varhaiset valokuvaajat yrittivät ymmärtää valokuvausta maalaamisen sääntöjen kautta, suunnittelijat yrittivät ymmärtää UI-animaatioita Disney-animaation sääntöjen kautta.

Pinnalla tämä on ymmärrettävää, koska siinä on jonkin verran päällekkäisyyksiä. Helppo liike, yksi 12 animaatioperiaatteesta, vahvistaa liikkeellä 'oikeellisuuden' tunnetta, mikä on käyttäjän kokemuksen kannalta kriittistä. Ilman keventymistä käyttöliittymän animaatio tuntuu hankalalta ja outolta.

Täysi erittely on ilmeinen, kun tarkastellaan lähemmin 12 periaatetta käyttöliittymän yhteydessä.

Squash ja Stretch antavat kohteille painon ja joustavuuden, mikä on pikemminkin poikkeus kuin sääntö käyttöliittymissä.

Ennakointi luo tunteen, että jotain on tapahtumassa, ja se on myös melkein hyödytön käyttökokemuksissa. Se toimii vain rajoitetulla tavalla valituille mikrovuorovaikutuksille ja painikkeiden tiloille.

Lavastus viittaa animaation asetteluun, mikä on järkevää Disney-sarjakuvalle, koska hahmot ovat jatkuvasti liikkeessä, mutta käyttökokemuksessa tätä ajatellaan vain "suunnitteluna".

Suoraan eteenpäin suuntautuminen ja poseeraus ovat vähemmän periaatteita kuin lähestymistavat todelliseen piirustus- / animaatioprosessiin: voit luoda juoksevamman animaation, jos piirtää jatkuvia kehyksiä, tai käyttää poseja poseerataksesi asettaaksesi muutaman avainkehyksen ja täyttämään aukot. . Käyttäjäkokemuksissa tämä prosessi tuskin edes kääntyy, ellei todellinen kehysten mukainen animaatio ole tapahtunut. Oletuksena, käyttämästäsi työkalusta riippumatta, lähes kaikki käyttöliittymän animaatiot luodaan avainruutuilla.

Seuraavat ja päällekkäiset toiminnot liittyvät fysiikan lakien ja inertian noudattamiseen sekä siihen, kuinka fyysiset elimet reagoivat. Näillä molemmilla on vain vähän tekemistä käyttöliittymien kanssa, ellet luota seuraavaan periaatteeseen, joka on ryhmän hyödyllisin .

Hidasta ja hidastaa sanoo, että esineet tarvitsevat aikaa nopeuttaakseen ja hidastaakseen. Tämä on erittäin tärkeää, koska 100% käyttöliittymän animaatiosta tulisi käyttää tätä periaatetta. Sitä kutsutaan yleisesti 'helpottamiseksi' ja se on erittäin tärkeä.

Kaari (tarvitaan fyysisen liikkeen toistamiseen) on melkein hyödytön käyttöliittymän animaatiossa ja on myös pikemminkin poikkeus kuin sääntö.

Toissijainen toiminta on hyödyllinen ja se soveltuu erinomaisesti näytönsiirtoihin ja visuaalisen hierarkian määrittämiseen.

Ajoitus on merkityksellinen merkkejä piirtäessä, mutta käyttöliittymissä, joissa liikkeen on oltava terävää voidakseen tuntea vastausta, mielestäni on parempi luottaa vuorovaikutuksen tunteen suunnittelun helpottamiseen pikemminkin keston perusteella.

Liioittelu liittyy realismin tasoon tai karikatyyriin, taas tuskin merkitykselliseen UI-animaatioon, koska suunnittelu on ennalta määrätty.

Kiinteä piirtäminen on myös enimmäkseen moot, koska käyttöliittymän animaatio käsittelee rajapintaobjektien käyttäytymistä ajan kuluessa, ei itse objektien todellista suunnittelua.

Valitus puhuu myös visuaaliseen käsittelyyn, taas ei ole merkitystä rajapinnan käyttäytymiselle ajan myötä.

Tiivistettynä

Joten kysymys jää edelleen: miksi animaaation 12 perusperiaatetta ei kuvata tarkasti käyttöliittymän animaatiota?

Jako voidaan ymmärtää parhaiten yksinkertaisella havainnolla: UI-animaatio ei noudata samoja sääntöjä eikä samoja periaatteita kuin fyysisessä tilassa liikkuvat orgaaniset elimet. UI-animaatio on erillinen väline, niin erottuva kuin valokuvaus on maalauksesta - päällekkäisillä ominaisuuksilla (sekä valokuvaus että maalaus ovat staattisia visuaalisia koostumuksia, jotka tukeutuvat valoon ja koostumukseen), mutta ovat pohjimmiltaan erilaisia ​​välineitä.

Yksinkertaisesti sanottuna, animaation 12 perusperiaatetta ei sovelleta käyttöliittymien animaatioon, koska ne ratkaisevat toisen ongelman.

Seuraavien useiden artikkeleiden aikana tutkin, mitkä nämä käyttöliittymäanimaation periaatteet ovat, mihin ongelmiin käyttöliittymäanimaation periaatteet ratkaisevat, kuinka periaatteet eroavat tekniikoista ja kuinka voit suunnitella ja käyttää käyttöliittymäanimaatiota nykyisissä ja tulevissa projekteissasi käytettävyyden ja luoda houkuttelevammat ja tehokkaammat käyttökokemukset.