Làm sao phân biệt Sketch, Wireframe, Mockup và Prototype?

Làm sao phân biệt Sketch, Wireframe, Mockup và Prototype?
Hoàng Trúc

27/12/2023

154

0

Chia sẻ lên Facebook
Làm sao phân biệt Sketch, Wireframe, Mockup và Prototype?

Phân biệt Sketch, Wireframe, Mockup và Prototype là kỹ năng cơ bản đối với quá trình thiết kế sản phẩm. Dù không trực tiếp thiết kế nhưng Business Analyst vẫn cần trau dồi những thuật ngữ, thông tin về quá trình này để đảm bảo chất lượng sản phẩm cuối cùng. Trong bài viết hôm nay, Topchuyengia sẽ giúp bạn phân biệt các khái niệm trên nhé!

 

Trong quá trình thiết kế sản phẩm, vai trò của Business Analyst sẽ phải giải quyết những vấn đề như giao tiếp không hiệu quả với nhóm phát triển hay phải cập nhật Wireframe, Mockup liên tục khi yêu cầu thay đổi. Vì vậy, để tìm ra giải pháp hợp lý nhất, BA nên liên hệ tư vấn 1:1 từ xa với những chuyên gia hàng đầu về lĩnh vực tại nền tảng Askany nhé!

Tổng quan về Sketch, Wireframe, Mockup và Prototype

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

Trước khi phân biệt Sketch, Wireframe, Mockup và Prototype, bạn cần hiểu những thuật ngữ này có nghĩa là gì. Sketch, wireframe, mockup và prototype là quá trình thiết kế giao diện (UI) và trải nghiệm người dùng (UX). Những bước này giúp các designer và Business Analyst hiểu rõ hơn về nhu cầu của người dùng và tạo ra sản phẩm đáp ứng được những nhu cầu đó. Cụ thể hơn:

 

Sketch là gì?

Sketch là bản phác thảo đơn giản thể hiện ý tưởng ban đầu của sản phẩm. Sketch thường được vẽ bằng tay hoặc trên các phần mềm thiết kế như Figma, Sketch, Adobe XD, v.v. Mục đích của sketch là để Business Analyst nhanh chóng nắm bắt ý tưởng và truyền đạt cho các bên liên quan. Từ đó, Sketch giúp BA thu thập phản hồi từ khách hàng sớm hơn trong quá trình phát triển sản phẩm.

 

Bên cạnh đó, khi thảo luận về việc cải tiến tính năng, Sketch là một thao thác hữu ích. Sketch sẽ giúp đội ngũ mường tượng ngay lập tức khi hệ thống hiện tại đã có những tính năng sẵn có và khách hàng muốn thêm những tính năng mới, việc đưa chúng vào hệ thống sẽ ảnh hưởng như thế nào. 

 

Wireframe là gì?

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

Đây là bản thiết kế chi tiết hơn sketch. Wireframe sẽ thể hiện được cấu trúc và bố cục của sản phẩm. Wireframe thường được sử dụng để xác định các thành phần giao diện, luồng người dùng và tương tác giữa các màn hình. Wireframe thường được vẽ bằng các hình dạng đơn giản, không có màu sắc hoặc chi tiết đồ họa. Wireframe sẽ giúp BA đảm bảo rằng sản phẩm đáp ứng được các yêu cầu của khách hàng.

 

Khi xây dựng wireframe cho website hoặc ứng dụng web, việc duy trì sự nhất quán trong cấu trúc là một nhiệm vụ quan trọng của BA. Thông thường, wireframe sẽ bao gồm các phần nhất định như Header (chứa thông tin tổng quan như Tên, Chủ sở hữu và Trạng thái), Body (chứa các phần dữ liệu thể hiện thông tin muốn mô tả) và Footer (chứa các trường thông tin cơ bản như Người tạo, Ngày tạo, Người sửa đổi và Ngày sửa đổi).

 

Wireframe thường được thiết kế ở mức độ Low Fidelity và thường là sản phẩm của các UX Designer, đôi khi có thể là của Business Analyst nếu BA hiểu rõ về kỳ vọng của người dùng đối với User Flows. Tuy nhiên, theo chuẩn chuyên môn và trách nhiệm, người làm wireframe từ đầu nên thuộc về UX Team.

 

Quá trình nghiên cứu người dùng và xây dựng User Personas là nền tảng để BA đưa ra các quyết định chính xác về luồng thao tác và các thành phần trên giao diện người dùng.

 

Mockup là gì?

Mockup là bản thiết kế gần với sản phẩm thực tế hơn, thể hiện các thành phần giao diện, màu sắc, kiểu chữ, kích cỡ, font chữ, hình ảnh, đường kẻ, phân lô, phân luồng, thậm chí là cả quá trình kiểm tra và xác thực dữ liệu. Mockup bao quát mọi chi tiết, từ trạng thái của các trường nhập liệu đến sự tương tác giữa chúng.

 

Vì tính chi tiết, BA cần phải nắm vững các thông tin như màn hình thuộc chức năng hay nhóm chức năng nào, có nằm trong quy trình kinh doanh nào, thể hiện nội dung gì và input/output trên màn hình là gì, cùng với các quy tắc kiểm tra dữ liệu. Những Mockup này sẽ là cơ sở để khách hàng đánh giá và phê duyệt.

 

Nhìn chung, Mockup thường được sử dụng để kiểm tra tính thẩm mỹ và khả năng sử dụng của sản phẩm. Mockup thường được tạo bằng các phần mềm thiết kế như Figma, Sketch, Adobe XD, v.v.

 

Prototype là gì?

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

Cuối cùng, Prototype là bản thiết kế có thể tương tác, thể hiện cách hoạt động của sản phẩm khi được sử dụng. Vì vậy, Prototype thường được sử dụng để kiểm tra tính khả thi của sản phẩm và nhận phản hồi từ người dùng. Nghĩa là thay vì chỉ là những màn hình tĩnh, người dùng có thể tương tác trực tiếp với Prototype, như nhấn nút, kéo thả, trượt lên, trượt xuống, mở popup, v.v.

 

Khi tạo Prototype, thường đội ngũ chỉ cần chọn ra 1-2 tính năng nổi bật nhất để phát triển nhằm chứng minh khả năng đáp ứng mong muốn của khách hàng. Vì phát triển Prototype đòi hỏi nhiều ngân sách và nỗ lực nên thường được tạo trong giai đoạn pitch dự án hoặc để làm rõ những yêu cầu phức tạp cần được hiển thị trực quan.

 

Một điều cần BA lưu ý chính là  Prototype khác với “phiên bản beta”. Bản beta là một sản phẩm đầy đủ chức năng có thể sử dụng, trong khi Prototype chỉ là “bộ mặt” của sản phẩm, không có mã nguồn front-end và back-end.

 

Nhìn chung, Sketch, Wireframe, Mockup và Prototype đều có những chức năng và mục đích sử dụng khác nhau.

Vì sao cần phân biệt Sketch, Wireframe, Mockup và Prototype?

phân biệt Sketch, Wireframe, Mockup và Prototype
Vì sao cần phân biệt Sketch, Wireframe, Mockup và Prototype?

Theo Topchuyengia, việc phân biệt rõ giữa Sketch, Wireframe, Mockup và Prototype quan trọng đối với các đội ngũ vì 3 lý do chính: 

 

Để xác định hướng đi của từng bước: Mỗi bước trong quá trình thiết kế UIUX có những mục tiêu khác nhau. Vì vậy, việc xác định rõ mục tiêu của từng bước sẽ giúp các nhà thiết kế và nhóm phát triển sản phẩm tập trung vào những khía cạnh cần thiết nhất. 

 

Để lựa chọn công cụ phù hợp: Có nhiều công cụ khác nhau để tạo Sketch, Wireframe, Mockup và Prototype. Nếu phân biệt được các thuật ngữ này, BA sẽ lựa chọn công cụ phù hợp với từng quá trình. Từ đó, đội ngũ có thể tạo ra các bản thiết kế chất lượng cao.

 

Để truyền đạt ý tưởng hiệu quả: Mỗi loại thiết kế có những ưu điểm và nhược điểm riêng. Việc lựa chọn loại thiết kế phù hợp sẽ giúp các nhà thiết kế và phát triển sản phẩm truyền đạt ý tưởng hiệu quả.

Điểm khác nhau giữa Sketch, Wireframe, Mockup và Prototype

phân biệt Sketch, Wireframe, Mockup và Prototype
Điểm khác nhau giữa Sketch, Wireframe, Mockup và Prototype

Theo Topchuyengia, chúng ta có thể phân biệt Sketch, Wireframe, Mockup và Prototype thông qua các đặc điểm như: 

Đặc điểm Sketch Wireframe Mockup Prototype
Độ chi tiết Thấp Trung bình Cao Rất cao
Chức năng Phác thảo ý tưởng Xác định cấu trúc và bố cục của sản phẩm Làm rõ tính thẩm mỹ và khả năng sử dụng Kiểm tra tính khả thi và nhận phản hồi
Công cụ Phác thảo bằng tay hoặc phần mềm thiết kế Phần mềm thiết kế Phần mềm thiết kế Phần mềm thiết kế, công cụ lập trình, công cụ chuyên dụng
Thời điểm sử dụng Bắt đầu quá trình thiết kế Giữa quá trình thiết kế Giữa hoặc cuối quá trình thiết kế Cuối quá trình thiết kế

 

Nếu bạn gặp khó khăn khi triển khai Sketch, Wireframe, Mockup hay Prototype trong dự án thì có thể thử sử dụng nền tảng tư vấn 1:1 online Askany để trao đổi cùng chuyên gia Business Analyst nhé!

 

Đặt lịch tư vấn với chuyên gia Nguyễn Thanh Đạm tại nền tảng Askany:

  • Thông tin về kinh nghiệm làm việc của chuyên gia tại https://askany.com/javascript/thanhdam
  • Thời gian làm việc: Thứ Hai - Chủ Nhật (10:00 - 20:00)
  • Chi phí: 250.000 VND cho 15 phút gọi điện.

 

Qua bài viết này, bạn đã biết cách phân biệt Sketch, Wireframe, Mockup và Prototype chưa? Hiểu biết về quá trình thiết kế sản phẩm và các thuật ngữ này sẽ giúp Business Analyst hiểu rõ nhu cầu của khách hàng, đảm bảo rằng mọi phản hồi được tích hợp đầy đủ và hướng đến sự thành công cho dự án.

 

Nếu BA đang gặp khó khăn về giao tiếp, hiểu rõ thuật ngữ, v.v trong quá trình thiết kế sản phẩm phần mềm mà chưa tìm ra giải pháp thì đừng ngại lắng nghe lời khuyên hữu ích từ những chuyên gia giàu kinh nghiệm trong lĩnh vực tại ứng dụng Askany nhé!

Bình luận

Kinh nghiệm thực tế

Tư vấn 1:1

Uy tín

Đây là 3 tiêu chí mà TOPCHUYENGIA luôn muốn hướng tới để đem lại những thông tin hữu ích cho cộng đồng