Bố cục và phân cấp thị giác
Dùng kích thước, độ đậm, màu, vị trí và khoảng trắng để dẫn mắt khách từ headline đến CTA theo đúng thứ tự quan trọng.
- Kể tên 6 công cụ tạo phân cấp thị giác.
- Áp dụng lưới và căn lề để bố cục gọn gàng.
- Kiểm tra phân cấp bằng bài thử nheo mắt.
Phân cấp thị giác (visual hierarchy) là thứ tự mà mắt người xem nhận ra các phần tử trên trang. Khách không đọc Landing Page từ chữ đầu đến chữ cuối; họ lướt, dừng ở chỗ nổi bật rồi mới quyết định đọc tiếp. Việc của người thiết kế là sắp xếp sao cho thứ họ nhìn thấy trước tiên chính là thứ quan trọng nhất: headline, lợi ích chính, CTA.
- Kích thước: phần tử lớn được nhìn thấy trước. H1 lớn nhất, sau đó H2, rồi nội dung.
- Độ đậm: chữ đậm nổi hơn chữ thường. Dùng đậm cho ý chính, không tô đậm cả đoạn.
- Màu và tương phản: màu nhấn (accent) dành cho CTA và điểm quan trọng nhất.
- Vị trí: phần trên và bên trái (với ngôn ngữ đọc từ trái sang phải như tiếng Việt) thường được nhìn trước.
- Khoảng trắng: phần tử có nhiều khoảng trống xung quanh trông quan trọng hơn.
- Hướng nhìn: ảnh người nhìn về phía headline hoặc nút sẽ kéo mắt khách theo.
Hai kiểu lướt thường gặp
| Kiểu lướt | Khi nào xảy ra | Cách thiết kế |
|---|---|---|
| Hình chữ F | Trang nhiều chữ: khách đọc dòng đầu, lướt xuống theo mép trái | Đặt từ khóa quan trọng ở đầu tiêu đề và đầu dòng; dùng tiêu đề phụ, gạch đầu dòng |
| Hình chữ Z | Trang ít chữ, nhiều khoảng trống như Hero | Logo trái trên, CTA phụ phải trên, headline giữa, CTA chính dọc đường chéo xuống |
| Trên điện thoại | Một cột, lướt dọc | Mỗi khối mở đầu bằng tiêu đề rõ, đoạn ngắn 2–3 câu, CTA lặp lại theo nhịp |
Lưới và căn lề
- Chọn bề rộng nội dung tối đa (ví dụ khoảng 1.100–1.200 px trên máy tính) và lề hai bên cố định trên điện thoại (thường 16–20 px).
- Dùng lưới 12 cột trên máy tính, 4 cột trên điện thoại; các khối bám vào cột.
- Căn trái cho đoạn văn; chỉ căn giữa cho tiêu đề ngắn và Hero.
- Giữ một trục căn thẳng hàng: tiêu đề, đoạn văn và nút cùng bám một mép.
Phân cấp rõ
- Một H1 lớn, đoạn phụ nhỏ hơn rõ rệt, một nút màu nhấn duy nhất.
- Nút phụ (ví dụ “Xem bảng giá”) dạng viền hoặc liên kết chữ.
- Mỗi khối có tiêu đề H2 giúp lướt nhanh.
Mọi thứ đều “quan trọng”
- Ba nút cùng màu, cùng kích thước cạnh nhau.
- Chữ đỏ, chữ vàng, chữ gạch chân, chữ in hoa xen kẽ trong một đoạn.
- Banner, huy hiệu, nhãn “HOT” ở khắp nơi tranh sự chú ý với CTA.
Bài tập thực hành
Chụp màn hình Hero của trang bạn đang làm (bản điện thoại và máy tính). Đánh số 1, 2, 3… lên các phần tử theo thứ tự bạn muốn khách nhìn. Sau đó làm bài thử nheo mắt và so sánh với thứ tự thực tế.
Gợi ý: Nếu thứ tự thực tế lệch với mong muốn, thử chỉnh lần lượt: kích thước → màu → khoảng trắng, mỗi lần một yếu tố.
- Headline là thứ được nhìn thấy đầu tiên.
- Chỉ có một nút dùng màu nhấn trong màn hình đầu.
- Các khối nội dung bám cùng một trục căn lề.
- Đoạn văn dài được căn trái, không căn giữa.
Kiểm tra kiến thức
- Thêm nút thứ tư
- Đổi cả ba nút sang màu đỏ
- Làm cả ba nút to hơn
- Giữ một nút chính màu nhấn, chuyển các nút còn lại thành dạng viền hoặc liên kết chữ
Xem đáp án
D. Giữ một nút chính màu nhấn, chuyển các nút còn lại thành dạng viền hoặc liên kết chữ — Phân cấp cần sự khác biệt. Một nút chính nổi bật giúp khách biết hành động quan trọng nhất; các lựa chọn phụ vẫn còn nhưng nhẹ hơn.
- Đặt thông tin quan trọng ở cuối dòng
- Đặt từ quan trọng ở đầu tiêu đề và đầu dòng, dùng tiêu đề phụ và gạch đầu dòng
- Căn giữa mọi đoạn văn
- Bỏ hết tiêu đề phụ
Xem đáp án
B. Đặt từ quan trọng ở đầu tiêu đề và đầu dòng, dùng tiêu đề phụ và gạch đầu dòng — Khi lướt, mắt bám mép trái và đầu dòng. Đưa từ khóa lên đầu giúp khách nắm ý mà không cần đọc hết.
- Xem phần tử nào nổi bật nhất khi chi tiết bị mờ đi
- Kiểm tra tốc độ tải
- Kiểm tra chính tả
- Đo kích thước ảnh
Xem đáp án
A. Xem phần tử nào nổi bật nhất khi chi tiết bị mờ đi — Khi nheo mắt, chi tiết biến mất và chỉ còn khối lớn, tương phản mạnh — đúng những gì khách nhận ra trong vài giây đầu.