Phân cấp thị giác trong Game UI: Dẫn mắt người chơi đúng lúc

Một khung thực hành để ưu tiên thông tin, giảm nhiễu và giúp người chơi ra quyết định nhanh hơn trong từng khoảnh khắc.

Màn hình inventory được chú thích các cấp độ phân cấp thị giác

Game UI không chỉ cần đẹp; nó phải nói đúng điều, đúng lúc và trong đúng bối cảnh. Phân cấp thị giác là cách biến hàng chục tín hiệu trên màn hình thành một lộ trình đọc tự nhiên cho người chơi.

Màn hình Thought Cabinet của Disco Elysium với nhiều tầng thông tin — **Disco Elysium — The Final Cut** Thought Cabinet phân tầng rõ chỉ số tổng quan, lựa chọn đang hoạt động, danh sách tham khảo và nội dung chi tiết dù mật độ dữ liệu cao.
Nguồn chính thức ↗

Bắt đầu từ quyết định của người chơi

Trước khi chọn font, màu hay hiệu ứng, hãy xác định quyết định quan trọng nhất mà người chơi cần đưa ra tại màn hình đó. Trong combat, đó có thể là nguy hiểm tức thời; trong inventory, đó thường là so sánh và lựa chọn vật phẩm.

Mỗi thành phần chỉ nên được nhấn mạnh tương ứng với mức độ ảnh hưởng của nó lên quyết định này. Khi mọi thứ cùng lớn, cùng sáng và cùng chuyển động, không còn gì thực sự nổi bật.

Viết một câu mô tả hành động chính của màn hình.
Xếp hạng thông tin theo mức khẩn cấp và tần suất sử dụng.
Loại bỏ tín hiệu không hỗ trợ hành động chính.

Xây ba tầng ưu tiên

Một hệ thống đơn giản gồm ba tầng thường đủ để kiểm soát phần lớn màn hình game. Tầng một dành cho hành động hoặc trạng thái cần phản hồi ngay; tầng hai chứa thông tin hỗ trợ; tầng ba giữ dữ liệu tham khảo và chi tiết trang trí.

Bạn có thể tạo khác biệt giữa các tầng bằng kích thước, độ tương phản, vị trí, khoảng trắng và chuyển động. Không nên dùng tất cả công cụ cùng lúc vì giao diện sẽ nhanh chóng trở nên ồn ào.

Tầng 1: mục tiêu chính, cảnh báo hoặc hành động đang được chọn.
Tầng 2: thông số giúp so sánh và xác nhận.
Tầng 3: mô tả bổ sung, lịch sử và thông tin ít dùng.

Kiểm tra trong bối cảnh thật

Đừng đánh giá hierarchy chỉ trên một frame Figma sạch. Hãy đặt UI lên gameplay có độ sáng, màu sắc và chuyển động gần với sản phẩm thật, sau đó thu nhỏ màn hình hoặc làm mờ mắt để kiểm tra điểm nhìn đầu tiên.

Một hierarchy tốt vẫn rõ ràng khi nội dung thay đổi, chuỗi số dài hơn và người chơi xem ở khoảng cách xa. Nếu layout chỉ hoạt động với dữ liệu mẫu đẹp, hệ thống chưa thực sự bền vững.

Kiểm tra ở kích thước hiển thị nhỏ nhất.
Thử nội dung dài, số lớn và trạng thái lỗi.
Đảm bảo màu không phải tín hiệu duy nhất truyền đạt trạng thái.

Bài tiếp theo Thiết kế Dialogue UI dễ đọc mà không phá nhịp chơi

← Quay lại bài viết