UI Design System
Khung thiết kế giao diện, bảng mã màu, kiểu chữ và các thành phần token UI
1. UI/UX Vision
Hệ thống giao diện được thiết kế nhằm mang lại trải nghiệm tối giản, hiện đại và tập trung tối đa vào hiệu năng học tập của học sinh K-12.
- Đơn giản & Trực quan: Giảm thiểu sự phức tạp của giao diện để trẻ em có thể sử dụng dễ dàng.
- Không phán xét: Ngôn ngữ màu sắc và văn bản hỗ trợ, khích lệ.
- Tương thích cao: Đảm bảo responsive hoàn hảo trên các thiết bị máy tính bảng, Chromebooks, điện thoại di động - vốn là những thiết bị học sinh Việt Nam thường dùng.
2. Brand Color Tokens
Hệ thống sử dụng bảng mã màu HSL hiện đại, tạo cảm giác cao cấp và bảo vệ thị lực:
| Tên Token | Mã HSL / Màu | Ứng dụng chính |
|---|---|---|
--brand-primary | hsl(215, 100%, 50%) (Cobalt Blue) | Màu chủ đạo, nút bấm chính, liên kết. |
--brand-secondary | hsl(185, 100%, 45%) (Teal Accent) | Điểm nhấn giao diện, các chỉ số tiến trình. |
--bg-dark-primary | hsl(220, 20%, 10%) (Deep Slate) | Màu nền tối của ứng dụng. |
--bg-dark-card | hsl(220, 20%, 15%) (Slate Grey) | Nền của các thẻ (Cards), bảng điều khiển. |
--text-light-high | hsl(0, 0%, 95%) | Văn bản chính chế độ tối. |
--text-light-med | hsl(220, 10%, 70%) | Văn bản phụ, chú thích. |
--status-success | hsl(145, 80%, 40%) (Emerald Green) | Trạng thái Mastery đạt, câu trả lời đúng. |
--status-warning | hsl(40, 95%, 50%) (Amber Yellow) | Trạng thái thiếu dữ liệu, đang củng cố. |
--status-danger | hsl(355, 85%, 55%) (Rose Red) | Cảnh báo cần hỗ trợ, lỗi logic. |
3. Typography Rules
- Font chữ hệ thống:
Inter, system-ui, -apple-system, sans-serif. - Tiêu đề chính (H1): Font-size
2.25rem, Weight700, Line-height1.2. - Tiêu đề phân đoạn (H2): Font-size
1.5rem, Weight600, Line-height1.3. - Văn bản thường (Body): Font-size
1rem(16px), Weight400, Line-height1.5. - Nhãn nhỏ (Caption): Font-size
0.875rem(14px), Weight500.
4. Core UI Components
(Chi tiết các đặc tả CSS và layout component sẽ được Hanoi Agents cập nhật dần ở các phiên bản tiếp theo).
5. Iconography
Toàn bộ hệ thống giao diện EduOne Adaptive Learning Engine và các kênh thông tin chính thức bắt buộc sử dụng nhất quán bộ thư viện Heroicons v2 (đặc biệt ưu tiên phiên bản Outline).
5.1. Nguyên tắc sử dụng Icons
- Đồng bộ hóa: Không trộn lẫn Heroicons với các bộ thư viện khác (như FontAwesome, Material Icons, Bootstrap Icons) hoặc emoji ký tự để tránh gây rối mắt và làm giảm chất lượng thẩm mỹ.
- Độ dày đường nét (Stroke Width): Mặc định sử dụng
stroke-width="1.5"cho các biểu tượng lớn, vàstroke-width="2.0"cho các biểu tượng nhỏ hoặc các nút điều hướng cần nhấn mạnh. - Màu sắc tương phản: Sử dụng biến CSS màu sắc hệ thống (
--brand-primary,--brand-secondary,--status-success,...) làm màu nét vẽ (stroke="currentColor") để tự động thay đổi theo trạng thái hoạt động và chế độ sáng/tối.
Icon Mapping Catalog (5.2. Bản đồ ánh xạ Biểu tượng)
| Chức năng / Module | Tên biểu tượng Heroicons | Ứng dụng cụ thể trên giao diện |
|---|---|---|
| Adaptive Learning | AdjustmentsHorizontal | Chỉ số cá nhân hóa lộ trình thích ứng của học sinh. |
| AI Drafting Studio | Sparkles | Nút kích hoạt AI đồng sáng tạo học liệu, viết nháp quiz. |
| Review & Security | ShieldCheck | Trạng thái kiểm duyệt, chốt chặn phê duyệt của Reviewer. |
| Infrastructure / Speed | Bolt | Các tính năng liên quan đến hiệu năng Cloudflare Edge. |
| Learner Profile | AcademicCap | Điểm số năng lực (Mastery), hồ sơ học tập học viên. |
| Classroom / Teacher | UserGroup | Bảng điều khiển quản lý lớp học của Giáo viên. |
| Lesson Content | BookOpen | Danh sách bài giảng, bài đọc mở rộng. |
| Analytics & Cost | ChartBar | Dashboard thống kê chỉ số học tập và chi phí vận hành AI. |
| Audit Trails | ClipboardDocumentCheck | Bảng ghi nhật ký kiểm toán hệ thống. |
| Settings / Config | Cog8Tooth | Trang quản trị cấu hình hệ thống của Administrator. |