Dizajn pokreta ne mora biti težak

U područjima koja su najvažnija za korisničko sučelje, dizajn pokreta može i treba biti jednostavan

Motion pomaže da UI-i budu izražajni i jednostavni za upotrebu. Iako ima toliko potencijala, pokret se možda najmanje razumije u svim dizajnerskim disciplinama. Možda je to što je jedan od novijih članova dizajnerske obitelji UI. Vizualni i interaktivni dizajn datira još od ranih GUI-ja, ali kretanje je moralo čekati da moderan hardver glatko izvede animaciju. Preklapanje između pokreta UI i tradicionalne animacije također zamućuje vode. Čitav život može se provesti svladavanjem Disneyjevih 12 principa, znači li to kretanje korisničkog sučelja slično složeno? Ljudi mi često kažu da je projektiranje pokreta komplicirano ili da je odabir pravih vrijednosti dvosmislen. Tvrdim da u područjima koja su najvažnija za korisničko sučelje dizajn pokreta može i treba biti jednostavan.

Gdje započeti

Primarni posao Motion-a je pomoći korisnicima da se kreće kroz aplikaciju ilustrirajući odnos između elemenata korisničkog sučelja. Motion također ima mogućnost dodavanja lika aplikaciji s animiranim ikonama, logotipom i ilustracijama; međutim, uspostavljanje upotrebljivosti trebalo bi imati prednost u odnosu na dodavanje ekspresivnosti. Prije fleksiranja vještina animacije znakova, započnimo s dizajnom snažnog temelja pokreta usredotočivši se na navigacijske prijelaze.

Prijelazni obrasci

Pri dizajniranju navigacijskog prijelaza, jednostavnost i dosljednost su ključni. Da bismo to postigli, mi ćemo odabrati između dvije vrste obrasca pokreta:

  1. Prijelazi na temelju spremnika
  2. Prijelazi bez spremnika.

Prijelazi na temelju spremnika

Elementi poput teksta, ikona i slika grupirani su u spremnike

Ako kompozicija uključuje spremnik poput gumba, kartice ili popisa, tada se prijelazni dizajn temelji na animiranju spremnika. Kontejnere je obično lako uočiti na temelju njihovih vidljivih rubova, ali zapamtite da mogu biti nevidljivi dok prijelaz ne započne, poput stavke popisa bez razdjelnika. Ovaj se obrazac raščlanjuje na tri koraka:

1. Animirajte spremnik pomoću standardnog olakšavanja materijala (što znači da ubrzava brzo, a zatim lagano usporava da se odmori). U ovom primjeru, dimenzije i radijusi spremnika animiraju od kružnog gumba do pravokutnika koji ispunjava zaslon.

2. Elemente skalirajte u spremniku tako da se odgovaraju širini. Elementi su pričvršćeni na vrh i maskirani unutar spremnika. To stvara jasnu vezu između spremnika i elemenata iznutra.

* Animacija je usporila kako bi ilustrirala kako se elementi skaliraju i maskiraju unutar spremnika

3. Elementi koji izlaze tijekom prijelaza izblijedjuju kako se spremnik ubrzava. Elementi koji uđu izblijedi kako se spremnik usporava. Besprijekoran uglađeni efekt ruke postiže se blijedećim elementima kako se brzo kreću.

* Animacija je usporila kako bi ilustrirala kako elementi izlaze i ulaze pomoću blede

Primjena ovog uzorka na sve prijelaze koji uključuju spremnik uspostavlja dosljedan stil. Također čini jasnim odnos početne i završne kompozicije jer ih povezuje animirani spremnik. Kako biste pokazali fleksibilnost ovog uzorka, ovdje se primjenjuje na pet različitih sastava:

* Animacija je usporena kako bi se ilustriralo kako početni i krajnji sastavi spajaju spremnik

Neki se spremnici jednostavno ubacuju s zaslona koristeći Standardno olakšavanje materijala. Smjer iz kojeg se kreće obaviještava mjesto komponente s kojom je povezan. Primjerice, dodirivanjem ikone navigacijske ladice u gornjem lijevom kutu pomaknite spremnik s lijeve strane.

Ako spremnik uđe unutar okvira ekrana, on se bledi i povećava. Umjesto animiranja sa 0% skale, kreće se od 95% kako bi izbjegao pretjeranu pažnju na prijelaz. Animacija razmjera upotrebom materijala olakšava usporavanje usporavanja, što znači da počinje maksimalnom brzinom i lagano se usporava. Za izlazak spremnik jednostavno izbledi bez skaliranja. Izlazne animacije dizajnirane su tako da budu suptilnije od ulaza da bi se pažnja usmjerila na novi sadržaj.

* Animacija je usporila kako bi ilustrirala kako spremnici mogu ući s animacijom blede i razmjera

Prijelazi bez spremnika

Neki sastavi neće imati spremnik na kojem će temeljiti dizajn prijelaza, poput dodirivanja ikone u donjem navvu koji korisnika dovodi do novog odredišta. U tim se slučajevima koristi obrazac u dva koraka:

  1. Početni sastav izlazi ispadanjem, a završni sastav ulazi bleđenjem.
  2. Kako krajnji sastav bledi, tako se i suptilno povećava koristeći olakšavanje usporavanja materijala. Opet, razmjera se primjenjuje samo na sastav koji unosi kako bi se naglasio novi sadržaj preko starog.
* Animacija je usporena da ilustrira kako prijelazi bez spremnika koriste blijeđenje i skaliranje

Ako početna i krajnja kompozicija imaju jasan prostorni ili sekvencijalni odnos, može se upotrijebiti zajedničko gibanje da bi se pojačalo. Na primjer, tijekom kretanja po koračnoj komponenti, početna i završna kompozicija dijele vertikalno klizno kretanje kako blijede. To pojačava njihov vertikalni izgled. Kad dodirivate sljedeći gumb u toku vožnje, kompozicije dijele vodoravno klizno gibanje. Pomicanje lijevo udesno pojačava pojam napredovanja u nizu. Dijeljeno kretanje koristi Standardno olakšavanje materijala.

* Animacija je usporena da ilustrira okomito i vodoravno dijeljenje

Najbolje prakse

Neka bude jednostavno

S obzirom na njihovu visoku frekvenciju i bliske veze s upotrebljivošću, navigacijski prijelazi općenito bi trebali davati prednost funkcionalnosti u odnosu na stil. To ne znači da ih nikada ne treba stilizirati, samo budite sigurni da je odabir stila marka opravdan. Gibanje pokreta za oči obično je najbolje rezervirano za elemente poput malih ikona, logotipa, utovarivača ili praznih stanja. Jednostavni donji primjer možda neće privući toliko pozornosti na Dribbble, ali učinit će to korisnijom aplikacijom.

* Animacija je usporena kako bi se prikazali različiti stilovi pokreta

Odaberite ispravno trajanje i olakšavanje

Mornarički prijelazi trebaju koristiti trajanja koja daju prednost brzini, ali ne toliko brzom da postanu dezorijentirajuća. Trajanja se odabiru prema tome koliko zaslona zauzima animacija. Budući da navigacijski prijelazi obično zauzimaju veći dio zaslona, ​​dugo trajanje od 300 ms dobro je pravilo. Suprotno tome, male komponente poput sklopke koriste kratko vrijeme od 100 ms. Ako se prijelaz osjeća prebrzo ili sporo, prilagodite njegovo trajanje u koracima od 25 ms sve dok ne postigne pravi balans.

Easing opisuje brzinu kojom animacije ubrzavaju i usporavaju. Većina navigacijskih prijelaza koristi Standardno olakšanje materijala, što je asimetrični tip olakšavanja. To znači da se elementi brzo ubrzavaju, a zatim lagano usporavaju kako bi usredotočili pažnju na kraj prijelaza. Ova vrsta ublažavanja daje animacijama prirodnu kvalitetu, jer se predmeti u stvarnom svijetu trenutno ne pokreću ili ne prestaju kretati. Ako se prijelaz čini ukočenim ili robotskim, vjerojatno je simetrično ili linearno ublažavanje pogrešno izabrano.

* Animacija je usporena kako bi ilustrirala različite vrste olakšavanja

Obrasci i najbolje prakse navedeni u ovom članku namijenjeni su uspostavljanju praktičnog i suptilnog stila pokreta. Ovo je pogodno za većinu aplikacija, no neke marke mogu zahtijevati intenzivnije izraze stila. Da biste saznali više o stiliziranju pokreta, pročitajte naše smjernice za prilagodbu ovdje.

Jednom kada su riješeni navigacijski prijelazi, započinje izazov dodavanja znaka vašoj aplikaciji. Ovdje su jednostavni obrasci neadekvatni i zanat animacije doista sjaji.

Animacija likova može dodati lakoću frustrirajuće pogreške

Ako želite saznati više o potencijalu kretanja, pročitajte naše smjernice za gibanje materijala.