Vytvorte prídavné zariadenia v prehliadači pomocou zariadenia DeviceMock
Môžete nájsť tony bezplatných prístrojov, ktoré sa pohybujú od PSD po súbory Sketch. Ale čo, keby ste mohli rýchlo vytvárať makety zariadení na dosah v prehliadači?
No, vďaka ľuďom v rm-labo, môžete! Ich bezplatný doplnok jQuery, DeviceMock.js, vám umožní zabaliť vektorové zariadenie okolo ľubovoľného prvku stránky, pomocou jednoduchého jazyka JavaScript a SVG.
Takže, ako presne to funguje?
No, najprv to potrebujete kópiu jQuery a verziu doplnku DeviceMock od spoločnosti GitHub. Dodáva sa s súborom JS, súborom CSS a niektorými súbormi SVG na vytvorenie skutočných zariadení.
Môžeš zamerať na akýkoľvek typ prvku na stránke, od jednoduchého obrázku po celý div, alebo dokonca z vloženého prvku, napríklad z iframe. To znamená, že by ste mohli dokonca vybudovať skvelý mini-prehliadač priamo na vašom webe s iframe na inú stránku.
Tento doplnok podporuje piatich rôznych typov zariadení:
- webový prehliadač
- smartphone
- tableta
- Desktop
- laptop
Všetky tieto modely používajú ploché štýly dizajnu pretože sú postavené pomocou SVG. A všetci vyzerajú úplne podobne ako zariadenia Apple, napríklad smartphone, ktorý je klonom iPhone a stolným monitorom, ktorý vyzerá viditeľne ako iMac.
Všetky tieto vektory sa ľahko pridávajú a pracujú každý prehliadač s podporou SVG.
Môžete dokonca zmeniť vlastnosti ako je veľkosť šablóny, tému (biela / čierna) a orientácia (portrétna krajina).
Ak používate model prehliadača, môžete dokonca zadajte falošnú adresu URL v paneli s adresou. To je zábavný spôsob, ako pridať ešte viac prispôsobenia.
Táto knižnica nebude užitočná pre všetkých, ale pre nich vyrieši problém nika že veľa UI / UX vývojárov čelí pri prototypovaní.
Ak sa chcete dozvedieť viac, navštívte stránku Stránka GitHub alebo si pozrite naživo pre aktívnu demo.
