Nhiều người mở AI ra, gõ “làm trang bán hàng đẹp” rồi thấy kết quả cứ lộn xộn. Bài này cho bạn hai công cụ nhìn đơn giản nhất để chấm một giao diện: chỗ trống và thứ tự quan trọng. Biết hai thứ này, bạn sẽ ra lệnh cho AI chính xác hơn nhiều.

Khoảng trắng không phải là chỗ lãng phí

Hãy nghĩ đến một quán cà phê nhỏ. Quán A kê kín bàn ghế, khách đi lại phải nghiêng người. Quán B kê thưa hơn, mỗi bàn có chỗ thở. Cùng diện tích, nhưng quán B nhìn sang hơn hẳn. Giao diện cũng vậy: khoảng trắng (vùng trống giữa các phần tử) giúp mắt biết đâu là nhóm này, đâu là nhóm kia.

Quy tắc dễ nhớ: các thứ thuộc cùng một nhóm thì đặt gần nhau, các nhóm khác nhau thì cách xa hơn. Ví dụ một thẻ sản phẩm gồm ảnh, tên áo và giá. Ba thứ này sát nhau. Nhưng giữa thẻ này với thẻ bên cạnh phải có khoảng cách lớn hơn khoảng cách bên trong thẻ.

Dùng một thang khoảng cách cố định

Thay vì chọn khoảng cách tuỳ hứng (13px, 17px, 22px), các nhà thiết kế thường chọn một thang có bội số đều, ví dụ 4, 8, 16, 24, 32, 48. Mọi khoảng cách trong trang đều lấy từ thang đó. Trang nhìn gọn ngay vì nhịp điệu đều đặn. Đây là quy ước phổ biến chứ không phải luật bắt buộc, nhưng rất hợp để dặn AI.

Khoảng cách tuỳ hứng

  • Lề chỗ rộng chỗ hẹp
  • Các thẻ cách nhau không đều
  • Mắt không biết nhìn đâu trước

Khoảng cách theo thang

  • Mọi khoảng cách là bội của 8
  • Trong nhóm gần, giữa nhóm xa
  • Trang có nhịp, đọc lướt vẫn hiểu

Phân cấp: cái gì quan trọng thì to và đậm

Phân cấp thị giác (visual hierarchy) là việc sắp xếp để người xem đọc đúng thứ tự bạn muốn. Bạn có ba cần gạt chính: kích thước, độ đậm và độ tương phản. Chỉ cần đẩy một thứ nổi lên, những thứ khác tự lùi lại.

Lấy ví dụ trang giới thiệu lớp học thêm tiếng Anh. Thứ cần nổi nhất là dòng “Học thử miễn phí buổi đầu” cùng một nút đăng ký. Mô tả chương trình ở mức vừa. Địa chỉ, giờ mở cửa, chính sách nhỏ nhất. Nếu cả ba cùng cỡ chữ, người xem sẽ lạc.

Chọn 1 mục tiêuTrang này muốn người xem làm gì?
Đẩy nó lênTo hơn, đậm hơn, có màu nổi
Hạ phần còn lạiChữ nhỏ hơn, màu nhạt hơn
Nheo mắt kiểm traMờ mắt vẫn thấy mục tiêu?

Mẹo kiểm tra: nheo mắt

Nheo mắt nhìn màn hình cho đến khi chữ nhòe đi. Nếu bạn vẫn thấy rõ phần quan trọng nhất, phân cấp ổn. Nếu thấy mọi thứ xám xịt như nhau, trang đang thiếu điểm nhấn. Cách này miễn phí và nhanh hơn mọi công cụ.

Ví dụ: trang shop áo thun trên Facebook

Bản đầu AI cho: tiêu đề nhỏ, ảnh nhỏ, năm nút cùng màu. Bản sau bạn dặn: “Tiêu đề to gấp đôi, ảnh chiếm nửa chiều rộng, chỉ một nút Đặt hàng màu nổi, các nút khác viền mỏng”. Cùng nội dung, nhưng bản sau dẫn mắt rõ ràng.

Thử ngay

Gửi đoạn sau cho Claude hoặc ChatGPT cùng ảnh chụp một trang bạn thấy rối:

Hãy nhận xét trang này về khoảng trắng và phân cấp.
1. Chỗ nào các nhóm đang dính vào nhau?
2. Thứ quan trọng nhất là gì, nó đã đủ nổi chưa?
Đề xuất khoảng cách theo thang 8px và 3 thay đổi cụ thể.

Ghi nhớ

  • Phần tử cùng nhóm thì gần nhau, khác nhóm thì cách xa hơn.
  • Dùng một thang khoảng cách cố định thay vì chọn số tuỳ hứng.
  • Mỗi trang chỉ có một mục tiêu nổi nhất.
  • Nheo mắt để kiểm tra phân cấp trước khi nhờ AI sửa.
Bài sau