Izveidojiet ierīces maketus pārlūkprogrammā ar DeviceMock
Tiešsaistē var atrast tonnas brīvas ierīces maketus, sākot no PSD līdz Sketch failiem. Bet, ja jūs varētu ātri veidot ierīces maketus lidojumā pārlūkprogrammā?
Nu, pateicoties rm-labo ļaudīm, jūs varat! Viņu bezmaksas jQuery spraudnis DeviceMock.js ļauj jums ietiniet vektora ierīci ap jebkuru lapas elementu, izmantojot vienkāršu JavaScript un SVG.
Tātad, kā tieši tas darbojas?
Nu, vispirms jums ir nepieciešams jQuery kopiju un DeviceMock spraudņa versiju no GitHub. Tas ietver JS failu, CSS failu un dažus SVG failus, lai izveidotu faktiskās ierīces.
Jūs varat mērķēt uz jebkura veida elementu lapā, no vienkārša attēla uz visu div vai pat iegultu elementu, piemēram, iframe. Tas nozīmē, ka jūs pat varētu veidojiet atdzist mini-pārlūkprogrammu tieši jūsu vietnē ar iframe uz citu lapu.
Šis spraudnis atbalsta pieci dažādi ierīču veidi:
- interneta pārlūks
- Viedtālrunis
- Tabletes
- Darbvirsma
- Klēpjdators
Visi šie maki izmanto plakana dizaina stili jo tie ir būvēti ar SVG. Un tie visi izskatās diezgan līdzīgi Apple ierīcēm, piemēram, viedtālrunis ir iPhone klons un darbvirsmas monitors, kas ir acīmredzami kā iMac.
Visi šie vektori ir viegli pievienojami un darbojas katrs pārlūks ar SVG atbalstu.
Jūs pat varat mainīt īpašības piemēram, maketa lielums, tēma (balts / melns) un orientācija (portreta ainava).
Ja izmantojat pārlūka maketu, varat to pat norādiet manekena URL adreses joslā. Tas ir jautrs veids, kā pievienot vēl vairāk pielāgojumu.
Piešķirot šo bibliotēku, tā nebūs noderīga visiem, izņemot to risina nišas problēmu ka daudzi UI / UX izstrādātāji saskaras ar prototipu veidošanu.
Lai uzzinātu vairāk, apmeklējiet vietni GitHub lapa vai izbraukšana tiešraidē aktīvai demonstrācijai.
