Vsebina
- STORITE, da so stvari skladne z oblikovalskimi sistemi
- NE vključujte animacij
- NE upoštevajte različnih naprav
- NE vsiljujte animacij uporabnikom
- Bodite pozorni na obstoječe mentalne modele
- NE pozabite na svoje občinstvo
- SE držite Transform in Opacity
- NE delajte animacij predolgo
Končno smo prišli do faze, ko blagovne znamke prepoznavajo moč spletne animacije. Zbrali smo že najboljše primere animacije CSS in vam pokazali, kako jih kodirati, toda v tem članku bomo delili nekaj najboljših nasvetov, kako v projektih uporabniškega vmesnika izkoristiti več od gibanja.
Lisi Linhart je kreativna razvijalka, ki je specializirana za ustvarjanje interaktivnih, premikajočih se stvari na spletu (glejte kita, ki spreminja barvo zgoraj, v akciji). V Pixel Pioneers je stopila na oder, da bi občinstvu razložila, kako ohraniti delovanje animacij v brskalnikih, in predstavila različne možnosti animacije, ki jih imamo danes v spletu. Nato smo jo dohiteli, da smo slišali še nekaj najboljših nasvetov.
STORITE, da so stvari skladne z oblikovalskimi sistemi
Linhart je opazil povečano uporabo oblikovalskih sistemov za nadzor nad uporabo animacije v projektu. Ti sistemi opisujejo in opredeljujejo vrste animacije, ki se pojavijo na različnih vrstah strani na spletnem mestu - na primer na straneh izdelkov.
"Doslednost je vse pomembnejša, pomemben pa je tudi splošen pogled na vse vaše animacije," povzema Linhart.
NE vključujte animacij
"Veliko ljudi vključuje animacije, vendar ne razmišljajo o njihovi uporabnosti," pravi Linhart. "Ugotoviti, kakšen cilj ima animacija in ali je dejansko koristna, je zelo pomembno, namesto da bi samo ustvarili animacijo, da bi imeli animacijo."
Tudi oblikovalni sistemi so lahko v tem pogledu koristni. Ko se odločite za različne vrste gibov, so ti povezani z različnimi nameni v vmesniku.
NE upoštevajte različnih naprav
Glede na vlogo animacije v vašem izdelku lahko uvedete različne pristope glede na uporabljeno napravo. Za namizne izkušnje lahko na primer dodate učinke, ki se odzivajo na dogodke miške, medtem ko lahko mobilna izkušnja vsebuje animacije, ki jih sproži premikanje naprave.
Lahko pa tudi poenostavite stvari, pravi Linhart, in ustvarite globalne animacije, ki so povezane s potekom dela in so primerne ne glede na uporabljeno napravo.
NE vsiljujte animacij uporabnikom
Obstaja več razlogov, zakaj bi uporabnik morda želel izklopiti gibanje - na primer paralaksno pomikanje lahko povzroči bolezen gibanja. Uporabniki, ki ne želijo uporabniških vmesnikov, lahko v svojem brskalniku izberejo zmanjšano gibanje. Zahvaljujoč API-ju za spletne animacije je zdaj enostavno zagotoviti nadomestno izkušnjo z uporabo JavaScript-a; animacije lahko ustavite v svojem načrtu ali jih preskočite do končnega stanja. Animacije so odlične, vendar jih ne vsiljujte ljudem, ki jih nočejo!
Bodite pozorni na obstoječe mentalne modele
Obstajajo določeni miselni modeli, ki temeljijo na fiziki iz resničnega sveta, ki narekujejo, kako naj predmeti obnašamo in kako se odzovemo na določene gibe. Na primer, vrtenje gibanja bo sprožilo pozornost uporabnika, medtem ko bo počasno pojemanje pogosto neopaženo.
"Animacijo lahko uporabimo v kombinaciji z miselnimi modeli, z njimi pa lahko izboljšate svojo animacijo ali razložite nekaj," pravi Linhart. Dober začetek je pri klasičnih 12 principih animacije.
NE pozabite na svoje občinstvo
Na število animacij, ki jih vključite v svoj vmesnik, mora močno vplivati ciljno občinstvo, pravi Linhart. Čeprav lahko veliko poskočnih gibov pripomore k temu, da bo mlado občinstvo navdušeno in navdušeno nad vašim izdelkom, bo starejše občinstvo zmedlo in odvrnilo, ko poskuša vsebino absorbirati v svojem ritmu.
SE držite Transform in Opacity
Linhart pojasnjuje, da obstajajo štiri vrste animacij, ki jih je mogoče poceni obdelati s pomočjo CSS: spreminjanje položaja predmeta, spreminjanje lestvice navzgor ali navzdol, vrtenje in spreminjanje njegove spreminjajoče se motnosti (bledenje navzven in navzven). Od njih sta CSS Transform in Opacity najbolj učinkovita. Upoštevajte to znanje pri oblikovanju svojih uporabniških vmesnikov za gladke in uporabniku prijazne izkušnje.
NE delajte animacij predolgo
Pomembno je pravilno določiti čas animacije. "Animacij ne bi smeli predolgo meriti, ker vaš uporabnik skuša nekaj narediti, in če imate res dolge časovne razporeditve animacij, jih to ovira," poudarja naš Linhart. "Pomembno je torej, da so animacije kratke v vmesnikih."
Obstaja opozorilo: če animirate prehod, lahko uporabite počasnejšo animacijo, da ne bi pritegnili nepotrebne pozornosti.
