Skip to main content

Đặc Tả Thiết Kế Mới: Vòng Quay May Mắn (Lucky Wheel Redesign - Phiên bản 2)

Ngày cập nhật: 04/07/2026
Loại: UI/UX Redesign — Lucky Wheel & Reward Celebrations

Ảnh thiết kế tham chiếu:

  1. Ảnh 1 — Thiết kế bánh xe múi tiền giảm giá
  2. Ảnh 2 — Thiết kế bánh xe múi tỷ lệ phần trăm cộng thêm
  3. Ảnh 3 — Thiết kế Modal chúc mừng trúng thưởng và CTA

1. Giao Diện Bánh Xe Vòng Quay (Lucky Wheel UI)​

Bánh xe quay thưởng được thiết kế tối giản, hiện đại và tập trung hoàn toàn vào nội dung ưu đãi:

1.1 Chi tiết thiết kế bánh xe​

  • Số múi (Slices): Gồm 4 múi có diện tích bằng nhau (góc 90 độ mỗi múi).
  • Màu sắc múi: Xen kẽ giữa Màu Trắng (#FFFFFF) và Màu Cam Đất/Kem (#FCEEE6 hoặc tương đương).
  • Nút quay ở tâm (Center Button):
    • Nút tròn màu cam đất nổi bật.
    • Ở giữa ghi chữ "GO" màu trắng in hoa, font chữ nét dày (bold).
  • Kim chỉ giải thưởng (Pointer): Mũi tên chỉ hướng nhỏ, nằm ở sát ngoài viền hoặc ở tâm hướng thẳng lên trên để xác định múi thắng cuộc khi vòng quay dừng lại.
  • Hiệu ứng lấp lánh (Sparkle Effect): Các ngôi sao bốn cánh màu trắng phát sáng lấp lánh xuất hiện xung quanh viền bánh xe trong quá trình quay để tăng hiệu ứng thị giác.

1.2 Nội dung hiển thị trên múi bánh xe​

Tùy thuộc vào loại chiến dịch thiết lập trên CMS, nội dung hiển thị sẽ tự động thay đổi theo 2 dạng:

Dạng 1: Số tiền giảm giá trực tiếp (Direct Discount)​

  • Text định dạng: Giảm [Số tiền]kđ (Ví dụ: Giảm 81kđ, Giảm 116kđ, Giảm 58kđ, Giảm 34kđ).
  • Hướng Text: Chữ được xoay dọc theo tâm múi, font chữ nét dày đậm.

Dạng 2: Tỷ lệ phần trăm giá trị cộng thêm (Percentage Value Booster)​

  • Text định dạng: +[Số]% giá trị (Ví dụ: +50% giá trị, +200% giá trị, +20% giá trị, +10% giá trị).

2. Giao Diện Modal Chúc Mừng Trúng Thưởng (Reward Celebration Modal)​

Khi người dùng quay trúng giải thưởng, một modal chúc mừng với thiết kế đặc biệt ấn tượng sẽ xuất hiện đè lên toàn màn hình (full-screen overlay):

┌───────────────────────────────────────────────┐
│                                               │
│    🌟 Bạn nhận được phần thưởng cao nhất! 🌟  │  ← (1) Tiêu đề lớn
│          Nhận voucher sau khi thanh toán      │  ← (2) Phụ đề
│                                               │
│             ┌───────────────────┐             │
│             │    350.000đ       │             │  ← (3) Card phần thưởng
│             │    Gói voucher    │             │     (Màu kem, chữ cam to)
│             └───────────────────┘             │
│                                               │
│             Kết thúc sau 10:13:50             │  ← (4) Countdown Timer
│                                               │
│                 [ Mua ngay ]                  │  ← (5) Nút CTA chính
│                                               │
│            Có áp dụng điều khoản              │  ← (6) Điều khoản
│                                               │
│                     ( X )                     │  ← (7) Nút Đóng
└───────────────────────────────────────────────┘

2.1 Chi tiết các thành phần trong Modal​

(1) Tiêu đề & Phụ đề chúc mừng​

  • Tiêu đề chính: "Bạn nhận được phần thưởng cao nhất!" (Chữ trắng, in đậm, căn giữa).
  • Tiêu đề phụ: "Nhận voucher sau khi thanh toán" (Chữ trắng mảnh, cỡ nhỏ hơn).

(2) Card phần thưởng nổi bật (Reward Card)​

  • Card hình chữ nhật màu kem sáng nằm ở trung tâm modal.
  • Chữ số tiền thưởng (Ví dụ: "350.000đ") hiển thị cực lớn bằng màu cam thương hiệu.
  • Dưới số tiền là tên gói quà (Ví dụ: "Gói voucher" hoặc "Voucher Jjim Jil Bang").

(3) Bộ đếm ngược thời gian áp dụng (Countdown Timer)​

  • Hiển thị thời gian còn lại để nhận ưu đãi dưới dạng: Kết thúc sau [Giờ] : [Phút] : [Giây].
  • Thời gian đếm ngược thực tế (Ví dụ: 10 : 13 : 50), các số được đặt trong các box nhỏ màu trắng để tạo điểm nhấn.

(4) Nút kêu gọi hành động (CTA Button)​

  • Nút bấm bo góc lớn màu vàng cam gradient.
  • Chữ trên nút: "Mua ngay" hoặc "Nhận ngay" (màu nâu sẫm hoặc đen).
  • Kích hoạt sự kiện thanh toán/nhận voucher khi click.

(5) Điều khoản & Nút đóng​

  • Dòng chữ nhỏ căn giữa: "Có áp dụng điều khoản" (Có gạch chân dưới, bấm vào mở popup điều khoản chi tiết).
  • Nút đóng dạng icon tròn dấu x ( X ) nằm ở dưới cùng của modal để người dùng dễ dàng tắt đi nếu muốn bỏ qua.

3. Checklist Triển Khai Kỹ Thuật​

  • Thiết kế vòng quay SVG với 4 múi, góc xoay 90 độ, múi trắng/cam xen kẽ, nút tròn "GO" ở giữa.
  • Tích hợp hiệu ứng lấp lánh (Sparkle particles) sử dụng animation quay/phóng to thu nhỏ các icon ngôi sao lấp lánh.
  • Cấu hình API trả về danh sách giải thưởng gồm: giá trị text hiển thị trên múi và giá trị thực tế của quà.
  • Xây dựng Modal Chúc Mừng (CelebrationModal):
    • Nền tối mờ (rgba(0,0,0,0.85)).
    • Tích hợp bộ đếm ngược thời gian (countdown timer) giảm dần mỗi giây.
    • Định dạng card phần thưởng màu kem, căn giữa text mệnh giá lớn.
    • Tích hợp action outlink hoặc redirect khi click nút "Mua ngay".