<>Spacing (khoảng cách) là một yếu tố quan trọng trong UI/UX design giúp tạo bố cục rõ ràng, dễ đọc, và nâng cao trải nghiệm người dùng. Khoảng cách hợp lý giúp giao diện trở nên thoáng đãng, trực quan và dễ sử dụng hơn.
/Các loại Spacing trong UI Design
📌 1. Margin (Lề ngoài)
– Là khoảng cách giữa một phần tử với phần tử bên ngoài.
Dùng để:
– Giữ khoảng cách giữa các thành phần UI.
– Tránh sự chồng chéo giữa các phần tử.
– Tạo bố cục thoáng, dễ đọc.
– Ví dụ: Khoảng cách giữa card và mép màn hình.
📌 2. Padding (Lề trong)
– Là khoảng cách giữa nội dung bên trong và viền của phần tử.
Dùng để:
– Giúp nội dung có khoảng thở, không bị dính sát viền.
– Làm cho các nút bấm hoặc input fields dễ nhấn hơn.
– Ví dụ: Padding trong nút bấm giúp chữ không bị dính sát mép nút.
📌 3. Line Spacing (Leading – Khoảng cách giữa các dòng chữ)
– Là khoảng cách giữa các dòng trong một đoạn văn bản.
Dùng để:
– Giúp nội dung dễ đọc, tránh cảm giác chật chội.
– Ví dụ: Đoạn văn có line-height 1.5 sẽ dễ đọc hơn line-height 1.0.
📌 4. Letter Spacing (Tracking – Khoảng cách giữa các ký tự)
– Là khoảng cách giữa các chữ cái trong một từ.
Dùng để:
– Cải thiện khả năng đọc, nhất là với chữ in hoa hoặc font chữ nhỏ.
– Ví dụ: Tiêu đề chữ in hoa thường có tracking lớn hơn để dễ đọc.
📌 5. Grid Spacing (Khoảng cách trong hệ lưới thiết kế)
– Là khoảng cách giữa các cột và hàng trong grid layout.
Dùng để:
– Giữ bố cục UI đồng nhất, có sự liên kết giữa các thành phần.
– Ví dụ: Material Design sử dụng 8pt Grid System để đảm bảo khoảng cách đều nhau.
/Quy tắc Spacing phổ biến
✔ 8pt Grid System – Dùng bội số của 8 (8px, 16px, 24px, 32px…) để tạo layout dễ nhìn.
✔ Đảm bảo khoảng cách giữa các phần tử lớn hơn khoảng cách bên trong một phần tử.
✔ Dùng line-height tối thiểu 1.5 cho văn bản để tăng khả năng đọc.
✔ Khoảng cách giữa các nhóm nội dung nên rõ ràng hơn khoảng cách giữa các mục nhỏ trong cùng nhóm.
/Best Practices khi thiết kế Spacing
✅ Giữ sự nhất quán – Sử dụng các hệ thống spacing cố định thay vì khoảng cách tùy tiện.
✅ Tránh quá nhiều hoặc quá ít khoảng cách – Quá ít thì giao diện chật chội, quá nhiều thì loãng.
✅ Căn chỉnh hợp lý – Sử dụng Grid hoặc Auto Layout trong Figma để đảm bảo khoảng cách cân đối.
✅ Kiểm tra trên nhiều kích thước màn hình – Responsive design cần điều chỉnh spacing phù hợp trên desktop & mobile.
