Prototype là gì trong thiết kế UI/UX?

Trong sản xuất công nghiệp nói chung, prototype là các mẫu ban đầu được tạo ra trong quá trình thiết kế để thử nghiệm, dùng thử trước khi sản xuất ra sản phẩm hoàn thiện cuối cùng. Vậy trong UI/UX Design thì Prototype là gì? Đóng vai trò như thế nào? Cùng colorME tìm hiểu nhé!

Trả lời nhanh: prototype là gì?

Prototype (bản mẫu thử, nguyên mẫu) là một bản mô phỏng của sản phẩm được làm ra trước khi sản xuất hay lập trình, để thử xem ý tưởng có dùng được không. Trong thiết kế UI/UX, prototype là bản thiết kế giao diện mà bạn có thể bấm, vuốt, chuyển màn hình như trên app thật, dù phía sau chưa có dòng code nào. Mục đích là cho người dùng thử và sửa sớm.

Để thấy các bước này nằm ở đâu trong một dự án thật, bạn có thể xem quy trình thiết kế app 6 bước từ ý tưởng đến prototype.

Bảng phân biệt nhanh prototype với sketch, wireframe và mockup (ColorME bổ sung ngày 14/10/2026, theo định nghĩa của Figma về wireframe, mockup và prototyping).

1. Prototype là gì trong thiết kế UI/UX?

Trong thiết kế UI/UX, prototype của một giao diện được dùng để thực hiện các thử nghiệm với người dùng trước khi chúng ta chuyển bản thiết kế thành code, tạo ra sản phẩm được sử dụng chính thức.

Prototype của giao diện sẽ thể hiện các giải pháp mà chúng ta giả định rằng có thể giải quyết các vấn đề cụ thể của người dùng. Và để biết được giải pháp đó có phù hợp hay không thì cách đơn giản nhất là chúng ta sẽ quan sát hành động và phản ứng của người dùng khi tương tác, trải nghiệm với prototype đó.

Khi làm prototype chúng ta sẽ cố gắng mô phỏng sao cho giao diện của prototype mang lại cảm nhận gần giống nhất có thể với sản phẩm hoàn chỉnh đã được code.

2. Phân loại

Dựa theo mức độ mô phỏng gần giống với sản phẩm hoàn chỉnh, chúng ta có thể phân prototype thành hi-fi prototype và lo-fi prototype.

Để mô phỏng các phản hồi của giao diện với người dùng, chúng ta có thể dùng các phần mềm chuyên dụng như ProtoPie, Figma hoặc ngay cả PowerPoint... đặt trực tiếp các lệnh tương tác trên các thành phần của giao diện. Kiểu prototype mà người dùng có thể tương tác trực tiếp này được gọi là clickable prototype hay interactive prototype.

Hoặc chúng ta sẽ đóng vai làm “máy tính” để phản hồi trực tiếp các tương tác của người dùng đối với giao diện được vẽ hoặc in ra giấy trong quá trình thử nghiệm. Kiểu prototype như vậy được gọi là static prototype.

3. Interactive vs. Static Prototypes

Ghi chú của ColorME (10/2026): cách chia interactive và static prototype cùng ba phương pháp bên dưới được trình bày theo bài UX Prototypes: Low Fidelity vs. High Fidelity của Kara Pernice, Nielsen Norman Group (18/12/2016).

3.1. Interactive Prototypes

Interactive prototype hay còn gọi là clickable prototype là kiểu prototype được thực hiện bằng phần mềm chuyên dụng, gắn sẵn các lệnh tương tác để mô phỏng các phản hồi của giao diện khi người dùng bấm vào. Do đó, kiểu prototype này sẽ cần tốn nhiều thời gian để đặt từng lệnh, từng trường hợp khi tương tác

3.2. Static Prototypes

Là kiểu prototype được điều khiển bởi một người hiểu về thiết kế của giao diện và hệ thống, người này sẽ đóng vai máy tính để phản hồi trực tiếp với hành động của người dùng. Chúng ta có thể sử dụng static prototype theo các phương pháp sau:

3.2.1. Wizard of Oz - Pháp sư xứ Oz

Phương pháp này được đặt tên theo cuốn sách và bộ phim cùng tên. Trong bộ phim này nhân vật đầy quyền năng được gọi là “Pháp sư xứ Oz” thực ra chỉ là một người bình thường không hề có tài phép gì đứng ẩn mình sau một tấm màn.

Trong phương pháp này, người đóng vai “pháp sư” sẽ ở một căn phòng khác và điều khiển màn hình của người dùng từ xa. Khi người dùng bấm vào màn hình thì người đóng vai “pháp sư” sẽ quyết định xem nội dung nào sẽ hiển thị trên màn hình của người dùng.

Người điều khiển thậm chí có thể tạo thêm ra một nội dung không có trong dự định ban đầu và hiển thị trên màn hình của người dùng. Người dùng sẽ không biết được là các phản hồi này đang do một người khác tạo ra. Bạn có thể giải thích với người dùng lý do phản hồi chậm là do hệ thống vẫn chưa hoàn thiện.

Phương pháp Wizard of Oz thường được dùng để thử nghiệm các hệ thống sử dụng trí tuệ nhân tạo, trước khi người ta tiến hành làm ra trí tuệ nhân tạo thực sự. Người điều khiển trong cuộc thử nghiệm có thể mô phỏng phản hồi của trí tuệ nhân tạo bằng chính trí tuệ tự nhiên của mình.

3.2.2. Paper-Prototype - Prototype trên giấy

Ở phương pháp này, thiết kế của giao diện sẽ được vẽ hay in ra trên giấy. Một người hiểu về thiết kế của giao diện sẽ đóng vai “máy tính” và đặt sẵn các tờ giấy ở trên một chiếc bàn gần với bàn của người tham gia thử nghiệm nhưng tránh không để người tham gia thử nghiệm có thể nhìn thấy các tờ giấy trên bàn của “máy tính”.

Khi người dùng lấy ngón tay bấm vào màn hình được thể hiện trên tờ giấy đặt ở trước mặt họ, “máy tính” sẽ lấy tờ giấy thể hiện phản hồi tương ứng và đưa ra trước mặt người dùng.

“Máy tính” cần báo hiệu cho người dùng biết rằng họ đã phản hồi xong để người dùng có thể tiếp tục các tương tác khác. Người đóng vai "máy tính" có thể báo hiệu bằng một cử chỉ đã thống nhất với nhau từ trước ví dụ như ngồi xếp tay lại để người dùng biết “máy tính” đã phản hồi xong hoặc in ra sẵn dòng chữ “Đang xử lý...” hay icon đồng hồ cát để báo cho người dùng biết “máy tính” đang tìm tờ giấy có phản hồi tương ứng.

Người điều phối buổi phỏng vấn cần tránh giải thích quá nhiều về các chi tiết trong thiết kế của giao diện và quy trình thử nghiệm.

3.2.3. Steal-the-Mouse - Click thay người dùng.

Phương pháp này là một phiên bản của Wizard of Oz nhưng khác ở chỗ, người đóng vai “pháp sư” sẽ ở trong cùng một phòng với người dùng (người điều phối buổi phỏng vấn nên kiêm luôn vai trò “pháp sư”).

Prototype sẽ được hiển thị trên một màn hình máy tính. Khi người dùng click vào màn hình, người điều phối sẽ yêu cầu người dùng quay đi khỏi màn hình trong chốc lát và lúc này “pháp sư” sẽ chuyển màn hình của người dùng sang trang khác tương ứng. Sau đó người dùng sẽ được yêu cầu nhìn lại vào màn hình để tiếp tục.

Prototype lo-fi và hi-fi: khi nào mức nào là đủ?

Theo Nielsen Norman Group, độ chi tiết (fidelity) của prototype là mức nó giống sản phẩm thật ở ba mặt: tương tác, hình ảnh, nội dung.

4. Có cần thiết phải làm prototype không?

Quá trình code ra 1 sản phẩm hoàn chỉnh thường sẽ tốn nhiều thời gian, công sức, nói chung là tốn kém hơn rất nhiều so với việc chúng ta làm ra prototype để có thể thử nghiệm trước với nhóm người dùng mục tiêu.

Nếu chúng ta đợi đến khi code xong, để người dùng sử dụng sản phẩm trên thực tế và đợi xem họ có gặp vấn đề gì không rồi lúc đó mới tiến hành khắc phục thì đã quá muộn.

Khi chúng ta thử nghiệm prototype trong một quy mô nhỏ, nếu có vấn đề xảy ra chúng ta có thể dễ dàng xác định nguyên nhân và điều chỉnh lại thiết kế ngay lập tức, tạo ra prototype mới, tiếp tục thử nghiệm, và lặp lại quy trình này cho đến khi chúng ta đạt đến kết quả chấp nhận được. Cách làm này được gọi là Iterative Design - Thiết kế lặp lại.

Nhưng khi sản phẩm đã được sử dụng chính thức, lúc này nếu có lỗi xảy ra, thiệt hại và rủi ro có thể sẽ vô cùng lớn vì khi người dùng gặp phải khó khăn khi sử dụng và không hài lòng với sản phẩm, họ sẽ không muốn dùng nữa và có thể rời bỏ sản phẩm ngay lập tức nếu họ có giải pháp khác thay thế. Việc này sẽ ảnh hưởng nghiêm trọng đến doanh thu và uy tín lâu dài của thương hiệu. Khi đó chi phí để khắc phục hậu quả là rất lớn.

Như vậy, thay vì chỉ tốn kém rất ít cho việc thử nghiệm thì chúng ta lại phải tốn kém hơn gấp nhiều lần và khó kiểm soát được rủi ro.

Prototype còn giúp chúng ta chứng minh tính khả thi của ý tưởng với khách hàng và giúp truyền đạt được chính xác kết quả mà mình mong muốn với các bạn coder.

Đối với designer, sau khi thiết kế xong, việc tạo ra prototype ngay trên các phần mềm như Figma để tự trải nghiệm thử cũng sẽ giúp chúng ta dễ nhận ra các màn hình, trạng thái còn thiếu hoặc những sơ sót mà các bạn sẽ khó nhận ra nếu không thử trải nghiệm trên prototype.

Prototype dùng để làm gì và không phải là gì?

Prototype phục vụ ba việc chính:

• Thử một luồng với người dùng thật để biết họ vướng ở đâu.
• Thống nhất trong nhóm: mọi người cùng bấm thử một bản.
• Bàn giao cho lập trình viên: họ thấy màn hình nào dẫn tới màn hình nào.

Prototype không phải sản phẩm cuối cùng và cũng không phải code chạy thật. Nó thường chỉ dựng đủ những màn hình cần cho việc thử nghiệm. Nếu bạn mới làm quen với lĩnh vực này, hãy đọc trước bài UI/UX là gì để nắm bức tranh chung.

Cách làm prototype trong Figma: 7 bước

Các bước dùng đúng tên gọi trong tài liệu trợ giúp tiếng Anh của Figma, ColorME đọc lại ngày 14/10/2026. Theo Figma, người có quyền can edit tạo được prototype, người có quyền can view chạy thử được.

1. Chuẩn bị các frame. Mỗi màn hình là một frame nằm trực tiếp trên canvas (top-level frame). Đích đến của kết nối thường phải là frame như vậy.
2. Mở tab Prototype ở thanh bên phải. Phím tắt Shift E chuyển nhanh giữa tab Design và Prototype (Guide to prototyping in Figma).
3. Tạo connection. Chọn đối tượng làm hotspot (nút, icon, ảnh...), kéo dấu cộng tới frame đích. Mũi tên nối hai bên gọi là connection (Connect your prototype).
4. Chọn trigger và action trong bảng Interaction details. Trigger là thao tác kích hoạt: On click/On tap, On drag, While hovering, After delay... Action là điều xảy ra sau đó: Navigate to (sang frame khác), Back, Scroll to, Open link, Open overlay.
5. Chỉnh animation. Chọn kiểu chuyển cảnh, hướng, easing và thời lượng (Figma cho đặt từ 1 ms đến 10.000 ms). Tích Animate matching layers để dùng Smart animate: Figma tìm các layer trùng tên, cùng vị trí trong cây layer ở hai frame rồi tự tạo chuyển động.
6. Dùng overlay cho menu, thông báo, tooltip. Chọn action Open overlay để frame đích hiện đè lên màn hình hiện tại. Bạn chỉnh được vị trí và bật Close when clicking outside (Create overlays in your prototypes).
7. Đặt flow, chạy thử và chia sẻ. Ở kết nối đầu tiên, Figma tự đặt một flow starting point, tên mặc định Flow 1. Một trang có thể có nhiều flow (Create and manage prototype flows). Bấm Preview (Shift Space) để xem ngay, hoặc Present để mở presentation view (Play your prototypes). Trong presentation view, bấm Share prototype rồi Copy link để gửi cho người khác (Share files and prototypes).

Hai điều Figma ghi rõ: Smart animate không hỗ trợ layer có drop shadow hoặc inner shadow và không dùng cho action mở overlay. Và link chỉ chứa prototype (prototype-only link) thuộc các gói trả phí, còn ở gói Starter người nhận link vẫn mở được file gốc.

Phần nền tảng về chuyển động có trong bài motion graphics. Muốn học Figma bài bản, bạn có thể xem khóa thiết kế giao diện Mobile App với Figma trên E-learning ColorME.

Thử nghiệm với người dùng bằng prototype: kịch bản ngắn

Cần bao nhiêu người? Trong bài Why You Only Need to Test with 5 Users (Nielsen Norman Group, 18/03/2000), Jakob Nielsen khuyên thử với không quá 5 người mỗi đợt và làm nhiều đợt nhỏ, sửa thiết kế giữa các đợt, thay vì một đợt lớn. Nhiều nhóm người dùng rất khác nhau thì cần thêm người.

Kịch bản gợi ý cho một buổi (ColorME soạn theo lời khuyên của Nielsen Norman Group):

1. Mở đầu: nói rõ đây là bản mẫu và bạn đang thử thiết kế, không thử người dùng.
2. Giao nhiệm vụ, không chỉ cách làm: "Bạn hãy đặt một ly cà phê sữa giao tới công ty" thay vì "Bạn bấm nút Đặt hàng".
3. Nhờ họ nói ra suy nghĩ trong lúc thao tác. Đây là phương pháp thinking aloud.
4. Im lặng quan sát. Khi họ bấm vào chỗ chưa làm, hãy nói "Chỗ này chưa hoạt động" rồi hỏi "Bạn nghĩ bấm vào thì chuyện gì sẽ xảy ra?".
5. Kết thúc: hỏi phần nào khó nhất.

Quan sát gì? Họ có xong nhiệm vụ không, khựng ở màn hình nào, bấm nhầm vào đâu. Ghi lại thế nào? Một bảng gồm nhiệm vụ, điều đã xảy ra, câu nói nguyên văn, số người gặp, hướng sửa.

Prototype ngoài UI/UX nghĩa là gì?

Từ điển Oxford Learner’s Dictionaries định nghĩa prototype là thiết kế đầu tiên của một thứ gì đó, từ đó các phiên bản khác được sao chép hoặc phát triển, và ghi gốc từ là tiếng Hy Lạp prōtotupos. Vì vậy trong thiết kế công nghiệp hay kỹ thuật, prototype là mẫu chế thử đầu tiên, thường gọi là nguyên mẫu, còn "proto" là cách gọi tắt thường gặp. Riêng trong JavaScript, prototype là khái niệm khác hẳn: theo MDN, đó là cơ chế để các object kế thừa tính năng của nhau.

Lỗi thường gặp và checklist trước buổi thử nghiệm

• Làm bản hi-fi quá sớm. Câu hỏi về luồng thì bản lo-fi đã đủ.
• Thiếu đường quay lại. Nút Back hay nút đóng chưa được nối.
• Đặt tên layer lộn xộn khiến Smart animate không khớp được layer.
• Không chạy thử trước. Nielsen Norman Group khuyên làm buổi thử nháp (pilot) trước.

Checklist trước khi gửi link:

• Mỗi nhiệm vụ đi được từ đầu tới cuối mà không kẹt.
• Đã chạy thử trên đúng loại thiết bị người dùng sẽ cầm.
• Kịch bản và bảng ghi chép đã sẵn sàng.

Quá trình làm prototype và kết quả thử nghiệm rất đáng đưa vào hồ sơ năng lực, xem bài cách làm portfolio.

Câu hỏi thường gặp

Bản prototype là gì?

Là bản mẫu thử của sản phẩm, làm ra để kiểm tra ý tưởng trước khi sản xuất hoặc lập trình. Với app và website, đó là bản thiết kế bấm thử được. "Prototype design" là công đoạn dựng bản mẫu này.

Prototype khác wireframe và mockup thế nào?

Wireframe cho thấy bố cục, mockup cho thấy giao diện hoàn chỉnh nhưng đứng yên, còn prototype cho thấy sản phẩm phản hồi ra sao khi người dùng thao tác.

Interactive prototype là gì?

Là prototype đã gắn sẵn tương tác bằng phần mềm, không cần ai đứng sau điều khiển.

Làm prototype có cần biết code không?

Không. Theo Figma, prototyping đi từ phác thảo hoặc wireframe tới bản mô phỏng mà không phải viết code.

Thuật ngữ trong bài: Prototype, Figma, Lặp lại (giải thích trong thư viện thuật ngữ thiết kế của ColorME).

TÓM LẠI

Trên đây là những định nghĩa cơ bản về Prototype, phân loại Prototype và sự cần thiết của Prototype với UI UX Design. Và nếu bạn đang muốn tìm hiểu về UI UX mà chưa biết bắt đầu từ đâu, hãy tham khảo ngay khóa học UI cho người mới bắt đầu của ColorME bạn nhé!