Mẫu màn hình mini game
Mọi game (vòng quay, lật thẻ, quiz, bắt quà, cào thẻ…) đi theo cùng một khung luồng để người chơi quen và team dựng nhanh.
Nguồn: chuyển từ design/docs/04-mau-man-hinh-game.md ngày 2026-11-11.
Luồng chuẩn
| # | Màn | Kiosk | Web / App / Zalo | Component chính |
|---|
| 0 | Attract / Landing | Vòng lặp động, "Chạm để chơi" | Banner + thể lệ tóm tắt + CTA | .ds-bg-brand.ds-bg-pattern, cụm bit, .ds-btn--bit |
| 1 | Đăng ký | Nhập SĐT bằng bàn phím số trên màn | Zalo/app: tự lấy; web: SĐT + OTP | .ds-field, .ds-otp, .ds-check |
| 2 | Hướng dẫn | 1 màn, ≤ 3 bước, có hình | Bottom sheet, bỏ qua được | .ds-tag, .ds-sheet |
| 3 | Chơi | Toàn màn, HUD trên cùng | Toàn màn, HUD dưới header Zalo | .ds-hud, .ds-timer, .ds-bits |
| 4 | Kết quả | Pop phần thưởng + confetti | Như kiosk | .ds-result--win/--lose, .ds-score |
| 5 | Nhận quà | QR lớn cho nhân viên quét | Voucher + "Lưu vào ví quà" | .ds-voucher |
| 6 | Sau chơi | Tự về attract sau 15 giây | Chia sẻ nhận lượt, bảng xếp hạng, quà của tôi | .ds-rank, .ds-turns |
Quy tắc từng màn
| Màn | Bắt buộc | Không được |
|---|
| Attract | Logo FPT Telecom (âm bản trên nền cam), 1 CTA, bit-dot | Nhiều hơn 1 CTA, chữ thể lệ dài |
| Đăng ký | Ghi mục đích thu SĐT, checkbox đồng ý không tick sẵn | Hỏi email, CCCD, địa chỉ chi tiết |
| Chơi | HUD luôn thấy được; nút tạm dừng (trừ kiosk) | Quảng cáo, popup chen ngang |
| Kết quả thắng | Tên quà rõ ràng, hướng dẫn nhận, --ds-dur-reward + bounce | Chữ trắng nhỏ trên nền cam |
| Kết quả thua | Lời động viên, CTA "Chơi lại" hoặc "Nhận thêm lượt" | Từ ngữ tiêu cực ("Bạn thua"); dùng "Chưa trúng lần này" |
| Nhận quà | Mã quà + HSD + điều kiện | Mã dài khó đọc — tối đa 10 ký tự, không dùng 0/O, 1/I |
Giọng văn (microcopy)
| Tình huống | Nên | Tránh |
|---|
| CTA bắt đầu | Chơi ngay · Quay ngay · Bắt đầu | Click here, OK |
| Thắng | Chúc mừng! Bạn nhận được… | Bạn đã win |
| Chưa trúng | Tiếc quá, chưa trúng lần này | Bạn thua rồi |
| Hết lượt | Bạn đã hết lượt hôm nay. Chia sẻ để nhận thêm 1 lượt | Không thể chơi |
| Lỗi mạng | Mất kết nối. Kết quả của bạn vẫn được lưu | Error 500 |
Viết Sentence case, xưng "bạn", câu ngắn ≤ 12 từ trên nút và tiêu đề.
Bố cục theo vùng
| Vùng | Mobile (web/app/zalo) | Kiosk 1080×1920 |
|---|
| Trên cùng | Safe area + header (Zalo/app) | Logo giữa, cao 120px |
| HUD | Ngay dưới header | 1/10 trên |
| Sân chơi | Giữa, vuông hoặc 3:4 | Giữa, ~1000×1000 |
| CTA | .ds-safe-bottom-bar dính đáy | 1/3 dưới, cách đáy ≥ 160px |
Checklist trước khi ra mắt
| # | Hạng mục |
|---|
| 1 | Mọi màn có bit-dot (đầy đủ hoặc cắt góc) |
| 2 | Logo ≥ 150px ngang, đúng bản màu/âm bản theo nền |
| 3 | Không có đoạn văn chữ trắng trên nền cam |
| 4 | Vùng chạm đạt chuẩn kênh (44 / 48 / 96px) |
| 5 | Chạy được khi bật "Giảm chuyển động" |
| 6 | Kiosk: tự reset sau 60 giây, xoá dữ liệu phiên, chạy được khi mất mạng |
| 7 | Zalo: không đặt nút quan trọng ở góc phải trên; xin quyền đúng lúc |
| 8 | Thể lệ, chính sách dữ liệu có link rõ ràng |
| 9 | Kiểm tra dấu tiếng Việt ở tiêu đề nhiều dòng (Ệ, Ở, Ữ) |
Lịch sử thay đổi
| Bản | Ngày | Người sửa | Nội dung |
|---|
| 1.0 | 2026-11-11 | Designer | Chuyển từ Markdown sang HTML |