„DeviceMock“ naršyklėje sukurkite „Device Mockups“
Jūs galite rasti tonų nemokamų įrenginių maketų internete, pradedant nuo PSD iki Sketch failų. Bet kas, jei galėtumėte greitai sukurti prietaiso maketus skrydžio metu naršyklėje?
Na, dėka žmonių rm-labo, galite! Jų laisvas jQuery įskiepis DeviceMock.js leidžia jums apvyniokite vektoriaus įrenginį aplink bet kurį puslapio elementą, naudojant paprastą „JavaScript“ ir SVG.
Taigi, kaip tiksliai tai veikia?
Na, pirmiausia jums reikia jQuery kopija ir „GitHub“ „DeviceMock“ papildinio versija. Jame yra JS failas, CSS failas ir kai kurie SVG failai, skirti sukurti tikrus įrenginius.
Tu gali nukreipti bet kokio tipo elementą puslapyje, iš paprasto vaizdo į visą „div“ arba net įterptą elementą, pvz., „iframe“. Tai reiškia, kad netgi galite sukurti vėsią mini naršyklę dešinėje savo svetainėje su iframe į kitą puslapį.
Šis papildinys palaiko penki skirtingi įrenginių tipai:
- interneto naršyklė
- Išmanusis telefonas
- Tablėtė
- Darbalaukis
- Nešiojamas kompiuteris
Visi šie maketai naudojami plokščio dizaino stiliai nes jie pastatyti SVG. Ir jie visi atrodo gana panašūs į „Apple“ įrenginius, pvz., Išmanusis telefonas yra „iPhone“ klonas ir darbalaukio monitorius, kuris yra labai panašus į „iMac“.
Visi šie vektoriai yra lengvai pridėti ir veikia kiekviena naršyklė su SVG palaikymu.
Jūs netgi galite pakeisti savybes pavyzdžiui, maketo dydis, tema (balta / juoda) ir orientacija (portreto kraštovaizdis).
Jei naudojate naršyklės maketą, galite net nurodykite manekeno URL adreso juostoje. Tai įdomus būdas pridėti dar daugiau tinkinimo.
Suteikta ši biblioteka nebus naudinga visiems, bet tai išsprendžia nišos problemą kad daugelis UI / UX kūrėjų susiduria su prototipų kūrimu.
Jei norite sužinoti daugiau, apsilankykite „GitHub“ puslapis arba patikrinkite gyva svetainė už aktyvią demonstraciją.
