Hướng dẫn thiết kế thích ứng

Thiết kế thích ứng đảm bảo rằng các trò chơi Roblox của bạn trông và cảm thấy tuyệt vời trên nhiều kích thước màn hình, hướng và loại đầu vào khác nhau. Vượt ra ngoài những danh mục thiết bị truyền thống như di động, máy tính để bàn và console, các thiết bị ngày nay có khả năng năng động hơn nhiều, cho phép chuyển đổi liền mạch giữa các đầu vào và màn hình khác nhau. Hãy tưởng tượng một chiếc máy tính bảng hỗ trợ nhiều định hướng (ngang và dọc), nhiều loại đầu vào (cảm ứng, tay cầm, chuột và bàn phím), và nhiều kích thước màn hình (màn hình gốc và kéo dài đến một chiếc TV lớn).

Những hướng dẫn này sẽ giúp bạn cung cấp những trò chơi đẳng cấp thế giới có khả năng thích ứng thông minh với bất kỳ thiết bị và loại đầu vào nào để tiếp cận một đối tượng rộng lớn. Để biết thêm chi tiết về quy trình làm việc và API để hỗ trợ việc triển khai những hướng dẫn này, hãy xem hướng dẫn phát triển đa nền tảng.

Các nguyên tắc cốt lõi

Mỗi trò chơi đều độc đáo, nhưng theo một vài nguyên tắc chính sẽ giúp bạn cung cấp một trò chơi trực quan và hoàn thiện cho mọi người chơi, trên mọi thiết bị.

1. Tính linh hoạt của đầu vào — Đảm bảo rằng giao diện người dùng của bạn hoạt động với nhiều loại đầu vào khác nhau như tay cầm, cảm ứng, bàn phím và điều khiển VR. Điều này bao gồm việc thay đổi bố cục giao diện người dùng của bạn và cung cấp các gợi ý hỗ trợ tùy thuộc vào loại đầu vào.
2. Bố cục phản hồi — Thiết kế các bố cục giao diện người dùng tự động điều chỉnh theo các kích thước màn hình và hướng khác nhau.
3. Kích thước động — Tỷ lệ các phần tử giao diện người dùng cần thiết để phù hợp với các kích thước màn hình khác nhau.
4. Độ rõ và độ rõ thị giác — Đảm bảo rằng tất cả các thành phần giao diện người dùng, bao gồm văn bản và nút, dễ đọc và rõ ràng về mặt thị giác.

Tính linh hoạt của đầu vào

Đảm bảo rằng trò chơi của bạn cảm thấy tự nhiên trên các thiết bị đầu vào khác nhau, bao gồm tay cầm, chuột/bàn phím, cảm ứng và VR.

• Thiết kế điều khiển và phím tắt cho nhiều đầu vào — Đảm bảo rằng mọi hành động trong trò chơi của bạn có thể được kích hoạt bằng các nút tay cầm/D‑pad, phím tắt trên bàn phím và cảm ứng. Các điều khiển nên có khả năng tập trung trực quan và chức năng cho điều hướng bằng d-pad hoặc cần điều khiển. Kiểm tra từng chế độ đầu vào để đảm bảo rằng lối chơi chính, thực đơn và giao diện người dùng đều có thể truy cập và tự nhiên, bất kể thiết bị.
• Cung cấp phản hồi trực quan theo loại đầu vào — Cập nhật nhãn giao diện người dùng, lời nhắc và chú thích để phản ánh phương thức đầu vào đang hoạt động, ví dụ hiển thị Nhấn A trên tay cầm, Pinch trên cảm ứng, hoặc ShiftA trên bàn phím. Sử dụng biểu tượng và ngôn ngữ quen thuộc với người chơi mỗi nền tảng.

Bố cục phản hồi

Bố cục giao diện người dùng của trò chơi của bạn nên thích ứng với nhiều kích thước màn hình và hướng khác nhau. Trên một màn hình máy tính lớn, bạn có nhiều không gian để hiển thị tất cả các nút cùng một lúc. Tuy nhiên, trên một màn hình điện thoại nhỏ, tất cả các nút đó sẽ trông chật chội và lộn xộn.

• Thích ứng bố cục theo kích thước và định hướng màn hình — Sử dụng các mẫu phản hồi để giao diện người dùng của bạn sắp xếp lại hoặc cô đọng một cách thích hợp. Ví dụ, di chuyển các nút ít quan trọng hơn vào một menu có thể thu gọn ("hamburger"/nút menu) trên các màn hình nhỏ, trong khi hiển thị chúng đầy đủ trên máy tính để bàn. Giao diện người dùng trò chơi của bạn nên linh hoạt thích ứng với cả hai định hướng ngang và dọc nếu nó hỗ trợ chúng.
• Triển khai các thành phần bố cục phản hồi với kích thước cha — Xây dựng các bảng và widget giao diện người dùng mà điều chỉnh kích thước hoặc vị trí dựa trên container cha của chúng. Ví dụ, sử dụng bố cục chia đôi mà các bảng bên thu nhỏ lại trên các màn hình hẹp nhưng mở rộng trên các màn hình rộng hơn.

Kích thước động

Điều này liên quan đến kích thước của các phần tử giao diện người dùng của bạn, không chỉ vị trí của chúng. Giao diện người dùng của bạn nên tỷ lệ lên hoặc xuống với màn hình để mọi thứ vẫn giữ kích thước đúng và luôn dễ tương tác.

• Hỗ trợ kích thước dựa trên nội dung và tự động bọc — Triển khai các hành vi tự động điều chỉnh kích thước: cho phép các ô văn bản phát triển hoặc thu nhỏ theo nội dung, và hỗ trợ tự động bọc các dòng để nhãn không bị tràn ra hoặc trở nên khó đọc khi kích thước màn hình thay đổi.
• Phơi bày và tôn trọng sở thích truy cập/người dùng — Cho phép giao diện người dùng của bạn phản hồi theo các cài đặt tỷ lệ văn bản hoặc giao diện người dùng do người dùng chỉ định, kết nối các cài đặt đó trực tiếp với kích thước các phần tử giao diện người dùng để các sở thích truy cập tăng luôn dẫn đến giao diện người dùng lớn hơn, dễ đọc hơn.

Độ rõ & độ rõ thị giác

Người chơi có thể thực sự đọc văn bản của bạn trên một màn hình điện thoại nhỏ hoặc một chiếc TV lớn cách xa họ không? Các nút của bạn có dễ thấy hơn trên nền của thế giới 3D của bạn không?

• Chọn kích thước và kiểu chữ cho màn hình nhỏ — Luôn chọn kích thước chữ có thể đọc được trên các thiết bị di động, không chỉ máy tính để bàn. Kiểm tra trên các thiết bị thực tế và đảm bảo rằng văn bản dễ đọc ở kích thước nhỏ nhất dự kiến. Tránh các kiểu chữ quá trang trí hoặc mỏng.
• Đảm bảo độ tương phản cao và phân cấp thị giác rõ ràng — Sử dụng màu sắc cho văn bản và nền mà cung cấp đủ độ tương phản để có thể đọc được trong điều kiện ánh sáng thay đổi trong trò chơi. Sử dụng phân cấp thị giác mạnh mẽ và làm cho các hành động và nhãn chính nổi bật thông qua kích thước, màu sắc hoặc vị trí.

Những suy nghĩ cuối cùng

Tính thích ứng là về việc gặp gỡ người chơi nơi họ đang có mặt, cho dù trên tay họ, trên bàn làm việc của họ, hay trên màn hình lớn. Các nhà sáng tạo Roblox xây dựng với những hướng dẫn này cung cấp những trò chơi đa nền tảng có ý nghĩa, dễ tiếp cận và thú vị. Hãy bắt đầu thích ứng ngay hôm nay và để các sáng tạo của bạn phát triển!