DOL KID Domain - UI & Interaction Guidelines

DomainsDOL KidUI941 words5 min read

active

Phiên bản: 1.0 (Cập nhật 03/2026) Ngôn ngữ thiết kế: “Cute but Calm” (Đáng yêu nhưng Điềm tĩnh) Mục tiêu: Tạo ra một giao diện thân thiện, vui nhộn cho trẻ em nhưng không quá lóa mắt hay rối rắm, duy trì sự tập trung tối đa vào tuyến nội dung học tiếng Anh.

1. Nguyên lý Trọng tâm: “Interaction Khối” (Block Affordance)

Thay vì sử dụng các hệ thống đổ bóng (box-shadow) phức tạp dễ gây cảm giác lộn xộn trên màn hình, Domain KID áp dụng cơ chế chỉ báo tương tác bằng viền đáy (border-bottom block).

Quy tắc Vàng:

“Nếu nhấn vào được (Clickable) → có khối viền đáy dày. Nếu chỉ để xem (Display Only) → phẳng hoàn toàn.”

Cách xử lý này mô phỏng các khối đồ chơi (building blocks) quen thuộc với trẻ em, mang lại sự thỏa mãn trực quan nhất khi “nhấn phím”.

1.1. Trạng thái Tĩnh (Default)

Clickable Elements (Nút bấm, Card tương tác, Pill đang active): Bắt buộc sử dụng border-bottom dày từ 3px đến 4px với màu tối hơn màu nền của phần tử đó.
- Ví dụ Nút Solid Xanh: bg-blue-500 border-b-[4px] border-b-blue-700 text-white
- Ví dụ Clickable Card Trắng: bg-white border-b-[4px] border-b-slate-200
Display Elements (Card thông tin tĩnh, Badge học vị, Widget bảng thống kê): Phải phẳng hoàn toàn, chỉ dùng border 1px mỏng (border-slate-200) để định hình layout khung, tuyệt đối KHÔNG dùng classes shadow-....

1.2. Trạng thái Tương tác (Pressed / Active)

Khi người dùng (trẻ) click chuột / chạm vào một phần tử có khối:

Khối border-bottom phía dưới sẽ bị triệt tiêu (chuyển sang trong suốt bằng border-b-transparent).
Đồng thời phần tử sẽ “chìm” xuống bằng kỹ thuật CSS Transform (translate-y-[4px]) để lấp lại khoảng dư, tạo hiệu ứng ấn lún 3D liền mạch.
Lưu ý Kỹ thuật Cốt lõi: Luôn dùng border-b-transparent thay vì xóa hẳn border (border-b-0 hoặc border-none) khi tương tác nhằm giữ vững tổng chiều cao theo Box Model. Việc này giúp triệt tiêu hoàn toàn sự cố Layout Shift (giật khung nội dung bên dưới) của Browser.

2. Hệ thống Kho Component Chung (Shared - `/Domains/DolKid/ui/`)

Dưới đây là các UI component cốt lõi đã được quy chuẩn hóa cho toàn dự án DOL KID Platform:

2.1. `KidButton`

Nút bấm action chính yếu đa mục đích.
Biến thể (Variants): solid (có nền khối màu), outline (viền mảnh, nền trắng/nhạt), ghost (dạng text/icon, hover đổi nền chữ chứ không có viền bao).
Kiểu khối (StyleType):
- 3d (Mặc định): Bật áp luật “Khối Border-Bottom”.
- flat: Dùng cho menu/nút phụ trên các thanh Nav, chỉ có hiệu ứng nhấn lún nhẹ mà không bọc viền đáy.

2.2. `KidCard`

Khung nội dung chuẩn mực chuyên dụng với góc bo cực lớn, an toàn (rounded-[24px] hoặc rounded-[32px]).
Configs:
- hoverable={true}: Sinh động hóa khung hover khi rê chuột qua.
- pressable={true}: Bật chế độ tương tác biến Card thành 1 click surface khổng lồ với khối 3D đính kèm.
Sử dụng: Các block hiển thị Lộ trình học, Thông báo, Lịch học, hay Dashboard luôn phải sử dụng Card này ở trạng thái mặc định (phẳng mượt, display-only).

2.3. `KidPillTabs`

Bộ điều hướng/phễu lọc tối giản (như chọn theo Level, filter Skills…).
Trạng thái Active: Pill vươn ra thành thanh Khối (border-b-[3px]) kèm nền màu đặc trưng (Thường dùng Blue) để khẳng định mạnh mẽ người dùng đang ở tab đó.
Trạng thái Inactive: Các Pill không được chọn thu mình lại về dạng phẳng, giảm bớt độ nhiễu loạn giao diện (visual noise), viền chỉ có 1px trung tính.

2.4. Dashboard Panels Nguyên khối

Khi màn hình đòi hỏi chứa các bộ lọc cấu trúc lớn (chẳng hạn như Chọn Hệ Sinh Thái Cấp độ Starter vs Flyers), đừng thả trôi chúng như các Nút vô danh.
Hãy gom nhóm Bộ Điều Hướng và Widgets Thống kê Tóm Tắt của nó chung vào một Card Dashboard Nguyên khối (thường đặt ở đỉnh màn hình header).
Xóa bỏ tình trạng “các thành phần tab trôi nổi” lộn xộn dọc màn hình. Thay bằng custom Dropdown.

3. Quy chuẩn Màu Sắc Hành Vi (Semantic System)

Dù domain KID được thiên vị có nhiều màu sắc tươi tắn, UI vẫn cần giữ tính kỷ luật và báo hiệu được Hành vi sử dụng:

Blue (blue-500 / blue-600): Định danh Hành động chính yếu (Primary Action), Trạng thái Tab Active, Nơi bé nên bấm vô để bắt đầu học (Vd: Nút “Làm bài”, Thanh tiến trình).
Emerald (emerald-500): Lời khen (Success), Báo hiệu Đã xong, Pass bài Test, Lời nhắn nhủ tích cực từ Giáo viên.
Amber / Yellow (amber-500): Nhấn mạnh điều cần chú ý (In-progress: “Đang làm dở”), Việc Gấp/Hạn chót.
Purple (purple-500): Yếu tố Game hóa (Gamification), Phòng Huy hiệu lấp lánh, Dấu ấn Cá nhân.
Slate (slate-400 / slate-500): Màu của văn bản thứ cấp, viền khối mặc định khi không nhấn. Tuyệt đối không xài màu Black/Đen thuần (#000) nhằm duy trì sự êm dịu ánh nhìn.

Tài liệu trên đóng vai trò “Kim chỉ nam” cho Team Thiết Kế và Phát Triển (Product & Engineering) mỗi lúc có tính năng/màn hình nào mới được yêu cầu tích hợp vào hệ thống Frontend của DOL KID.