Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn bước vào một siêu thị mà tất cả các bảng chỉ dẫn, giá tiền, tên sản phẩm và khuyến mãi đều được in cùng một cỡ chữ, cùng một màu, cùng một độ đậm. Bạn sẽ đứng chôn chân giữa lối đi, mắt đảo loạn xạ, không biết nhìn vào đâu trước. Đó chính xác là cảm giác mà một giao diện không có visual hierarchy (hệ thống phân cấp thị giác) mang lại cho người dùng.
Visual hierarchy là nghệ thuật — và cũng là khoa học — sắp xếp các phần tử trên màn hình sao cho mắt người dùng biết nhìn cái gì trước, cái gì sau, và cái gì có thể bỏ qua. Đây không phải chuyện "làm cho đẹp". Đây là chuyện dẫn đường. Một màn hình được thiết kế tốt sẽ trả lời được ba câu hỏi trong vòng chưa đầy một giây: "Tôi đang ở đâu?", "Điều quan trọng nhất ở đây là gì?", "Tôi nên làm gì tiếp theo?".
Ở Bài 1 và Bài 2 bạn đã học các nguyên tắc thị giác nền tảng và lý thuyết màu sắc. Trong bài này, chúng ta đi sâu vào bốn đòn bẩy (four levers) mà một UI designer dùng hằng ngày để tạo ra thứ tự đọc: Size (kích thước), Weight (độ đậm), Color (màu sắc/độ tương phản), và Spacing (khoảng cách). Nắm vững bốn đòn bẩy này, bạn sẽ không còn "đoán mò" khi thiết kế nữa. Bạn sẽ điều khiển được ánh mắt người dùng một cách có chủ đích.
Khái niệm cốt lõi
Visual hierarchy hoạt động dựa trên một sự thật đơn giản về não bộ con người: mắt chúng ta bị thu hút bởi sự khác biệt (contrast). Bất cứ phần tử nào khác với những phần tử xung quanh — to hơn, đậm hơn, sáng hơn, hoặc được bao quanh bởi nhiều khoảng trống hơn — sẽ được nhìn thấy trước. Bốn đòn bẩy dưới đây đều là những cách tạo ra sự khác biệt đó.
1. Size — Kích thước
Đây là đòn bẩy mạnh nhất và trực giác nhất. Phần tử càng to, càng được ưu tiên. Tiêu đề H1 to hơn body text vì nó quan trọng hơn. Con số "299.000đ" trong một app thương mại điện tử thường được phóng to gấp đôi tên sản phẩm vì đó là thông tin người mua quan tâm nhất.
Quy tắc thực dụng: sự chênh lệch kích thước phải đủ rõ ràng để mắt nhận ra ngay. Nếu H1 là 24px và H2 là 22px, người dùng sẽ không cảm nhận được thứ bậc — hai cái trông "ngang nhau". Một tỷ lệ khác biệt tối thiểu khoảng 1.25–1.5 lần giữa các cấp sẽ tạo ra hierarchy rõ rệt. Ví dụ: 32px cho H1, 20px cho H2, 16px cho body.
2. Weight — Độ đậm
Weight là độ dày của nét chữ (font weight): Light (300), Regular (400), Medium (500), Semibold (600), Bold (700)... Chữ đậm hơn "nặng" hơn về mặt thị giác, nên hút mắt hơn dù cùng kích thước.
Weight cực kỳ hữu ích khi bạn không muốn tăng kích thước nhưng vẫn cần tạo nhấn mạnh. Ví dụ, trong một danh sách giao dịch ngân hàng, tên người nhận có thể để Semibold còn ngày giờ để Regular — cả hai cùng 15px, nhưng mắt vẫn ưu tiên đọc tên trước. Weight cho phép tạo hierarchy tinh tế mà không làm layout phình to.
3. Color — Màu sắc & Độ tương phản
Màu tạo hierarchy theo hai cơ chế. Thứ nhất là độ tương phản với nền: chữ đen trên nền trắng nổi bật hơn chữ xám nhạt trên nền trắng, nên chữ đen được đọc trước. Đây là lý do text phụ (secondary text) thường dùng màu xám để "lùi ra sau", còn text chính dùng màu đậm để "tiến lên trước".
Thứ hai là màu nhấn (accent color): một nút màu cam rực giữa một màn hình trắng-xám sẽ hút mắt ngay lập tức. Đây là cách designer làm nổi bật hành động chính (primary action) như nút "Đặt hàng", "Thanh toán".
Lưu ý quan trọng: màu là con dao hai lưỡi. Nếu mọi thứ đều màu mè rực rỡ thì chẳng có gì nổi bật cả. Nguyên tắc vàng: giữ phần lớn giao diện trung tính (neutral), chỉ dùng màu nhấn cho những điểm thật sự quan trọng. Và luôn nhớ kiểm tra độ tương phản để đảm bảo accessibility (chúng ta sẽ đào sâu chuyện này ở Bài 7).
4. Spacing — Khoảng cách
Đây là đòn bẩy bị đánh giá thấp nhất bởi người mới, nhưng lại quyền lực nhất trong tay designer giỏi. Khoảng trống (white space / negative space) xung quanh một phần tử làm nó thở và trở nên nổi bật. Một tiêu đề được bao quanh bởi nhiều khoảng trống sẽ trông quan trọng hơn hẳn dù không cần to hay đậm hơn.
Spacing còn tạo ra nhóm (grouping): các phần tử gần nhau được não bộ hiểu là "thuộc về nhau", còn phần tử cách xa được hiểu là "riêng biệt". Đây chính là nguyên lý Proximity trong Gestalt (Bài 5). Ví dụ, một nhãn (label) đặt sát ô nhập liệu của nó, và cách xa ô nhập liệu tiếp theo, giúp người dùng hiểu ngay nhãn nào thuộc ô nào — mà không cần bất kỳ đường kẻ hay khung viền nào.
Kết hợp bốn đòn bẩy
Điều làm nên khác biệt giữa designer non tay và designer chuyên nghiệp là biết kết hợp các đòn bẩy này. Bạn hiếm khi dùng một đòn bẩy đơn lẻ. Một tiêu đề mạnh thường là: to (Size) + đậm (Weight) + màu đậm (Color) + có nhiều khoảng trống phía trên (Spacing). Bốn đòn bẩy cộng hưởng, tạo ra một điểm neo thị giác (visual anchor) rõ ràng cho mắt người dùng đáp xuống trước tiên.
Tình huống thực tế
Ví dụ 1: Màn hình checkout của một sàn TMĐT Việt Nam
Hãy hình dung đội thiết kế của một sàn thương mại điện tử như Tiki đang tối ưu màn hình xác nhận đơn hàng. Phiên bản ban đầu hiển thị mọi thông tin — địa chỉ giao hàng, phương thức thanh toán, mã giảm giá, tổng tiền, nút "Đặt hàng" — với cỡ chữ và độ đậm gần như nhau. Kết quả từ dữ liệu heatmap cho thấy 18% người dùng cuộn lên cuộn xuống nhiều lần trước khi bấm nút, và tỷ lệ bỏ giỏ ở bước cuối khá cao.
Đội thiết kế áp dụng bốn đòn bẩy. Họ phóng to con số "Tổng cộng: 458.000đ" lên 24px Bold — vì đó là thông tin người mua cần xác nhận cuối cùng. Nút "Đặt hàng" được tô màu cam thương hiệu (accent color) và tách khỏi các phần khác bằng một khoảng trống rộng 32px. Các thông tin phụ như "Giao hàng dự kiến 2–3 ngày" được hạ xuống màu xám 14px Regular.
Bài học rút ra: Trong màn hình có nhiều thông tin, việc ưu tiên đúng thứ tự đọc quan trọng hơn việc hiển thị nhiều. Bằng cách nâng cấp bậc cho tổng tiền và nút hành động, đồng thời hạ cấp thông tin phụ, đội thiết kế đã tạo ra một "đường đi" rõ ràng cho mắt: xác nhận tổng tiền → bấm đặt hàng. Đây là hierarchy phục vụ trực tiếp cho mục tiêu kinh doanh.
Ví dụ 2: App ngân hàng số và danh sách giao dịch
Một ngân hàng số kiểu Timo hay Cake muốn thiết kế màn hình lịch sử giao dịch. Mỗi dòng có bốn mẩu thông tin: tên đối tác giao dịch, loại giao dịch, ngày giờ, và số tiền. Nếu tất cả cùng cỡ chữ, người dùng phải đọc từng chữ — mệt và chậm.
Designer quyết định: số tiền là thứ người dùng liếc tìm nhanh nhất, nên để 16px Semibold, và dùng màu để phân biệt (đỏ cho tiền ra, xanh cho tiền vào). Tên đối tác để 15px Medium màu đậm. Ngày giờ và loại giao dịch để 13px Regular màu xám nhạt, gom lại thành một dòng phụ bên dưới. Chú ý: ở đây designer gần như không thay đổi kích thước quá nhiều — họ chủ yếu dùng Weight và Color để tạo phân cấp, giữ cho mỗi dòng vẫn gọn gàng.
Bài học rút ra: Không phải lúc nào cũng tăng size. Khi không gian chật (như một dòng danh sách), Weight và Color trở thành đòn bẩy chủ lực. Người dùng có thể "quét" (scan) danh sách và tìm ra giao dịch cần tìm chỉ trong vài giây nhờ hierarchy được thiết kế đúng.
Ví dụ 3: Landing page của một startup SaaS
Một startup phần mềm quản lý bán hàng ở TP.HCM ra mắt landing page nhưng tỷ lệ nhấp vào nút "Dùng thử miễn phí" thấp. Khi review, mentor phát hiện vấn đề: trang có tới năm nút màu xanh dương giống hệt nhau rải khắp trang — "Dùng thử", "Xem demo", "Bảng giá", "Liên hệ", "Đăng nhập". Vì mọi nút đều nổi bật như nhau, nên không nút nào thực sự nổi bật. Đây là hiện tượng "khi mọi thứ đều được nhấn mạnh, thì không gì được nhấn mạnh".
Giải pháp: chỉ giữ một primary action ("Dùng thử miễn phí") ở dạng nút màu xanh đậm, to, đậm. Các hành động còn lại hạ xuống dạng nút viền (outline) hoặc chỉ là text link màu trung tính. Đồng thời họ thêm khoảng trống rộng quanh nút chính để nó "thở". Sau thay đổi, tỷ lệ nhấp vào nút chính tăng đáng kể.
Bài học rút ra: Hierarchy đòi hỏi sự hy sinh có chủ đích. Bạn phải chọn cái gì được ưu tiên, và chấp nhận hạ cấp những cái còn lại. Một trang chỉ nên có một điểm nhấn mạnh nhất tại mỗi thời điểm.
Hướng dẫn từng bước
Đây là quy trình bạn có thể áp dụng mỗi khi thiết kế một màn hình mới:
Bước 1 — Liệt kê và xếp hạng nội dung. Trước khi mở Figma, hãy viết ra tất cả phần tử trên màn hình, rồi tự hỏi: "Nếu người dùng chỉ được nhìn một thứ, đó là gì?". Đánh số ưu tiên: cấp 1 (quan trọng nhất), cấp 2, cấp 3. Đây là bước tư duy, không phải bước vẽ. Nhiều designer non tay bỏ qua bước này và đó là lý do màn hình của họ "loạn".
Bước 2 — Thiết lập cấp cao nhất trước. Bắt đầu bằng phần tử cấp 1. Cho nó thứ nó cần: đủ to, đủ đậm, đủ màu, đủ khoảng trống. Đây là điểm neo thị giác của cả màn hình.
Bước 3 — Đi xuống các cấp thấp hơn. Với mỗi cấp thấp hơn, giảm dần cường độ của các đòn bẩy: chữ nhỏ hơn, nhạt màu hơn, ít khoảng trống hơn. Đảm bảo mỗi cấp khác biệt rõ ràng với cấp liền kề — nếu cấp 2 và cấp 3 trông giống nhau, bạn chưa tạo được hierarchy.
Bước 4 — Dùng spacing để nhóm. Đặt các phần tử liên quan gần nhau, tách các nhóm khác nhau bằng khoảng trống lớn hơn. Quy tắc: khoảng cách trong nhóm phải nhỏ hơn khoảng cách giữa các nhóm.
Bước 5 — Kiểm tra bằng "squint test". Nheo mắt lại nhìn màn hình (hoặc làm mờ ảnh thiết kế). Nếu bạn vẫn thấy được phần tử nào nổi bật nhất, phần tử nào lùi xuống — hierarchy của bạn hoạt động. Nếu tất cả mờ thành một khối xám đều nhau — bạn cần tăng contrast.
Bước 6 — Kiểm tra thứ tự đọc. Đọc màn hình theo hướng mắt tự nhiên (thường là trên-xuống, trái-phải theo dạng chữ F hoặc Z). Thứ tự bạn nhìn thấy các phần tử có khớp với thứ tự ưu tiên bạn đặt ở Bước 1 không? Nếu không, điều chỉnh lại.
Lỗi thường gặp & mẹo
Lỗi 1 — Quá nhiều cấp bậc. Người mới thường tạo 6–7 cỡ chữ khác nhau, khiến màn hình lộn xộn. Mẹo: giới hạn 3–4 cấp text là đủ cho hầu hết màn hình (tiêu đề, phụ đề, body, caption).
Lỗi 2 — Chênh lệch quá nhỏ. H1 18px và body 16px thì mắt không phân biệt được. Mẹo: dùng bước nhảy đủ lớn (tối thiểu 1.25 lần) giữa các cấp.
Lỗi 3 — Nhấn mạnh mọi thứ. Ba nút primary cùng lúc, năm màu accent, chữ bold khắp nơi — tất cả triệt tiêu lẫn nhau. Mẹo: mỗi màn hình một primary action. Nếu thứ gì cũng hét lên, người dùng chẳng nghe được ai.
Lỗi 4 — Quên khoảng trống. Nhồi nhét phần tử sát nhau để "tiết kiệm không gian" làm mất khả năng nhóm và mất điểm nhấn. Mẹo: khoảng trống không phải chỗ trống lãng phí — nó là công cụ thiết kế chủ động.
Lỗi 5 — Dựa vào một đòn bẩy duy nhất. Chỉ dùng màu để phân biệt (nguy hiểm cho người mù màu), hoặc chỉ dùng size. Mẹo: kết hợp nhiều đòn bẩy để hierarchy vừa rõ ràng vừa dễ tiếp cận (accessible).
Mẹo vàng: Khi phân vân giữa việc thêm một yếu tố nhấn mạnh hay bớt độ nhấn của những thứ xung quanh — hãy ưu tiên bớt. Hierarchy thường được cải thiện tốt hơn bằng cách hạ cấp cái phụ hơn là nâng cấp cái chính.
Bài tập thực hành
Bài tập 1 — Phân tích ngược. Mở một app bạn dùng hằng ngày (ví dụ MoMo, Shopee, hoặc Grab). Chọn một màn hình bất kỳ và chụp lại. Với mỗi phần tử chính, ghi chú: designer đã dùng đòn bẩy nào (Size / Weight / Color / Spacing) để tạo hierarchy? Xác định đâu là phần tử cấp 1, 2, 3. Bạn có đồng ý với thứ tự ưu tiên của họ không?
Bài tập 2 — Thiết kế card sản phẩm. Trong Figma, thiết kế một product card gồm: ảnh, tên sản phẩm, giá gốc (gạch ngang), giá khuyến mãi, đánh giá sao, nút "Thêm vào giỏ". Yêu cầu: giá khuyến mãi phải là phần tử nổi bật nhất. Chỉ được dùng tối đa một màu accent. Làm bằng cả bốn đòn bẩy.
Bài tập 3 — Squint test. Xuất thiết kế ở bài tập 2 ra ảnh, làm mờ nó (blur) hoặc nheo mắt nhìn. Ghi lại xem phần tử nào bạn thấy nổi bật nhất. Nếu đó không phải giá khuyến mãi, hãy quay lại chỉnh sửa cho đến khi squint test cho kết quả đúng.
Bài tập 4 — Chữa một màn hình "phẳng". Tìm (hoặc tự tạo) một màn hình mà mọi thứ cùng cỡ, cùng màu, cùng độ đậm. Áp dụng quy trình 6 bước để tạo ra hierarchy. So sánh trước/sau và tự đánh giá.
Tóm tắt
Visual hierarchy là kỹ năng cốt lõi phân biệt một giao diện chuyên nghiệp với một giao diện nghiệp dư. Bạn dẫn dắt ánh mắt người dùng bằng bốn đòn bẩy: Size (to hút mắt trước), Weight (đậm hút mắt hơn dù cùng cỡ), Color (tương phản và màu nhấn tạo điểm neo), và Spacing (khoảng trống làm phần tử nổi bật và tạo nhóm). Sức mạnh thật sự nằm ở việc kết hợp chúng có chủ đích.
Hãy nhớ ba điều: (1) Luôn bắt đầu bằng việc xếp hạng nội dung — hierarchy là quyết định về nội dung trước khi là quyết định về hình thức. (2) Sự khác biệt giữa các cấp phải đủ rõ để mắt nhận ra; nếu không, bạn chưa có hierarchy. (3) Nhấn mạnh có chủ đích đòi hỏi hy sinh — mỗi màn hình chỉ nên có một điểm nhấn mạnh nhất, và thường cách cải thiện tốt nhất là hạ cấp cái phụ chứ không phải la hét cái chính to hơn.
Ở các bài tiếp theo, bạn sẽ thấy bốn đòn bẩy này quay trở lại liên tục — trong Gestalt (Bài 5), Typography Scale (Bài 6), và Spacing System (Bài 9). Visual hierarchy chính là nền móng để bạn đứng vững trên đó.