Phân cấp thị giác (visual hierarchy) là cách sắp xếp các thành phần trên một ấn phẩm để người xem biết nhìn cái gì trước, cái gì sau, cái gì có thể bỏ qua. Một tấm ảnh bài đăng, một tờ thực đơn hay một trang web đều phải trả lời câu đó trong vài giây đầu. Khi mọi thứ to bằng nhau, đậm bằng nhau, người xem không biết bắt đầu từ đâu và thường lướt qua luôn.
Công cụ AI hiện nay sinh ảnh rất nhanh, nhưng nó không biết thông tin nào của khách là quan trọng nhất: giá khuyến mãi, ngày khai trương hay tên món mới. Việc chọn thứ tự đó vẫn là việc của người thiết kế. Bài này giải thích phân cấp hoạt động thế nào, các "cần gạt" để đẩy một thành phần lên trên hay xuống dưới, và cách dùng trợ lý AI như một người xem thử để kiểm bản phác của bạn.
Mắt người đọc một ấn phẩm theo thứ tự nào
Người xem không đọc một tấm ảnh quảng cáo từ trái sang phải như đọc sách. Mắt nhảy tới chỗ nổi bật nhất trước, thường là vùng to nhất, tương phản mạnh nhất hoặc có khuôn mặt, rồi mới trượt sang những vùng kế tiếp. Các nghiên cứu theo dõi chuyển động mắt của nhóm Nielsen Norman trên trang web chữ dày cho thấy người đọc hay quét theo hình chữ F; với ấn phẩm nhiều hình và ít chữ, đường nhìn thường đi theo hình chữ Z, từ góc trên trái chéo xuống góc dưới phải. Đó là xu hướng, không phải luật cứng, và một điểm nhấn đủ mạnh sẽ kéo mắt đi khác hẳn.
Điều này có nghĩa là bạn không thể xếp thông tin theo thứ tự khách gửi trong tin nhắn rồi mong người xem đọc đúng thứ tự đó. Bạn phải chủ động quyết định: tầng một là thứ người xem phải thấy dù chỉ liếc một giây; tầng hai là thứ giúp họ hiểu và quan tâm; tầng ba là chi tiết cho ai đã dừng lại, như địa chỉ, giờ mở cửa, điều kiện áp dụng.
Một ấn phẩm tốt hiếm khi có quá ba tầng rõ rệt. Bốn năm tầng nghe có vẻ chi tiết, nhưng trên màn hình điện thoại khoảng cách giữa các tầng bị nén lại và người xem không phân biệt được. Khi brief có quá nhiều thông tin "quan trọng", đó là lúc quay lại hỏi khách chứ chưa phải lúc mở phần mềm.
Các cần gạt đẩy một thành phần lên hay xuống trong thứ bậc
Mỗi thành phần trên trang có "trọng lượng" khác nhau. Bạn tăng hay giảm trọng lượng bằng một số cần gạt quen thuộc. Bảng dưới gom các cần gạt chính và lỗi hay gặp khi dùng quá tay.
| Cần gạt | Đẩy lên tầng trên bằng cách | Lỗi thường gặp |
|---|---|---|
| Kích thước | Phóng to rõ rệt so với phần còn lại, chênh ít nhất gấp rưỡi đến gấp đôi | Phóng tất cả lên cho "dễ đọc", cuối cùng không gì nổi bật |
| Độ đậm và sáng tối | Chữ đậm hơn, vùng tối trên nền sáng hoặc ngược lại | Dùng chữ đậm cho mọi dòng, trang nặng nề |
| Màu | Một màu nhấn duy nhất cho thứ quan trọng nhất | Mỗi thông tin một màu, mắt không biết theo màu nào |
| Vị trí | Đặt ở vùng mắt chạm tới trước: phía trên, gần tâm, đầu đường nhìn chữ Z | Nhét thông tin chính vào góc dưới vì "còn chỗ trống" |
| Khoảng trắng quanh nó | Cho thành phần đứng riêng, nhiều khoảng thở | Chèn sát mọi thứ vào nhau để "tận dụng diện tích" |
| Hình dạng và hướng | Một khối khác dạng giữa nhiều khối giống nhau, đường dẫn hướng mắt về nó | Mũi tên, khung viền khắp nơi, hướng nhìn rối |
Nguyên tắc dễ nhớ: chỉ cần hai cần gạt cùng chiều là đủ tạo thứ bậc rõ. Một tiêu đề vừa to vừa đậm là đủ; thêm màu đỏ, thêm khung, thêm bóng đổ thường làm nó rẻ tiền đi chứ không nổi hơn. Nếu bạn phải dùng tới bốn năm cần gạt cho một thành phần thì có lẽ các thành phần khác đang được đẩy lên quá cao.
Dựng phân cấp từ brief trước khi đụng vào phần mềm
Phần lớn ấn phẩm hỏng phân cấp không phải vì thiếu kỹ năng phần mềm mà vì người làm chưa từng viết ra thứ tự thông tin. Quy trình ngắn dưới đây làm trên giấy hoặc trong ghi chú, mất chừng mười phút.
- Chép toàn bộ nội dung khách muốn đưa lên ấn phẩm thành từng dòng riêng: tên thương hiệu, thông điệp chính, ưu đãi, ngày giờ, địa chỉ, cách liên hệ, điều kiện.
- Hỏi một câu: nếu người xem chỉ nhớ được một điều, đó là điều gì. Dòng đó là tầng một. Chỉ được chọn một dòng.
- Chọn hai đến ba dòng giúp người xem hiểu tầng một và muốn biết thêm. Đó là tầng hai.
- Mọi thứ còn lại vào tầng ba. Gạch bớt những gì người xem có thể tìm ở chỗ khác, ví dụ phần mô tả dưới bài đăng hoặc trang thông tin của cửa hàng.
- Phác nhanh ba bố cục khác nhau bằng bút chì với các khối chữ nhật thay cho chữ và ảnh. Mỗi bản thử một cách đặt tầng một khác nhau.
- Chọn bản mà nhìn từ xa vẫn thấy rõ ba tầng, rồi mới dựng trong phần mềm.
Bước hai là bước khó nhất và cũng là chỗ bạn hay phải quay lại hỏi khách. Ví dụ giả định: một quán cà phê ở Đà Nẵng muốn bài đăng khai trương có tên quán, món mới, giảm giá tuần đầu và giờ mở cửa. Nếu khách trả lời rằng điều họ cần nhất là người ta biết quán đã mở ở địa chỉ mới, thì tầng một là "đã mở cửa" kèm địa chỉ, không phải món mới. Câu trả lời đó thay đổi toàn bộ bố cục.
Dùng AI để soi phân cấp của bản phác
Nhờ AI làm "người xem lạ". Các trợ lý AI đọc được hình ảnh có thể mô tả thứ tự chúng nhận ra các thành phần. Bạn đưa bản phác lên và hỏi: "Đây là bản nháp bài đăng cho một tiệm bánh, ví dụ giả định. Hãy cho biết theo thứ tự, thành phần nào nổi bật nhất, thứ hai, thứ ba, và thành phần nào gần như không ai thấy." Nếu câu trả lời khác thứ tự bạn định, đó là tín hiệu cần xem lại.
So hai phương án cùng lúc. Đưa hai bản phác và hỏi bản nào làm thông tin ưu đãi nổi hơn, vì sao. AI không có gu, nhưng nó giỏi chỉ ra chỗ chênh lệch kích thước, độ đậm mà mắt người làm lâu đã quen nên bỏ qua.
Đừng tin AI chấm điểm. Nếu AI trả lời "bố cục rất đẹp, 8 trên 10 điểm", câu đó gần như vô giá trị. Hãy hỏi những câu có thể kiểm được: thứ tự nhìn, vùng nào đang tranh nhau, dòng nào quá nhỏ trên điện thoại. Ý kiến chung chung về thẩm mỹ thì bỏ qua.
Che thông tin trước khi đưa lên. Bản phác của khách thường có tên thương hiệu chưa công bố, giá nội bộ, số điện thoại. Thay bằng chữ giả hoặc khối màu trước khi đưa vào bất kỳ công cụ AI nào, nhất là khi bạn dùng tài khoản miễn phí mà chưa đọc điều khoản về việc lưu dữ liệu.
Phép thử nheo mắt và các phép thử không cần công cụ
Phép thử lâu đời và rẻ nhất là nheo mắt nhìn bản thiết kế, hoặc lùi xa vài bước. Chi tiết nhỏ biến mất, chỉ còn các khối sáng tối. Nếu khối nổi nhất không phải tầng một, phân cấp đang sai. Trên máy, bạn làm tương tự bằng cách thu nhỏ bản thiết kế còn bằng con tem hoặc áp một lớp làm mờ tạm thời.
Phép thử thứ hai là chuyển sang đen trắng. Màu sắc hay đánh lừa người làm: một dòng chữ đỏ trông nổi bật trên màn hình nhưng khi bỏ màu đi thì độ sáng của nó gần bằng nền. Bản đen trắng cho biết tương phản sáng tối thật sự, thứ quyết định khả năng đọc của người xem trong nắng hoặc trên màn hình chỉnh tối.
Phép thử thứ ba là đưa cho một người không biết gì về dự án xem ba giây rồi cất đi, hỏi họ nhớ gì. Người đó có thể là đồng nghiệp ở phòng khác, người nhà, hay chính chủ quán khi đang bận. Câu trả lời của họ đáng tin hơn mọi lời nhận xét của người đã xem bản thiết kế hai mươi lần. AI có thể đóng vai người xem lạ ở bước đầu, nhưng không thay được người thật ở bước cuối.
Ba phép thử này nên thành thói quen trước mỗi lần gửi khách. Chúng mất chưa tới năm phút và tránh được vòng sửa "sao không thấy giá đâu" quen thuộc.
Những lỗi phân cấp hay gặp ở ảnh bài đăng và ấn phẩm nhỏ
Dưới đây là các lỗi thường thấy khi xem bài đăng của cửa hàng nhỏ, kể cả những bài dùng ảnh AI rất đẹp làm nền. Mỗi lỗi kèm hướng sửa.
- Ảnh nền giành hết sự chú ý. Ảnh AI nhiều chi tiết, nhiều ánh sáng rực khiến chữ đặt lên không còn chỗ đứng. Sửa: làm tối hoặc làm mờ vùng sau chữ, hoặc chọn ảnh có khoảng trống sẵn.
- Hai tiêu đề cùng cỡ. Tên quán và tên chương trình to bằng nhau, mắt không biết đọc cái nào. Sửa: chọn một, cái còn lại giảm ít nhất một bậc.
- Giá và ưu đãi bị bọc trong hình trang trí. Ngôi sao nổ, ruy băng, lửa cháy làm con số khó đọc hơn. Sửa: để con số đứng riêng, to, tương phản tốt, trang trí đặt cách xa.
- Tầng ba quá nhiều dòng. Địa chỉ, hai số liên hệ, ba mạng xã hội, giờ mở cửa từng ngày. Sửa: giữ một cách liên hệ, phần còn lại đưa vào phần mô tả.
- Chữ quá nhỏ khi xem trên điện thoại. Bản thiết kế trông ổn trên màn hình máy tính 27 inch nhưng thu về khung bài đăng thì chữ tầng ba không đọc nổi. Sửa: luôn xem thử ở đúng kích thước hiển thị.
- Màu nhấn dùng cho mọi thứ. Khi nút, tiêu đề, khung, biểu tượng đều cùng màu nhấn thì màu đó mất tác dụng. Sửa: dành màu nhấn cho đúng một hoặc hai chỗ.
Chú ý rằng hầu hết các lỗi trên không thể sửa bằng câu lệnh tạo ảnh. Bạn có thể nhờ AI tạo một nền "có khoảng trống phía trên", nhưng quyết định đặt cái gì vào khoảng trống đó và to bao nhiêu vẫn là phân cấp do bạn dựng.
Phân cấp khác nhau theo loại ấn phẩm
Không có một công thức phân cấp dùng chung. Một bài đăng mạng xã hội cần tầng một cực rõ vì người xem đang lướt; thường chỉ nên có năm đến bảy chữ ở tầng một. Một tờ thực đơn lại khác: người xem đã ngồi xuống và muốn tìm, nên phân cấp phục vụ việc dò, với nhóm món rõ ràng, tên món nổi hơn mô tả, giá thẳng hàng để so.
Một trang giới thiệu dịch vụ trên web có nhiều tầng hơn vì người đọc cuộn xuống dần; mỗi màn hình lại có phân cấp riêng của nó, và tiêu đề từng phần phải đủ nổi để người cuộn nhanh vẫn thấy mình đang ở đâu. Phần giao diện chi tiết có danh mục riêng trên trang; ở đây chỉ cần nhớ rằng phân cấp không chỉ nằm trong một khung hình.
Với ấn phẩm in như tờ rơi hay danh thiếp, khoảng cách nhìn và ánh sáng nơi người ta cầm nó cũng ảnh hưởng tới thứ bậc. Phần chuẩn bị file in xem thêm ở trang AI In Ấn. Điểm chung của mọi loại là câu hỏi ở bước hai phía trên: nếu người xem chỉ nhớ một điều thì đó là gì.
Câu hỏi thường gặp
Phân cấp thị giác và bố cục khác nhau thế nào?
Bố cục là cách đặt các thành phần vào khung: trái phải, trên dưới, lưới, khoảng cách. Phân cấp là kết quả mà bố cục tạo ra trong mắt người xem, tức thứ tự họ nhận ra thông tin. Hai bố cục khác nhau có thể cho cùng một phân cấp, và một bố cục cân đối đẹp mắt vẫn có thể hỏng phân cấp nếu mọi thứ nổi bằng nhau.
Có nên dùng AI để tự sắp xếp phân cấp cho bài đăng?
Một số công cụ thiết kế có tính năng gợi ý bố cục từ nội dung bạn nhập. Chúng hữu ích để có nhanh vài phương án khởi đầu, nhưng không biết thông tin nào là quan trọng nhất với khách của bạn. Hãy tự quyết định tầng một trước, rồi mới xem gợi ý của công cụ và chỉnh theo thứ tự đó.
Một ấn phẩm nên có bao nhiêu cỡ chữ?
Không có con số bắt buộc, nhưng với bài đăng hay tờ rơi nhỏ, ba cỡ chữ thường là đủ: một cho tầng một, một cho tầng hai, một cho chi tiết. Thêm cỡ thứ tư thứ năm làm các cỡ gần nhau quá, người xem không còn phân biệt được tầng nào với tầng nào nữa.
Khách muốn mọi thông tin đều to thì xử lý sao?
Đưa cho khách xem hai bản: một bản làm theo ý họ, một bản có phân cấp rõ, rồi để họ tự nhìn mỗi bản trong ba giây trên điện thoại. Thường khách sẽ thấy ngay bản mọi thứ đều to lại khó đọc hơn. Giải thích bằng trải nghiệm của người xem dễ thuyết phục hơn giải thích bằng nguyên lý.
Ảnh AI có làm hỏng phân cấp không?
Ảnh AI thường rất nhiều chi tiết và ánh sáng mạnh ở khắp khung hình, nên dễ giành sự chú ý khỏi chữ. Nó không làm hỏng phân cấp nếu bạn chủ động xử lý: chọn ảnh có vùng trống, làm dịu vùng đặt chữ, hoặc cắt khung lại sao cho chủ thể chính và thông tin chính không tranh nhau.
Làm sao luyện mắt nhìn ra phân cấp nhanh hơn?
Mỗi ngày chọn vài ấn phẩm bạn gặp ngoài đường hoặc trên mạng, nheo mắt nhìn và ghi lại thứ tự mình thấy. Sau đó tự hỏi vì sao thành phần đó nổi: kích thước, màu, vị trí hay khoảng trắng. Làm đều đặn vài tuần, bạn sẽ nhìn ra phân cấp gần như tức thì khi mở bản thiết kế của chính mình.