Skip to main content

Thiết Kế Chữ & Icon Trong Vòng Quay May Mắn

Ngày cập nhật: 20/06/2026
File ảnh gốc: z7956716839158_5faf658845522dd20c3e2105dd90319c.jpg

Tài liệu này đặc tả chi tiết yêu cầu thiết kế giao diện (UI) và hiệu ứng hiển thị văn bản, hình ảnh biểu tượng (Icon) bên trong từng ô tam giác (Slice) của Vòng quay may mắn (Lucky Spin) trên Mobile App.

1. Yêu Cầu Hiển Thị Chữ Uốn Cong (Arched / Curved Text)​

  • Hiện trạng rủi ro: Chữ trong vòng quay nếu viết theo dạng thẳng nằm ngang hoặc dọc đơn thuần sẽ dễ bị đè lên nhau ở phần tâm, gây mất thẩm mỹ và cực kỳ khó đọc khi vòng quay xoay.
  • Yêu cầu thiết kế:

Thiết kế chữ vòng quay

  • Uốn cong theo hình vòng cung:
    • Văn bản trong mỗi ô tam giác bắt buộc phải được thiết kế uốn cong theo đường tròn (đồng tâm với viền ngoài của vòng quay).
    • Chiều đọc của chữ hướng từ ngoài vào trong, hoặc bo tròn ôm theo phần rìa ngoài của vòng quay.
    • Hỗ trợ xuống dòng (Multi-line Curved Text): Khi nội dung giải thưởng dài, chữ phải được tự động ngắt dòng và uốn cong song song (Ví dụ: Dòng 1: “CỘNG 20 PHÚT” uốn cong ở trên, Dòng 2: “NỘI MẠNG” uốn cong song song ở dưới).

2. Bố Cục Chữ & Icon Trong Mỗi Ô (Slice Element Layout)​

Mỗi ô giải thưởng (Slice) cần được phân bổ layout hợp lý theo thứ tự từ rìa ngoài hướng về tâm:

  1. Văn bản uốn cong (Curved Text): Nằm sát viền ngoài cùng của vòng quay để tối ưu không gian hiển thị rộng nhất của ô tam giác.
  2. Icon giải thưởng (Reward Icon): Đặt ở giữa ô tam giác, ngay bên dưới phần văn bản uốn cong. Icon cần được xoay hướng tâm đồng bộ với góc của ô.
  3. Màu nền xen kẽ (Contrast Colors): Các ô tam giác liền kề sử dụng các màu sắc tương phản xen kẽ để người dùng dễ phân biệt các phần thưởng.
  4. Nút "QUAY NGAY" ở tâm: Nút bấm tròn nằm chính giữa tâm vòng quay, cố định không xoay khi vòng quay chuyển động.