Buat Mockups Peranti dalam Pelayar dengan DeviceMock
Anda boleh menemui banyak peranti mockup percuma dalam talian, mulai dari PSD ke fail Sketch. Tetapi, bagaimana jika anda boleh dengan cepat membina celah peranti on-the-fly dalam penyemak imbas anda?
Nah, terima kasih kepada orang-orang di rm-labo, anda boleh! Plugin jQuery percuma, DeviceMock.js, membolehkan anda membungkus peranti vektor di sekeliling mana-mana elemen halaman, menggunakan JavaScript dan SVG yang mudah.
Jadi, betapa tepatnya kerja ini?
Nah, pertama yang anda perlukan satu salinan jQuery dan versi plugin DeviceMock dari GitHub. Ini datang dengan fail JS, fail CSS, dan beberapa fail SVG untuk mencipta peranti sebenar.
Awak boleh mensasarkan sebarang jenis elemen pada halaman, dari imej mudah ke seluruh div, atau bahkan elemen terbenam seperti iframe. Ini bermakna anda boleh membina penyemak imbas mini yang sejuk tepat di tapak anda dengan iframe ke halaman lain.
Plugin ini menyokong lima jenis peranti yang berbeza:
- pelayar web
- Telefon pintar
- Tablet
- Desktop
- Komputer riba
Semua pengimejan ini digunakan gaya reka bentuk rata kerana mereka dibina dengan SVGs. Dan, mereka semua kelihatan sama seperti peranti Apple, misalnya telefon pintar menjadi klon iPhone dan monitor desktop kelihatan dengan jelas seperti iMac.
Semua vektor ini mudah ditambah dan mereka berfungsi setiap pelayar dengan sokongan SVG.
Anda juga boleh ubah harta seperti saiz mockup, tema (putih / hitam) dan orientasi (landskap potret).
Sekiranya anda menggunakan mockup pelayar, anda juga boleh nyatakan URL dummy dalam bar alamat. Ini adalah cara yang menyeronokkan untuk menambah lebih banyak penyesuaian.
Diberikan pustaka ini tidak akan berguna untuk semua orang tetapi ia tidak menyelesaikan masalah khusus bahawa banyak pemaju UI / UX menghadapi ketika prototaip.
Untuk mengetahui lebih lanjut, lawati Halaman GitHub atau periksa tapak hidup untuk demo aktif.
