Nguyên tắc Gestalt trong thiết kế UI: 8 quy luật thị giác Designer cần biết

Khi nhìn vào một màn hình, người dùng không đọc từng thành phần riêng lẻ mà tự động gom chúng thành nhóm, nhận ra quy luật và đơn giản hóa những gì phức tạp. Hiểu được cách mắt người dùng tiếp nhận thông tin chính là nền tảng để thiết kế giao diện rõ ràng và hiệu quả.

Dưới đây, Capi Demy sẽ giới thiệu 8 quy luật Gestalt phổ biến nhất trong thiết kế UI, kèm ví dụ và cách áp dụng cho website và ứng dụng di động.

Nguyên tắc Gestalt là gì?

Nguyên tắc Gestalt (Gestalt principles) là tập hợp các quy luật tâm lý học mô tả cách con người nhóm các yếu tố tương tự, nhận diện khuôn mẫu và đơn giản hóa hình ảnh phức tạp. Thuật ngữ này xuất phát từ trường phái tâm lý học Gestalt của Đức vào đầu thế kỷ 20, với ý tưởng cốt lõi: tổng thể được nhìn nhận khác với tổng các phần riêng lẻ.

Trong thiết kế UI, các nguyên tắc Gestalt giúp bạn sắp xếp thành phần sao cho người dùng hiểu ngay đâu là một nhóm, đâu là nội dung chính và đâu là nơi cần tương tác, mà không cần giải thích thêm.

Nếu nguyên tắc Gestalt cho bạn biết người dùng nhìn nhận giao diện như thế nào, thì 10 Usability Heuristics giúp bạn kiểm tra giao diện đó có thực sự dễ dùng hay không. Hai bộ nguyên tắc này thường được dùng song song trong quá trình thiết kế.

8 quy luật Gestalt trong thiết kế UI

1. Law of Similarity (Quy luật tương đồng)

Các đối tượng có chung đặc điểm như màu sắc, hình dạng hay kích thước sẽ được xem là có liên quan với nhau, có thể cùng ý nghĩa hoặc cùng chức năng.

Trên thực tế, dù nằm rải rác trên bố cục, những thành phần giống nhau vẫn được nhìn nhận là một nhóm. Đồng thời, chúng vẫn có thể thuộc về nhóm khác dựa trên vị trí.

Ví dụ: Tất cả link trong bài viết cùng màu xanh và gạch chân, người dùng sẽ hiểu ngay đâu là chữ có thể bấm. Thiết lập Kích thước chữ và Phối màu theo quy tắc 60-30-10 thống nhất cũng là cách áp dụng quy luật này.

2. Law of Proximity (Quy luật gần gũi)

Các thành phần đặt gần nhau sẽ được xem là một nhóm, có chung đặc điểm hoặc chức năng. Quy luật này có tác động mạnh hơn quy luật tương đồng và xuất hiện trong hầu hết giao diện người dùng.

UI designer thường tận dụng khoảng cách giữa các nhóm để người dùng dễ dàng phân biệt chúng. Một Grid System rõ ràng sẽ giúp bạn kiểm soát các khoảng cách này nhất quán hơn.

Ví dụ: Trong form đăng ký, nhãn đặt sát ô nhập của nó và cách xa ô nhập tiếp theo.

3. Law of Common Region (Quy luật vùng chung)

Các thành phần nằm trong cùng một vùng có ranh giới rõ ràng sẽ được nhìn nhận là một nhóm và có chung đặc điểm. Quy luật này còn mạnh hơn cả hai quy luật trên.

Bạn có thể áp dụng quy luật này khi:

• Cần tạo cấu trúc giao diện rõ ràng để người dùng tìm đúng khu vực muốn tương tác
• Cần nhóm các thành phần có chức năng khác nhau
• Không thể điều chỉnh khoảng cách giữa các thành phần

Ví dụ: Card sản phẩm gom ảnh, tên, giá và nút mua vào cùng một khung nền.

4. Law of Closure (Quy luật đóng)

Con người có xu hướng nhìn một hình chưa hoàn chỉnh thành hình hoàn chỉnh khi các đối tượng xung quanh gợi ý phần còn thiếu. Não bộ sẽ tự động “điền vào chỗ trống”.

Quy luật này thường được áp dụng khi:

• Thiết kế icon
• Tạo cảm giác liên tục khi trượt hoặc cuộn các card trên màn hình

Ví dụ: Card cuối cùng trong slider ngang chỉ hiện một nửa, người dùng hiểu ngay có thể vuốt để xem tiếp.

5. Law of Figure - Ground (Quy luật hình và nền)

Mắt người luôn tách hình ảnh thành hai lớp: “hình” (figure) là đối tượng được tập trung và “nền” (ground) là phần còn lại phía sau. Khi độ tương phản giữa hai lớp đủ rõ, người dùng sẽ biết ngay đâu là nội dung cần chú ý.

Ví dụ: Khi mở một popup (modal), phần nền phía sau được làm tối để popup trở thành “hình” nổi bật.

‍6. Law of Continuity (Quy luật liên tục)

Các thành phần được sắp xếp trên một đường thẳng hoặc đường cong sẽ được xem là có liên quan với nhau hơn so với những thành phần nằm ngoài đường đó. Mắt người cũng có xu hướng dõi theo đường dẫn này, vì vậy bạn có thể dùng nó để điều hướng thứ tự đọc, tương tự cách F-pattern và Z-pattern dẫn dắt ánh mắt người dùng.

Ví dụ: Thanh tiến trình các bước thanh toán được nối bằng một đường kẻ ngang, giúp người dùng hiểu đây là một chuỗi liên tục.

7. Law of Common Fate (Quy luật chung hướng)

Các thành phần chuyển động cùng hướng hoặc thay đổi cùng lúc sẽ được xem là một nhóm, kể cả khi chúng không đặt gần nhau hay không giống nhau. Quy luật này đặc biệt hữu ích khi bạn thiết kế animation và micro-interaction.

Ví dụ: Khi người dùng chọn nhiều email để xóa, tất cả email được chọn cùng trượt ra khỏi danh sách một lúc.

8. Law of Prägnanz (Quy luật đơn giản)

Khi gặp một hình ảnh phức tạp hoặc mơ hồ, não bộ sẽ diễn giải nó theo cách đơn giản nhất có thể, vì cách đó tốn ít công sức nhận thức nhất. Đây là lý do vì sao giao diện với hình khối rõ ràng, bố cục gọn gàng luôn dễ hiểu hơn giao diện nhiều chi tiết rườm rà.

Ví dụ: Logo Olympic gồm 5 vòng tròn đan vào nhau, nhưng chúng ta nhìn thấy 5 vòng tròn đơn giản chứ không phải một hình phức tạp.

Bài viết có tham khảo nội dung từ anh Nguyễn Văn Đức Châu – Giảng viên tại Capi Demy

Tuy nhiên

Hiểu từng quy luật Gestalt khá đơn giản, nhưng để kết hợp chúng một cách nhuần nhuyễn trên cùng một giao diện thì bạn cần thực hành qua dự án thực tế và có người góp ý.

Khóa học UI Design tại Capi Demy sẽ giúp bạn làm được điều đó!

👉 Xem chi tiết khóa UI Design và đăng ký ngay!

Chưa biết phải bắt đầu từ đâu? Xem bài viết Bắt đầu học UI/UX từ đâu: lộ trình cho người mới học hoặc so sánh các khóa học của Capi Demy.

Kết luận

Nguyên tắc Gestalt giải thích cách người dùng nhìn nhận giao diện: họ gom nhóm theo sự tương đồng, khoảng cách, vùng chung, tự điền vào chỗ trống, tách hình khỏi nền, dõi theo đường dẫn, nhận ra những gì chuyển động cùng nhau và luôn ưu tiên cách hiểu đơn giản nhất. Nắm vững 8 quy luật này, bạn sẽ chủ động dẫn dắt ánh mắt người dùng thay vì để họ tự đoán.

Hãy thử mở lại một thiết kế gần đây của bạn và áp dụng các quy luật Gestalt để kiểm tra cách sắp xếp thành phần nhé!

‍

Thông tin liên hệ tư vấn:

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website: Capidemy.com

Địa chỉ: Tầng 6, số 35 Tô Vĩnh Diện, Khương Đình, Hà Nội

‍