Ustvarite makete naprav v brskalniku z napravo DeviceMock

Tu lahko najdete ton brezplačnih modelov naprav na spletu, od PSD do Sketch datotek. Ampak, kaj če bi lahko hitro izdelava modelov naprav na letenje v brskalniku?

No, zahvaljujoč ljudem na rm-laboju, lahko! Njihov brezplačen vtičnik jQuery, DeviceMock.js, vam omogoča ovijte vektorsko napravo okoli katerega koli elementa strani, z uporabo preprostih JavaScriptov in SVG-jev.

Torej, kako točno to deluje?

Najprej potrebuješ kopijo jQuery in različica dodatka DeviceMock podjetja GitHub. To je priloženo datoteki JS, datoteki CSS in nekaterim datotekam SVG za ustvarjanje dejanskih naprav.

Ti lahko ciljno vrsto elementa na strani, od preproste slike do celotnega DIV ali celo vdelanega elementa, kot je iframe. To pomeni, da bi lahko celo zgradite kul mini brskalnik na vašem spletnem mestu z iframeom na drugo stran.

Ta plugin podpira petih različnih vrst naprav:

1. Spletni brskalnik
2. Pametni telefon
3. Tableta
4. Namizje
5. Prenosnik

Vse te makete uporabljajo slogi ravnega oblikovanja ker so zgrajeni s SVG-ji. Vsi so videti precej podobni napravam Apple, na primer pametni telefon je klon iPhonea in namizni monitor, ki je očitno podoben napravi iMac.

Vse te vektorje je enostavno dodati in delujejo vsak brskalnik s podporo SVG.

Lahko celo spremenite lastnosti kot je velikost modela, tema (bela / črna) in usmerjenost (pokončno ležeče).

Če uporabljate model brskalnika, lahko celo določite navidezni URL v naslovni vrstici. To je zabaven način, da dodate še več prilagoditev.

Ta knjižnica ne bo koristna za vse, razen za to rešuje nišni problem ki se jih mnogi razvijalci uporabniškega vmesnika / UX soočajo pri izdelavi prototipov.

Če želite izvedeti več, obiščite spletno mesto Stran GitHub ali preverite v živo za aktivno predstavitev.