Phân biệt Sketch, Wireframe, Mockup, và Prototype

[ntk148v]

---

title: Phân biệt Sketch, Wireframe, Mockup, và Prototype
path: web-dev/phan-biet-sketch-wireframe-mockup-va-prototype.md

Source: https://thinhnotes.com/chuyen-nghe-ba/phan-biet-sketch-wireframe-mockup-va-prototype/

Sketch >> Wireframe >> Mockup >> Prototype

Sketch

• Đơn giản là phác họa, nhanh, không thể hiện tiểu tiết.
• Ghi nhận nhanh ý tưởng về một chức năng nào đó.
• Mục đích sử dụng: Khi cần brainstorm.

Wireframe

• Wireframe là bố cục của UI, mặc dù không quá chi tiết nhưng nó thể hiện rõ được luồng thao tác của người dùng và cấu trúc các nhóm thông tin có trên UI đó.
• Để làm tốt Wireframe, đòi hỏi phải thực sự hiểu User và vấn đề mình giải quyết ở đây là gì.
• Mục đích sử dụng: Khi làm user flow.

Mockup

• Mockup chính là Wireframe, nhưng đầy đủ thông tin và thể hiện được nhiều chi tiết hơn.
• Khi làm Mockup, cần phải rất rõ User requirement.
  • Màn hình này thuộc chức năng/ nhóm chức năng nào?
  • Màn hình này có nằm trong Business Process Flow nào không?
  • Màn hình này thể hiện những nội dung gì?
  • Input/Output của từng màn hình.
  • Những validation có trên những màn hình này?
• Mục đích sử dụng: Khi cần xác nhận requirement.

Prototype

• Prototype là "mẫu thử đầu tiên" của phần mềm/một chức năng của phần mềm, và người dùng có thể tương tác được ngay trên màn hình của chức năng/phần mềm đó.
• Mockup chỉ thể hiện góc nhìn không gian (có những element nào trên màn hình). Prototype thể hiện luôn được góc nhìn thời gian: hiện tại màn hình như vậy, sau khi nhấn A, màn hình sẽ như vậy, sau khi kéo B, màn hình sẽ chuyển qua như vậy...
• Mục đích sử dụng: Khi pitching dự án, hoặc kiểm thử/xác nhận requirement.