Một chủ quán cà phê gửi bản thảo tờ thực đơn khai trương kèm lời dặn: “Tên quán to nhé, giảm giá 30% cũng phải to, món mới cũng to, địa chỉ cũng phải thấy rõ.” Kết quả là năm thứ cùng to, cùng đậm, cùng màu đỏ, và người đi đường liếc qua không nhớ nổi thứ nào.
Phân cấp thị giác là việc quyết định thứ tự mắt người xem đi qua các thông tin. Khi không có phân cấp, người xem phải tự sắp xếp — và phần lớn họ sẽ không làm việc đó, họ chỉ rời đi.
Tương phản là nguyên liệu duy nhất của phân cấp
Mọi công cụ phân cấp đều quy về một thứ: sự khác biệt. Một tiêu đề nổi bật không phải vì nó to, mà vì nó to hơn những thứ xung quanh. Tăng cỡ mọi thứ cùng lúc không tạo phân cấp, chỉ làm trang ồn hơn.
Các “núm vặn” tương phản thường dùng:
- Cỡ: mạnh nhất nhưng tốn chỗ nhất.
- Độ đậm: đổi từ Regular sang Bold cho khác biệt rõ mà không tốn diện tích.
- Màu và độ sáng: chữ đen với chữ xám 60% tạo hai tầng rõ ràng dù cùng cỡ.
- Vị trí: trên trước dưới, trái trước phải (với văn bản đọc từ trái sang), tách riêng trước dính chùm.
- Khoảng trắng: phần tử được bao bởi nhiều khoảng trống nổi hơn.
- Kiểu chữ: chữ hoa, chữ nghiêng, đổi họ phông — dùng tiết kiệm.
Nguyên tắc tiết kiệm: mỗi lần chỉ vặn một hoặc hai núm giữa hai tầng liền kề. Tiêu đề vừa to hơn, vừa đậm hơn, vừa đỏ, vừa gạch chân, vừa chữ hoa là dùng năm núm cho một việc mà hai núm đã làm xong.
Ba tầng là đủ cho hầu hết bản thiết kế
Người mới hay tạo sáu, bảy tầng. Thực tế người xem chỉ phân biệt dễ dàng khoảng ba tầng trong một cái liếc:
- Tầng 1 — thu hút: một thứ duy nhất khiến người ta dừng lại. Thường là hình chính hoặc tiêu đề. Chỉ một.
- Tầng 2 — dẫn dắt: hai đến bốn thông tin giúp người xem quyết định có đọc tiếp không: phụ đề, ngày giờ, lợi ích chính.
- Tầng 3 — chi tiết: mọi thứ còn lại. Người đã quan tâm sẽ tự tìm đọc.
Với tờ thực đơn ở đầu bài, câu hỏi phải đặt cho chủ quán là: người đi đường cần biết điều gì đầu tiên để bước vào? Nếu là “giảm 30%” thì đó là tầng 1; tên quán lui xuống tầng 2 cùng món mới; địa chỉ, giờ mở cửa là tầng 3. Nếu quán đã có tiếng, có thể ngược lại. Không có câu trả lời chung, nhưng luôn phải có một câu trả lời.
Tỉ lệ cỡ giữa các tầng
Hai tầng cạnh nhau cần chênh đủ lớn để mắt nhận ra ngay là “khác cấp” chứ không phải “lệch tay”. Chênh 10–15% thường bị đọc là lỗi. Một số mức tham khảo:
| Loại ấn phẩm | Tầng 1 | Tầng 2 | Tầng 3 | Tỉ lệ 1:3 |
|---|---|---|---|---|
| Poster A2 xem từ xa | 120–200pt | 36–48pt | 14–18pt | khoảng 8–12 lần |
| Tờ rơi A5 cầm tay | 36–48pt | 14–18pt | 9–10pt | khoảng 4–5 lần |
| Trang web (màn điện thoại) | 28–36px | 18–20px | 15–16px | khoảng 2 lần |
| Bảng điều khiển phần mềm | 20–24px | 14–16px | 12–13px | khoảng 1,7 lần |
Nhận thấy: càng xem ở khoảng cách xa và thời gian ngắn, tỉ lệ càng lớn. Giao diện dùng lâu, đọc gần thì tỉ lệ nhỏ lại và phân cấp dựa nhiều hơn vào độ đậm, màu và vị trí.
Phân cấp bị hỏng theo những cách nào
- Mọi thứ đều to. Như tờ thực đơn. Cách sửa không phải thu nhỏ đều mà chọn một thứ giữ nguyên, còn lại giảm mạnh.
- Hai tầng 1 đánh nhau. Ảnh sản phẩm rất nổi và tiêu đề cũng rất nổi, đặt ở hai đầu trang. Mắt nhảy qua lại. Cách sửa: gộp chúng thành một cụm, hoặc hạ một cái xuống.
- Màu nhấn dùng tràn lan. Màu đỏ vốn để đánh dấu điều quan trọng, nhưng khi mười chỗ cùng đỏ thì đỏ trở thành màu nền.
- Phân cấp mâu thuẫn với nghĩa. Chữ “Miễn phí” in rất to nhưng điều kiện đi kèm in rất nhỏ ở góc. Người xem cảm thấy bị lừa. Phân cấp tốt không giấu thông tin người xem cần để quyết định.
Phép thử 5 giây
Phép thử này được dùng rộng rãi trong thiết kế giao diện và áp dụng được cho mọi ấn phẩm:
- Cho một người chưa từng thấy bản thiết kế nhìn đúng 5 giây.
- Úp hoặc tắt màn hình.
- Hỏi: “Bạn nhớ được gì? Đây là về cái gì? Bạn sẽ làm gì tiếp?”
Nếu câu trả lời khớp với tầng 1 và tầng 2 bạn định ra, phân cấp đang đúng. Nếu họ nhớ một chi tiết trang trí hoặc một thông tin tầng 3, có thứ gì đó đang giành sự chú ý sai chỗ. Làm với 3–5 người là đủ để thấy xu hướng.
Áp dụng: dựng phân cấp từ một danh sách nội dung
Trước khi mở phần mềm, làm bước này trên giấy:
- Viết toàn bộ nội dung phải có lên các mẩu giấy nhỏ, mỗi mẩu một thông tin.
- Xếp chúng thành một cột theo thứ tự quan trọng. Không cho phép hai mẩu ngang hàng.
- Kẻ hai vạch chia cột thành ba tầng. Tầng 1 chỉ được một mẩu.
- Với mỗi ranh giới giữa hai tầng, chọn một hoặc hai núm tương phản sẽ dùng (ví dụ: tầng 1→2 dùng cỡ, tầng 2→3 dùng độ đậm và màu xám).
- Giờ mới dựng bản thiết kế. Làm xong, chạy phép thử 5 giây.
Bước 2 thường gây tranh luận nhất khi làm với khách hàng, và đó là điều tốt: tranh luận về thứ tự nội dung trên giấy rẻ hơn rất nhiều so với sửa bản thiết kế lần thứ năm.
Lần tới khi nhận một yêu cầu “cái gì cũng phải nổi”, hãy mang theo cột giấy ấy vào buổi trao đổi. Hỏi khách chọn một thứ đứng đầu. Câu trả lời của họ chính là tầng 1 của bạn.
Câu hỏi thường gặp
Phân cấp thị giác là gì?
Là cách sắp đặt để người xem nhận ra thông tin theo thứ tự mong muốn: cái gì đập vào mắt trước, cái gì đọc sau. Nó được tạo bằng tương phản về cỡ, độ đậm, màu, vị trí và khoảng trắng.
Nên có bao nhiêu cấp trong một bản thiết kế?
Ba cấp là đủ cho phần lớn ấn phẩm. Nhiều hơn thì người xem khó phân biệt, và cấp 1 chỉ nên có một thứ.
Tiêu đề phải to hơn thân bài bao nhiêu?
Tuỳ khoảng cách xem. Ấn phẩm xem nhanh từ xa cần chênh lớn, có khi gấp 8–12 lần; giao diện đọc gần chỉ cần khoảng 1,5–2 lần kèm khác biệt độ đậm.
Phép thử 5 giây làm thế nào?
Cho người chưa xem nhìn bản thiết kế 5 giây rồi che đi, hỏi họ nhớ gì và hiểu đây là về gì. Làm với 3–5 người để biết thứ tự đọc có đúng ý không.
Khách hàng muốn mọi thứ đều nổi bật thì xử lý sao?
Nhờ khách xếp thứ tự nội dung trên giấy, không cho hai mục ngang hàng. Giải thích rằng khi mọi thứ nổi thì không thứ gì nổi, và cho xem hai phiên bản để so sánh.
