Voiko Web-animaatio tallentaa tasainen muotoilu?
Web-suunnittelijoina meidän on varmistettava, että pidämme taitojamme tuoreina ja ajantasaisina. Meidän ei tarvitse seurata kaikkia tulevia suuntauksia (kuten pitkät varjot), mutta meidän on pidettävä oppimista ja parannettava taitoja, kun web kasvaa ja kypsyy.
Yksi mielenkiintoinen uusi kehitys, joka alkaa kerätä höyryä web-suunnitteluteollisuudessa, on animaatio. Yhä useammat yritykset odottavat animaatiotaan sovelluksilleen tai verkkosivustoilleen tavalla, joka ilahduttaa käyttäjiään, erottuu kilpailijoistaan ja parantaa tuotteidensa käytettävyyttä.
Toinen syy animaatio on suuri kysyntä, koska Web on hiljattain keskittynyt litteä muotoiluun. Litteä muotoilu, vaikka kaiken kaikkiaan hyvin positiivinen asia, on muutamia ongelmia, jotka auttavat ihmisiä etsimään tapoja parantaa sitä.
Litteällä rakenteella on muutamia ongelmia
Nykyään yhä useammat yritykset ovat omaksuneet minimaalisen "tasomallin" esteettisen. Verkkosivut alkavat näyttää hyvin samanlaisilta, eikä ole kovinkaan eroa tuotemerkkien välillä. Tämä avaa suunnittelijoille mahdollisuuden tutkia muita keinoja, joiden avulla heidän verkkosivuillaan voi harjoittaa ja jännittävää käyttäjilleen.
Tässä animaatio tulee. Animaatio on kuin suolaa perunoissasi. ilman sitä, ne ovat hieman lieviä ja puuttuu maku. Animoimalla eri elementtejä suunnittelussa voit lisätä hieman jännitystä ja ilahduttaa käyttäjiäsi luovilla ja hyödyllisillä animaatioilla.
Toinen litteän muotoilun ongelma on, että käyttäjät voivat menettää kontekstin, mitä tapahtuu, kun he ovat vuorovaikutuksessa verkkosivuston / sovelluksen kanssa. Kun painikkeet pysähtyvät painikkeilta tai muilta tavaroilta, kuten tunnuksilta, näyttävät samanlaiselta, ihmiset ovat hämmentyneitä siitä, mitä tapahtuu, kun he napsahtavat niitä.
Voimme ratkaista tämän ongelman suunnittelemalla erilaisia animaatioita, joita esiintyy, kun elementtejä lepataan tai napsautetaan, Colin Garvenin Lähetä painike esimerkiksi:
Viimeinen ongelma, jonka haluan koskettaa, on ilmoittaa käyttäjälle, kun muutos tapahtuu. Nykyään monet nykyaikaiset verkkosovellukset käyttävät tehokkaita työkaluja, kuten AngularJs ja Node.js, rakentamaan "maksuttomia, päivitettäviä" sovelluksia. Ajattele Gmailia: uuden sähköpostiviestin saamiseksi sinun ei tarvitse päivittää sivua; se vain ponnahtaa kun joku lähettää sinulle uuden sähköpostin.
Tämä voi olla ongelma, jos käyttäjille ei anneta mitään ilmoitusta tai selkeä merkki siitä, että sivu on muuttanut tai ladannut uutta sisältöä. Jos sivu on tallennettu, meidän täytyy nähdä jotain, joka kertoo meille, että sovellus toimii ja on tallentanut työsi taustalla.
Animaatio on erinomainen tapa ilmoittaa käyttäjille, kun erilaisia tapahtumia tapahtuu.
Oletetaan, että sinulla on luettelo rekisteröityneistä ihmisistä seuraavaan kokoukseen tai konferenssiin. Kun uudet ihmiset rekisteröidään, lisäät ne luetteloon reaaliaikaisesti node.js: n avulla, joten heidän ei tarvitse koskaan päivittää sivua. Hyvä, se on todella hyödyllinen käyttäjillemme. Mutta nyt, miten ihmiset tietävät, kun uusi henkilö kirjautuu?
Tarvitsemme vain vähän animaatiota, jotta ihmiset näkevät tietävän, että henkilö on rekisteröitynyt. Entä jos pudotat pienen hälytyksen sivun yläosaan viestillä, joka kertoo, että he ovat juuri rekisteröityneet? Tai kuinka häivyttää uusi henkilö luetteloon ja antaa heille pienen sinisen korostuksen, jotta voimme kertoa, että he ovat uusia?
Kaikki nämä asiat ovat hienovaraisia vaikutuksia, jotka voivat todella tehdä eron okeisen tuotteen ja jotain, joka todella ilahduttaa käyttäjiä.
Web on erääntynyt
Muista IE6: n ja Netscapen päivät? Päiviä, jolloin jouduttiin huolehtimaan, jos jokainen on ottanut JavaScript käyttöön ja rakensimme sivustot HTML-pöydillä?
Olemme siitä lähtien olleet kaukana hyvillä HTML5-tuilla, CSS3: lla ja reagoivalla muotoilulla, ja ne ovat kaikki yhdistyneet antamaan uskomattomia vaihtoehtoja verkossa.
CSS3-animaatio
Nykyään jokainen suuri selain tukee useimpia tai kaikkia W3C: n suosittelemia CSS3-ominaisuuksia. Tämä antaa meille suunnittelijoina valtavia mahdollisuuksia luoda yksinkertaisia mutta silmiinpistäviä animaatioita, jotka hengittävät elämää muuten staattisiin verkkosivustoihin.
Siirtymät: CSS-siirtymät antavat sinulle mahdollisuuden suorittaa yksinkertainen siirtyminen kahden eri tilan välillä. Sano, että sinulla on yksinkertainen painike, jonka haluat vaihtaa värejä ja painaa hieman hiirellä, siirtyminen olisi täydellinen tähän käyttötapaukseen.
Keyframe-animaatiot: avainkehykset ovat tehokas CSS3-ominaisuus, jonka avulla voit luoda omia animaatiosarjoja. Niiden avulla voit hallita ajoitusta ja helpotusta, kestoa, tarvittavia viiveitä, kuinka monta kertaa kesto toistuu, mihin suuntaan se animeaa ja enemmän. Voit jopa julistaa useita animaatioita html-elementissä.
SVG-grafiikka
Yksi "kypsän webin" mahtavista uusista ominaisuuksista on SVG-tuki. Voimme lopulta alkaa käyttää kuvia, jotka skaalaavat hyvin eri kokoisia ja tarkkuusnäyttöjä varten. Ei vain, mutta SVG: t ovat tehokkaampia kuin png-kuvat, koska ne voivat olla vuorovaikutuksessa niiden kanssa CSS: ssä ja JS: ssä. Tämä antaa meille mahdollisuuden luoda vaikuttavia animaatioita, jotka olivat aikaisemmin vain animoitujen gifien tai Flashin avulla.
Katso tämä animoitu gif joka on luotu uudelleen CSS: ssä ja SVG: ssä:
Yksi asia, jolla SVG-animaatio voi olla hyödyllinen, on luoda animoituja kaavioita ja kaavioita, jotka voivat skaalautua mihin tahansa kokoon. Tarkista tämä yksinkertainen esimerkki JSFellessä:
SVG: n mahdollisuudet ovat lähes loputon!
HTML5-kangas
Toinen jännittävä tekniikka, jolla on ollut selainta tukeva tuki jonkin aikaa, on HTML5 Canvas. Canvas-elementtiä käytetään piirtää grafiikkaa verkossa.
Se on samanlainen kuin SVG, mutta se eroaa monin tavoin. Ensinnäkin se on rasterimuoto eikä vektori. Tämä tarkoittaa sitä, että se toimii paremmin monimutkaisempien piirrosten ja animaatioiden suhteen, mutta se ei skaalaudu hyvin korkean resoluution näytöille.
Yksi suurimmista kankaalle on se, että sillä ei ole manipuloitavia DOM-elementtejä. Tämä tarkoittaa, että aina kun haluat muuttaa piirustusta tai animoida sitä, sinun on redrawing kuvan.
Huolimatta näistä alasivuista, kankaalle on edelleen hieno työkalu, jota voidaan käyttää monimutkaisempien animaatioiden ja piirustusten tekemiseen.
Javascript-animaatiokirjastot
Vaikka CSS3-animaatiot ovat entistä tehokkaampia, JavaScript-animaatioita on vielä olemassa.
Yhä useammat kirjastot näyttävät koko ajan antaen meille hämmästyttävän animaation murto-osalla resurssikustannuksista, jota aiomme maksaa JavaScript-animaatiolle.
Snap.svg: snap.svg on suunniteltu tekemään SVG-laitteistesi kanssa yhtä helppoa kuin jQuery tekee DOM: n kanssa. Siinä on erittäin rikas animaatiokirjasto, jolla on helppo tapahtumien käsittely, joka auttaa sinua tuomaan SVG: n elämään.
Greensock GSAP: gsap.js on sarja ammattimaisia työkaluja skripteihin, tehokkaisiin HTML5-animaatioihin, jotka toimivat kaikissa tärkeimmissä selaimissa. Se on 20x nopeampi kuin jQuery ja jopa nopeampi kuin CSS3-animaatio joissakin tapauksissa. Super-buttery 60fps täällä tulemme!
Transit: transit.js on jQuery-kirjasto, joka korvaa jQuery-animaatiomoduulin supernopeilla CSS-siirtymillä ja muunnoksilla. Suuri osa on, että se käyttää samaa syntaksia kuin jQueryn $ ('...').
Nopeus: velocity.js on samanlainen kuin Transit siinä, että se käyttää samaa syntaksia kuin jQuery joten sinun tarvitsee vain sisällyttää kirjasto ja korvata jQueryn animaatio .velocity (): n kanssa.
scrollReveal: scrollReveal on avoimen lähdekoodin js-kirjasto, jonka avulla voit luoda ja ylläpitää, miten sivun elementit häivytetään ja laukaisevat, kun ne saapuvat näkymään.
Bounce.js: bounce.js on uusi työkalu, joka tuottaa jännittäviä CSS3-powered keyframe -animaatioita.
Parannettu laitteisto mobiililaitteissa
Yksi viimeinen syy animaatio on todella ottaa pois, että nykypäivän laitteet ovat yhä enemmän ja tehokkaampia jokaisen uuden julkaisun.
iPhone 5s, Iphone 5s, esimerkiksi siinä on super-powered a7-siru.
Extreme Techin mukaan: "CPU ei ole vain Swift-edeltäjänsä asteittainen kehitys, se on täysin erilainen peto, joka on enemmän kuin" iso ydin "Intel- tai AMD CPU kuin perinteinen" pienikokoinen "CPU."
Myös iOS8: n myötä Apple julkaisee Metalin, joka on erittäin tehokas 3D-höyläysmoottori, joka antaa sinulle mahdollisuuden luoda mobiililaitteille toimivia työpöydän kaltaisia pelejä.
Jotkut LG: n puhelinyhtiöt kuten LG ovat jopa rakennettu laitteita niin paljon kuin 3gb ram, LG G3 on vain yksi. Minulla on kannettava tietokone muutama vuosi sitten, joka tuskin on niin paljon.
Kaikki tämä sanoen, että emme vain voi luoda animaatioita, jotka toimivat suuresti pöytätietokoneissa, mutta samat animaatiot toimivat hyvin puhelimissa, tablet-laitteissa ja muissa mobiililaitteissa.
Animaatiot ovat hyödyllisiä käyttäjille
Animaatiot voivat todella auttaa tekemään tuotteen, sovelluksen tai verkkosivuston käyttökelpoisemmaksi ja käyttäjien hyväksymäksi. Tämä johtuu siitä, että:
- ne antavat yhteyden siihen, mitä tapahtuu;
- he pitävät ihmisiä kiinni;
- ne auttavat yritystäsi erottumaan;
- ihmiset nauttivat niistä.
Ajattele Kickstarter - kampanjasi selittävä kampanja voi olla erilainen, kun se on hyvin menestyksekäs ja tuskin huomannut. Parhaat kampanjat käyttävät tehokkaita videoita, joissa on hyvin valmistettu tarina, joka tuottaa jännitystä ja rakentaa vauhtia tuotteilleen tai kampanjalleen. Animaatio voi tehdä samoin verkkosivustossasi tai sovelluksessasi. Se voi merkitä sitä, että ihmiset ovat sitoutuneet ja haaveilevat sovelluksestasi ja toinen tuote, joka laskeutuu sovelluskarttaan.
