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

Trong lập trình và phát triển phần mềm, không thể nào thiếu được Wireframe, Mockup, và Prototype. Vậy phân biệt Wireframe, Mockup, và Prototype như thế nào? Tại sao lại cần các bản này?

Hãy cùng khám phá những thông tin liên quan đến Prototype, mời bạn cùng theo dõi trong bài viết dưới đây của R2S. 

Phân biệt Wireframe, Mockup, và Prototype – Sự khác nhau cơ bản 

Trong mỗi công trình, dự án thì cần có bản thiết kế sơ bộ đến thiết kế chi tiết. Mỗi loại đều thể hiện nội dung khác nhau, và có những giá trị khác nhau. 

Và trong thiết kế wesbite, phần mềm thì các bản thiết kế từ ít chi tiết đến đầy đủ nhất chính là Wireframe > Mockup > Prototype.  

Như vậy, chúng ta phân biệt Wireframe, Mockup, và Prototype sẽ dựa vào mức độ chi tiết tăng dần theo từng loại cũng như mục đích sử dụng của mỗi loại.  

Phân biệt Wireframe, Mockup, và Prototype về mục đích sử dụng 

Mục đích sử dụng của 3 bản thiết kế này là: 

• Wireframe: dùng cho việc lên quy trình, ý tưởng với khách hàng 
• Mockup: khi cần xác nhận yêu cầu giữa 2 bên 
• Prototype: khi kiểm thử dự án với một số tính năng quan trọng nhất của phần mềm. 

Phân biệt các công cụ nên dùng trong Wireframe, Mockup, và Prototype 

Phân biệt Wireframe, Mockup, và Prototype về các công cụ dành riêng cho mỗi bản thiết kế sẽ là:

• Wireframe: sử dụng công cụ Balsamiq, Figma, Sketch, Axure, Adobe XD,… 
• Mockup: sử dụng công cụ Adobe XD, Axure, Figma,… 
• Prototype: sử dụng Figma, Axure, Adobe XD,… 

Phân biệt Wireframe, Mockup, và Prototype về hình thức thể hiện: 

Mỗi loại Wireframe, Mockup, và Prototype sẽ có đặc điểm chính mà bạn cần lưu ý là: 

• Wireframe: đây chính là bố cục của UI. Wireframe không quá chi tiết nhưng nó thể hiện rõ được luồng thao tác và cấu trúc nhóm thông tin có trên UI với 2 màu đen và trắng 
• Mockup: chính là Wireframe nhưng thể hiện được các thông tin, chi tiết đầy đủ hơn, rõ ràng hơn 
• Prototype: chính là “mẫu thử đầu tiên” của phần mềm với 1 hoặc 1 số chức năng nhất định. Prototype cũng cho phép người dùng có thể tương tác được trên màn hình. 

Tìm hiểu chi tiết về Wireframe là gì?  

Để phân biệt Wireframe, Mockup, và Prototype chi tiết hơn, bạn đọc hãy cùng xem qua Wireframe là gì đã nhé. 

Wireframe được hiểu như thế nào?  

Wireframe trong thiết kế phần mềm chính là bố cục của giao diện người dùng. Wireframe sẽ thể hiện rõ được luồng thao tác của người dùng (user flow) và cấu trúc các nhóm thông tin có trên giao diện UI đó. 

Wireframe được thiết kế ở mức Low Fidelity và bản vẽ này thường là output của các nhà thiết kế UX. Đôi khi cũng có thể là BA, do họ bạn hãy hiểu expectation của người dùng về User Flows.  

Tại các công ty công nghệ thì người thực hiện và chịu trách nhiệm Wireframe sẽ là UX Team. 

Đặc điểm của Wireframe 

Khi phác thảo bãn vẽ wireframe cho phầm mềm, bạn có thể cấu trúc các phần consistent như sau: 

• Header: gồm thông tin Name, Owner, và Status. 
• Body: gồm các phần dữ liệu, thể hiện thông tin của wireframe sẽ mô tả 
• Footer: gồm Created By, Created On, Modified By, và Modified On (những trường thông tin cơ bản) 

=> Như vậy, có thể thấy bản Wireframe đóng vai trò như là bộ khung của UI và là cấu trúc và nhóm thông tin mà nó thể hiện. Không cần quan tâm đến màu sắc, font chữ, to nhỏ, hiệu ứng như chính Wireframe sẽ thể hiện được luồng thao tác của người dùng, và cấu trúc các nhóm thông tin.  

Mockup là gì và những điều cần biết 

Sau khi có được bộ khung Wireframe thì chúng ta hãy tìm hiểu về Mockup, chính là bản chi tiết hơn Wireframe. 

Khái niệm Mockup là gì? 

Mockup được hiểu là mô hình thu nhỏ, là hình ảnh mô phỏng mẫu thiết kế của thường thể hiện dưới dạng file vector hoặc PSD và nó chi tiết hơn Wireframe rất nhiều. 

Đặc điểm của Mockup trong phần mềm 

Phân biệt Wireframe, Mockup, và Prototype thì có thể dễ dàng nhận thấy Mockup sẽ thể hiện chi tiết các đặc điểm của phần mềm, website, app như là: 

• Màu sắc 
• Vị trí field 
• Kích cỡ 
• Hình ảnh 
• Font chữ 
• Đường kẻ 
• Phân lô 
• Phân luồng 
• Validation 

Từ đó, khi làm Mockup, bạn đã phải rất rõ User Requirement với những thông tin cần thiết như: 

• Chức năng/ nhóm của màn hình 
• Business Process Flow của màn hình  
• Nội dung của màn hình  
• Input/ Output trên màn hình  
• Những validation chủ yếu 

Khách hàng sẽ dựa vào các Mockup này để xác nhận cho bạn tiếp tục làm đúng với điều khách hàng cần. 

Prototype là gì? Phân biệt Wireframe, Mockup, và Prototype

Khi mà đã có được mockup và chốt với khách hàng thì Prototype chính là bản cuối cùng để thể hiện được sự sống động và chân thật của phần mềm với một số tính năng chủ chốt. 

Tìm hiểu Prototype là gì? 

Prototype được hiểu là “mẫu thử đầu tiên” và từ đó, người dùng có thể tương tác được ngay trên màn hình với một số chức năng nhất định của phần mềm. 

Tại sao cần có Prototype? 

Prototype khá giống Mockup nhưng nó sẽ giúp hoàn toàn có thể tương tác trực tiếp với nó như: nhấn nút; trượt lên; trượt xuống; kéo thả; mở popup,…. 

Nhờ vậy mà giúp khách hàng hình dung rõ ràng hơn về sản phẩm mà họ sẽ nhận được có đúng với mong muốn của khách hàng hay là không. 

Đối với Prototype, bạn không cần phải nguyên 1 phần mềm từ đầu tới cuối; mà được chọn ra một vài tính năng nổi trội nhất để thể hiện được phần mà khách hàng chú trọng nhất, quan tâm nhất trong cả phần mềm. 

Thường Prototype được thực hiện ở giai đoạn pitching dự án; hoặc cũng có thể để làm rõ yêu cầu phức tạp với khách hàng và cần có một bản vẽ để thể hiện nó một cách trực quan, đó chính là giá trị của Prototype mang lại. 

Kết luận  

Như vậy, R2S đã chia sẻ kiến thức về phân biệt Wireframe, Mockup, và Prototype thiết kế phần mềm từ cơ bản đến chi tiết nhất. Hãy tìm hiểu kỹ và từ đó biết cách thiết lập các bản vẽ sao cho phù hợp với phần mềm ở mỗi giai đoạn khác nhau để giúp công việc đạt hiệu quả cao nhất.