Visual Hierarchy & Spacing: Phân cấp thị giác chuyên nghiệp

Sự khác biệt giữa một trang web "rẻ tiền" và một sản phẩm Premium (như Apple hay Stripe) thường nằm ở cách họ xử lý Khoảng trắng (Spacing) và Phân cấp thị giác (Visual Hierarchy).

1. White-space: Khoảng trắng là vàng

Khoảng trắng không phải là "không gian trống lãng phí", nó là một công cụ thiết kế.

Macro White-space: Khoảng cách giữa các khối lớn (Section, Page padding).
Micro White-space: Khoảng cách giữa các dòng chữ (Line-height), giữa icon và label.

Quy tắc 8pt Grid: Hãy luôn dùng bội số của 8 (hoặc 4) cho spacing (4px, 8px, 16px, 24px, 32px...). Điều này tạo ra sự nhất quán cơ học cho toàn bộ ứng dụng.

css:

/* ✅ Nhất quán với hệ thống 8pt */
.card {
  padding: 24px;   /* p-6 in Tailwind */
  gap: 16px;       /* gap-4 in Tailwind */
  margin-bottom: 32px; /* mb-8 in Tailwind */
}

2. Phân cấp bằng Độ tương phản (Contrast)

Đừng chỉ dùng KÍCH THƯỚC chữ để phân cấp. Hãy dùng:

Trọng lượng (Weight): Bold cho tiêu đề, Regular cho body.
Màu sắc (Color): Dùng zinc-900 cho tiêu đề chính, zinc-500 cho mô tả phụ.
Đọc lướt (Scannability): Người dùng không đọc, họ chỉ "quét" màn hình theo hình chữ F hoặc chữ Z.

3. Luật gần gũi (Proximity)

Các thành phần có liên quan đến nhau nên được đặt gần nhau.

Ví dụ về Form:

Label phải gần Input của nó hơn là gần một label của input khác.
Nút "Gửi" nên nằm tách biệt một chút so với các Input để tránh click nhầm.

4. Typography Scalability

Luôn xây dựng một hệ thống Type Scale thay vì dùng size tùy tiện.

H1: 32px (font-bold)
H2: 24px (font-semibold)
Body: 16px (font-normal)
Caption: 12px (text-zinc-500)

5. Subtle Borders & Shadows

UI hiện đại hướng tới sự tối giản.

Borders: Thay vì dùng màu đen đậm, hãy dùng màu cực nhạt (border-zinc-100).
Shadows: Dùng shadow có độ mờ lớn và màu rất nhạt để tạo chiều sâu (Depth) thay vì một dải màu đen cứng nhắc.

tsx:

// ✅ Premium Shadow: Màu nhạt, độ lan tỏa lớn
<div className="shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-zinc-100 rounded-xl">
  ...
</div>

Kết luận

Một UI đẹp là một UI có nhịp điệu. Nhịp điệu đó được tạo ra bởi sự lặp lại của Spacing và sự rõ ràng của Phân cấp. Hãy luôn đặt câu hỏi: "Mắt người dùng sẽ nhìn vào đâu đầu tiên?" khi bạn code xong một giao diện.

Bài trước

Headless UI & Render Props: Tách biệt Logic và Giao diện

Bài tiếp theo

Compound Component: Xây dựng UI Library nâng cao