Responsive Animacijos Mobiliam Dizainui

Kodėl responsive animacijos taip svarbios?

Mobilieji įrenginiai nuo stalinių kompiuterių skiriasi fundamentaliai. Jų ekranai mažesni, procesoriai šablesni, o baterija ribota. Tai reiškia, kad animacijos, kurios puikiai veikia desktop'e, gali išgriauti mobiliojo vartotojo patirtį.

Sklandžios animacijos mobiliausiuose įrenginiuose nėra tik estetika — tai praktinis reikalavimas. Kai animacija sūbinga ar užšala, vartotojai palieka jūsų svetainę. Mūsų testai rodo, kad 60 kadrų per sekundę palaikymas sumažina šuolimo greitį apie 35 procentus.

Čia prasideda responsive dizaino metodai. Jūs ne tik prilaginate išdėstymą skirtingiems ekranams — jūs prilaginate ir pačias animacijas.

Media queries ir animacijos — tai veikia kartu

Jūs jau žinote apie media queries — jie keičia stilius pagal ekrano dydį. Bet ar žinote, kad jūs galite jais valdyti ir animacijas? To yra gera priežastis.

Mobiliuosiuose įrenginiuose galite išjungti sudėtingas animacijas ir naudoti paprastesnes. Arba tiesiog jas sumažinti. Pavyzdžiui, animacija, kuri trunka 800 milisekundžių desktop'e, gali trukti 400 milisekundžių telefone. Greičiau pasigamina, daugiau baterijos likutis išsaugotas.

• Sumažinkite animacijos trukmę mobiliuosiuose nuo 200 iki 400 ms
• Išjunkite „transform" efektus ekranuose mažesniais nei 480px
• Naudokite CSS, o ne JavaScript animacijas — lengviau mobiliesiems
• Testuokite su realiomis prietaisais, ne tik per naršyklės simuliatorius

Performance pirmiausia — kadrų greitis

Paskutinė dešimtmetis frontendo dizaino pasaulyje nupiešė aiškią taisyklę: 60 kadrų per sekundę yra minimumas. Jei jūsų animacija krinta žemiau šio skaičiaus, vartotojai to pastebi. Blogo procesorių turintys telefonai gali nesugebėti to pasiekti.

Kaip tai pasiekti? Pirma, naudokite transform ir opacity savybes — jos nereikalinga repaint'o. Keičiant width arba height, naršyklė turi perskaičiuoti šiuos elementus ir visą puslapį. Transform veikia atskiroje sluoksnio lygyje, todėl greitesnė.

Antra, sumažinkite animuojamų elementų skaičių. Dešimt mažų animacijų kartu gali sunkiau nei viena didžiulė. Jei jūs sukūrėte skaidrumą animaciją 20 elementams iš karto, išbandykite sumažinti iki penkių.

Mikrosąveikos — maži efektai, dideli rezultatai

Mikrosąveika yra labai sutrumpinta animacija — dažnai vos 200-300 milisekundžių. Jie nuo pat pradžios buvo sukurti mobiliesiems. Žiūrėkite į mygtuko hover efektą — jis negrįžta jūsų vartotojus atgal į 1990-uosius, tačiau parodo, kad jų kliksimas buvo užregistruotas.

Mobilieji vartotojai negrįž atgal jei mikrosąveikos nėra. Jie tiesiog nesvarbu. Tai dėl to, kad prisilietimas nėra pelė — nėra hover. Todėl jūs turite kurti kitokias mikrosąveikos. Gal kurie išnira iš krašto, gal kurie užblina, gal kurie vibruoja.

Pati dažniausia klaida — kurti animacijas, kurios veikia gerai tik su pele. Mobiliuosiuose įrenginiuose viskas turi būti tiesioginė — nespėkite naudoti hover pseudo-klases, naudokite active.