Skip to main content

Yêu Cầu Chỉnh Sửa: Tối Ưu Màn Hình Điểm (Xóa Chặng, Tăng Size Chữ & Số Điểm)

Ngày cập nhật: 08/07/2026
Loại: UI/UX Layout Cleanup & Typography Optimization

Ảnh feedback & tham khảo:

1. Màn Hình Điểm (Points Screen)​

Để tối giản thông tin, tránh gây rối mắt cho khách hàng và làm nổi bật các thông tin quan trọng nhất (số dư điểm khả dụng, hạn dùng), giao diện màn hình Điểm cần được tối ưu lại như sau:

1.1 Xóa bỏ phần "Chặng xét hạng"​

  • Loại bỏ hoàn toàn section "Chặng xét hạng" (được khoanh tròn màu cam ở Ảnh feedback 1).
  • Không hiển thị biểu đồ nửa hình tròn của chặng ("0 Chặng 5M") cũng như dòng text mô tả chu kỳ tương ứng ("Chu kỳ hiện tại kết thúc ngày 31/12/2026").
  • Giữ lại phần "Point xét hạng" ở phía trên để người dùng theo dõi tiến trình thăng hạng (Silver -> Gold -> Platinum...).

1.2 Tăng cỡ chữ (Font Size) của các phần văn bản​

  • Các đoạn text hướng dẫn và nhãn thông tin (Ví dụ: "Để duy trì hạng thành viên, hội viên cần", "Point xét hạng", "Tích lũy thêm... để lên hạng Gold", "Điểm sắp hết hạn") hiện tại hiển thị hơi nhỏ, cần được tăng kích thước font chữ lên thêm 1 đến 2px (khuyến nghị từ 12px lên 14px hoặc 15px) để cải thiện độ dễ đọc.

1.3 Làm nổi bật số điểm (Larger & Bolder Points Display)​

  • Số điểm khả dụng (GPoint khả dụng chính ở đầu trang):
    • Cần tăng kích thước thật to và nổi bật (khuyến nghị 32px hoặc 36px).
    • Sử dụng thuộc tính fontWeight: 'bold' hoặc font-weight từ 700 trở lên để tạo điểm nhấn chính trên màn hình.
  • Các số điểm chi tiết khác:
    • Số điểm tại mục "Point tích lũy" (ví dụ: 2.000) và "Điểm sắp hết hạn" (ví dụ: 1.500) cần được tăng kích thước lớn hơn hiện tại (khuyến nghị 18px hoặc 20px) và in đậm (fontWeight: 'bold').

2. Màn Hình Chuyển GPoint (Transfer GPoint Screen)​

  • Đồng bộ hóa cỡ chữ: Đảm bảo text hiển thị kết quả tìm kiếm (Ví dụ: "Không tìm thấy người dùng") và text trong thanh tìm kiếm có kích thước vừa vặn, dễ đọc (từ 15px - 16px), tránh hiển thị quá nhỏ gây khó khăn cho người dùng lớn tuổi.
  • Hiển thị số điểm chuyển: Tại bước nhập số điểm để chuyển (Bước 2), số điểm người dùng nhập vào cũng cần hiển thị với cỡ chữ to, rõ ràng và có định dạng phân tách phần nghìn (ví dụ: 1.000 thay vì 1000).

Gợi Ý Cấu Trúc CSS & Font Style (React Native)​

const styles = StyleSheet.create({
  // Màn hình Điểm
  availablePoints: {
    fontSize: 36, // Tăng kích thước số điểm khả dụng chính
    fontWeight: 'bold',
    color: '#E5A93C', // Màu thương hiệu hoặc màu vàng
    textAlign: 'center',
    marginVertical: 8,
  },
  sectionTitle: {
    fontSize: 15, // Tăng font size tiêu đề các phần
    fontWeight: '600',
    color: '#333333',
    marginBottom: 6,
  },
  pointValueText: {
    fontSize: 20, // Tăng font size của số điểm tích lũy / hết hạn
    fontWeight: 'bold',
    color: '#E5A93C',
  },
  descriptionText: {
    fontSize: 14, // Tăng font size chữ mô tả hướng dẫn
    color: '#666666',
    lineHeight: 20,
  },
  
  // Màn hình Chuyển GPoint
  statusMessage: {
    fontSize: 16, // Đảm bảo thông báo trạng thái dễ đọc
    color: '#888888',
    textAlign: 'center',
    marginTop: 24,
  }
});

Checklist Kỹ Thuật​

  • Sửa đổi file PointScreen.tsx để xóa bỏ hoàn toàn UI của section "Chặng xét hạng".
  • Cập nhật fontSize và fontWeight cho các Text component hiển thị số điểm khả dụng, điểm tích lũy, điểm sắp hết hạn.
  • Điều chỉnh lại fontSize cho các nhãn chữ mô tả trên màn hình Điểm để tăng độ dễ đọc.
  • Kiểm tra màn hình TransferPointScreen.tsx (Chuyển GPoint), tăng kích thước chữ hiển thị thông báo "Không tìm thấy người dùng" và text input tìm kiếm.
  • Chạy kiểm thử trên thiết bị thực tế để đảm bảo layout cân đối sau khi xóa bớt section "Chặng xét hạng" và tăng size chữ.