Mockup
Bản thiết kế tĩnh đầy đủ màu sắc, font, icon và nội dung thật của một màn hình. Đây là thứ dev nhìn vào để code và là thứ khách hàng ký duyệt về mặt hình ảnh.
Định nghĩa
Lấy wireframe, tô đúng màu thương hiệu, thay chữ lorem bằng nội dung thật, thay ô vuông bằng ảnh thật, canh lại từng khoảng cách — ra mockup. Nó vẫn là ảnh tĩnh, bấm vào không có gì xảy ra, nhưng nhìn giống hệt sản phẩm cuối. Vì giống thật nên đây cũng là bản mà khách hàng hay ký duyệt và dev hay lấy làm chuẩn để so từng pixel.
Mockup là lời cam kết về hình ảnh: cái gì hiển thị, hiển thị bằng màu gì, chữ gì, dài bao nhiêu.
Mỗi bước chốt được cái gì
| Bản vẽ | Câu hỏi nó đóng lại | Nếu bỏ qua bước này |
|---|---|---|
| Wireframe | Màn này gồm khối gì, thứ tự thao tác ra sao | Cãi nhau về luồng khi đã tô màu xong, sửa rất đau |
| Mockup | Trông như thế nào, chữ nghĩa cụ thể ra sao | Dev tự chế giao diện, mỗi màn một kiểu |
| Prototype | Bấm vào thì chuyện gì xảy ra, có mượt không | Đến UAT mới biết luồng khó dùng |
Ba bước, ba câu hỏi khác nhau. Đừng gộp, cũng đừng nhảy cóc từ ý tưởng thẳng lên mockup rồi mới phát hiện luồng sai.
BA cần soi gì trước khi duyệt mockup
Designer lo phần đẹp. BA lo phần đúng nghiệp vụ, và đây là danh sách mình soi mỗi lần:
- Nội dung thật, không phải nội dung mẫu. Tên khách hàng VN có dấu, có khi 32 ký tự. Số tiền có dấu phân cách hàng nghìn và đuôi "đ". Ngày tháng theo dd/mm/yyyy chứ không phải mm/dd.
- Trạng thái rỗng, đang tải, lỗi. Ba màn này thiếu là chắc chắn có bug ở SIT.
- Chuỗi dài nhất có thể xảy ra. Tên sản phẩm "Bộ bàn ăn gỗ sồi tự nhiên 6 ghế màu óc chó" bỏ vào ô hai dòng thì tràn hay cắt bớt, cắt thì hiện dấu ba chấm ở đâu.
- Quyền hạn. Cùng một màn, kế toán thấy nút "Duyệt chi", nhân viên thì không. Mockup phải có đủ biến thể hoặc ít nhất có chú thích.
- Ràng buộc validate. Ô nhập số tiền tối đa bao nhiêu, báo lỗi hiện chỗ nào, chữ báo lỗi viết ra sao — chữ đó là việc của BA, không phải của designer.
Ví dụ thực tế
Sàn nội thất nội địa, màn thanh toán. Mockup được duyệt rất nhanh vì nhìn sạch đẹp: một ô mã giảm giá, một dòng tổng tiền, một nút đặt hàng.
Sang tuần thứ ba, dev hỏi: đơn hàng có 4 sản phẩm, một cái tặng kèm, một cái đang giảm 30%, phí vận chuyển tính theo tỉnh, khách dùng thêm điểm tích lũy — cái dòng tổng tiền đó hiển thị mấy dòng phụ. Mockup chỉ có đúng một dòng. Kết quả: dừng, vẽ lại phần tóm tắt đơn với 6 dòng phụ, cả block phải thiết kế lại vì chiều cao đổi, hai màn liên quan cũng phải chỉnh theo. Ba ngày công cho một thứ đáng lẽ chỉ cần BA đặt một câu hỏi lúc review.
Câu hay bị hỏi phỏng vấn
"Mockup khác wireframe thế nào?" — Trả lời ngắn: khác ở độ trung thực về mặt hình ảnh và ở mục đích. Wireframe để chốt bố cục, sai thì sửa gần như miễn phí. Mockup để chốt hình ảnh và bàn giao cho dev, sai thì kéo theo cả designer và dev.
"BA có cần biết vẽ mockup không?" — Không bắt buộc, và cũng đừng nhận việc của designer. Nhưng phải biết đọc mockup, biết đối chiếu với đặc tả, biết chỉ ra chỗ nào thiếu trạng thái. Ở công ty nhỏ không có designer thì BA ghép tạm trong Figma từ bộ component có sẵn, chấp nhận xấu, miễn nhất quán.
Một thói quen đáng giữ: sau khi mockup được duyệt, chụp lại từng màn kèm số hiệu và dán vào tài liệu đặc tả, ghi rõ ngày duyệt. Sáu tháng sau khi có tranh cãi, file Figma đã bị sửa mười lần rồi, còn ảnh trong tài liệu thì không.
