สร้างการจำลองอุปกรณ์ในเบราว์เซอร์ด้วย DeviceMock

คุณสามารถค้นหา mockups อุปกรณ์ออนไลน์ฟรีมากมายตั้งแต่ PSDs ไปจนถึงไฟล์ Sketch แต่จะทำอย่างไรถ้าคุณทำได้อย่างรวดเร็ว สร้างอุปกรณ์จำลองในทันที ในเบราว์เซอร์ของคุณ?

ขอบคุณเพื่อน ๆ ที่ rm-labo คุณทำได้! ปลั๊กอิน jQuery ฟรีของพวกเขา DeviceMock.js ช่วยให้คุณ ล้อมรอบอุปกรณ์เวกเตอร์รอบองค์ประกอบหน้าใด ๆ, ใช้ JavaScript และ SVG ง่าย ๆ.

ดังนั้นวิธีนี้ทำงานอย่างไร?

ก่อนอื่นคุณต้อง สำเนาของ jQuery และ เวอร์ชันของปลั๊กอิน DeviceMock จาก GitHub. สิ่งนี้มาพร้อมกับไฟล์ JS, ไฟล์ CSS และไฟล์ SVG บางไฟล์เพื่อสร้างอุปกรณ์จริง.

คุณสามารถ กำหนดเป้าหมายองค์ประกอบประเภทใดก็ได้ บนหน้าจากภาพง่ายไปจนถึง div ทั้งหมดหรือแม้กระทั่งองค์ประกอบที่ฝังเช่น iframe ซึ่งหมายความว่าคุณสามารถทำได้ สร้างมินิเบราว์เซอร์สุดเจ๋ง อยู่ในไซต์ของคุณพร้อมกับ iframe ไปยังหน้าอื่น.

ปลั๊กอินนี้รองรับ อุปกรณ์ห้าประเภทที่แตกต่างกัน:

1. เว็บเบราว์เซอร์
2. มาร์ทโฟน
3. แท็บเล็ต
4. เดสก์ทอป
5. แล็ปท็อป

การจำลองเหล่านี้ทั้งหมดใช้ สไตล์การออกแบบแบน เนื่องจากพวกเขากำลังสร้างด้วย SVG และพวกมันทั้งหมดดูเหมือนกับอุปกรณ์ของ Apple เช่นสมาร์ทโฟนที่เป็นโคลนของ iPhone และหน้าจอเดสก์ท็อปที่ดูคล้าย iMac.

เวกเตอร์เหล่านี้ทั้งหมดนั้นง่ายต่อการเพิ่มและพวกมันทำงาน ทุกเบราว์เซอร์ที่รองรับ SVG.

คุณสามารถทำได้ เปลี่ยนคุณสมบัติ เช่นขนาดจำลอง, ธีม (ขาว / ดำ) และการวางแนว (แนวนอนแนวตั้ง).

ถ้าคุณใช้ mockup ของเบราว์เซอร์คุณสามารถทำได้ ระบุ URL จำลอง ในแถบที่อยู่ นี่เป็นวิธีที่สนุกในการเพิ่มการปรับแต่งเพิ่มเติม.

ได้รับห้องสมุดนี้จะไม่เป็นประโยชน์สำหรับทุกคน แต่มัน จะแก้ปัญหาเฉพาะ ที่นักพัฒนา UI / UX จำนวนมากต้องเผชิญเมื่อทำการสร้างต้นแบบ.

หากต้องการเรียนรู้เพิ่มเติมโปรดไปที่ หน้า GitHub หรือตรวจสอบ เว็บไซต์สด สำหรับการสาธิตที่ใช้งานอยู่.