Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock
Anda boleh mendapatkan banyak mockup peranti percuma dalam talian, mulai dari JPA hingga fail Sketsa. Tetapi, bagaimana jika anda dapat membuat mockup peranti dengan cepat dalam pelayar web anda?
Baiklah, terima kasih kepada orang-orang di rm-labo, anda boleh! Plugin jQuery percuma mereka, DeviceMock.js, membolehkan anda membungkus peranti vektor di mana-mana elemen halaman, menggunakan JavaScript dan SVG yang mudah.
Jadi, bagaimana sebenarnya ini berfungsi?
Baiklah, pertama anda memerlukan salinan jQuery dan versi plugin DeviceMock dari GitHub. Ini dilengkapi dengan fail JS, fail CSS, dan beberapa fail SVG untuk membuat peranti sebenar.
Anda boleh menargetkan semua jenis elemen di halaman, dari gambar sederhana hingga keseluruhan div, atau bahkan elemen tertanam seperti iframe. Ini bermaksud anda boleh membina pelayar web mini yang keren di laman web anda dengan iframe ke halaman lain.
Plugin ini menyokong lima jenis peranti yang berbeza:
- Pelayar web
- Telefon Pintar
- Tablet
- Desktop
- Komputer riba
Semua mockup ini menggunakan gaya reka bentuk rata kerana ia dibina dengan SVG. Dan, semuanya kelihatan serupa dengan peranti Apple, contohnya telefon pintar menjadi klon iPhone dan monitor desktop kelihatan seperti iMac.
Semua vektor ini mudah ditambahkan dan berfungsi di setiap penyemak imbas dengan sokongan SVG.
Anda bahkan boleh menukar sifat seperti ukuran mockup, tema (putih / hitam) dan orientasi (landskap potret).
Sekiranya anda menggunakan mockup penyemak imbas, anda juga boleh menentukan URL palsu di bar alamat. Ini adalah cara yang menyeronokkan untuk menambahkan lebih banyak penyesuaian.
Diberikan perpustakaan ini tidak akan berguna untuk semua orang tetapi ia dapat menyelesaikan masalah khusus yang dihadapi oleh banyak pembangun UI / UX ketika membuat prototaip.
Untuk mengetahui lebih lanjut, lawati halaman GitHub atau lihat laman langsung untuk demo aktif.
