Hướng dẫn phát triển console

Với 200M+ người chơi Xbox và PlayStation, các bảng điều khiển mang lại cơ hội lớn để thu hút nhiều người dùng hơn.So với các thiết bị thông thường, thiết kế cho điều khiển và trải nghiệm UI 10 feet của bảng điều khiển có một số hướng dẫn đặc biệt mà bạn cần tuân theo để giúp trải nghiệm của bạn thành công trên bảng điều khiển.

Các trải nghiệm được thiết kế cho các bảng điều khiển luôn cần phải cung cấp Thông tin chính xác về sự chính xác nội dung để đảm bảo phát hành mượt mà và giảm thiểu rủi ro bị xóa khỏi các bảng điều khiển.

Thiết kế cho điều khiển

Trải nghiệm bảng điều khiển nhận lệnh từ người dùng thông qua điều khiển nhập, yêu cầu các thiết kế đặc biệt để tương tác mượt mà.

Giản đơn UI

Áp dụng các điều sau đây để đơn giản hóa thiết kế UI cho các bảng điều khiển:

Kiểm soát điều hướng truy cập : Điều hướng cơ bản, bao gồm bốn hướng, chọn và quay lại, kiểm soát cách người dùng di chuyển và tương tác với nội dung của bạn trên các bảng điều khiển.Hãy chắc chắn rằng người dùng có thể truy cập tất cả các thành phần UI bằng các điều khiển điều hướng cơ bản này, để họ có thể dễ dàng truy cập mọi phần tương tác trong trải nghiệm của bạn.
Chuyển hướng điều khiển mặc định : Mặc dù người dùng có thể truy cập menu UI bằng cách kích hoạt con trỏ ảo, vì không phải tất cả người dùng đều quen thuộc với quá trình, bạn cần hỗ trợ điều hướng điều khiển của UI là lựa chọn mặc định thay vì yêu cầu người dùng kích hoạt con trỏ ảo.
Phức tạp đầu vào điều khiển tối thiểu : Không giống như các phương pháp nhập có thể nhấp hoặc nhấp vào, người dùng bảng điều khiển di chuyển bằng cách nhấn một nút tại một lúc, do đó một hành động di chuyển một lần trên các thiết bị khác có thể mất thêm hành động với một điều khiển.Hãy chắc chắn rằng các hành động chính trong trải nghiệm của bạn chỉ cần vài di chuyển để truy cập.
Không có cửa sổ trò chuyện : Bất kể bạn sử dụng hệ thống trò chuyện văn bản mặc định trong kinh nghiệm hay nhánh hệ thống trò chuyện lỗi thời làm hệ thống trò chuyện tùy chỉnh của bạn, vô hiệu hóa cửa sổ trò chuyện cho kinh nghiệm bảng điều khiển.

Vì các điều khiển không chỉ dành cho các bảng điều khiển và VR mà còn có sẵn trên các thiết bị như máy tính xách tay và di động, giảm số lượng di chuyển cần thiết có thể cải thiện giao diện người dùng cho tất cả các thiết bị và loại nhập khác ngoài PlayStation và Xbox.

Thêm kiểm soát bổ sung

Không giống như điện thoại và máy tính xách tay, điều hướng luôn tuần tự trên các bảng điều khiển, vì vậy người dùng không thể nhảy nhanh giữa các yếu tố ở xa như trên các thiết bị khác.Để cải thiện tốc độ điều hướng, hãy xem xét thêm các nút và lối tắt cho các hành động quan trọng trong trải nghiệm.

Hỗ trợ biểu tượng nút dinamik

Khi kinh nghiệm của bạn mở rộng sang nhiều nền tảng hơn, hãy chắc chắn để hiển thị biểu tượng nút phù hợp với các thiết bị khác nhau.UserInputService có hai phương pháp có sẵn có thể đạt được điều này:

UserInputService:GetStringForKeyCode() có thể chuyển đổi các mã chìa khóa truy vấn của Hoa Kỳ thành bố trí bàn phím console.Nó hữu ích để hiển thị tài sản tùy chỉnh của bạn như biểu tượng nút để phù hợp với trông và cảm giác của trải nghiệm của bạn.Ví dụ sau đây cho thấy cách bạn có thể đánh dấu tài sản tùy chỉnh cho Enum.KeyCode.ButtonA :

Bản đồ các tài sản tùy chỉnh
local UserInputService = game:GetService("UserInputService")
local imageLabel = script.Parent
local key = Enum.KeyCode.ButtonA

local mappings = {
    ButtonA = "rbxasset://BUTTON_A_ASSET", -- Thay thế bằng với tài sản ButtonA mong muốn
    ButtonCross = "rbxasset://BUTTON_CROSS_ASSET" -- Thay thế bằng tài nguyên ButtonCross mong muốn
}

local mappedKey = UserInputService:GetStringForKeyCode(key)
local image = mappings[mappedKey]

imageLabel.Image = image

UserInputService:GetImageForKeyCode() trả về biểu tượng mặc định của Roblox cho mã khóa yêu cầu như thay thế dễ dàng, giống như ví dụ sau đây cho bản đồ Enum.KeyCode.ButtonA hiển thị:

Bản đồ các biểu tượng mặc định
local UserInputService = game:GetService("UserInputService")
local imageLabel = script.Parent
local key = Enum.KeyCode.ButtonA

local mappedIcon = UserInputService:GetImageForKeyCode(key)
imageLabel.Image = mappedIcon

Cung cấp phản hồi haptic

Một lợi thế duy nhất của các điều khiển là khả năng cung cấp phản hồi haptic bằng cách rung vật lý điều khiển để kích hoạt cảm giác chạm của người dùng.Bạn có thể sử dụng HapticService để nâng cao sự tham gia của người dùng và cung cấp phản hồi hữu ích.Ví dụ có thể trở nên sâu sắc hơn với phản hồi haptic bao gồm:

Sự kiện gay cấn về vật lý, chẳng hạn như những vụ nổ hoặc va chạm.
Sự kiện yêu cầu sự chú ý của người dùng, chẳng hạn như một chiếc chuông cửa hoặc một khách hàng mới bước vào cửa chọn mua.
Thông báo hành động UI, chẳng hạn như cuộn đến cuối danh sách hoặc nhấp vào nút bị vô hiệu hóa.

HapticService Cũng cho phép bạn kiểm soát các động cơ riêng lẻ trong một điều khiển để đặt độ mạnh và thời gian rung riêng lẻ, do đó bạn có thể đặt các rung khác nhau cho các mục đích khác nhau và duy trì sự nhất quán với các hành động kích hoạt phản hồi.Thiết kế haptics cẩn thận và tránh lạm dụng, vì người dùng có thể thấy rung chuyển liên tục khó chịu và khó chịu.

Xây dựng cho trải nghiệm 10ft

Khi ở trên các bảng điều khiển, người dùng thường ngồi cách màn hình 10 feet.Một yếu tố thước đo 1.5x đảm bảo rằng UI thoải mái, dễ dàng di chuyển và có phông chữ dễ đọc.

Xem xét khu vực an toàn TV

An example illustration showing the dimensions of the TV-safe and unsafe zone. — Khu vực xanh dương đại diện cho khu vực không an toàn TV.

Vì không phải tất cả các TV hiển thị nội dung hoàn toàn đến các cạnh của màn hình do hạn chế lịch sử và kỹ thuật, hãy đặt các thành phần UI trong các khu vực an toàn TV để đảm bảo các yếu tố kinh nghiệm quan trọng được hiển thị trên các TV khác nhau.

Triển khai giao diện người dùng có kích thước năng động

Thực hiện giao diện người dùng của bạn bằng cách sử dụng kích thước tương đối và vị trí tương đối để đo mọi thứ như phần trăm của một khung.Thêm một yếu tố thước đo vào tất cả các kích thước UI bằng cách:

Phát triển cho độ phân giải thấp hơn trước tiên.
Sử dụng vị trí tương đối và UISizeConstraint để thay đổi quy mô UI.
Tăng quy mô dựa trên các tính năng ra với GuiService:IsTenFootInterface() .
Hãy nhớ rằng các điều khiển có sẵn trên tất cả các loại thiết bị, vì vậy đừng sử dụng GuiService:IsTenFootInterface() để suy luận đầu vào điều khiển.
Thực hiện ScrollingFrame để giảm lộn xộn trên màn hình khi giao diện người dùng mở rộng.

Áp dụng tiết lộ tiến bộ

Tiết lộ tiến bộ chuyển các tính năng nâng cao hoặc hiếm khi được sử dụng sang màn hình thứ cấp.Nó là một trong những cách tốt nhất để loại bỏ giao diện người dùng của bạn và làm cho nó dễ sử dụng.Đối với UX console, thông thường và nhanh hơn để có người dùng đi vào và ra khỏi các màn hình thay vì phù hợp tất cả mọi thứ vào một màn hình như thiết kế cho máy tính để bàn.

Cung cấp phản hồi âm thanh

Không giống như giao diện máy tính hoặc di động, trên các tương tác mà thường im lặng hoặc dựa vào phản hồi haptic tinh tế, bạn có thể thêm hiệu ứng âm thanh để cải thiện tương tác bảng điều khiển.Khi người dùng di chuyển qua giao diện người dùng bằng cách sử dụng một điều khiển, hãy xem xét thêm các hiệu ứng âm thanh để xác nhận lựa chọn hoặc xem xét menu dịch chuyển tín hiệu, có thể nâng cao trải nghiệm tổng thể.

Trên trang này