Skip to main content

Đặc Tả Thiết Kế: Typography To Rõ & Đường Cong Gauge Dày — Áp Dụng Toàn App

Ngày cập nhật: 08/07/2026
Loại: UI/UX Design Specification — Typography & Gauge Chart Styling
Áp dụng cho: Màn hình Điểm (PointScreen), Màn hình Hạng thành viên, và toàn bộ màn hình có biểu đồ gauge/bán nguyệt

Ảnh tham chiếu thiết kế chuẩn:

1. Vấn Đề Hiện Tại​

Các màn hình hiện tại chưa đạt chuẩn thiết kế về:

  • Chữ nhỏ, khó đọc: Số điểm bên trong gauge và các label/dòng mô tả hiển thị quá nhỏ, thiếu tương phản.
  • Chữ chưa đủ đậm: Thiếu fontWeight: bold ở những chỗ cần nhấn mạnh (số điểm, hạng thành viên).
  • Đường cong gauge mỏng: Đường cung bán nguyệt (strokeWidth) quá mỏng, làm chart trông nhỏ và thiếu sức mạnh thị giác.

2. Thiết Kế Chuẩn Tham Chiếu (Từ Ảnh Feedback)​

Phân tích chi tiết các yếu tố thiết kế trong ảnh tham chiếu:

2.1 Biểu Đồ Gauge (Bán Nguyệt / Semicircle Gauge)​

Yếu tốHiện tạiYêu cầu chuẩnGhi chú
Độ dày đường cong (strokeWidth)Mỏng (~8–10px)Dày (~16–20px)Đường cung màu teal cần dày, nổi bật
Màu đường cung đã điTeal/xanh láGiữ màu #2BA89A (teal)Đúng theo thiết kế
Màu phần còn lạiXám nhạt#E0E0E0 (xám nhạt)Giữ nguyên
Đầu đường cong (lineCap)VuôngTròn (round)Đầu cong tạo cảm giác mềm mại
Kích thước gauge tổng thểNhỏ/vừaTăng thêm ~10–15%Cho gauge chiếm không gian xứng đáng

2.2 Số Điểm Hiển Thị Bên Trong Gauge​

Yếu tốHiện tạiYêu cầu chuẩn
Cỡ chữ số điểm (VD: 70.000.000)~18–20px28–32px
Font weightRegular/MediumBold (700 hoặc 800)
Màu chữXám/đen#1A1A1A (đen đậm) — nổi bật trên nền trắng
Định dạng số7000000070.000.000 (phân tách phần nghìn bằng dấu chấm)

2.3 Nhãn Hạng Thành Viên (VD: "Platinum")​

Yếu tốHiện tạiYêu cầu chuẩn
Cỡ chữ~12–13px14–16px
Font weightRegularSemiBold (600)
Màu chữXám#2BA89A (teal — màu của hạng hiện tại) hoặc màu hạng tương ứng

2.4 Label Mốc Điểm Hai Đầu Gauge (VD: "40M" và "80M")​

Yếu tốHiện tạiYêu cầu chuẩn
Cỡ chữ~10px12px
Font weightRegularMedium (500)
Màu chữXám rất nhạt#888888 (xám trung — đủ tương phản)

2.5 Dòng Text Mô Tả Bên Dưới Gauge​

Ví dụ: "Tích lũy thêm 10.000.000 Point từ nay đến 31/12/2026"

Yếu tốHiện tạiYêu cầu chuẩn
Cỡ chữ~12px14px
Font weight (text thường)RegularRegular 400
Font weight (số điểm trong dòng)RegularBold + màu #E5A93C (vàng thương hiệu)
Text alignCenterCenter
Line height—20–22px (thoáng, dễ đọc)

2.6 Dòng Tiêu Đề Phía Trên Gauge​

Ví dụ: "Để duy trì hạng thành viên, hội viên cần" và "Point xét hạng"

Yếu tốHiện tạiYêu cầu chuẩn
Cỡ chữ~12–13px14–15px
Font weightRegularRegular 400 (hoặc 500)
Màu chữXám#444444

3. Áp Dụng Cho Toàn Bộ Màn Hình App​

Các quy tắc typography và gauge styling này phải được áp dụng nhất quán trên tất cả màn hình có sử dụng gauge/bán nguyệt và hiển thị số điểm:

Màn hìnhFile tham chiếuGhi chú
Màn hình Điểm (Points Screen)PointScreen.tsxGauge "Point xét hạng" — ưu tiên cao nhất
Màn hình Hạng thành viênMembershipTierScreen.tsxGauge hiển thị tiến trình nâng/duy trì hạng
Màn hình Tài khoản (Profile)AccountScreen.tsxThẻ hiển thị điểm và hạng mini
Màn hình Home (Dashboard)HomeScreen.tsxWidget điểm tích lũy nếu có

4. Gợi Ý Cấu Trúc Code (React Native)​

4.1 Gauge Chart — strokeWidth dày và lineCap tròn​

// Ví dụ sử dụng react-native-svg để vẽ gauge bán nguyệt
import Svg, { Path } from 'react-native-svg';

const GAUGE_STROKE_WIDTH = 18; // Tăng từ ~8 lên 18 để dày hơn

<Svg>
  {/* Phần nền xám */}
  <Path
    d={backgroundArcPath}
    stroke="#E0E0E0"
    strokeWidth={GAUGE_STROKE_WIDTH}
    strokeLinecap="round"  // Đầu tròn
    fill="none"
  />
  {/* Phần đã đi (progress) — màu teal */}
  <Path
    d={progressArcPath}
    stroke="#2BA89A"
    strokeWidth={GAUGE_STROKE_WIDTH}
    strokeLinecap="round"  // Đầu tròn
    fill="none"
  />
</Svg>

4.2 Typography — Bộ style chuẩn cho màn hình Points​

const pointsScreenTypography = StyleSheet.create({
  // Số điểm bên trong gauge — TO và ĐẬM nhất
  gaugePointValue: {
    fontSize: 30,
    fontWeight: '700',          // Bold
    color: '#1A1A1A',
    letterSpacing: -0.5,        // Thu lại chút để số dài không bị tràn
    textAlign: 'center',
  },

  // Nhãn hạng thành viên (Platinum / Gold / Silver...)
  gaugeMemberRank: {
    fontSize: 15,
    fontWeight: '600',          // SemiBold
    color: '#2BA89A',           // Màu teal (Platinum) — thay theo hạng
    textAlign: 'center',
    marginTop: 4,
  },

  // Nhãn mốc hai đầu gauge (40M, 80M)
  gaugeMilestoneLabel: {
    fontSize: 12,
    fontWeight: '500',
    color: '#888888',
  },

  // Tiêu đề phía trên gauge
  gaugeHeaderText: {
    fontSize: 14,
    fontWeight: '400',
    color: '#444444',
    textAlign: 'center',
    lineHeight: 20,
  },

  // Dòng mô tả phía dưới gauge
  gaugeDescriptionText: {
    fontSize: 14,
    fontWeight: '400',
    color: '#444444',
    textAlign: 'center',
    lineHeight: 22,
  },

  // Số điểm được highlight trong dòng mô tả
  gaugeHighlightPoint: {
    fontSize: 14,
    fontWeight: '700',          // Bold
    color: '#E5A93C',           // Màu vàng thương hiệu
  },
});

4.3 Màu hạng thành viên (theo hạng)​

const RANK_COLORS = {
  Silver:   '#9E9E9E', // Xám bạc
  Gold:     '#E5A93C', // Vàng thương hiệu
  Platinum: '#2BA89A', // Teal (màu trong ảnh thiết kế)
  Diamond:  '#5B6EEF', // Tím/xanh đặc biệt (nếu có hạng Diamond)
};

Checklist Kỹ Thuật​

  • Gauge Chart: Tăng strokeWidth từ giá trị hiện tại lên 18 (hoặc 16–20 — test thực tế để chọn).
  • Gauge Chart: Đặt strokeLinecap="round" cho cả 2 path (nền và progress).
  • Số điểm trong gauge: Tăng fontSize lên 30px, đặt fontWeight: '700'.
  • Định dạng số: Áp dụng hàm format số với phân tách phần nghìn bằng dấu chấm (.) cho toàn bộ số điểm hiển thị.
  • Nhãn hạng (Platinum/Gold/...): Đặt fontSize: 15, fontWeight: '600', màu theo RANK_COLORS.
  • Dòng text mô tả: Tăng fontSize lên 14px, lineHeight: 22.
  • Số điểm trong dòng mô tả: In đậm màu vàng #E5A93C.
  • Nhất quán toàn app: Áp dụng bộ style này cho tất cả màn hình có gauge (Points, Membership Tier, Profile mini widget).
  • Test đa thiết bị: Kiểm tra trên màn hình nhỏ (iPhone SE) và màn hình lớn (iPad / Android lớn) để đảm bảo không bị tràn chữ.