5 pagrindiniai animacijos modeliai ir kaip juos naudoti

Animacija gali būti labai galinga interneto dizaino įrankis . Tačiau prieš animuodami kiekvieną savo dizaino elementą, turime sužinoti, kada ir kaip naudoti šį naują įrankį. Su didele galia ateina didelė atsakomybė ir pan. Kadangi animacija turi kelti daugybę kitų problemų, susijusių su kūrimu ir projektavimu, tikslinga mūsų išteklius išleisti ten, kur jie labiausiai atiteks.

Šiame straipsnyje pateikiami keli pagrindiniai animacijos modeliai ir parodyta, kaip animacija taikoma didesnei sistemai. Tada sužinosite, kaip pastebėti kognityvines kliūtis ir mažai pakibusius vaisius, maksimaliai padidinant animacijų, į kurias investuojate, poveikį vartotojo patirtis .

Jei peržiūrėjote tiek daug animacijos pavyzdžių internete ir programoje esančiose sąsajose, kiek aš turiu, pradeda ryškėti tam tikri modeliai. Šie modeliai padeda nustatyti ir glaustai pasakyti animacijos tikslą kitiems.



Čia yra kategorijos, kurias dažniausiai naudojau: perėjimai, priedai, atsiliepimai, demonstracijos ir dekoracijos. Pažvelkime į kiekvieną iš jų ir pažiūrėkime, kaip jie veikia vartotojo patirtį.

kaip įdėti vaizdo įrašą į pdf

01. Perėjimai

Perėjimai paimkite vartotojus iš vienos vietos į kitą informacinėje erdvėje arba perkelkite juos iš vienos užduoties į kitą. Tai paprastai daro didžiulį poveikį puslapio turiniui, pakeisdamas didelę informacijos dalį.

Iš pradžių žiniatinklis buvo sukurtas kaip susietų dokumentų serija. Spustelėjus nuorodą, naršyklė nuvalė ekraną, dažnai sukeldama baltą lemputę, prieš tapydama kitą puslapį nuo nulio. Nors tai buvo prasminga susietų tekstinių dokumentų kontekste, tai nėra prasminga epochoje, kai puslapiai turi daug turtingo dizaino elementų ir priklauso tai pačiai sričiai. Ne tik švaisto naršyklės išteklius vis atkuriant tą patį puslapio išdėstymą, bet ir padidėja vartotojų pažintinis krūvis, kai jie turi persiorientuoti ir iš naujo įvertinti puslapio turinį.

Animacija, ypač judesys, gali palengvinti vartotojo orientaciją informacinėje erdvėje, perkraunant tas pastangas į smegenų regos žievę. Naudojant perėjimą tarp užduočių srauto pokyčių ar vietų informacijos architektūroje, idealu, vienu ypu sustiprina tai, kur vartotojas buvo, kur eina ir kur dabar yra.

Pavyzdžiui, „Nike“ „SB Dunk“ puslapyje (parodyta aukščiau), kai vartotojas spustelėja naršymo rodyklę, dabartinis sportinis batelis pasislenka nuo kelio, o kitas sportinis batelis juda priešinga kryptimi. Šie perėjimai aiškiai parodo vartotojui, kaip jie eina tiesiniu sportinių batelių tęstinumu, padėdami jiems sekti savo vietą ir sustiprindami erdvinį realių sportinių batelių eilės analizės modelį.

Kitoje avalynės svetainėje, John Fluevog, perėjimai perkelia vartotoją iš užduoties į užduotį (žr. Aukščiau). Vartotojui pradėjus rašyti paieškos lauke, rezultatai bus animuojami tamsesnio fono viršuje. Tai perkelia vartotoją iš naršymo konteksto į paieškos rezultatų patikslinimą, supaprastina dėmesį ir nuramina, kad jie gali grįžti į naršymą be didelių pastangų.

02. Papildai

Priedai pateikia informaciją puslapyje arba už jos ribų, tačiau nekeičia vartotojo „vietos“ ar užduoties. Paprastai jie prideda arba atnaujina papildomo puslapio turinį.

Nors perėjimai perkelia vartotoją iš būsenos į būseną, papildomos animacijos suteikia vartotojui papildomos informacijos. Pagalvokite apie atvejus, kai informacija, papildanti pagrindinį puslapio turinį, pasirodo arba išnyksta: įspėjimai, išskleidžiamieji meniu ir patarimai yra geri kandidatai į papildomą animaciją įeinant ir išeinant.

Atminkite, kad šiose animacijose reikia gerbti vartotojo regėjimo kūgį: ar jie žiūrės tiesiai į patarimą, rodomą šalia žymeklio, ar jų dėmesį reikės nukreipti į įspėjimą, esantį planšetinio kompiuterio šone?

Kai vartotojas prideda prekę prie savo pirkinių krepšelio adresu glossier.com, o ne nukreipia jį į visiškai naują pirkinių krepšelio puslapį, svetainė tik atnaujina naudotojo krepšelio turinį, iššokdama kaip šoninę juostą (viršuje). Nors perėjimas vartotojui išjungs naršymo režimą, ši papildoma animacija leidžia vartotojui atsisakyti pirkinių krepšelio ir tęsti apsipirkimą.

Pirkinių krepšelio šoninėje juostoje naudojama papildoma papildoma animacija, skirta greitai ir subtiliai pritraukti vartotojo žvilgsnį: progreso matuoklis palaipsniui pildosi, kad parodytų, kiek vartotojas turi išleisti, kad gautų nemokamą pristatymą.

Šiame pirkinių krepšelio procese vyksta trečiasis animacijos modelis: mygtukas „Į krepšį“ spustelėjus įgyja besisukančią piktogramą, kuri suteikia vartotojui atsiliepimą apie jo pakrovimo būseną. Kalbant apie atsiliepimus ...

03. Atsiliepimai

Grįžtamasis ryšys rodo priežastinį ryšį tarp dviejų ar daugiau įvykių, dažnai naudojamų susiejant vartotojo sąveiką su sąsajos reakcija.

Animacija gali suteikti vartotojams tiesioginį atsiliepimą apie jų sąveiką. Nuspaustas mygtukas, perbraukiamas gestas - abu susieja žmogaus veiksmus su sąsajos reakcija. Arba atvirkštinė pusė: pakraunamas suktukas puslapyje rodo, kad laukiame kompiuteryje. Be vizualinio atsiliepimo žmonėms lieka įdomu, ar jie iš tikrųjų spustelėjo mygtuką „mokėti dabar“, ar vis dėlto puslapis tikrai įkeliamas.

Monterėjaus įlankos akvariumo svetainėje užvedus pelės mygtuką, jo spalva išblunka nuo raudonos iki mėlynos, o tai rodo, kad elementas yra interaktyvus ir pasirengęs reaguoti į vartotojo įvestį. Mygtuko žymekliai yra klasikiniai šios rūšies animacijos pavyzdžiai, iš dalies dėl to, kad nauda, ​​kurią vartotojai gali pateikti vizualiai atsiliepdami apie mygtukus, yra labai išmatuojami ir svarbūs verslui.

Dizaino studijos „Animal“ svetainėje puslapio viršuje naudojama spalvų juosta, taip pat animacinė jos logotipo versija, nurodanti puslapio įkėlimo ir įkėlimo būsenas, tuo pačiu dominantis ir sustiprinantis „laukinį“ prekės ženklą.

04. Demonstracijos

Demonstracijose paaiškinama, kaip kažkas veikia, arba atskleidžiamos jo detalės, parodant, o ne pasakojant. Tai mano mėgstamiausias animacijos naudojimas. Jie gali būti ir linksmi, ir įžvalgūs.

Šios animacijos pateikia informaciją perspektyvoje, parodo, kas vyksta arba kaip kažkas veikia. Tai padaro demonstracines animacijas puikiais infografikos partneriais. Vienas dalykas, kurį daro visos demonstracinės animacijos, yra pasakoti istoriją, kaip pamatysite.

Puslapiai „Apdorojama ...“ yra galimybė paaiškinti, kas vyksta vartotojams, kol jie laukia. „TurboTax“ gerai naudoja šiuos apdorojimo puslapius. Vartotojams pateikus JAV mokesčių formas, jis pašalina bet kokį likusį nerimą parodydamas, kur nukreipta jų informacija ir ko jie gali tikėtis - tuo pačiu sustiprindami savo prekės ženklo draugiškumą ir prieinamumą. (Taip pat padeda tai, kad animacija nukreipia vartotojus nuo gana ilgo puslapio įkėlimo tuo, kas vizualiai įtraukia!).

Moneta garsiai naudoja demonstracines animacijas, norėdama paaiškinti savo konsolidavimo kortelės vertės pasiūlymą smalsiems lankytojams, kai jie slenka per svetainę - nereikia spausti „Play“ ir sėdėti per vaizdo skelbimą ar bristi per ekspozicinio turinio pastraipas. Šis puslapis yra pati „parodyk, nesakyk“ esmė.

05. Dekoracijos

Dekoratyvines animacijas nesunku supainioti su parodomosiomis animacijomis. Tačiau yra esminis skirtumas: ten, kur demonstracijos į sistemą įneša naujos informacijos, dekoratyvinės animacijos to nedaro. Jie yra animacinės maisto piramidės riebalai ir cukrus: jie puikiai prisideda prie skonio stiprinimo, tačiau svarbiausia yra saikas.

Geriausias būdas pastebėti vien dekoratyvinę animaciją yra paklausti: „Ko vartotojas gali išmokti iš šios animacijos? Ar tai juos veda, ar parodo tai, ko jie kitaip nežinotų? “ Jei atsakymas yra neigiamas, jūsų rankose gali būti dekoratyvinė animacija.

Nors jie gauna blogą repą, dekoratyvinės animacijos gali padėti įprastą paversti nepaprastu. Revizionistų istorijos svetainėje protingai naudojamos dekoratyvinės animacijos, kad būtų galima atgaivinti plokščias iliustracijas. Animacijos suteikia tik tiek susidomėjimo, kad puslapio vaizdinis turinys būtų griežtesnis, o vartotojai galėtų sutelkti dėmesį į tinklalaidę.

„Polygon.com“ naudojo animacines iliustracijas kurdami centrinius pultus konsolių apžvalgų serijai. Šios dekoratyvinės animacijos galbūt nepridėjo naujos informacijos, tačiau jos iš esmės sustiprino „Polygon“ prekės ženklą. Jie taip pat padėjo kiekvienai konsolės apžvalgai išsiskirti iš konkurentų, kurios tuo metu demonstravo niekuo neišsiskiriančias tų pačių prietaisų nuotraukas.

Šis straipsnis yra ištrauka iš Rachel Nabors „Animacija darbe“ - knygos „A Book Apart Briefs“ el. Knyga, kuri padės jums atlikti internetinių animacijų, modelių ir komunikacijos sprendimų anatomiją komandose. Pirkite čia.

Skaityti daugiau: