Thư viện thuật ngữ / UI/UX

Wireframe số là gì?

Còn gọi: digital wireframe

Wireframe số là bản khung màn hình được dựng trên phần mềm như Figma, Balsamiq hay Whimsical, thể hiện bố cục, phân cấp và nội dung bằng khối xám, chính xác về kích thước và dễ chỉnh sửa, chia sẻ.

Hiểu kỹ hơn

Sau khi phác trên giấy, người thiết kế dựng wireframe số để có tỉ lệ đúng với khung thiết bị, áp lưới cột, kiểm tra lượng nội dung thực sự vừa màn hình và chia sẻ link cho cả nhóm góp ý. Trong Figma, nên dựng bằng frame, auto layout và một bộ component wireframe đơn giản như khối ảnh, nút, ô nhập, để chỉnh nhanh và sau này nâng cấp lên giao diện thật. Có thể dùng các bộ wireframe kit trên Figma Community. Wireframe số cũng nối được thành prototype để bấm thử luồng. Ví dụ: wireframe trang danh mục sản phẩm cho thấy bộ lọc ở trên, lưới hai cột sản phẩm và nút xem thêm, đủ để lập trình viên ước lượng công việc. Lỗi thường gặp là để wireframe dùng nhiều màu sắc, ảnh trang trí, khiến người xem góp ý giao diện thay vì cấu trúc, hoặc dùng chữ Lorem ipsum cho cả tiêu đề quan trọng nên không biết nội dung thật có vừa không.