Wireframe là gì? 3 mức độ và cách phân biệt với mockup, prototype
Cananest Studio · · 3 min read
Wireframe là bản phác khung màn hình, thể hiện bố cục và thứ tự thông tin chưa có màu. 3 mức độ wireframe, so sánh với mockup, prototype và cách làm.
Wireframe là bản phác khung của một màn hình website hoặc ứng dụng, chỉ thể hiện bố cục, các khối nội dung và thứ tự thông tin, thường bằng hình khối xám và chữ mẫu, chưa có màu sắc, hình ảnh hay font thật. Wireframe giúp chốt cấu trúc trước khi tốn công làm đẹp.
Wireframe không phải là thiết kế cuối cùng. Duyệt wireframe là duyệt "cái gì nằm ở đâu", chưa phải duyệt "trông có đẹp không".
Bài này giải thích các mức độ wireframe, so sánh với mockup và prototype, và cách doanh nghiệp đọc, góp ý wireframe.
1. Wireframe là gì?
Wireframe giống bản vẽ mặt bằng của ngôi nhà: cho biết phòng nào ở đâu, cửa ở đâu, nhưng chưa có màu sơn hay nội thất. Trên màn hình, wireframe cho biết vị trí logo, menu, tiêu đề, ảnh, nút bấm, biểu mẫu và thứ tự người dùng nhìn thấy chúng.
2. 3 mức độ wireframe
| Mức độ | Đặc điểm | Dùng khi |
|---|---|---|
| Phác tay (low-fidelity) | Vẽ trên giấy hoặc bảng trắng, khối đơn giản | Thử nhanh nhiều ý tưởng bố cục |
| Số hoá cơ bản (mid-fidelity) | Vẽ bằng công cụ, khối xám, chữ thật một phần | Thống nhất cấu trúc với khách hàng, đội dev |
| Chi tiết (high-fidelity) | Gần kích thước thật, đủ chữ, trạng thái | Trước khi chuyển sang thiết kế giao diện |
3. Wireframe, mockup và prototype khác nhau thế nào?
Ba khái niệm này là ba bước nối tiếp nhau, từ cấu trúc đến hình thức rồi đến tương tác.
| Tiêu chí | Wireframe | Mockup | Prototype |
|---|---|---|---|
| Thể hiện | Bố cục, cấu trúc | Hình thức: màu, font, ảnh | Tương tác: bấm, chuyển màn hình |
| Mức chi tiết | Thấp đến vừa | Cao | Cao, bấm thử được |
| Câu hỏi trả lời | Cái gì nằm ở đâu? | Trông như thế nào? | Dùng có thuận không? |
| Dùng để | Chốt cấu trúc | Duyệt thẩm mỹ, thương hiệu | Kiểm thử với người dùng |
4. Cách làm wireframe
- Liệt kê mục tiêu của màn hình: người dùng đến đây để làm gì.
- Liệt kê nội dung cần có, xếp theo mức quan trọng.
- Phác vài bố cục trên giấy, chọn bố cục đưa thông tin quan trọng lên trước.
- Vẽ lại bằng công cụ (Figma, Balsamiq…) cho cả bản điện thoại và máy tính.
- Dùng chữ thật thay vì chữ mẫu ở những chỗ quan trọng như tiêu đề, nút.
5. Doanh nghiệp nên góp ý wireframe thế nào?
Khi nhận wireframe, hãy bỏ qua màu và hình, chỉ trả lời vài câu hỏi về cấu trúc. Góp ý sớm ở bước này rẻ hơn nhiều so với sửa khi đã có giao diện hoàn chỉnh.
- Thông tin khách cần nhất có nằm ở phần đầu không?
- Nút hành động chính (đặt hàng, liên hệ) có dễ thấy không?
- Có thiếu nội dung nào khách hay hỏi không?
- Trên điện thoại, thứ tự các khối có hợp lý không?
Câu hỏi thường gặp
Có bắt buộc làm wireframe không?
Không bắt buộc với trang rất đơn giản, nhưng nên làm cho website, ứng dụng có nhiều trang hoặc luồng phức tạp. Bỏ qua wireframe thường dẫn đến sửa bố cục khi giao diện đã làm xong, tốn thời gian hơn.
Làm wireframe bằng công cụ gì?
Giấy bút là đủ để phác nhanh. Khi cần bản số, Figma là lựa chọn phổ biến vì làm được cả wireframe, thiết kế và prototype trong một file; ngoài ra có Balsamiq, Whimsical cho wireframe đơn giản.
Wireframe có cần màu không?
Không. Wireframe cố ý dùng màu xám để mọi người tập trung vào cấu trúc. Có thể dùng một màu để đánh dấu nút hành động chính.
Kết luận
Wireframe là bản phác khung màn hình, dùng để chốt cái gì nằm ở đâu trước khi làm đẹp. Nó là bước trước mockup (hình thức) và prototype (tương tác). Doanh nghiệp nên góp ý wireframe bằng câu hỏi về thứ tự thông tin và nút hành động.
Có website hoặc ứng dụng cần lên wireframe và thiết kế? Xem dịch vụ thiết kế UI UX của Cananest.
