Phân cấp thị giác (Visual Hierarchy): Cách dẫn mắt người xem đúng thứ tự

Người xem không đọc thiết kế của bạn. Họ quét nó trong khoảng 3 giây, rồi quyết định có dừng lại hay không.

Trong 3 giây đó, thứ tự họ nhìn thấy các thông tin là do bạn quyết định — hoặc do sự tình cờ quyết định, nếu bạn không chủ động sắp đặt. Phân cấp thị giác chính là kỹ năng sắp đặt ấy: làm cho thông tin quan trọng nhất được nhìn thấy trước, quan trọng nhì được nhìn thấy sau, và cứ thế.

Đây là nguyên lý có tác động lớn nhất tới hiệu quả của một thiết kế truyền thông, quan trọng hơn cả việc chọn màu hay chọn font.

Bắt đầu từ nội dung, không phải từ hình

Trước khi mở phần mềm, hãy viết ra danh sách thông tin cần truyền tải, rồi đánh số thứ tự ưu tiên. Ví dụ với poster tuyển thành viên CLB:

Sai lầm phổ biến: coi mọi thông tin đều quan trọng như nhau. Khi mọi thứ đều được nhấn mạnh, không có gì được nhấn mạnh cả.

Nguyên tắc thực dụng: một thiết kế chỉ nên có một điểm nhấn cấp 1. Nếu bạn không thể chọn được thông tin nào là số một, người xem cũng sẽ không chọn được.

8 công cụ tạo phân cấp

1. Kích thước

Công cụ mạnh nhất và trực tiếp nhất. Nhưng phải chênh lệch đủ lớn: tiêu đề nên gấp ít nhất 1.5–2 lần nội dung. Chênh 10% chỉ khiến thiết kế trông sai tỷ lệ chứ không tạo phân cấp.

2. Độ đậm (weight)

Tinh tế hơn kích thước, dùng được ngay trong một đoạn văn. Ưu điểm: không phá vỡ bố cục.

3. Màu sắc

Một màu nhấn duy nhất giữa nền trung tính sẽ hút mắt tức thì. Điều kiện: màu đó không được xuất hiện ở nơi khác. Nếu bạn tô màu cam cho cả nút bấm, tiêu đề và icon trang trí thì màu cam mất hết sức mạnh.

4. Tương phản sắc độ

Chữ đen trên nền trắng nổi hơn chữ xám trên nền trắng. Bài kiểm tra đen trắng (chuyển thiết kế sang thang xám) sẽ cho bạn biết cấu trúc phân cấp thật sự của mình.

5. Khoảng cách

Bao quanh một phần tử bằng khoảng trống lớn khiến nó quan trọng lên, mà không cần phóng to hay đổi màu. Đây là công cụ được dùng nhiều nhất trong thiết kế cao cấp.

6. Vị trí

Góc trên bên trái và vùng trung tâm phía trên là nơi mắt đến trước ở văn hóa đọc trái–phải. Trên điện thoại, vùng dưới màn hình lại là nơi ngón tay dễ chạm nhất — nên nút hành động chính hay được đặt ở đó.

7. Chất liệu và chiều sâu

Bóng đổ, lớp phủ, nền màu giúp một khối "nổi" lên khỏi mặt phẳng. Dùng tiết chế: nếu mọi thẻ đều có bóng, không thẻ nào nổi bật.

8. Chuyển động

Trong sản phẩm số, chuyển động thu hút mắt mạnh hơn mọi yếu tố tĩnh. Chính vì vậy nên dùng rất ít — một hiệu ứng nhấp nháy sai chỗ có thể phá hỏng toàn bộ trật tự bạn dựng lên.

Quy tắc kết hợp: dùng 2–3 công cụ cho một cấp là đủ. Ví dụ tiêu đề chính = to hơn + đậm hơn + có khoảng trống bao quanh. Thêm màu đỏ, gạch chân, in hoa và đổ bóng vào nữa thì bạn đang la hét chứ không phải nhấn mạnh.

Quy trình 4 bước xây phân cấp

1. Liệt kê và đánh số ưu tiên nội dung (như bảng ở trên).
2. Dựng bản khối xám: vẽ toàn bộ bố cục chỉ bằng hình chữ nhật xám với các sắc độ khác nhau. Nếu ở bước này bạn đã thấy rõ đâu là phần quan trọng nhất, phân cấp của bạn đã đúng.
3. Đổ nội dung thật vào và giữ nguyên tỷ lệ đã dựng.
4. Kiểm tra và tiết chế: bỏ bớt những nhấn mạnh thừa. Gần như lần nào bạn cũng đang nhấn mạnh quá nhiều thứ.

Ba bài kiểm tra nhanh

Bài kiểm tra 3 giây đặc biệt hữu ích trước khi nộp đồ án: hãy nhờ một người bạn không cùng ngành, vì họ phản ứng giống người xem thật hơn là giảng viên.

Phân cấp trong từng loại sản phẩm

Poster sự kiện

Trật tự phổ biến: hình ảnh/tiêu đề sự kiện → thời gian, địa điểm → thông tin phụ → logo. Lỗi hay gặp: logo trường và logo nhà tài trợ chiếm diện tích lớn hơn cả tên sự kiện.

Slide thuyết trình

Mỗi slide chỉ nên có một ý chính, đặt ở vị trí cố định. Số liệu quan trọng nên được phóng to thành con số lớn thay vì nằm chìm trong bảng.

Giao diện ứng dụng

Hành động chính (đăng ký, thanh toán, nộp bài) phải là phần tử nổi bật nhất màn hình; hành động phụ dùng nút viền hoặc chỉ là chữ. Nếu có hai nút cùng màu đậm cạnh nhau, người dùng sẽ do dự.

CV và portfolio

Tên và vị trí ứng tuyển ở cấp 1; tiêu đề mục ở cấp 2; nội dung ở cấp 3. Nhà tuyển dụng quét CV rất nhanh, nên phân cấp rõ ràng quan trọng hơn trang trí. Nếu bạn đang làm CV, công cụ tạo CV của Stunexa đã dựng sẵn phân cấp chuẩn để bạn chỉ cần điền nội dung.

Câu hỏi thường gặp

Phân cấp thị giác khác gì với bố cục?

Bố cục trả lời câu hỏi "đặt cái gì ở đâu", phân cấp trả lời câu hỏi "nhìn cái gì trước". Hai thứ bổ sung cho nhau: bố cục tạo khung, phân cấp tạo thứ tự.

Nếu khách hàng hoặc giảng viên yêu cầu nhấn mạnh mọi thứ thì sao?

Hãy trình bày bằng dữ liệu thay vì tranh luận về thẩm mỹ: cho họ xem bài kiểm tra 3 giây với hai phiên bản. Phiên bản nhấn mạnh mọi thứ luôn khiến người xem nhớ ít hơn. Đây là lập luận thuyết phục hơn "em thấy như vậy đẹp hơn".

Có được nhiều hơn một điểm nhấn không?

Có, khi thiết kế có nhiều khu vực tách biệt rõ (ví dụ trang dài chia nhiều mục). Nhưng trong cùng một khung nhìn, một điểm nhấn là nguyên tắc an toàn.

Làm sao nhấn mạnh mà không dùng màu?

Dùng kích thước, độ đậm và khoảng trống. Thực tế, một tiêu đề cỡ lớn được bao quanh bởi nhiều khoảng trống thường mạnh hơn cùng tiêu đề đó tô màu đỏ.

Vì sao thiết kế của tôi trông "rối" dù chỉ có ít nội dung?

Thường là do phân cấp phẳng: mọi phần tử có cỡ gần bằng nhau, cùng độ đậm, cách đều nhau. Hãy tăng chênh lệch cỡ chữ và gom nhóm lại theo khoảng cách.

Nguồn tham khảo

• Visual Hierarchy – Interaction Design Foundation
• Nielsen Norman Group – F-Shaped Pattern of Reading
• Laws of UX

Kết luận

Phân cấp thị giác là kỹ năng ít tốn công nhất nhưng cho kết quả rõ nhất. Bạn không cần font đẹp hơn hay ảnh xịn hơn — chỉ cần quyết định dứt khoát thông tin nào quan trọng nhất, rồi dùng kích thước, độ đậm và khoảng trống để nói điều đó.

Trước mỗi lần nộp bài, hãy chạy bài kiểm tra 3 giây. Nếu người xem không nhớ được thông tin quan trọng nhất, thiết kế chưa xong dù nó đẹp đến đâu.

Bài viết liên quan

• 7 yếu tố và nguyên lý cơ bản trong thiết kế đồ họa
• Nguyên lý Gestalt trong thiết kế
• Bố cục và hệ lưới trong thiết kế
• Thiết kế slide thuyết trình và đồ án