Mở một bản thiết kế của người mới và đo khoảng cách giữa các khối, bạn thường gặp: 13, 17, 22, 9, 15. Mỗi con số đều được chọn “bằng mắt” và từng chỗ trông ổn, nhưng cả màn hình có cảm giác chênh vênh khó gọi tên. Người xem không đo, nhưng mắt họ nhận ra nhịp không đều.
Hệ lưới 8 điểm là cách đơn giản nhất để loại bỏ loại quyết định vụn vặt này.
Đơn vị điểm, không phải điểm ảnh
Trên iOS đơn vị là pt, trên Android là dp. Cả hai là đơn vị độc lập mật độ: một nút cao 44pt trên máy màn hình thường và máy màn hình mật độ cao trông cùng kích thước thật với ngón tay, dù số điểm ảnh vật lý gấp 2 hoặc 3 lần.
Vì vậy khi thiết kế, luôn làm khung ở kích thước logic, ví dụ 390 × 844 cho một dòng điện thoại phổ biến, không phải kích thước điểm ảnh thật. Xuất tài nguyên ở 2x, 3x là việc của khâu bàn giao.
Vì sao lại là 8
- Chia hết cho các hệ số mật độ phổ biến. 8 nhân 1,5; 2; 3 đều ra số nguyên, tránh hiện tượng cạnh bị nhoè nửa điểm ảnh.
- Đủ nhỏ để linh hoạt, đủ lớn để khác biệt. Chênh 8 thì mắt thấy rõ; chênh 2 hay 3 thì mắt thấy “hơi lệch” mà không biết cố ý hay không.
- Giảm số lựa chọn. Thay vì chọn trong mọi số từ 1 tới 64, bạn chỉ chọn trong 8, 16, 24, 32, 40, 48, 64.
Với chi tiết nhỏ như khoảng cách giữa biểu tượng và chữ bên cạnh, dùng nửa bước 4. Đó là ngoại lệ có kiểm soát, không phải lối thoát cho mọi chỗ.
Bảng khoảng cách thực dụng
| Giá trị | Dùng cho |
|---|---|
| 4 | Biểu tượng với nhãn, chữ với gạch chân, các chi tiết bên trong một thành phần |
| 8 | Giữa các phần tử có liên quan chặt: nhãn và ô nhập, tiêu đề thẻ và mô tả |
| 16 | Lề trái phải màn hình, đệm trong thẻ, giữa các ô trong biểu mẫu |
| 24 | Giữa các thẻ trong danh sách, giữa nhóm nội dung cùng mục |
| 32–48 | Giữa các phần lớn của trang (section) |
| 64 trở lên | Khoảng thở đầu trang, tách khối nổi bật |
Nguyên tắc nằm dưới bảng này là quy luật gần nhau của tâm lý học Gestalt: thứ gì gần nhau được hiểu là thuộc về nhau. Khoảng cách bên trong một nhóm phải nhỏ hơn rõ rệt khoảng cách giữa các nhóm. Lỗi hay gặp nhất là nhãn ô nhập cách ô của nó 16 nhưng cách ô phía trên cũng 16, người dùng không biết nhãn thuộc ô nào.
Vùng chạm tối thiểu: 44pt và 48dp
Hướng dẫn giao diện của Apple khuyến nghị vùng chạm tối thiểu 44 × 44pt; Material Design của Google khuyến nghị 48 × 48dp. Hai con số khác nhau vì hai hệ đơn vị và hai triết lý, nhưng cùng hướng tới đầu ngón tay người lớn.
Điểm hay bị hiểu nhầm: vùng chạm không bằng kích thước nhìn thấy. Biểu tượng thùng rác có thể chỉ vẽ 20 × 20, miễn vùng bấm quanh nó rộng 44 × 44. Trong Figma, đặt biểu tượng vào một khung 44 trong suốt và bàn giao khung đó, không bàn giao biểu tượng trần.
Cũng cần khoảng cách giữa hai vùng chạm cạnh nhau. Hai nút “Sửa” và “Xoá” dính sát nhau, vùng chạm chồng lên, là công thức cho việc xoá nhầm.
Vùng ngón cái và vị trí hành động chính
Phần lớn người dùng cầm điện thoại một tay và bấm bằng ngón cái. Trên máy màn hình lớn, góc trên cùng phía đối diện tay cầm là vùng khó với nhất. Hệ quả thực tế:
- Hành động chính của màn (Thanh toán, Gửi, Lưu) đặt ở nửa dưới màn hình.
- Thanh điều hướng chính nằm dưới đáy thay vì menu hamburger góc trên.
- Hành động nguy hiểm, không thể hoàn tác thì không đặt ở chỗ dễ bấm nhất.
Lưới cột trên điện thoại
Trên màn hình rộng khoảng 360–430 điểm, lưới 4 cột với lề 16 và rãnh 16 là cấu hình phổ biến. Thực tế trên điện thoại bạn ít khi chia nội dung thành bốn cột thật; lưới cột dùng để căn các lưới ảnh 2 cột, thẻ nằm ngang và giữ lề trái phải nhất quán.
Quan trọng hơn lưới cột là lưới đường cơ sở cho chữ: đặt chiều cao dòng là bội số của 4 (ví dụ chữ 16 với chiều cao dòng 24, chữ 14 với chiều cao dòng 20). Khi mọi khối chữ và khoảng cách đều rơi trên bước 4, các cột nội dung cạnh nhau sẽ tự thẳng hàng.
Sửa một màn hình khoảng cách lộn xộn: quy trình
- Đo và ghi lại mọi khoảng cách hiện có. Thường bạn sẽ thấy 10–15 giá trị khác nhau.
- Gom nhóm: khoảng cách nào đang thể hiện “cùng nhóm”, khoảng cách nào đang thể hiện “khác nhóm”.
- Gán lại: “cùng nhóm chặt” về 8, “cùng nhóm lỏng” về 16, “khác nhóm” về 24 hoặc 32.
- Kiểm lại vùng chạm từng nút, biểu tượng. Thêm khung trong suốt nếu cần.
- Chuyển thành biến: trong Figma dùng biến số (variables) cho khoảng cách, đặt tên theo vai trò như space-sm, space-md thay vì theo giá trị.
Làm xong, so hai bản cạnh nhau. Bản mới thường trông “thoáng hơn” dù tổng chiều cao gần như không đổi, vì khoảng trống đã được phân bổ có chủ đích.
Khi nào được phá lưới
- Căn chỉnh thị giác: hình tròn, tam giác, chữ in hoa có đỉnh nhọn thường phải nhích 1–2 điểm mới trông thẳng hàng với hình vuông bên cạnh.
- Nội dung động: chữ do người dùng nhập không bao giờ vừa khít lưới, đừng ép.
- Thành phần hệ điều hành: thanh trạng thái, vùng an toàn quanh tai thỏ có kích thước riêng, tôn trọng chúng.
Việc nên làm tiếp theo: lấy một bản thiết kế cũ của bạn, đếm số giá trị khoảng cách khác nhau. Nếu nhiều hơn 7, dành một buổi đưa về thang 4–8–16–24–32–48 và đặt thành biến. Từ đó mọi màn mới sẽ nhanh hơn vì bạn không còn phải quyết định lại từng khoảng trống.
Câu hỏi thường gặp
Lưới 8 điểm là gì?
Là quy ước dùng bội số của 8 cho kích thước và khoảng cách trong giao diện, với bước phụ 4 cho chi tiết nhỏ. Nó giúp khoảng cách nhất quán và hiển thị sắc nét trên nhiều mật độ màn hình.
Kích thước nút tối thiểu trên điện thoại là bao nhiêu?
Apple khuyến nghị vùng chạm tối thiểu 44 × 44pt, Google Material khuyến nghị 48 × 48dp. Phần nhìn thấy có thể nhỏ hơn miễn vùng bấm đủ lớn.
pt và dp khác px thế nào?
pt (iOS) và dp (Android) là đơn vị độc lập mật độ, giữ kích thước thật gần như nhau trên mọi máy. px là điểm ảnh vật lý, số lượng thay đổi theo mật độ màn hình.
Lề màn hình điện thoại nên để bao nhiêu?
16 là giá trị phổ biến nhất cho lề trái phải trên điện thoại. Một số giao diện dùng 20 hoặc 24 để thoáng hơn, quan trọng là nhất quán.
Có bắt buộc dùng lưới 8 không?
Không bắt buộc, một số hệ dùng bước 4 hoặc 6. Điều quan trọng là có một thang khoảng cách cố định và dùng nhất quán thay vì chọn bằng mắt từng chỗ.
