Loo DeviceMockiga seadmehokid brauseris
Te võite leida tonni tasuta seadmehokki võrgus, alates PSD-st kuni sketch-failideni. Aga kui sa võiksid kiiresti ehitada seadme piletid lennus brauseris?
Noh, tänu rm-labo inimestele! Nende vaba jQuery plugin, DeviceMock.js, võimaldab teil mähkige vektori seade ümber mis tahes leheküljeelemendi, kasutades lihtsaid JavaScript ja SVG-sid.
Niisiis, kuidas see täpselt toimib?
Noh, kõigepealt vajate jQuery koopia ja GitHubi DeviceMock-plugina versioon. Sellega kaasneb JS-fail, CSS-fail ja mõned SVG-failid, et luua tegelikke seadmeid.
Sa saad sihtida mis tahes tüüpi elemente leheküljel, lihtsast pildist tervele divile või isegi sisseehitatud elemendile, nagu iframe. See tähendab, et sa võiksid isegi ehitada jahe mini-brauser paremal oma saidil iframe teisele lehele.
See plugin toetab viis erinevat seadetüüpi:
- veebibrauseris
- Nutitelefon
- Tablett
- Töölaud
- Sülearvuti
Kõik need makettid kasutavad tasapinnaline disain kuna nad on ehitatud SVG-dega. Ja nad kõik näevad üsna sarnaselt Apple'i seadmetega, näiteks nutitelefon on iPhone'i kloon ja lauaarvuti monitor, mis näeb silmatorkavalt nagu iMac.
Kõiki neid vektoreid on lihtne lisada ja nad töötavad iga SVG toega brauser.
Võite isegi muuta omadusi näiteks makettide suurus, teema (valge / must) ja suund (portree- maastik).
Kui kasutate brauseri mudelit, saate seda isegi määrake näiv URL aadressiribal. See on lõbus viis lisada veelgi rohkem kohandusi.
Antud raamatukogu ei ole kõigile kasulik, vaid see on kasulik lahendab niši probleemi et paljud UI / UX arendajad seisavad silmitsi prototüüpimisega.
Lisateabe saamiseks külastage GitHubi leht või vaadake live sait aktiivse demo jaoks.
