콘솔 개발 지침

200M+ Xbox 및 PlayStation 플레이어와 함께 콘솔은 더 많은 사용자를 유치할 수 있는 주요 기회를 제공합니다.일반 장치와 비교하여 컨트롤러 및 콘솔의 10피트 UI 경험을 디자인하는 경우 경험이 콘솔에서 성공하도록 돕기 위해 따라야 하는 특별한 가이드라인이 있습니다.

콘솔에 설계된 경험은 항상 원활한 출시와 콘솔에서 제거되는 위험을 최소화하기 위해 콘텐츠 성숙도 정보를 제공해야 합니다.

컨트롤러 디자인

콘솔 경험은 사용자가 입력 컨트롤러를 통해 명령을 받으며, 부드러운 상호 작용을 위해 특별한 디자인이 필요합니다.

UI 단순화

다음을 적용하여 콘솔의 UI 디자인을 간소화합니다:

액세스 가능한 탐색 컨트롤 : 네 방향을 포함하는 기본선 탐색, 선택 및 뒤로 컨트롤은 사용자가 콘솔에서 콘텐츠를 탐색하고 상호작용하는 방법을 제어합니다.사용자가 이러한 기본 탐색 컨트롤을 사용하여 모든 UI 요소에 쉽게 액세스할 수 있도록 하여 경험의 모든 상호 작용 부분에 쉽게 액세스할 수 있도록 합니다.
기본 컨트롤러 탐색 : 모든 사용자가 프로세스를 익숙하게 사용하지 않기 때문에 사용자가 가상 커서를 활성화하여 UI 메뉴에 액세스할 수 있지만, 컨트롤러가 기본 옵션으로 UI의 탐색을 지원해야 하므로 사용자가 가상 커서를 활성화하도록 요구하지 않아야 합니다.
최소 컨트롤러 입력 복잡성 : 탭하거나 클릭할 수 있는 입력 방법과 달리, 콘솔 사용자는 한 번에 하나의 버튼을 누르고 탐색하므로 다른 장치에서 한 번의 이동으로 수행되는 작업이 컨트롤러로 이동할 수도 있습니다.경험의 키 작업이 액세스하기 위해 몇 번의 이동만 수행하도록 하십시오.
채팅 창 없음 : 기본 경험 텍스트 채팅 시스템을 사용하든 레거시 채팅 시스템을 사용자 지정 채팅 시스템으로 포크하든, 콘솔 경험에 대해 채팅 창을 비활성화합니다.

컨트롤러는 콘솔과 VR뿐만 아니라 데스크톱과 모바일과 같은 장치에서도 사용할 수 있으며, 필요한 이동 수를 최소화하면 플레이스테이션과 엑스박스와 같은 모든 장치와 입력 유형에 대한 UI를 향상시킬 수 있습니다.

보조 제어 추가

모바일과 데스크톱과 달리 콘솔에서는 항상 순차적으로 탐색되므로 사용자는 다른 장치에서처럼 멀리 있는 요소 사이를 신속하게 이동할 수 없습니다.탐색 속도를 향상시키려면 필수 경험 내 작업에 대한 추가 버튼과 바로가기를 추가하는 것을 고려하십시오.

동적 버튼 아이콘 수용하기

경험이 더 많은 플랫폼으로 확장되면 다른 장치와 일치하는 버튼 아이콘을 표시하는 것이 중요합니다.UserInputService에는 이것을 달성할 수 있는 두 가지 방법이 있습니다.

UserInputService:GetStringForKeyCode() 미국 쿼리 키 코드를 콘솔 키보드 레이아웃으로 변환할 수 있습니다.사용자 지정 자산을 버튼 아이콘으로 표시하여 경험의 모양과 느낌에 맞출 수 있습니다.다음 예제에서는 사용자 지정 자산을 Enum.KeyCode.ButtonA에 매핑하는 방법을 보여줍니다.

사용자 지정 자산 매핑
local UserInputService = game:GetService("UserInputService")
local imageLabel = script.Parent
local key = Enum.KeyCode.ButtonA

local mappings = {
    ButtonA = "rbxasset://BUTTON_A_ASSET", -- 원하는 ButtonA 자산으로 교체
    ButtonCross = "rbxasset://BUTTON_CROSS_ASSET" -- 원하는 ButtonCross 자산으로 교체
}

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

imageLabel.Image = image

요청한 키 코드에 대한 Roblox 기본 아이콘을 쉽게 드롭인 교체처럼 반환합니다. 매핑에 대한 다음 예제와 같이 보여줍니다:

기본 아이콘 매핑
local UserInputService = game:GetService("UserInputService")
local imageLabel = script.Parent
local key = Enum.KeyCode.ButtonA

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

하aptic 피드백 제공

컨트롤러의 유일한 이점 중 하나는 컨트롤러를 물리적으로 진동시켜 사용자의 촉감을 참여시키는 능력으로, 이를 통해 사용자의 피드백을 제공할 수 있습니다.HapticService를 사용하여 사용자 몰입도를 향상시키고 유용한 피드백을 제공할 수 있습니다.햅틱 피드백으로 더 몰입할 수 있는 예시에는 다음이 포함됩니다:

폭발이나 충돌과 같은 물리적으로 극적인 이벤트.
문 벨링이나 새로운 고객이 둘러보다들어가는 것과 같이 사용자의 주의가 필요한 이벤트.
목록 끝으로 스크롤하거나 비활성 버튼을 클릭하는 등의 UI 작업 알림.

HapticService 또한 컨트롤러의 개별 모터를 제어하여 진동 강도와 지속 시간을 개별적으로 설정하여 다양한 목적에 대해 다른 진동을 설정하고 작업이 피드백을 트리거하는 방식의 일관성을 유지할 수 있습니다.사용자가 지속적인 진동을 불쾌하고 짜증나게 찾을 수 있으므로 해킹을 신중하게 디자인하고 과도한 사용을 피하십시오.

10ft 경험을 위해 빌드

콘솔에서는 사용자가 일반적으로 화면에서 10피트 떨어져 앉습니다.1.5x의 규모 요소는 UI가 편안하고, 탐색하기 쉽고, 가독성 있는 글꼴로 구성되도록 합니다.

TV 안전 구역 고려

An example illustration showing the dimensions of the TV-safe and unsafe zone. — 파란색 영역은 TV-안전하지 않은 영역을 나타냅니다.

역사적 및 기술적 제한으로 인해 모든 TV가 화면 가장자리에 콘텐츠를 완전히 표시하지 않기 때문에, 중요한 경험 요소가 다양한 TV에서 표시되도록 TV 안전 영역에 UI 요소를 배치하십시오.

동적으로 크기가 조정되는 UI 구현

상대 크기와 상대 위치를 사용하여 UI를 구현하여 모든 것을 프레임의 백분율로 측정합니다.다음을 통해 모든 UI 크기에 규모 요소를 포함합니다: Incorporate a scale factor to all UI sizes by:

먼저 낮은 해상도를 위한 개발.
상대 위치와 UISizeConstraint를 사용하여 UI 크기 조정.
출력 특성에 따라 크기를 조정하는 방법 GuiService:IsTenFootInterface() .
컨트롤러는 모든 유형의 장치에서 사용할 수 있으므로 컨트롤러 입력을 유추하기 위해 GuiService:IsTenFootInterface()를 사용하지 마십시오.
UI가 확장됨에 따라 화면에서 혼잡을 줄이기 위해 ScrollingFrame.

진보적 공개는 고급 또는 드문 사용 기능을 보조 화면으로 연기합니다.UI를 정리하고 사용하기 쉽게 만드는 가장 좋은 방법 중 하나입니다.콘솔 UX의 경우 사용자가 모든 것을 하나의 화면에 맞추는 대신 화면에 들어가고 나가는 것이 일반적이고 더 빠릅니다. 즉, 데스크톱 디자인처럼 모든 것을 한 화면에 맞추는 것보다 사용자가 화면에 들어가고 나가는 것이 더 일반적이고 빠릅니다.

사운드 피드백 제공

데스크톱이나 모바일 인터페이스와 달리 일반적으로 침묵하거나 미묘한 햅틱 피드백에 의존하는 상호 작용에 대해 사운드 효과를 추가하여 콘솔 상호 작용을 개선할 수 있습니다.사용자가 컨트롤러를 사용하여 UI를 탐색할 때, 전체 경험을 향상시킬 수 있도록 선택 확인 또는 신호 메뉴 탐색을 위한 사운드 효과를 통합하는 것을 고려하십시오.