Tạo Mockup thiết bị trong trình duyệt với DeviceMock

Bạn có thể tìm thấy hàng tấn mockup thiết bị miễn phí trực tuyến, từ các tệp PSD đến các tệp Phác thảo. Nhưng, nếu bạn có thể nhanh chóng xây dựng mockup thiết bị nhanh chóng trong trình duyệt của bạn?

Vâng, cảm ơn những người ở rm-labo, bạn có thể! Plugin jQuery miễn phí của họ, DeviceMock.js, cho phép bạn bọc một thiết bị vector xung quanh bất kỳ yếu tố trang nào, sử dụng JavaScript và SVG đơn giản.

Vì vậy, làm thế nào chính xác làm việc này?

Vâng, trước tiên bạn cần một bản sao của jQuery và phiên bản plugin DeviceMock từ GitHub. Điều này đi kèm với tệp JS, tệp CSS và một số tệp SVG để tạo các thiết bị thực tế.

Bạn có thể nhắm mục tiêu bất kỳ loại yếu tố trên trang, từ một hình ảnh đơn giản đến toàn bộ div hoặc thậm chí là một yếu tố được nhúng như iframe. Điều này có nghĩa là bạn thậm chí có thể xây dựng một trình duyệt nhỏ thú vị ngay trong trang web của bạn với iframe sang trang khác.

Plugin này hỗ trợ năm loại thiết bị khác nhau:

1. trình duyệt web
2. Điện thoại thông minh
3. Máy tính bảng
4. Máy tính để bàn
5. Máy tính xách tay

Tất cả các mockup sử dụng phong cách thiết kế phẳng kể từ khi chúng được xây dựng với SVG. Và, tất cả chúng trông khá giống với các thiết bị của Apple, ví dụ như điện thoại thông minh là bản sao của iPhone và màn hình máy tính để bàn trông giống như một chiếc iMac.

Tất cả các vectơ này rất dễ dàng để thêm và chúng hoạt động trong mọi trình duyệt có hỗ trợ SVG.

Bạn có thể thay đổi thuộc tính chẳng hạn như kích thước mockup, chủ đề (trắng / đen) và hướng (phong cảnh dọc).

Nếu bạn sử dụng trình duyệt mockup, bạn thậm chí có thể chỉ định một URL giả trong thanh địa chỉ. Đây là một cách thú vị để thêm nhiều tùy chỉnh hơn.

Cấp thư viện này sẽ không hữu ích cho mọi người nhưng nó không giải quyết một vấn đề thích hợp mà nhiều nhà phát triển UI / UX phải đối mặt khi tạo mẫu.

Để tìm hiểu thêm, hãy truy cập Trang GitHub hoặc kiểm tra trang web trực tiếp cho một bản demo hoạt động.