Skip to main content

Yêu Cầu Thiết Kế Lại: Vòng Quay May Mắn (Lucky Wheel)

Ngày tạo: 30/06/2026
Loại: UX/UI Redesign — Lucky Wheel Feature

Ảnh tham chiếu:

1. Vấn Đề Hiện Tại — Thiết Kế "Thô"​

Popup nhắc quay hiện tại chỉ gồm: icon tròn đơn giản + tiêu đề + 2 nút → không có vòng quay thực sự bên trong popup, không có hiệu ứng, trải nghiệm nhàm và không gây hứng thú.

Hiện trạng popup Vòng quay — quá đơn giản

2. Yêu Cầu Thiết Kế Lại​

2.1 Popup Chứa Vòng Quay Thực Sự (Spin In-Popup)​

Khi popup Vòng quay mở lên, vòng quay phải hiển thị ngay bên trong popup — người dùng quay trực tiếp tại đó, không cần chuyển sang màn hình khác.

Tham khảo thiết kế vòng quay trong popup

Yếu tốYêu cầu
Nền popupTối, gradient hoặc dark overlay tạo cảm giác "sân khấu" — không nền trắng phẳng
Vòng quayHiển thị đầy đủ bánh xe với các ô giải thưởng, màu sắc đa dạng, chữ trong ô rõ ràng
Kim chỉ (Pointer)Mũi tên/kim cố định ở trên hoặc trung tâm, làm rõ ô nào được chọn khi dừng
Nút SpinNằm ở giữa vòng quay (hình tròn) hoặc bên dưới — nổi bật, có animation nhấp nháy nhẹ khi chờ
Tiêu đềText phía trên vòng quay: "Vòng Quay May Mắn" hoặc "Thử vận may hôm nay!"
Kết quảHiển thị tên giải thưởng trúng ngay trên/trong vòng quay khi dừng xoay
Đóng popupNút ✕ góc trên phải (chỉ hiện sau khi quay xong hoặc sau 5 giây)
Đồng bộ nhãnNhãn giải thưởng/voucher trúng phải trùng khớp 100% với nhãn ghi trên múi bánh của vòng quay.

Cấu trúc popup​

┌─────────────────────────────────────────┐
│ ✕ (góc phải, chỉ hiện sau khi quay)    │
│                                         │
│    🎯  Vòng Quay May Mắn  🎯            │
│    "Bạn có 1 lượt quay hôm nay!"       │
│                                         │
│         ╭───────────────╮               │
│      ◄  │   🎡 WHEEL    │  ►           │
│         │   [S P I N]   │               │
│         ╰───────────────╯               │
│                                         │
│         [ QUAY NGAY ]                   │
│         [ Để sau     ]                  │
└─────────────────────────────────────────┘

2.2 Hiệu Ứng Chúc Mừng Phủ Toàn Màn Hình Khi Trúng​

Ngay khi vòng quay dừng và có kết quả trúng thưởng, hiệu ứng chúc mừng phải phủ lên toàn màn hình (full-screen overlay).

Tham khảo hiệu ứng confetti chúc mừng khi trúng

Yếu tốYêu cầu
Confetti / Pháo hoaCác mảnh giấy màu, ngôi sao, hình thú bay tung khắp màn hình (animation từ trên rơi xuống)
Màu sắcĐa màu: đỏ, vàng, xanh, tím, cam — tông màu vui nhộn, lễ hội
Thông báo trúng thưởngHộp/card nổi lên ở giữa màn hình hiển thị: tên giải thưởng, mô tả, và nút nhận thưởng
Text chúc mừng"🎉 Chúc mừng bạn!" / "Bạn vừa trúng [Tên giải]!" — font lớn, nổi bật
Thời gian hiệu ứngConfetti chạy 3–5 giây, sau đó fade out nhẹ
Nút CTA"Nhận thưởng" → điều hướng đến ví/voucher. "Đóng" → tắt overlay
Âm thanhTiếng trống/chuông thắng (tùy chọn, có thể tắt theo setting điện thoại)

Trạng thái hiệu ứng theo kết quả​

Kết quảHiệu ứng
Trúng giải lớn (GPoint, Voucher giá trị cao)Full confetti mạnh, âm thanh to, text "JACKPOT!" hoặc "ĐẠI THẮNG!"
Trúng giải nhỏ (GPoint ít, ưu đãi nhỏ)Confetti nhẹ, âm thanh nhỏ hơn, text "Chúc mừng!"
Không trúng / May mắn lần sauKhông có confetti, chỉ hiện thông báo nhẹ nhàng

3. Luồng UX Hoàn Chỉnh​

[Mở App lần đầu trong ngày]
        ↓
[Sau 1–2s: Popup Vòng quay xuất hiện]
        ↓
[Popup hiển thị vòng quay đầy đủ + nút "Quay ngay"]
        ↓
[User nhấn "Quay ngay"]
        ↓
[Vòng quay xoay với animation mượt mà 3–5s]
        ↓
[Vòng dừng → highlight ô trúng]
        ↓ (nếu có giải thưởng)
[HIỆU ỨNG CONFETTI phủ toàn màn hình]
[Card thông báo trúng thưởng nổi lên giữa màn hình]
        ↓
[User nhấn "Nhận thưởng" → vào ví/voucher]
   hoặc [Nhấn "Đóng" → trở về Home]

4. Checklist Kỹ Thuật​

Vòng Quay (Lucky Wheel Component)​

  • Dùng react-native-reanimated + react-native-svg để render vòng quay mượt mà
  • Hoặc dùng thư viện có sẵn: react-native-wheel-of-fortune
  • Dữ liệu ô giải thưởng lấy từ API (/lucky-wheel/prizes) — không hardcode
  • Animation xoay: easing decelerate (bắt đầu nhanh, chậm dần trước khi dừng)
  • Kết quả xác định từ server (không tính trên client để tránh gian lận)
  • Đồng bộ nhãn: Tên giải thưởng hiển thị trên popup thông báo kết quả và lưu vào ví/database phải trùng khớp hoàn toàn với text được ghi trên múi bánh (phân vùng) của vòng quay.

Hiệu Ứng Confetti​

  • Dùng thư viện react-native-confetti-cannon hoặc @nandorojo/burnt
  • Confetti là AbsolutePositioned overlay, zIndex cao nhất
  • Tự động fade out sau 4 giây
  • Card kết quả xuất hiện với animation spring từ dưới lên
  • Dùng react-native-modal hoặc @gorhom/bottom-sheet cho popup vòng quay
  • Backdrop blur/dark khi popup mở
  • Không thể dismiss popup bằng cách nhấn ra ngoài khi đang xoay
  • Nút "Để sau": lưu AsyncStorage ngày đã show, không hiện lại hôm nay