Ühtse animatsioonisüsteemiga veebilehel on liikumine osa brändi visuaalsest identiteedist. Seda kavandatakse sama teadlikult kui kirjatüüpe ja värvipaletti. Selle asemel et igale lehele eraldi efekte lisada, lepib meeskond kokku liikumise reeglid: kiirenduskõverad, kestused, ilmumise järjekorra ja paigal püsivad elemendid. Nii mõjub veebileht tervikuna.
Enamik brände ei vaja rohkem animatsiooni. Vaja on vähem, kuid selgemalt määratletud liikumisi, mida kasutatakse järjepidevalt.
Ühtne animatsioonidisain või lihtsalt animeeritud veebileht
Igal animatsioonisüsteemiga veebilehel on animatsioon. Kuid iga animeeritud veebilehe taga ei ole läbimõeldud animatsioonidisaini.
| Animeeritud veebileht | Ühtse animatsioonisüsteemiga veebileht | |
|---|---|---|
| Kuidas liikumine valitakse | Iga jaotise ja disaineri puhul eraldi | Ühise süsteemi alusel |
| Kiirenduskõverad | Teegi vaikeseaded | Kaks-kolm kindla nimega kõverat |
| Kestus | Erineb komponentide kaupa | Määratud süsteemi muutujatega |
| Vähendatud liikumine | Sageli puudub | Eraldi kavandatud režiim |
| Millise mulje jätab | Efektidega mall | Omanäoline bränd |
Otsing „motion graphics website“ tähendab tavaliselt midagi muud: veebilehte, kus esitletakse videoid ja liikuvat graafikat, näiteks stuudio näidisklippi. Siin räägime aga kasutajaliidese enda liikumisest.
Liikumine kui osa brändi väljendusest
Mõtle kahe auto ukse sulgumisele: üks sulgub raskelt ja summutatud kõlaga, teine kergelt ja kiiresti. Mõlemad on teadlikult kujundatud. Veebilehe liikumine toimib samamoodi. Aeglane ease-out ja pikk pehme vaibumine mõjuvad rahulikult ning luksuslikult. Kiire vetruv liikumine, mis läheb korraks sihtpunktist veidi edasi, mõjub mänguliselt ja energiliselt.
Suurema osa sellest iseloomust annavad neli omadust.
1. Kiirenduskõver
Kiirenduskõver määrab, kuidas liikumise kiirus muutub. See annab kõige selgema vihje animatsiooni kvaliteedi kohta.
Nielsen Norman Group märgib, et täiesti lineaarne liikumine mõjub ebaloomulikult, ning soovitab enamiku peatuvate elementide puhul ease-out-kõverat. Brändi süsteemis võib olla üks ilmumiskõver, üks lahkumiskõver ja üks väljendusrikkam kõver võtmehetkede jaoks.
2. Kestus
NN/g soovitab enamiku kasutajaliidese animatsioonide kestuseks 100-500 ms: lihtsa tagasiside, näiteks lüliti puhul umbes 100 ms ning suurema muutuse, näiteks modaalakna puhul 200-300 ms. Brändi jaoks olulised hetked, nagu avavaate ilmumine või lehevahetus, võivad kesta kauem, kuid neid peaks olema vähe.
3. Rütm ja viivitused
Kui mitu elementi ilmub järjest, loob nendevaheline viivitus rütmi. 40 ms vahe mõjub lainetusena. 120 ms vahega ilmub loend rahulikumalt, elementhaaval. Vali üks lähenemine ja kasuta seda kõikjal.
4. Liikumise järjekord
Mis liigub esimesena, mis järgneb ja mis püsib paigal? Heal lahendusel on selge järjekord: kõigepealt pealkiri, seejärel pilt ja viimasena kasutajaliidese elemendid. Kui kõik liigub korraga, kaob see selgus.
Kuidas animatsioonisüsteem praktikas välja näeb
Disainimeeskonnad kasutavad juba värvide ja vahede jaoks süsteemi muutujaid. Animatsiooni saab määrata samamoodi. Siin on näitlik algkomplekt meie näidisväärtustega, mida kohandatakse iga brändi jaoks eraldi.
| Muutuja | Väärtus | Kasutus |
|---|---|---|
--motion-instant |
100 ms | Tagasiside kursori viimisel elemendi kohale, lülitamisel ja vajutamisel |
--motion-quick |
200 ms | Rippmenüüd, kohtspikrid, väikeste elementide ilmumine |
--motion-base |
320 ms | Kaardid, modaalaknad, piltide ilmumine |
--motion-slow |
600 ms | Avavaate ilmumine, lehevahetused |
--ease-enter |
ease-out-kõver | Ilmuvad ja paigale jäävad elemendid |
--ease-exit |
ease-in-kõver | Lahkuvad elemendid |
--stagger |
60 ms | Loendid ja ruudustikud |
--motion-reduced |
Sujuv hajutusüleminek, 150 ms | Asendab liikumise vähendatud liikumise režiimis |
Need väärtused on CSS-i muutujates ja GSAP-i seadistuses, nii et disainerid ning arendajad kasutavad samu nimesid. Kui bränd soovib järgmisel aastal rahulikumat liikumist, piisab nelja arvu muutmisest, selle asemel et muuta neljasadat animatsiooni.
Viimane muutuja on eriti tähtis. Süsteem peab arvestama sellega, kui külastaja on operatsioonisüsteemis sisse lülitanud vähendatud liikumise. Selgitame seda põhjalikult artiklis ligipääsetavast veebianimatsioonist.
Kellele sobib ühtse animatsioonisüsteemiga veebileht
Sobib hästi:
- Luksus- ja moebrändidele. Tempo ja mõõdukus annavad märku kvaliteedist. Loe meie mõtteid luksusbrändi veebidisainist.
- Toote turuletoomiseks. Toode, mis kerimisel kokku pannakse, pöördub või avaneb, näitab ise, kuidas see toimib.
- Kinnisvaraarendustele. Ostja valib midagi, mida pole veel olemas. Animatsioon ja 3D aitavad tulevast objekti ette kujutada.
- Stuudiotele, portfooliotele, majutus- ja toitlustusettevõtetele. Kui veebilehe kasutamise kogemus on osa sellest, millega klienti veenda.
Sobib halvasti:
- Dokumentatsioonile, tarberakendustele ja avalikele e-teenustele. Inimene soovib vastust, mitte sissejuhatavat efekti.
- Uudiste- ja sisurohketele veebilehtedele. Liikumine tõmbab tähelepanu lugemiselt kõrvale.
- Meeskondadele, kellel pole hoolduseks aega. Keegi peab animatsioonisüsteemi eest vastutama. Muidu lisatakse uutele lehtedele juhuslikke efekte ja ühtne süsteem laguneb.
Märgid, et veebileht vajab ühtset animatsioonisüsteemi
- Eri lehtedel kasutatakse eri animatsioonistiile, kuigi keegi pole seda otsustanud.
- Arendajad küsivad iga ülesande juures: „Kuidas peaks see element liikuma?”
- Kuvatõmmistel näeb leht hea välja, kuid kasutamisel mõjub odavalt.
- Sarnaste toodetega konkurendid jätavad kõrgema klassi mulje, kuid sa ei oska öelda, miks.
Kui vähemalt kaks punkti on tuttavad, on enamasti vaja ühtset süsteemi, mitte lisaefekte. Sobivaid võtteid leiad animatsiooniga veebilehtede näidetest. Eelarvest loe artiklist animatsiooniga veebilehe hinna kohta.
