Quy Chuẩn Thiết Kế & Lập Trình (Design Rules)

1

Triết Lý Thiết Kế (Design Philosophy)

Hạn Chế Màu Sắc (Color Restraint)

Màu sắc thừa thãi làm tăng tải nhận thức (cognitive load). Môn học Kỹ thuật kiểm thử đòi hỏi độ tập trung cao vào nội dung, thuật ngữ và mã lỗi. Do đó 100% giao diện tuân thủ quy tắc đơn sắc (Monochrome Slates).

Chuẩn Hóa Icon Học Thuật

Loại bỏ triệt để emoji cảm xúc ngẫu nhiên (như 📝, 📊, 💻). Thay thế toàn bộ bằng SVG stroke-based đơn sắc chuẩn Lucide, cố định stroke-width 1.75 và tỉ lệ lưới 24x24.

Mobile-First Thân Thiện

Mọi thành phần phải thao tác thuận tiện bằng một tay trên điện thoại. Drawer trượt mượt mà, vùng chạm tối thiểu 44px, chữ tự động căn lề và không bao giờ xuất hiện thanh cuộn ngang vỡ khung.

2

Bảng Màu Đơn Sắc Chuẩn (Restricted Monochrome Palette)

Hệ thống màu sắc tuân thủ bảng màu Slate của Tailwind CSS. Tuyệt đối không dùng các màu phụ (Đỏ, Cam, Vàng, Xanh lá, Xanh dương chói) ngoại trừ các thông báo lỗi nghiêm trọng của hệ thống.

#f8fafc

Canvas Base

bg-slate-50

Nền toàn trang, chống mỏi mắt

#ffffff

Surface Card

bg-white

Mặt thẻ nội dung, navbar, modal

#f1f5f9

Surface Subtle

bg-slate-100

Badge phụ, ô input, nền code

#e2e8f0

Border Light

border-slate-200

Đường kẻ phân cách, viền khung

#64748b

Text Muted

text-slate-500

Phụ đề, ngày tháng, metadata

#0f172a

Text Primary & Active

text-slate-900

Tiêu đề chính, tab đang chọn

3

Chuẩn Hóa Icon (Iconography Standards)

Bộ Quy Tắc Bắt Buộc Khi Khai Báo Icon SVG

Grid Khung Hình: Luôn cố định viewBox="0 0 24 24".
Nét Vẽ (Stroke): Luôn đặt fill="none", stroke="currentColor", stroke-width="1.75".
Bo Góc (Linecap): Luôn đặt stroke-linecap="round" và stroke-linejoin="round".
Ma Trận Kích Thước (Size Matrix):
• w-4 h-4 (16px): Icon inline, nút phụ, metadata ngày tháng.
• w-5 h-5 (20px): Icon navbar, menu chính, đầu đề card.
• w-6 h-6 (24px): Icon tiêu đề phần lớn, biểu tượng danh mục.
Điều Cấm: Không dùng Emoji, không chèn FontAwesome hay CDN icon ngoài làm tăng độ trễ tải trang.

Danh Sách Icon Chuẩn Đã Được Áp Dụng

File Ghi Chú

Slide Bài Giảng

Bài Tập (HW)

Sách & ISTQB

Tìm Kiếm

Quy Chuẩn Code

Mã mẫu SVG chuẩn:

4

Chuẩn Hóa Navbar (Navbar Architecture)

1. Cấu Trúc Khối 3 Phần (Three-zone Anatomy)

Khu vực Trái (Start): Nút Toggle Mobile (chỉ hiện trên di động) + Brand Logo + Tên ứng dụng + Badge phiên bản ngắn.
Khu vực Giữa (Center): Danh sách các liên kết danh mục có trạng thái Active rõ ràng (nền xám nhạt bg-slate-100 text-slate-900).
Khu vực Phải (End): Ô tìm kiếm nhanh với biểu tượng kính lúp, hỗ trợ phím tắt và nút chuyển trang hoặc liên kết nguồn.

2. Thuộc Tính Định Vị & Độ Mờ

Vị Trí Cố Định: sticky top-0 z-50 đảm bảo người dùng luôn điều hướng được ở bất kỳ vị trí cuộn nào.
Hiệu Ứng Kính Mờ: bg-white/95 backdrop-blur-md border-b border-slate-200.
Chiều Cao Chuẩn: Cố định h-14 sm:h-16 (56px trên mobile, 64px trên desktop) để tránh giật giao diện khi cuộn trang.

Demo Giao Diện Navbar Chuẩn Thực Tế Preview

KCPM Hub

Tất cả Ghi chú Slide Bài tập

Tìm kiếm...

5

Chuẩn Tương Thích Mobile (Responsive Guidelines)

Điểm Ngắt & Layout Cột (Breakpoints)

Mobile (< 640px): Bắt buộc dùng grid-cols-1. Thẻ nội dung giãn 100% chiều rộng màn hình.
Tablet (640px - 1024px): Sử dụng sm:grid-cols-2.
Desktop (≥ 1024px): Sử dụng lg:grid-cols-3.
Tránh Tràn Màn Hình: Mọi thẻ cha dạng flex/grid bắt buộc có min-width: 0 để văn bản dài tự ngắt dòng.

Quy Định Thao Tác Cảm Ứng (Touch Ergonomics)

Kích Thước Vùng Chạm: Mọi nút bấm, liên kết và mục menu drawer tối thiểu đạt 44 x 44px.
Drawer Side Menu: Chiều rộng drawer trên mobile tối đa w-72 (288px) kèm lớp phủ làm tối drawer-overlay để đóng khi chạm ra ngoài.
Cuộn Bảng & Danh Sách: Các bảng dữ liệu hoặc thanh lọc nằm ngang bắt buộc bọc trong overflow-x-auto.

Quy Tắc Chống Co Rút Flex Trên Mobile (Anti-Shrink & Scrollbar Rule)

Chống Co Rút Nút Bấm: Trong các thanh cuộn ngang (overflow-x-auto), các nút bấm (pills), thẻ con và icon SVG bắt buộc phải có class shrink-0 để ngăn trình duyệt tự động bóp nghẹt kích thước chiều ngang trên màn hình hẹp.
Loại Bỏ Thanh Cuộn Cắt Ngang Giao Diện: Sử dụng class tiện ích .hide-scrollbar (scrollbar-width: none) cho các thanh trượt phân loại di động để trải nghiệm lướt mượt mà như Native App.
Thu Gọn Nút Navbar: Trên màn hình siêu nhỏ (< sm), các nút phụ trên thanh navbar tự động thu gọn về dạng icon tròn hoặc icon kèm tooltip để nhường chỗ cho ô tìm kiếm và logo.