Khoảng trắng
Khoảng trắng nhóm thông tin, tạo nhịp đọc và làm CTA nổi bật. Học cách dùng hệ khoảng cách 4/8 px nhất quán.
- Giải thích vai trò của khoảng trắng và nguyên lý gần nhau.
- Lập thang khoảng cách theo bội số 4 hoặc 8 px.
- Cân đối khoảng trắng giữa điện thoại và máy tính.
Khoảng trắng (white space, negative space) là phần trống quanh và giữa các phần tử — không nhất thiết màu trắng. Nó không phải chỗ “bỏ phí”: khoảng trắng cho mắt nghỉ, cho biết phần tử nào thuộc về nhau, và làm cho thứ quan trọng nổi lên mà không cần thêm màu hay hiệu ứng.
Nguyên lý gần nhau
Những thứ đặt gần nhau được hiểu là liên quan với nhau (một nguyên lý trong tâm lý học Gestalt). Vì vậy tiêu đề phải gần đoạn văn của nó hơn là gần khối phía trên; nhãn phải gần ô nhập của nó; giá phải gần tên gói. Khi khoảng cách đều nhau ở mọi nơi, khách khó biết đâu là một nhóm.
Thang khoảng cách 4/8 px
| Token | Giá trị | Dùng cho |
|---|---|---|
| space-1 | 4 px | Biểu tượng với chữ, khoảng cách rất sát |
| space-2 | 8 px | Nhãn với ô nhập, các dòng trong một thẻ |
| space-3 | 16 px | Giữa các đoạn, lề hai bên trên điện thoại, đệm trong nút |
| space-4 | 24 px | Giữa tiêu đề khối và nội dung, đệm trong thẻ |
| space-5 | 32–48 px | Giữa các thẻ, các nhóm trong khối |
| space-6 | 64–96 px | Giữa các khối (section) trên máy tính; trên điện thoại thường 48–64 px |
- Quanh nút CTA chính: nhiều khoảng trống để nút “thở” và nổi lên.
- Quanh headline: tách khỏi menu phía trên và đoạn phụ phía dưới.
- Giữa các khối: đủ lớn để khách cảm nhận đã sang chủ đề mới.
- Trong form: khoảng cách giữa các trường lớn hơn khoảng cách nhãn – ô nhập.
Khoảng trắng có hệ thống
- Mọi khoảng cách lấy từ thang 4/8 px.
- Tiêu đề sát nội dung của nó, cách xa khối trước.
- Hero thoáng, chỉ có headline, đoạn phụ, nút và ảnh.
Khoảng trắng tùy hứng
- Khoảng cách 13 px chỗ này, 27 px chỗ kia, không theo quy luật.
- Tiêu đề lơ lửng giữa hai khối, không rõ thuộc khối nào.
- Nhồi thêm huy hiệu, dòng chữ chạy vào mọi chỗ trống.
Bài tập thực hành
Chọn một khối trên trang của bạn (ví dụ khối lợi ích hoặc bảng giá). Đo tất cả khoảng cách hiện có, rồi thay bằng giá trị từ thang 4/8 px sao cho khoảng cách trong nhóm luôn nhỏ hơn khoảng cách giữa nhóm.
Gợi ý: Dùng công cụ kiểm tra phần tử của trình duyệt (DevTools) để xem margin và padding. Ghi lại trước và sau, chụp màn hình so sánh.
- Mọi khoảng cách trong khối thuộc thang 4/8 px.
- Tiêu đề gần nội dung của nó hơn khối phía trên.
- Nút CTA có khoảng trống xung quanh rõ ràng.
- Đã kiểm tra lại trên điện thoại, trang không dài vô lý.
Kiểm tra kiến thức
- Cách đều khối trên và đoạn văn của nó
- Gần đoạn văn của nó hơn là gần khối phía trên
- Gần khối phía trên hơn
- Nằm ở cuối khối
Xem đáp án
B. Gần đoạn văn của nó hơn là gần khối phía trên — Khoảng cách cho biết quan hệ. Tiêu đề gần nội dung của nó giúp khách hiểu ngay tiêu đề thuộc về phần nào.
- Tạo nhịp nhất quán, dễ quyết định khoảng cách và dễ nhân bản thiết kế
- Làm trang nhẹ hơn
- Bắt buộc theo WCAG
- Tăng thứ hạng tìm kiếm
Xem đáp án
A. Tạo nhịp nhất quán, dễ quyết định khoảng cách và dễ nhân bản thiết kế — Một thang cố định giúp mọi khoảng cách có quan hệ với nhau, trang trông gọn và người làm không phải đoán từng giá trị.
- Thêm màu nền sặc sỡ
- Thêm hiệu ứng chuyển động
- Tăng khoảng trắng và nhóm lại các phần tử liên quan
- Giảm cỡ chữ để chứa nhiều hơn
Xem đáp án
C. Tăng khoảng trắng và nhóm lại các phần tử liên quan — Rối mắt thường do thiếu nhóm và thiếu chỗ thở. Khoảng trắng giải quyết mà không thêm yếu tố gây phân tán.