Giả sử bạn gửi khách một wireframe xám để chốt luồng màn hình đề nghị mua hàng, và phản hồi đầu tiên là giao diện thế này người dùng không chịu đâu, đổi sang màu logo công ty nhé, thế là cả buổi họp sau đó bàn màu, còn câu bạn cần chốt là duyệt xong thì đề nghị đi đâu thì chẳng ai trả lời. Chuyện này dễ xảy ra khi hai bên chưa thống nhất đang xem loại bản vẽ nào, vì wireframe, mockup và prototype trả lời ba câu hỏi khác nhau, mà BA thường chỉ cần sở hữu một.
bốn mức độ, một bảng#
Sketch là phác thảo tay, vẽ nhanh trên giấy để mình tự nghĩ, wireframe là khung xương đen trắng thể hiện bố cục, có những khối nào, field nào, nút nào, bấm thì đi đâu, mockup là bản có màu sắc, font chữ, gần giống sản phẩm thật, còn prototype là bản tương tác được, bấm vào là chuyển màn hình. BABOK Guide v3 xếp chung mấy dạng này vào kỹ thuật Prototyping (10.36).
| Mức | Mục đích | Độ chi tiết | Ai thường làm |
|---|---|---|---|
| Sketch | Nghĩ nhanh | Thô nhất | BA, ai cũng được |
| Wireframe | Chốt bố cục, luồng, dữ liệu | Thấp | BA |
| Mockup | Chốt giao diện, màu sắc | Cao | Designer |
| Prototype | Mô phỏng tương tác | Cao | Designer hoặc BA |
BA làm tới đâu#
Ranh giới đơn giản thôi, BA vẽ wireframe để chốt luồng và dữ liệu, không chốt màu. Wireframe trả lời câu hỏi nghiệp vụ, màn hình có những trường nào, người dùng nhập gì, bấm nút nào thì đi đâu, lỗi hiện ở đâu, còn màu xanh hay đỏ, font to hay nhỏ là việc của designer.
Thế nên wireframe không cần đẹp mà cần đúng, đúng field, đúng luồng, đúng trạng thái, một wireframe vẽ bằng ô vuông với chữ xám mà đủ thông tin vẫn hơn một mockup bóng bẩy thiếu trường dữ liệu. Khi luồng và dữ liệu đã chốt xong thì giao cho designer, họ nhận wireframe rồi làm đẹp thành mockup.
JD đang nói gì#
Đọc vài tin tuyển BA ở Hà Nội năm 2026 thì yêu cầu về vẽ giao diện khác nhau khá rõ giữa các chỗ. Tin Senior BA của Edufy ghi trong mô tả công việc “Xây dựng tài liệu đặc tả yêu cầu phần mềm theo nhiều hình thức: Tài liệu mô tả, tài liệu thiết kế giao diện mẫu (prototype) và các tài liệu liên quan khác”, và yêu cầu biết công cụ vẽ mockup như Visio, Axure, Figma (tin trên 123job, đã hết hạn). Tin Senior BA BHXH của MISA yêu cầu dùng thành thạo Jira, Figma, draw.io (tin trên Devwork, đã hết hạn). Ở mức fresher, tin của Huvisoft xếp wireframe cạnh user story, use case, acceptance criteria trong nhóm tài liệu BA phải làm (tin trên Joboko).
Tức là vẽ được wireframe và dùng được một công cụ như Figma đang là yêu cầu thật chứ không chỉ là điểm cộng, nhưng không tin nào trong số này đòi BA làm visual design, thấy chữ Figma thì học đủ để vẽ khung, không cần thành designer.
khi không có designer#
Nhiều dự án không có designer, nhất là dự án nội bộ hoặc ERP, lúc đó BA có thể phải làm luôn phần mockup đơn giản. Dự án ERP thì có nét riêng là màn hình đã có sẵn trong sản phẩm, bạn không vẽ lại từ đầu mà chụp màn hình chuẩn của hệ thống rồi chú thích chỗ nào cấu hình gì, thêm bớt field nào, chỉ phần phát triển thêm (custom) mới cần vẽ wireframe cho màn hình mới, khác hẳn dự án phần mềm xây mới nơi màn hình nào cũng phải vẽ từ con số không.
gắn wireframe vào tài liệu thế nào#
Wireframe không nên nằm riêng một góc không ai nhìn, nó nên gắn thẳng vào tài liệu yêu cầu, trong FS thì mỗi chức năng kèm một ảnh wireframe, trong user story thì đính kèm để dev nhìn là hiểu. Cách làm đơn giản là đặt mỗi màn hình ngay dưới phần mô tả chức năng tương ứng, kèm chú thích field và rule, người đọc khỏi phải lật qua lật lại.
đưa wireframe vào portfolio#
Wireframe là một trong những thứ dễ đưa vào portfolio nhất, vì nó thể hiện tư duy của bạn mà không cần dự án thật, chọn một quy trình quen thuộc, vẽ màn hình as-is và to-be, kèm giải thích vì sao to-be tốt hơn. Cách làm case simulation có trong bài Portfolio BA khi chưa có dự án, và nhớ là wireframe trong portfolio phải đi kèm lời giải thích, chứ đừng chỉ là một đống ảnh.
chốt luồng trước, chốt màu sau#
Đừng nhầm wireframe với thiết kế cuối, việc của BA là chốt luồng và dữ liệu bằng wireframe, chuyện màu mè để designer lo, nắm được ranh giới này thì vừa đỡ tốn thời gian, vừa không bị khách hiểu nhầm. Wireframe gắn vào FS thế nào cho dev đọc được thì xem thêm BRD, SRS, FS khác nhau thế nào, còn viết user story đi kèm wireframe cho khớp thì có bài User story và acceptance criteria.
Bạn đang vẽ wireframe bằng công cụ gì, và đã bao giờ bị khách tưởng wireframe là thiết kế cuối chưa? Kể mình nghe qua Facebook hoặc LinkedIn nhé.
