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

Cách tổ chức nội dung, nhịp hiển thị và thao tác để hội thoại luôn rõ ràng nhưng vẫn giữ được cảm xúc của gameplay.

Giao diện hội thoại xuất hiện phía trên một cảnh game trong khu rừng

Dialogue UI nằm giữa câu chuyện và hành động. Nếu người chơi phải vật lộn để đọc, cảm xúc bị ngắt quãng; nếu giao diện chiếm quá nhiều chú ý, thế giới game biến mất phía sau một hộp thoại.

Màn hình hội thoại Persona 5 Royal với chân dung nhân vật, tên người nói và các điều khiển — **Persona 5 Royal** Hộp thoại tách rõ chân dung, tên người nói, nội dung và các điều khiển Auto/Log, đồng thời vẫn để bối cảnh câu chuyện hiện diện.
Nguồn chính thức ↗

Thiết kế cho khoảng cách và thời gian đọc

Kích thước chữ cần được đánh giá trên thiết bị và khoảng cách chơi thật, không chỉ ở mức zoom 100% trên màn hình thiết kế. Độ dài dòng, khoảng cách dòng và độ tương phản nền quyết định người chơi có thể đọc liên tục hay không.

Hãy giới hạn lượng chữ xuất hiện trong một nhịp. Chia một đoạn dài thành các beat ngắn giúp người chơi tiếp nhận nội dung mà vẫn quan sát được nhân vật và bối cảnh.

Giữ dòng thoại ngắn và có điểm ngắt tự nhiên.
Dùng nền đủ tương phản nhưng không che toàn bộ cảnh.
Cho phép người chơi chủ động chuyển câu tiếp theo.

Tách người nói, nội dung và hành động

Tên nhân vật, lời thoại và lựa chọn phản hồi là ba lớp thông tin khác nhau. Chúng cần có vị trí và phong cách ổn định để người chơi nhận biết mà không phải học lại ở mỗi cảnh.

Khi có nhiều lựa chọn, trạng thái focus phải rõ bằng cả hình dạng lẫn tương phản. Thứ tự lựa chọn cũng cần giữ ổn định giữa chuột, bàn phím và gamepad.

Giữ vùng tên nhân vật nhất quán.
Phân biệt lời kể và lời thoại trực tiếp.
Hiển thị rõ trạng thái focus, chọn và vô hiệu hóa.

Cho người chơi quyền kiểm soát nhịp

Tốc độ đọc khác nhau giữa từng người chơi. Các lựa chọn như tăng tốc chữ, bỏ qua animation, xem lại lịch sử và tự động phát giúp hệ thống phù hợp với nhiều thói quen hơn.

Quan trọng nhất, tín hiệu tiếp tục hoặc bỏ qua phải luôn dễ tìm nhưng không cạnh tranh với nội dung chính. Một control tốt hiện diện khi cần và lùi lại khi người chơi đang đọc.

Hỗ trợ tăng tốc và hiển thị toàn bộ câu.
Cung cấp lịch sử hội thoại khi nội dung quan trọng.
Không gán bỏ qua vào thao tác dễ bấm nhầm.

Bài tiếp theo Xây dựng Design System cho Game UI có thể mở rộng

← Quay lại bài viết