Nilalaman
Ang animasyon ay maaaring maging isang napakalakas na tool sa disenyo ng web. Ngunit bago i-animate ang bawat elemento ng aming mga disenyo, dapat naming malaman kung kailan at paano gamitin ang bagong tool na ito. Sa malaking kapangyarihan ay may malaking responsibilidad, at iba pa. At dahil ang animation ay dapat na makipagtalo sa maraming iba pang mga alalahanin para sa pag-unlad at oras ng disenyo, makatuwiran na gugulin ang aming mga mapagkukunan kung saan sila lalayo.
Itinakda ka ng artikulong ito ng ilang mga pangunahing pattern ng animasyon at ipinapakita sa iyo kung paano nalalapat ang animasyon sa isang mas malaking system. Pagkatapos ay matututunan mo kung paano makita ang mga bottleneck na nagbibigay-malay at mababang prutas na nakasabit, na pinapakinabangan ang epekto ng mga animasyon na iyong namumuhunan upang mapagbuti ang karanasan ng gumagamit.
- Ito ay isang sipi mula sa Animasyon ni Rachel Nabors sa Trabaho - bilhin mo dito
Kung tiningnan mo ang maraming mga halimbawa ng animasyon sa web at mga in-app na interface tulad ng sa akin, nagsisimulang lumitaw ang ilang mga pattern. Ang mga pattern na ito ay kapaki-pakinabang para sa pagkilala at maikli na verbalising ang layunin ng isang animasyon sa iba.
Narito ang mga kategoryang nahanap ko ang aking sarili na ginagamit ang pinaka: mga paglilipat, suplemento, puna, pagpapakita at dekorasyon.Tingnan natin ang bawat isa sa kanila at tingnan kung paano ito nakakaapekto sa karanasan ng gumagamit.
01. Mga Transisyon
Ang mga gumagamit ng Transitionstake mula sa bawat lugar sa puwang ng impormasyon, o ilipat ang mga ito mula sa isang gawain patungo sa isa pa. Ang mga ito ay may posibilidad na magkaroon ng napakalaking mga epekto sa nilalaman sa pahina, na pinapalitan ang maraming mga bahagi ng impormasyon.
Ang web ay orihinal na dinisenyo bilang isang serye ng mga naka-link na dokumento. Ang pag-click sa isang link ay nagdulot sa browser upang punasan ang screen, madalas na nagiging sanhi ng isang maliit na flash ng puti, bago ang pagpipinta sa susunod na pahina mula sa simula. Habang ito ay may katuturan sa konteksto ng naka-link na mga dokumento na nakabatay sa teksto, hindi gaanong nakakaunawa sa isang panahon kung saan nagbabahagi ang mga pahina ng maraming mayamang elemento ng disenyo at nabibilang sa parehong domain. Hindi lamang nasasayang ang mga mapagkukunan ng browser na muling likhain ang parehong layout ng pahina nang paulit-ulit, ngunit pinapataas din nito ang nagbibigay-malay na pagkarga ng mga gumagamit kapag kailangan nilang muling baguhin at suriin muli ang nilalaman ng pahina.
Ang animasyon, partikular na paggalaw, ay maaaring mapadali ang oryentasyon ng gumagamit sa isang puwang ng impormasyon sa pamamagitan ng pag-offload ng pagsisikap na iyon sa visual cortex ng utak. Ang paggamit ng isang paglipat sa pagitan ng mga pagbabago sa daloy ng gawain o mga lokasyon sa arkitektura ng impormasyon na perpektong nagpapalakas sa kinalalagyan ng gumagamit, kung saan sila pupunta, at kung saan sila ay nasa isang pag-ikot.
Halimbawa, sa pahina ng SB Dunk ng Nike (ipinapakita sa itaas), kapag nag-click ang isang gumagamit ng isang arrow ng nabigasyon, ang kasalukuyang sneaker ay papalayo habang ang susunod na sneaker ay gumagalaw mula sa kabaligtaran. Ang mga paglipat na ito ay malinaw na ipinapakita sa gumagamit kung paano sila nagba-navigate kasama ang isang linear na pagpapatuloy ng mga sneaker, na tinutulungan silang subaybayan ang kanilang lugar at palakasin ang spatial na modelo ng perusing isang real-world row ng mga sneaker.
Sa isa pang site ng sapatos, si John Fluevog, inilipat ng mga paglipat ang gumagamit mula sa gawain patungo sa gawain (tingnan sa itaas). Matapos ang isang gumagamit ay magsimulang mag-type sa patlang ng paghahanap, ang mga resulta ay animated sa tuktok ng isang mas madidilim na backdrop. Inililipat nito ang gumagamit mula sa konteksto ng pag-browse hanggang sa pagpino ng kanilang mga resulta sa paghahanap, pinapabilis ang kanilang pokus habang tiniyak din sa kanila na makakabalik sila sa pag-browse nang walang labis na pagsisikap.
02. Mga Pandagdag
Ang mga suplemento ay nagdadala ng impormasyon sa o sa pahina, ngunit huwag baguhin ang lokasyon ng gumagamit o gawain. Karaniwan silang nagdaragdag o nag-a-update ng mga piraso ng karagdagang nilalaman sa pahina.
Habang inililipat ng mga paglilipat ang gumagamit mula sa estado patungo sa estado, ang mga pandagdag na mga animasyon ay nagdadala ng karagdagang impormasyon sa gumagamit. Mag-isip ng mga oras kung kailan ang impormasyon na pantulong sa pangunahing nilalaman ng pahina ay lilitaw o mawala sa pagtingin: ang mga alerto, drop-down, at tooltip ay ang lahat ng magagaling na kandidato para sa isang pandagdag na animasyon sa pagpasok at paglabas.
Tandaan na ang mga animasyong ito ay kailangang igalang ang Cone of Vision ng gumagamit: magiging direkta ba silang nakatingin sa isang tooltip na lalabas sa tabi ng kanilang cursor, o kailangan bang idirekta ang kanilang pansin sa isang alerto sa gilid ng kanilang tablet?
Kapag nagdagdag ang isang gumagamit ng isang produkto sa kanilang shopping cart sa glossier.com, sa halip na dalhin sila sa isang bagong bagong pahina ng shopping cart, ina-update lamang ng site ang gumagamit sa mga nilalaman ng kanilang cart sa pamamagitan ng paglabas nito bilang isang sidebar (sa itaas). Habang ang isang paglipat ay makakapag-snap ng gumagamit sa pag-browse mode, hinahayaan ng pandagdag na animasyon na ito ang gumagamit na ibasura ang shopping cart at magpatuloy sa pamimili.
Gumagamit ang sidebar ng shopping cart ng isang karagdagang pandagdag na animasyon upang mabilis at banayad na akitin ang mata ng gumagamit: isang pag-unlad na metro ang unti-unting pinupunan upang ipakita kung magkano ang gugugol ng gumagamit upang makakuha ng libreng pagpapadala.
Ang proseso ng shopping cart na ito ay may pangatlong pattern ng animation na nangyayari: ang pindutang Idagdag sa Bag ay nakakakuha ng isang icon na umiikot kapag na-click, na nagbibigay sa feedback ng gumagamit tungkol sa estado ng paglo-load nito. Nagsasalita ng feedback ...
03. Puna
Isinasaad ng puna ang pananahilan sa pagitan ng dalawa o higit pang mga kaganapan, na madalas na ginagamit upang ikonekta ang pakikipag-ugnay ng isang gumagamit sa reaksyon ng interface.
Maaaring bigyan ng animasyon ang mga gumagamit ng direktang puna tungkol sa kanilang mga pakikipag-ugnayan. Isang button na nalulumbay, isang kilos na swipe - parehong nag-uugnay sa isang pagkilos ng tao sa reaksyon ng isang interface. O ang gilid na pitik: ang isang umiikot na spinner sa isang pahina ay nagpapahiwatig na naghihintay kami sa computer. Nang walang visual na feedback, ang mga tao ay natitirang nagtataka kung talagang na-click nila ang pindutang 'magbayad ngayon', o kung talagang naglo-load ang pahina pagkatapos ng lahat.
Sa site ng Monterey Bay Aquarium, ang pag-hover sa isang pindutan ay sanhi ng pagkupas ng kulay nito mula pula hanggang asul, na nagpapahiwatig na ang elemento ay interactive at handa nang mag-react sa input ng gumagamit. Ang mga pag-hovers ng butones ay mga klasikong halimbawa para sa ganitong uri ng animasyon, bahagyang dahil ang pakinabang ng pagbibigay sa mga gumagamit ng visual na feedback sa mga pindutan ay masusukat at mahalaga sa negosyo.
Ang site ng Design studio Animal ay gumagamit ng isang bar ng kulay sa tuktok ng pahina pati na rin ang isang animated na bersyon ng logo nito upang ipahiwatig ang paglo-load at pag-load ng mga estado ng pahina habang nagbibigay ng interes at pagpapatibay ng 'ligaw' nitong tatak.
04. Mga Demonstrasyon
Ipinapaliwanag ng mga demonstrasyon kung paano gumagana ang isang bagay o ilantad ang mga detalye nito sa pamamagitan ng pagpapakita sa halip na sabihin. Ito ang aking personal na paboritong paggamit ng animasyon. Maaari silang kapwa nakakaaliw at nakakaintindi.
Ang mga animasyong ito ay naglalagay ng impormasyon sa pananaw, ipinapakita kung ano ang nangyayari, o kung paano gumagana ang isang bagay. Ginagawa nitong ang mga demonstrative animation na perpektong kasosyo para sa infographics. Isang bagay na ginagawa ng lahat ng mga demonstrative na animasyon ay magkwento, tulad ng makikita mo.
Ang mga pahina ng 'Pagproseso ...' ay isang pagkakataon upang ipaliwanag kung ano ang nangyayari sa mga gumagamit habang naghihintay sila. Ginagamit ng mahusay ng TurboTax ang mga pahina ng pagproseso na ito. Matapos isumite ng mga gumagamit ang kanilang mga form sa buwis sa US, tinatanggal ang anumang natitirang pagkabalisa sa pamamagitan ng pagpapakita sa kanila kung saan patungo ang kanilang impormasyon at kung ano ang maaari nilang asahan - lahat habang pinapatibay ang pagiging mabait at kakayahang mai-access ng kanilang tatak. (Nakakatulong din na makagagambala ng animation ang mga gumagamit mula sa isang napakahabang pag-load ng pahina sa isang bagay na nakakaengganyo sa paningin!).
Tanyag na ginagamit ng coin ang mga demonstrative na animasyon upang ipaliwanag ang panukalang halaga ng kanilang consolidation card sa mga mausisa na bisita habang nag-scroll sila sa site - hindi na kailangang pindutin ang play at umupo sa pamamagitan ng isang video ad o lumusot sa mga talata ng nilalamang ekspositibo. Ang pahinang ito ay ang pinakadiwa ng 'palabas, huwag sabihin'.
05. Mga dekorasyon
Hindi mahirap magkamali ng mga pandekorasyon na animasyon para sa mga demonstrative na animasyon. Ngunit mayroong isang pangunahing pagkakaiba: kung saan ang mga demonstrasyon ay nagdadala ng bagong impormasyon sa system, ang pandekorasyon na mga animasyon ay hindi. Ang mga ito ay mga taba at asukal ng animasyon na pagkain pyramid: gumawa sila ng mahusay na mga enhancer ng lasa, ngunit ang pagmo-moderate ay susi.
Ang pinakamahusay na paraan upang makita ang isang pulos pandekorasyon na animasyon ay ang tanungin, "Ano ang matututuhan ng isang gumagamit mula sa animasyong ito? Ginagabay ba sila o ipinapakita sa kanila ng isang bagay na hindi nila nalalaman kung hindi man? " Kung ang sagot ay hindi, maaari kang magkaroon ng isang pandekorasyon na animasyon sa iyong mga kamay.
Kahit na nakakakuha sila ng isang hindi magandang rap, ang pandekorasyon na mga animasyon ay maaaring makatulong na gawing pambihirang ang ordinaryong. Ang site ng Revisionist History ay gumagamit ng mapusok na mga animasyon nang matalino upang mabuhay ang mga flat na guhit. Ang mga animasyon ay nagdaragdag lamang ng sapat na interes upang payagan ang visual na nilalaman sa pahina na maging mas makinis, hinayaan ang mga gumagamit na tumuon sa podcast.
Epikal na ginamit ng Polygon.com ang mga animated na guhit upang lumikha ng mga centrepieces para sa isang serye ng mga pagsusuri sa console. Ang mga pandekorasyon na animasyon na ito ay maaaring hindi nagdagdag ng bagong impormasyon, ngunit napakahusay nilang pinalakas ang tatak na Polygon. Tinulungan din nila ang bawat console na suriin ang tumayo mula sa kumpetisyon, na sa oras na isinalin ang hindi makikilalang mga larawan ng parehong mga aparato.
Ang artikulong ito ay isang sipi mula sa Animasyon ni Rachel Nabors sa Trabaho - isang ebook na Bukod ng Mga Bawal na Aklat na gumagabay sa iyo sa anatomya ng mga animasyon sa web, pattern, at pagpapasya sa komunikasyon sa lahat ng mga koponan. Bilhin mo dito.
