Luo Device Mockin avulla Device Mockups
Voit etsiä tonnia ilmaisia laitteita, jotka ovat verkossa, aina PSD-tiedostoista Sketch-tiedostoihin. Mutta entä jos voisit nopeasti rakentaa laitteen mockups-lennon selaimessasi?
No, kiitos rm-labo -henkilöiden, voit! Niiden vapaa jQuery-laajennus, DeviceMock.js, antaa sinulle mahdollisuuden kääri vektorilaite minkä tahansa sivuelementin ympärille, käyttämällä yksinkertaisia JavaScript- ja SVG-tiedostoja.
Joten, miten tämä toimii?
No, tarvitset ensin kopio jQuerysta ja GitHubin DeviceMock-laajennuksen versio. Tämän mukana tulee JS-tiedosto, CSS-tiedosto ja jotkin SVG-tiedostot, jotka luovat todelliset laitteet.
Sinä pystyt kohdistaa minkä tahansa tyyppisiä elementtejä sivulta, yksinkertaisesta kuvasta koko diviin tai jopa upotettu elementti, kuten iframe. Tämä tarkoittaa, että voisit edes rakenna viileä mini-selain oikealla sivustossasi iframe toiselle sivulle.
Tämä plugin tukee viisi eri laitetyyppiä:
- nettiselain
- älypuhelin
- Tabletti
- pöytä-
- kannettava tietokone
Kaikki nämä mallinnukset ovat käytössä tasainen muotoilu koska ne on rakennettu SVG: llä. Ja ne kaikki näyttävät melko samankaltaisilta kuin Applen laitteet, esimerkiksi älypuhelin, joka on iPhonen ja työpöydän näytön klooni..
Kaikki nämä vektorit on helppo lisätä ja ne toimivat jokainen selain SVG-tuella.
Voit jopa muuttaa ominaisuuksia kuten mockup-koko, teema (valkoinen / musta) ja suunta (pystymaisema).
Jos käytät selaimen makettia, voit jopa määritä nuken URL-osoite osoiteriville. Tämä on hauska tapa lisätä vielä räätälöintiä.
Tämä kirjasto ei ole hyödyllinen kaikille, vaan se on ratkaisee kapealla ongelman että useat UI / UX-kehittäjät kohtaavat prototyyppejä.
Lisätietoja on osoitteessa GitHub-sivu tai tutustu live-sivusto aktiivista demoa varten.
