Esittely vuorovaikutussuunnittelusta ja liikkeestä

Tämänpäiväisessä viestissä haluan puhua vuorovaikutussuunnittelun kentästä katsomalla verkkosivustoa, joka tuo esiin uusia ja mielenkiintoisia esimerkkejä verkkosuunnittelusta, joissa korostetaan liikettä ja vuorovaikutusta. Näin Interaction Design Association kuvaa tätä kenttää:

Interaction Design (IxD) määrittelee interaktiivisten järjestelmien rakenteen ja käyttäytymisen. Vuorovaikutus Suunnittelijat pyrkivät luomaan merkityksellisiä suhteita ihmisten ja käyttämien tuotteiden ja palveluiden välille tietokoneista mobiililaitteisiin laitteisiin ja muihin.

Hover States on verkkosivusto, joka on tarkoitettu esittelemään vuorovaikutussuunnittelua. Sen kuratoi Chambers Judd, Lontoossa toimiva digitaalinen suunnittelu- ja kehitysryhmä. Chambers Judd myöntää, että Hover States -blogi on paikka kuratoida esimerkkejä suurista sivustoista, jotka sisältävät parhaat esimerkit liikkumisesta ja vuorovaikutuksesta. Kaappaavat ne kaikki HTML5-videoelementissä, joten voit kokea ulkonäön ja tunteen joutumatta poistumaan heidän sivustoltaan. Silmukkavideon katseleminen on hienoa johdannossa; Haluan kuitenkin tarkastella esimerkkien alkuperäistä, koska se antaa ymmärryksen taustalla olevista tyyleistä ja koodista, jotka tekevät niistä mahdolliseksi. Esittelen lyhyesti kolme kymmenestä verkkosivustosta, jotka osoittavat hover-tilojen luovaa käyttöä.

Limner Studios

Viimeisimmässä Hover States -blogin verkkosivustossa korostetaan Limner Studiosta, joka korostaa valittujen teosten portfolion interaktiivisella diaesityksellä, joka sisältää esimerkkejä verkkosivustojen rakennuksista ja suunnittelusta, mainosmateriaalista ja käyntikorteista. Näyttökaappaus interaktiivisesta sivustosta näytetään kuvassa B Google-version 23.0.1271.64 m mukaisesti:

Kun vierität sivua alaspäin, diat siirtyvät alhaalta ylös ja vasemmalta oikealle kuvaustekstin kanssa, joka jää vasemmalle puolelle, kun diojen jatkaminen liikkuu vieritys- ja leijutustilojen perusteella. Tarkastuksen yhteydessä löydämme useita jQuery-skriptejä, mukaan lukien jquery.color.js John Resigin Värianimaatiot -sivulle. Jquery.slideShow.js, joka on Cycle Plugin, kirjoittanut M. Alsup, on kaksoislisenssillä, jolla on MIT- ja GPL-lisenssit, ja voit katsella dokumentaatiota ja esimerkkejä laajennuksesta. Mukautettu JavaScript-dokumentti lim.js tukee Limner Studio -toimintoja, mukaan lukien animaatiot, tapahtumasuunta, ikkunan korkeus ja kuvan siirtymät. Lopullinen skriptitiedosto on waypoints.min.js, joka on pieni jQuery-laajennus, jonka avulla toiminnon suorittaminen on helppoa aina vierittäessäsi elementtiin. Waypoints-laajennus tarjoaa vankan perustan nykyaikaisille käyttöliittymämalleille, jotka riippuvat käyttäjän vierittämiskohdasta sivulla; myös sillä on kaksoislisenssi MIT- ja GPL-lisensseillä. HTML- ja CSS-verkkodokumentit perustuvat HTML5-laatikkomalliin.

Haus Der Kunst

Seuraava esimerkki kuvaa verkkosivuston visuaalista identiteettiä hienona esimerkkinä siitä, kuinka sivusto voi toimia paino- ja web-sivustojen välillä. Haus Der Kunst -logo merkitsee liikkumista ja joustavuutta, joten verkkosivusto vahvistaa tätä venyttämällä ja säätämällä hiiren liikkeellä. Näyttökaappaus näkyy kuvassa C Google-version 23.0.1271.64 m mukaisesti:

Kotelon alla tämä verkkosivusto käyttää yhdistettyä kolmetoista skriptitiedostoa, mukaan lukien JavaScript, jQuery ja JSON, mukaan lukien addthis_widget.js, core.js, jquery.jscrollpane.js, jquery.masonry.min.js, jquery.mousewheel.js ja user_timeline.json . Verkkosivusto käyttää viittä CSS-dokumenttia ja HTML on xml-pohjainen.

.APP.ICNS

Tämä verkkosivusto on projekti, joka tuo esiin sovelluskuvakkeet yksinkertaisella UX: lla ja hienolla vuorovaikutuksella, joka paljastaa animaation latauspainikkeella. Tämä on hauska projekti, jonka on kirjoittanut Andrew & Kara, ja se käyttää CandyBar-ohjelmistoa hallitsemaan heidän kuvakkeitaan. Voit käyttää kuvakkeita avaamalla iContainer-tiedoston ja napsauttamalla helppoa asennusta Käytä näitä kuvakkeita; Jotkin kuvakkeet, kuten iCal, vaativat kuitenkin manuaalisen asennuksen. Kuvakkeisiin kuuluvat Finder, Dashboard, Mail, iTunes, iPhoto, Preview, Stickies, TextEdit ja Chrome, jotta voidaan mainita muutama käytettävissä olevista kolmestakymmenestä. Kuvassa D näkyy verkkosivuston näyttökuva Google-version 23.0.1271.64 m mukaisesti:

Tämä verkkosivusto käyttää kolmea jQuery-skriptitiedostoa, mukaan lukien appicns.jquery.js, jquery.easing.js ja jquery.js . Kolme CSS-asiakirjatiedostoa sisältää 1280.css, joka on 1280 Responsive Grid from 960 Grid System, ja screen.css, molemmat Andrew McCarthy; HTML käyttää HTML5-asiakirjatyyppiä.

© Copyright 2021 | mobilegn.com