레이아웃 전선

레이아웃 레이아웃을 만드는 것은 다양한 워크플로에서 정보를 전달하는 구조와 흐름을 디자인하는 프로세스입니다. 이 튜토리얼의 중요한 단계는 사용자 경험 요소의 레이아웃을 반복하고, 고통 지점을 발견하고, 플레이어의 경�

참조용으로 샘플 레이저 태그 경험.rbxl 파일을 사용하는 이 섹션의 사용자 인터페이스 커뮤니티 쇼에서는 화면에 UI 요소를 구조하는 방법을 보여줍니다, 포함 가이드 라인 포함 가이드 라인 포함 가이드 라인 포함 가이드 라인 포함 가이드 라인 포함 가이드 라인 포함 가이드 라인

• 사용자가 성공적인 경험에서 필요로 하는 기능과 정보에 쉽게 액세스할 수 있도록 시각적 계층을 계획하십시오.
• Roblox의 핵심 UI 요소와 함께 Roblox의 핵심 UI 요소의 구성을 검토하기 위해 기본 모양의 블록을 사용하여 사용자 제어요소를 검토하십시오.
• 플레이어가 목표를 달성하기 위해 수행해야 하는 필수 작업에 대한 사용자 흐름 개발.

이 섹션을 완료하면 Studio에서 예술 스타일과 와이어프레임을 준수하는 UI를 구축하고 구성하는 방법을 배울 수 있습니다.

시각적 계층 계획

시각적 계층은 순위가 중요한 UI 요소를 조정하는 조직 구조입니다. 경험의 다양한 워크플로에 대해 시각적 계층을 계획하는 것이 중요하지 않은 플레이어를 성공적으로 완료하기 위해 플레이어를 설정하는 것이 중요합니다. 이는 빠른 게임 플레이 경험의 경우 플레이어가 순간 순

효과적인 시각적 계층은 플레이어가 작업 흐름을 완료하기 위해 필요한 정보와 기능을 제공하는 시각적 계층 가이드를 제공합니다. 예를 들어, 샘플 레이저 태그 경험의 시각적 계층은 플레이어가 지도를 탐색하고 적군 팀에 태그하기 위해 화면에서 자연스럽게 보이

1. 경험의 목표에 대한 정보.
2. 블래스터에 대한 정보.
3. 플레이어의 상태에 대한 정보.

이 카테고리 각각의 위치는 최종 디자인 하이라이트에 있는 화면에 표시되며 순위를 나타냅니다.The location each of these categories have on the screen in the final design highlights their order of importance:

• 첫 번째 카테고리는 상단 에 가까이 있습니다, 왜냐하면 그것은 게임에서 승리하는 방법에 가장 중요한 UI 요소를 포함합니다.
• 두 번째 카테고리는 플레이어의 관심을 3D 공간에서 작업하는 중앙 위치 근처의 대부분의 화면 공간을 차지하므로 화면 공간을 가득 채우는 데 도움이 됩니다. 게임을 플레이하는 데 가장 중요한 역할을 합니다.
• 세 번째 카테고리는 측면 근처에 있습니다, 플레이어는 게임 플레이에서 주의를 돌리지 않고 이 주변 정보를 읽을 수 있습니다.

일부 경험 장르의 경우 플레이어가 해당 워크플로 동안 플레이하는 유일한 카테고리의 정보를 표시하면 됩니다, 왜냐하면 그것은 플레이어가 성공하기를 위해 필요한 유일한 정보 유형입니다. 그러나 첫 번째 인쇄 슈팅

자신의 경험에 대한 시각적 계층을 계획할 때 팔로잉고려하십시오.

• 화면 전체에 있는 다양한 카테고리의 UI 요소를 그룹화하면 플레이어가 필요로 하는 것을 찾을 수 없습니다. 플레이어가 경험을 탐색하는 것을 도울 수 있도록 같은 카테고리의 그룹 UI 요소를 함께 .
• 한 번에 너무 많은 카테고리가 화면에 표시되면 플레이어가 주의를 기울해야 할 정보를 알 수 없습니다. 클러스터를 피하려면 UI 요소 컨텍스트를 다른 워크플로에 대해 컨텍스트별로 표시하십시오 .
• 마찬가지로, 카테고리당 너무 많은 UI 요소가 있으면 플레이어가 작업이나 프로세스를 이해하는 방법을 이해하는 것을 방해할 수 있습니다. 이 때문에 아트 스타일을 사용하여 완전한 상호 작용 명령을 위해 시각적 강조를 제공하는 것이 중요합니다.

샘플 레이저 태그 경험의 시각적 계층에 대한 자세한 검토는 다음 표에서 확인할 수 있습니다:

UI 요소 블록

이제 시각적 계층 구조를 마음에 두고 있으면 기본 모양을 사용하여 개별 UI 요소를 블록하여 Roblox의 코어 UI를 다시 검토하여 사용자 경험 레이아웃과 함께 모든 디바이스에서 사용자 인터페이스를 검토할 수 있습니다. 이 프로세스를 통해 사용자가 액세스할

시작하기 전에, Roblox의 코어 UI를 고려하여 사용자 지정 인터페이스 요소에 대해 사용 가능한 화면 공간을 알아야 합니다. 예를 들어, 기본적으로 Roblox는 모든 경험에서 다음과 같은 UI 요소를 표시합니다.

• 경험 내의 플레이어 목록.
• 캐릭터의 체력 바.
• 캐릭터의 배낭.
• 채팅 창.
• 캡처 버튼.
• 캐릭터 이모티콘 팝업 메뉴.

이러한 요소 중 하나가 게임 플레이 요구 사항을 충족하지 않으면 스크린 공간을 저장하려면 사용자 정의 UI의 인벤토리요구 사항을 해제할 수 있습니다. 예를 들어, 레이저 태그 샘플 경험은 백��

Roblox의 핵심 UI 외에, 필요한 화면 공간을 고려해야 합니다. 예를 들어, 모바일 기기사용하여 플레이어가 경험에 액세스할 때 가상 썸머리가 화면 왼쪽 하단 모서리에 표시되고, 점프 버튼이 화면 오른쪽 하단 모서리에 표

Roblox의 핵심 UI 요소를 모두 고려하여 경험의 게임플레이에 필요한 것은 Roblox 터치 제어기능을 포함하여 사용자 정의 UI 요소를 하나의 디자인 으로 블록할 수 있습니다. 이는 디바이스 간에 경험의 별도 버전을 유지할 필요 없음을 의미합니다. 이는

이 메서드를 시연하려면 샘플 레이저 태그 경험이 모바일 및 PC 장치에서 사용자 지정 UI 요소에 어떻게 표시되는지 확인하십시오. 이 이미지에는 다음이 포함됩니다.

• 사용자 정의 UI를 표시하기 위한 기본 모양 기본형 모양은 디자인이 최종 디자인에 도달하기 전에 쉽게 반복할 수 있기 때문에 사용자 정의 UI를 표시하는 데 사용됩니다.Basic shapes to represent custom UI because it allows the design to easily go through several iterations before achieving the final design.
• 눈이 많은 색 배경 환경의 책임 없이 정보를 따라갈 수 있는 회색 염색
• 채팅 창 및 활성 플레이어 목록의 채팅 창을 열고 화면에 얼마나 많은 공간을 차지하는지 확인하십시오.
• 필요하지 않은 경우에도 모바일 컨트롤을 위한 공간.

이 방식으로 레이아웃을 설계하면 플레이어 디바이스 및 워크플로에 따라 화면에 많은 UI 요소가 동시에 표시될 수 있는 미래 지향적인 레이아웃을 모든 플레이어에게 제공합니다.

레이아웃에 대한 UI 요소를 블록할 때 팔로잉고려하십시오.

• UI에서 차단하는 위치 및 방법은 레이아웃 구성에 영향을 미칠 수 있습니다. 균형과 대칭을 노리십시오 개인 사용자 인터페이스 요소의 크기와 위치에 대해 Roblox의 핵심 UI와 함께.
• 일부 모바일 및 태블릿 장치의 바닥 모서리에서 멀리 있는 UI와 상호 작용하는 것은 불편하거나 불가능합니다. 손가락으로 자연스럽게 쉬는 위치에 인터랙티브 요소를 배치하십시오. * 플레이어가 환경을 탐색할 때 3D 공간은 화면에 표시되는 모든 것을 잠식할 수 있습니다. 다양한 배경에 대해 레이아웃을 테스트하세요 를 확인하려면 화면에 표시되는 모든 것을 클리어하고 가독성을 유지하세요.

For more information on what to consider as you design and block in your UI elements for multiple devices, see 위치 및 크기 조정 - 크로스 플랫폼 요소 .

사용자 흐름 개발

사용자 흐름은 플레이어가 경험에서 작업을 완료하기 위해 이동할 수 있는 경로의 컬렉션입니다. 예를 들어, 무기를 선택하거나 아이템을 구매하거나 캐릭터를 치료하는 등의 작업을 완료하기 위해 플레이어가 이동할 수 있는 경로를 계속 시작

다음 순서 차트는 플레이어가 샘플 레이저 태그 경험에 입장하고 게임때의 사용자 흐름을 보여줍니다. 플레이어가 경험을

플레이어가 경험에서 수행할 수 있는 모든 작업에 대한 사용자 흐름을 개발하는 것이 중요합니다, 왜냐하면 이를 통해 플레이어가 작업을 완료하기를 원하는 위치와 방법을 평가할 수 있기 때문입니다. 예를 들어, 플레이어가 솔리드 태그 경험에 대해 추가 사용자 �

• 종료 조건이 충족된 전에 라운드를 종료합니까?
• 팀에 합류하는 동안 게임을 떠나야 하나요?
• 라운드 중에 전화를 받습니까?
• 15초 이하의 연결 해제를 잃을 수 있습니까?

플레이어가 작업을 완료하는 동안 플레이어에게 발생할 수 있는 모든 잠재적 작업 또는 시나리오를 시각화하면 플레이어의 UI 요소의 레이아웃이 그들의 경험에 부정적으로 영향을 미치는지 더 쉽게 결정할 수 있습니다. 작업이 직관적, 방해가 적고 편리하다면 플레이어

사용자 흐름을 개발할 때 팔로잉고려하십시오.

• 플레이어가 경험에서 할 일을 하고 그들이 원하는 일이 완전히 다를 수 있습니다. 플레이어 레이아웃을 여러 유형의 플레이어로 테스트하는 것이 좋습니다.( 테스트 유형별 플레이어 레이아웃 참조) 플레이어가 목표를 달성하기 위해 경로를 이해하는 것이 좋습니다.
• 흐름 차트는 다이어그램 내에서 여러 시나리오를 한 번에 캡처하려고 시도하면 읽기 어려워지고 효과가 없습니다. 각 태스크에 집중하려면 흐름 차트를 한 번에 하나의 주요 태스크로 제한합니다. .
• 플레이어가 터치 제어, 게임 패드 또는 컴퓨터 마우스를 사용하여 경험과 상호 작용하는지 여부에 따라 인터액션 패턴이 변경됩니다. 여러 장치에 대해 고유한 사용자 흐름을 개발하십시오. 그래서 고통 지점을 식별하고 워크플로를 간소화할 수 있습니다.

와이어프레임 디자인을 완성한 후 Studio로 이동하여 UI를 실제로 만들어 보세요.