Skip to main content

Đặc Tả Giao Diện Mới: Box BigFan & Bố Cục Tin Tức

Ngày cập nhật: 30/06/2026
Loại: UI/UX Redesign Specification

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

1. Thiết Kế Chi Tiết Box BigFan (Hoạt Động Trao Thưởng)​

Danh sách slide các hoạt động trao thưởng gần đây của BigFan (nhận giải vòng quay hoặc quà tặng chiến dịch marketing) cần được hiển thị dưới dạng các card box vuông có tính trực quan cao.

1.1 Cấu trúc bên trong một Box BigFan​

Mỗi box BigFan là một hình chữ nhật bo góc đứng độc lập (tỷ lệ lớn hơn 4:3) gồm các phần từ trên xuống dưới:

┌─────────────────────────────────────────┐
│        [ Badge Loại Hoạt Động ]         │  ← (1) Vòng quay may mắn / Ưu đãi đặc biệt
│                                         │
│                 ┌───┐                   │
│                 │🎨 │                   │  ← (2) Hình ảnh minh họa phần thưởng lớn
│                 └───┘                   │     (GPoint vàng / Voucher xanh lá)
│             20.000 POINT                │
│                                         │
│  (avatar) Member Nguyễn *** Anh         │  ← (3) Tên User ẩn danh
│           vừa nhận 20.000 Point         │  ← (4) Hành động & nguồn thưởng
│           từ Vòng quay may mắn          │
│                                         │
│  🕒 2 phút trước                        │  ← (5) Thời gian tương đối
└─────────────────────────────────────────┘

(1) Badge phân loại hoạt động (Header Badge)​

  • Đặt căn giữa ở đầu box.
  • Màu sắc theo loại hoạt động:
    • Vòng quay may mắn: Nền màu tím nhạt, chữ tím (#8F5AFF).
    • Ưu đãi sinh nhật / Chiến dịch Marketing: Nền màu xanh lá nhạt, chữ xanh lá (#4CAF50).

(2) Hình ảnh minh họa phần quà (Thumbnail lớn ở trung tâm)​

  • Nằm ở trung tâm box, chiếm 50% diện tích.
  • Nếu trúng GPoint: Hiển thị hình đồng xu vàng óng lấp lánh (Gold Coin) có chữ "G" ở giữa, kèm số lượng point lớn bên dưới (ví dụ: "20.000 POINT" màu cam đất).
  • Nếu trúng Voucher: Hiển thị hình chiếc thẻ Voucher màu xanh lá, ghi mệnh giá (ví dụ: "Voucher 100.000đ") kèm hình hộp quà bên cạnh.

(3) Thông tin người nhận (User Meta)​

  • Gồm avatar tròn nhỏ màu xám bên trái và dòng chữ tên người dùng bên phải.
  • Định dạng tên: Member [Họ] *** [Tên] (Ví dụ: Member Nguyễn *** Anh, Member Phạm *** Yến, Member Trần *** Vy).

(4) Nhãn hành động (Action Text)​

  • Mô tả nguồn gốc nhận quà.
  • Ví dụ:
    • "... vừa nhận 20.000 Point từ Vòng quay may mắn"
    • "... vừa trúng 1 Voucher từ Vòng quay may mắn"
    • "... vừa nhận 1 Voucher chúc mừng sinh nhật" (Quét tự động từ hệ thống marketing hàng ngày).

(5) Thời gian tương đối (Relative Timestamp)​

  • Hiển thị góc dưới cùng bên trái của box kèm icon đồng hồ nhỏ 🕒 (Ví dụ: 2 phút trước, 5 phút trước).

2. Bố Cục Hiển Thị Hộp Tin Tức (News)​

Hộp tin tức trên trang chủ cần được thiết kế lại để phân cấp thông tin rõ ràng hơn giữa tin nóng hổi (mới nhất) và các tin cũ hơn.

2.1 Tin gần nhất (Tin mới nhất - Hero News)​

  • Vị trí: Nằm trên cùng của phần tin tức.
  • Bố cục:
    • Ảnh đại diện (Thumbnail): Ảnh lớn hiển thị full-width (rộng 100%), bo góc trên.
    • Thông tin chữ (ở ngay dưới ảnh):
      • Tiêu đề tin tức: Chữ đậm, màu đen, size lớn (fontSize: 16).
      • Mô tả ngắn: Chữ màu xám, hiển thị 2 dòng đầu rồi cắt ngắn ....
      • Ngày đăng: Hiển thị nhỏ dưới cùng bên cạnh icon lịch 📅 (Ví dụ: 08/05/2026).
┌─────────────────────────────────────────┐
│                                         │
│              [ẢNH TIN LỚN]              │
│               (Full-width)              │
│                                         │
├─────────────────────────────────────────┤
│ Tiêu đề tin tức mới nhất                │
│ Mô tả tóm tắt nội dung bài viết...      │
│ 📅 08/05/2026                           │
└─────────────────────────────────────────┘

2.2 Các tin cũ hơn (List tin phụ)​

  • Vị trí: Xếp hàng dọc ngay dưới Tin mới nhất.
  • Số lượng: Tối đa 4 tin cũ hơn.
  • Bố cục chia cột:
    • Cột trái (25% chiều rộng): Thumbnail ảnh nhỏ hình vuông (borderRadius: 8), hiển thị đầy đủ hình ảnh đại diện của tin.
    • Cột phải (75% chiều rộng còn lại):
      • Tiêu đề tin ở dòng trên: Chữ màu đen, đậm vừa (fontWeight: '500'), giới hạn 2 dòng.
      • Ngày đăng ở dòng dưới: Chữ xám nhỏ (Ví dụ: 📅 06/05/2026).
      • Icon mũi tên > (chevron-right) ở sát góc phải để làm nổi bật tính năng bấm được.
┌─────────────────────────────────────────┐
│ ┌──────┐  Tiêu đề bài viết cũ 2         │
│ │ Ảnh  │  📅 06/05/2026               > │
│ └──────┘                                │
├─────────────────────────────────────────┤
│ ┌──────┐  Tiêu đề bài viết cũ 3         │
│ │ Ảnh  │  📅 04/05/2026               > │
│ └──────┘                                │
└─────────────────────────────────────────┘

Checklist Triển Khai Kỹ Thuật​

  • Tạo file chứa asset hình ảnh phần quà (đồng xu GPoint, hình vẽ voucher các mệnh giá) và lưu vào thư mục asset của App.
  • Implement component <BigFanCard /> cho slide BigFan với cấu trúc badge, ảnh lớn phần thưởng ở trung tâm, avatar và text hành động.
  • Chỉnh sửa layout Tin tức (News Screen/Component):
    • Nhận prop array tin tức. Tin ở vị trí index === 0 render theo style Hero (ảnh to trên, text dưới).
    • Các tin ở vị trí index > 0 (tối đa đến index === 4) render dạng list hàng ngang (ảnh 25% trái, text + chevron 75% phải).
  • Đồng bộ dữ liệu hoạt động chúc mừng sinh nhật tự động từ hệ thống Marketing gửi sang API BigFan để hiển thị lên slide.