Wireframe, mockup và prototype trả lời ba câu hỏi khác nhau: nội dung được đặt ở đâu, giao diện trông như thế nào và người dùng thao tác ra sao. Khi nhận một bản thiết kế, cần biết mình đang xem loại đầu ra nào để góp ý đúng và không nhầm bản minh họa với website đã hoạt động.
Bài viết dùng biểu mẫu liên hệ giả định để so sánh. Ảnh có nhãn DEMO do AI tạo, không phải ảnh dự án khách hàng. Các nội dung trong ảnh không phải cam kết dịch vụ của Cường Design.
Phân biệt nhanh ba loại bản thiết kế
Wireframe: kiểm tra cấu trúc
Wireframe thể hiện bố cục và thứ tự thông tin, thường dùng khối đơn giản thay cho hình ảnh hoặc chi tiết trang trí. Khi xem, hãy tập trung vào nội dung cần có, vị trí hành động và cách đi từ phần này sang phần khác.
Mockup: kiểm tra hình thức
Mockup là bản thể hiện giao diện tĩnh với màu sắc, kiểu chữ, khoảng cách, hình ảnh và nội dung đại diện. Một nút được vẽ đẹp chưa chứng minh rằng nút đã có chức năng.
Prototype: thử tương tác
Prototype mô phỏng một phần luồng sử dụng để thử thao tác và nhận phản hồi. Mức độ chi tiết tùy mục đích: có thể liên kết các wireframe đơn giản hoặc các màn hình đã thiết kế hoàn chỉnh. Không bắt buộc mọi dự án đều đi theo một trình tự cứng.
Tham khảo cách Figma phân biệt wireframe và mockup và phần so sánh ba loại đầu ra của Sketch. Các ví dụ và câu hỏi duyệt dưới đây là tình huống minh họa cho chủ website.
Cùng một biểu mẫu liên hệ, nên duyệt gì?
Giả sử website cần nhận yêu cầu tư vấn, nhưng chưa chốt trường nào cần thu thập. Đừng bắt đầu bằng câu hỏi màu nút nào đẹp hơn.
Ở wireframe: xem phần giải thích dịch vụ có nằm trước biểu mẫu không; khách có biết cần gửi thông tin gì không; có đường liên hệ thay thế nếu chưa muốn điền form không.
Ở mockup: đọc nhãn trường và hướng dẫn; thử tên dịch vụ dài; kiểm tra thứ tự đọc trên điện thoại; xem thông báo lỗi có dễ nhận biết mà không chỉ dựa vào màu sắc không.
Ở prototype: thử gửi khi thiếu trường bắt buộc, quay lại sửa, chuyển bước và xem xác nhận. Ghi rõ bước nào chỉ mô phỏng và bước nào chưa được thiết kế.
Ảnh minh họa AI: lỗi nhập liệu và xác nhận giả định. Đây là ảnh tĩnh, không phải biểu mẫu đang gửi dữ liệu.
Những điều chưa thể kết luận từ bản thiết kế
Mockup không chứng minh website tải nhanh, đạt điểm hiệu suất cụ thể hoặc tăng doanh thu.
Prototype có màn hình xác nhận không chứng minh email đã được gửi hay dữ liệu đã lưu vào CMS.
Màn hình có nút thanh toán không chứng minh cổng thanh toán đã tích hợp.
Một bản điện thoại không chứng minh mọi kích thước màn hình và nội dung thực tế đều đã được kiểm tra.
Những phần này cần kiểm thử trên bản triển khai, theo phạm vi nghiệm thu đã thống nhất. Nếu tài liệu chỉ ghi “bàn giao giao diện”, nên làm rõ có bao gồm lập trình, kết nối API và vận hành hay không.
Chọn đầu ra theo câu hỏi đang cần giải quyết
Nếu chưa thống nhất trang cần nội dung gì, wireframe là điểm trao đổi hữu ích. Nếu cấu trúc đã rõ nhưng cách trình bày chưa phù hợp, tập trung vào mockup. Nếu muốn quan sát người dùng có hiểu luồng thao tác không, chuẩn bị prototype cho nhiệm vụ cụ thể.
Ví dụ, với một nút “Gửi yêu cầu” khó tìm, trước hết xác định vị trí và nhãn nút. Sau đó mới hoàn thiện hình thức rồi thử luồng. Không cần làm thêm nhiều màn hình chỉ để bộ bàn giao trông lớn hơn.
Checklist trước khi duyệt và bàn giao
Ghi đúng loại đầu ra, phiên bản và những màn hình nằm trong phạm vi.
Đánh dấu nội dung thật, nội dung mẫu và tài sản còn thiếu quyền sử dụng.
Liệt kê trạng thái bình thường, đang xử lý, lỗi, trống và thành công cần có.
Ghi phản hồi bằng vị trí, tình huống và lý do; tránh chỉ nói “chưa đẹp”.
Xác định việc còn mở, người chốt và phần phải kiểm tra lại sau lập trình.
Nếu cần xác định bộ đầu ra phù hợp, xem dịch vụ thiết kế UI/UX theo yêu cầu. Bạn cũng có thể đối chiếu quy trình làm việc hoặc gửi danh sách màn hình và nhu cầu để trao đổi phạm vi.
