Photoshop

Prototype là gì?

prototypesprototypes là gìpropotype là gìprotype là gìproto là gìbản prototype là gì

Prototype là bản mẫu có thể bấm thử của một sản phẩm số, mô phỏng cách các màn hình chuyển đổi và phản hồi thao tác người dùng, dùng để kiểm tra ý tưởng trước khi lập trình.

Hiểu kỹ hơn

Prototype khác wireframe và mockup ở chỗ có tương tác: bấm nút thì chuyển màn hình, mở menu, hiện thông báo. Theo độ chi tiết có prototype độ trung thực thấp bằng giấy hoặc hộp xám, trung bình, và cao gần giống sản phẩm thật. Trong Figma, chuyển sang tab Prototype, kéo connection từ một layer sang frame đích, chọn trigger như On click và action như Navigate to, rồi bấm Present để chạy thử; Smart Animate tạo chuyển động giữa các frame có layer cùng tên. Prototype là công cụ chính cho usability testing: cho người dùng thật thực hiện nhiệm vụ và quan sát chỗ họ vướng. Ví dụ: trước khi làm ứng dụng đặt bàn nhà hàng, nhóm dựng prototype luồng chọn giờ, chọn số người và xác nhận để thử với năm khách hàng. Lỗi thường gặp là nối mọi màn hình trong một prototype khổng lồ, trong khi chỉ cần dựng đủ những luồng định kiểm tra.

Đọc bài viết đầy đủ về Prototype

Học viên ColorME làm Prototype

Kiểm tra nhanh

Bộ câu hỏi ôn tập về Photoshop

Làm thử

Thuật ngữ liên quan

01Low-fidelity prototype (bản mẫu độ chi tiết thấp, lo-fi)

Low-fidelity prototype là bản mẫu đơn giản, thường bằng giấy hoặc khối xám, chỉ thể hiện cấu trúc, nội dung chính và luồng đi giữa các màn hình, dùng để…

02Mid-fidelity prototype (bản mẫu độ chi tiết trung bình)

Mid-fidelity prototype là bản mẫu nằm giữa lo-fi và hi-fi, có bố cục, tỉ lệ, phân cấp chữ và nội dung gần đúng nhưng thường vẫn dùng màu xám hoặc màu hạn…

03High-fidelity prototype (bản mẫu độ chi tiết cao, hi-fi)

High-fidelity prototype là bản mẫu gần giống sản phẩm thật về hình thức và tương tác, có màu, chữ, hình ảnh, nội dung thật và chuyển động, dùng để kiểm…

04Kiểm thử khả dụng (usability testing)

Kiểm thử khả dụng (usability testing) là cho người dùng thật làm các nhiệm vụ cụ thể trên sản phẩm hoặc prototype, quan sát họ gặp khó ở đâu để sửa thiết…

05Interactions trong Figma (tương tác prototype)

Interaction trong prototype Figma là một quy tắc gồm trigger, tức điều người dùng làm, và action, tức điều xảy ra tiếp theo, kèm kiểu chuyển cảnh, được…

06Wireframe (khung giao diện)

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 vị trí, thứ tự và mức ưu tiên của các thành phần như tiêu đề, ảnh, nút…