Mở một bản thiết kế của người mới học, bạn thường thấy rất nhiều khung: khung quanh ảnh, khung quanh đoạn văn, đường kẻ ngăn giữa các mục, thêm nền màu cho từng ô. Hỏi vì sao, câu trả lời thường là “để người ta biết cái nào đi với cái nào”.
Mắt người vốn đã tự làm việc đó. Từ đầu thế kỷ 20, các nhà tâm lý học Gestalt ở Đức mô tả cách não bộ gom các phần tử rời rạc thành nhóm và hình theo những quy luật khá ổn định. Hiểu các quy luật này, người thiết kế có thể bỏ bớt phần lớn khung viền mà bố cục vẫn rõ — thậm chí rõ hơn.
Luật gần nhau (proximity)
Những phần tử đặt gần nhau được đọc là một nhóm. Đây là luật mạnh nhất và rẻ nhất: chỉ cần khoảng cách.
Áp dụng: trong một biểu mẫu, nhãn phải gần ô nhập của chính nó hơn là ô nhập phía trên. Nhiều biểu mẫu đặt nhãn cách đều ô trên và ô dưới, người điền phải đoán nhãn thuộc ô nào. Chỉ cần kéo nhãn sát xuống ô của nó, không cần thêm khung.
Lỗi hay gặp: chú thích ảnh đặt cách ảnh xa hơn khoảng cách tới đoạn văn tiếp theo, nên bị đọc như một phần thân bài.
Luật tương đồng (similarity)
Các phần tử giống nhau về màu, hình, cỡ, hướng hoặc kết cấu được đọc là cùng loại, dù chúng ở xa nhau.
Áp dụng: mọi đường liên kết trong một trang web cùng một màu, mọi nút hành động chính cùng một hình dạng. Người dùng học một lần và nhận ra ở mọi nơi. Trong một tờ lịch sự kiện, các buổi cùng chủ đề dùng cùng một màu nhấn.
Lỗi hay gặp: dùng cùng một màu xanh cho cả chữ liên kết lẫn tiêu đề không bấm được. Người dùng bấm vào tiêu đề và không có gì xảy ra. Tương đồng hứa hẹn cùng hành vi; phá lời hứa đó là tạo ra lỗi trải nghiệm.
Gần nhau và tương đồng đánh nhau: luật nào thắng?
Khi hai luật chỉ về hai hướng, thường luật gần nhau thắng nếu chênh lệch khoảng cách đủ lớn. Hãy thử: vẽ một lưới 6×6 chấm, tô xen kẽ từng cột đỏ và xanh, nhưng đẩy các hàng xa nhau ra. Phần lớn người xem sẽ thấy hàng (theo khoảng cách) trước khi thấy cột (theo màu). Điều này có ích thực tế: khi bạn muốn nhóm theo màu nhưng bố cục lại buộc chúng gần nhau theo kiểu khác, người xem sẽ bối rối. Hãy để hai luật cùng chỉ một hướng.
Luật liên tục (continuity)
Mắt có xu hướng đi theo đường thẳng hoặc đường cong mượt, và coi các phần tử nằm trên cùng một đường là có liên hệ.
Áp dụng: căn trái nhiều khối chữ trên cùng một trục dọc tạo ra một đường vô hình mà mắt men theo. Đây là lý do một trang căn lề trái nhất quán trông gọn hơn trang mỗi khối căn một kiểu. Trong ảnh, hướng nhìn của người mẫu hoặc một con đường dẫn mắt người xem tới tiêu đề.
Lỗi hay gặp: người mẫu nhìn ra ngoài mép trang. Mắt người xem đi theo ánh nhìn đó và rời khỏi ấn phẩm.
Luật khép kín (closure)
Khi một hình thiếu một phần, mắt tự điền vào để thấy hình hoàn chỉnh. Nhiều logo kinh điển dựa trên luật này: một con vật vẽ bằng vài mảng rời rạc, hoặc các chữ cái bị khuyết mà vẫn đọc được.
Áp dụng: trong dàn trang, bạn không cần kẻ khung kín bốn cạnh quanh một nhóm. Một nền nhạt, hoặc chỉ hai góc đánh dấu, là đủ để mắt thấy một vùng.
Giới hạn: khép kín cần đủ gợi ý. Bỏ quá nhiều thì mắt không nối được nữa, nhất là khi xem ở cỡ nhỏ. Logo dựa vào khép kín phải được kiểm ở kích thước nhỏ nhất sẽ dùng.
Luật hình và nền (figure–ground)
Mắt luôn tách thứ đang nhìn thành “hình” (vật thể) và “nền” (phía sau). Khi ranh giới mơ hồ, hình và nền có thể đảo chỗ — như hình minh họa quen thuộc vừa là một chiếc bình vừa là hai khuôn mặt nhìn nhau.
Áp dụng có chủ đích: khoảng âm (negative space) chứa một hình ẩn là thủ pháp cổ điển trong logo và poster, như mũi tên ẩn giữa hai chữ cái của một logo vận tải nổi tiếng.
Lỗi không chủ đích: chữ trắng đặt trên ảnh có vùng sáng tối lẫn lộn. Chữ lúc là hình, lúc chìm vào nền, rất khó đọc. Cách sửa là tạo nền ổn định: phủ một lớp tối nhẹ, chọn vùng ảnh phẳng, hoặc đổi vị trí chữ.
Bảng tra nhanh
| Luật | Công cụ | Thay được cho | Kiểm bằng |
|---|---|---|---|
| Gần nhau | Khoảng cách | Đường kẻ ngăn, khung | Nheo mắt đếm nhóm |
| Tương đồng | Màu, hình, cỡ | Chú thích “đây là nút” | Liệt kê các kiểu đang dùng |
| Liên tục | Trục căn, hướng | Mũi tên chỉ dẫn | Vẽ các đường căn lên bản in |
| Khép kín | Gợi ý một phần | Khung bốn cạnh | Xem ở cỡ nhỏ nhất |
| Hình và nền | Tương phản sáng tối | Viền quanh chữ | Chuyển thang xám |
Bài tập: bỏ hết khung viền
Chọn một trang có nhiều khung, đường kẻ và nền ô (một bảng giá, một trang giới thiệu dịch vụ, một thực đơn). Làm lại theo quy tắc:
- Xoá toàn bộ khung và đường kẻ ngăn.
- Chỉ dùng khoảng cách để nhóm (luật gần nhau). Khoảng giữa nhóm ít nhất gấp đôi khoảng trong nhóm.
- Căn mọi khối lên cùng hai hoặc ba trục dọc (luật liên tục).
- Chỉ được thêm lại một dạng phân tách, ví dụ một nền nhạt cho khối quan trọng nhất.
- So hai bản. Đếm số phần tử trang trí đã bỏ được.
Thường bạn sẽ bỏ được hơn một nửa số đường kẻ mà trang vẫn đọc được, và trông bớt “hành chính” đi nhiều.
Từ giờ, mỗi lần định kẻ một đường ngăn hay vẽ một khung, hãy tự hỏi: khoảng cách hoặc căn lề có làm được việc này không? Nếu có, để mắt người xem tự làm phần còn lại.
Câu hỏi thường gặp
Gestalt là gì trong thiết kế?
Gestalt là tập hợp các quy luật tâm lý mô tả cách mắt và não gom các phần tử rời rạc thành nhóm, hình và cấu trúc. Người thiết kế dùng chúng để sắp xếp thông tin mà không cần nhiều khung viền.
Có bao nhiêu luật Gestalt?
Các tài liệu liệt kê số lượng khác nhau, nhưng năm luật dùng nhiều nhất là gần nhau, tương đồng, liên tục, khép kín, hình và nền. Một số tài liệu thêm luật chung vận mệnh và luật đối xứng.
Luật nào mạnh nhất?
Luật gần nhau thường thắng khi chênh lệch khoảng cách rõ ràng. Vì thế khoảng cách là công cụ nhóm thông tin hiệu quả nhất.
Tại sao không nên dùng quá nhiều khung viền?
Khung và đường kẻ tạo thêm phần tử thị giác cạnh tranh với nội dung, làm trang rối và nặng. Phần lớn việc nhóm có thể làm bằng khoảng cách và căn lề.
Luật Gestalt có dùng được trong UX/UI không?
Có, và dùng rất nhiều: nhóm trường trong biểu mẫu, nhận diện nút cùng chức năng, căn các thẻ nội dung. Nhiều quy tắc giao diện thực chất là ứng dụng Gestalt.
