아트 스타일을 선택하십시오

아트 스타일을 선택하는 것은 아름다운 디자인 방향을 위한 계획 프로세스입니다. 아트 스타일은 시각적 지향 요소에 대한 아름다운 디자인 방향을 계획하는 프로세스입니다. 디자인 프로세스를 시작하려면 아트 스타일을 시작하는 것이 중요하며, 아트 스타일은 플레이어가 경험에서 무�

참조용으로 사용자 인터페이스 튜토리얼.rbxl 파일을 사용하는 경우, 이 사용자 인터페이스 튜토리얼의 이 섹션에서는 사용자 인터페이스 요소를 디자인하는 방법에 대한 의미 있는 결정을 내리는 방법을 보여줍니다, 포함 가이드 대로:

• 경험 내내 플레이어에게 전달할 내용에 따라 필요한 UI 요소를 식별합니다.
• 청중이 쉽게 이해할 수 있는 장르 지정 색상 규칙을 재정의하는 색상 테마를 선택합니다. 색상 테마는 다음과 같습니다.
• 모든 화면 크기에서 쉽게 해독할 수 있는 간단한 아이콘을 설명합니다.
• 다양한 플레이어 워크플로에 맞는 버튼 순서 설정.
• 대상 장치에 가독성을 보장하는 텍스트 시스템을 결정합니다.

이 섹션을 완료하면 플레이어를 통해 커뮤니케이션하려는 정보의 구조 및 흐름을 디자인하는 방법을 배울 수 있습니다.

UI 요소 식별

UI 스타일을 선택하는 첫 번째 단계는 대상 콘텐츠를 전달하기 위해 필요한 UI 요소를 식별하는 것입니다. 디자인 과정의 시작 단계에서 이 작업을 수행하는 것이 중요하며, 이를 통해 사용자가 각 UI 요소에 대해 범주화할 수 있으므로 세미오�

게임 플레이 요구 사항에 필요한 UI 요소는 많지만, 시작하려면 플레이어가 경험에 참여하는 즉시 알아야 할 내용을 시각화하는 것이 좋습니다. 예를 들어, 플레이어가 샘플 레이저 태그 경험을 열면 다음과 같은 질문을 스스로에게 할 수 있습니다.

• 경험의 목적은 무엇입니까?
• 누가 내 팀에 있는지 어떻게 알 수 있나요?
• 팀의 포인트를 추적하려면 어떻게 해야 하나요?
• 블래스터를 선택하는 방법?
• 레이저가 어디에서 발사되는지 어떻게 알 수 있습니까?
• 내가 모바일 기기있다면, 내 블래스터를 어떻게 쏘나요?
• 레이저를 쏠 때 다시 쏠 수 있는 시간은 언제입니까?
• 라운드를 시작할 때 알 수 있습니까?
• 블래스터로 누군가에게 성공적으로 태그했을 때 알 수 있습니다.
• 적 팀이 내가 성공적으로 태그되었음을 어떻게 알 수 있나요?

이 질문을 사용하여 플레이어가 성공하기를 원하는 정보를 이해하려면 샘플 레이저 태그 경험의 UI 필요를 세 가지 범주로 정렬할 수 있습니다.

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

경험의 UI 필요를 카테고리로 구분하는 것이 좋습니다. 각 그룹화 주위에 대한 아트 스타일을 형식화하여 플레이어가 각 카테고리에 필요한 정보를 강화할 수 있습니다. 예를 들어, 플레이어가 캐릭터의 건강 상태에 대한 작업을 수행할 수 있도록 하는 아

경험의 UI 요구 사항을 카테고리로 정렬한 후 요구 사항에 맞는 UI 요소 목록을 만들 수 있습니다. 샘플 레이저 태그 경험은 이 목록에 대해 각 범주의 요구 사항을 해결하기 위해 필요한 UI 요소를 다음 표에 나열합니다. 이 튜토리얼을 통해

이제 경험에 대한 UI 요소 목록을 확보한 시점에서 각 UI 요소 그룹에 대해 스타일과 의미에 대한 선택을 시작하는 시간입니다. 색상 테마를 시작으로 하여 모든 그룹의 UI 요소를 만들기 시작합니다.

색 테마를 선택하십시오

색 테마는 플레이어가 경험에서 선택할 수 있는 메시지를 일관된 방식으로 표시하는 데 사용되는 색의 선택입니다. 예를 들어, 밝은 색을 사용하여 항목을 선택할 수 있음을 나타내는 데 사용됩니다. 색 테마를 UI 요소에 적용하는 것이 중요합니다. 특히 경

In the 환경 예술 교육 , 레이저 태그 환경의 각 반은 색상 코딩된 상단에서 아래로 뷰를 통해 맵의 어느 구역이 �

샘플 레이저 태그 경험은 3D 공간 내의 각 플레이어 팀 표시기 및 팀 포인트 트래커와 같은 정보에 대해 동일한 색 테마를 사용하여 UI에서 정보를 강조하여 플레이어가 체험의 목표에 대해 신속하게 이해할 수 있습니다. 이

자신의 경험에 대한 색 테마를 선택할 때 팔로잉고려하십시오.

• 색 테마의 강도는 플레이어가 각 색과 기능 간에 빠른 정신적 연관성을 만드는 것에 달려 있습니다. 이 때문에 색 테마를 색 요소와 함께 사용하는 것을 제한하십시오 , 플레이어가 유기적인 경험을 구축하도록 하기 위해 키 정보만 표시하십시오.
• 색 눈멼증자를 가진 플레이어가 색 테마의 메시지를 이해할 수 있도록 하려면, 색 전용 태그가 아닌 모든 색을 구분하려면 색과 이미지 요소 사이를 연결하는 데 색과 아이콘, 모양 및/또는 애니메이션을 결합하십시오 를 사용하세요. 대신, 색 및 아이콘, 모양 및/또는 애
• 사용자 인터페이스가 미적으로 즐겁지 않더라도 읽기 쉬워야 합니다. 이 때문에 색상이 명확하고 밝은 요소와 어둡고 진한 요소 모두에서 읽기 쉬운 최소 색상 유지를 사용합니다.

마지막 항목에 대한 가이드를 강조하기 위해 샘플 레이저 태그 경험은 2D 화면을 덮는 거의 모든 다른 UI 요소에 대해 중립적인 색상의 검은색 및 하얀색을 사용합니다. 블랙 앤 화이트 콘트라스트는 서로 잘 읽기 쉽고, 나머지 화면 영역에 대해 3D 환경을 컬

간단한 아이콘 윤곽선

경험에서 액션, 개체 또는 개념을 나타내는 아이콘은 기호입니다. 단순하고 직관적인 아이콘을 작성하는 것이 중요하지 않은 경우 결과는 플레이어가 쉽게 알 수 있도록 텍스트를 사용하지 않고 경험을 통해 무

간단한 아이콘은 일반적으로 경험의 전반적인 세계를 보완하면서 여전히 3D 요소와 독립적인 스타일을 가질 수 있습니다. 예를 들어, 환경 예술 교육의 최종 환경에서 모듈 및 프로 3D 자산 모두 직사각형 모

이 예술 스타일을 보완하면서 여전히 독특하게 유지하려면 이 튜토리얼에서 나중에 만들 모든 UI 요소에는 모양 언어가 아닌 미래형 아름다움과 둥근 각도가 포함되어 있습니다. 이렇게 하면 모든 아이콘의 의미가 2D 및 3D 공간의 다른 정보와 별개입니다.

이 개념을 시연하려면 플레이어가 화면에서 블래스터를 쏠 위치를 표시하는 샘플 레이저 태그 경험의 두 개의 이미지를 참조하십시오. 두 아이콘 모두 플레이어가 화면에서 쏠 위치를 표시하는 블래스터의 샷을 표시하고 플레이어가 화면에

간단한 아이콘을 자신의 경험에 대해 설명할 때 팔로잉고려하십시오.

• 간단한 아이콘은 작은 크기일 때에도 읽기 좋습니다. 이 때문에 모바일 장치 화면에서 인식할 수 없게 되는 아이콘 세부 정보 제한 이 있습니다.
• 아이콘은 플레이어의 언어에 관계없이 메시지를 전달할 수 있기 때문에 강력합니다. 플레이어의 이해를 향상하기 위해 필요한 텍스트를 아이콘으로 교체 하여 로컬화 노력을 개선하십시오.
• 같은 장르의 많은 경험에서는 강도를 나타내는 검 아이콘이나 마법을 나타내는 컵과 같은 스타일적으로 유사한 아이콘을 사용합니다. 경험의 장르 내에서 아이콘을 사용하여 플레이어가 아이콘을 이해할 수 있도록 하세요. 이를 통해 플레이어가 추가 가이드 없이 아이콘

경험의 장르에 대해 어떤 아이콘 유형이 일반적인지 알지 못하면 게임 UI 데이터베이스를 확인하십시오. 이 무료 리소스 도구 도구는 디자인 과정에서 참조할 수 있는 수백의 게임 장르의 스크린샷을 포함합니다.

상호 작용 순서 설정

상호 작용 순서는 플레이어가 화면에서 상호 작용할 수 있는 시퀀스입니다. 화면에 여러 개의 상호 작용 가능한 UI 요소가 있기 때문에 플레이어가 다양한 워크플로를 탐색하는 동안 유저가 결정을 내리는 데 도움이 될 수 있도록 직관적인 상호 작용 순서를 정립하는 것이 중요합니다.

워크플로에는 일반적으로 세 가지 종류의 상호 작용이 있습니다.

• 주 상호 작용 – 플레이어가 가장 아마 수행할 작업.
• 보조 작업 – 플레이어가 주 액션대체로 수행할 가능성이 높은 작업입니다.
• 셋째 상호 작용 – 플레이어가 가장 적절하지 않은 작업입니다.

각 상호 작용 유형에는 플레이어가 액션수행할 가능성에 따라 다른 시각적 강조 수준이 있어야 합니다. 이 개념을 설명하기 위해 워크플로우에서 작업을 수행하는 플레이어를 대표하는 다음 이미지의 상호 작용 순서를 검토하십시오.

이 워크플로에서 플레이어가 가장 확률이 높은 작업을 수행할 가능성이 가장 높은 두 가지 유형의 블래스터 중에서 선택하는 것입니다. 따라서 이 워크플로의 다른 모든 상호 작용 요소는 플레이어의 시선을 중��

불가능하지만, 플레이어는 그들이 사용할 블래스터 버튼 중 하나를 선택할 수 있다는 것을 알지 못할 수 있습니다. 이 상황을 돕기 위해, 플레이어는 선택 항목 간에 순환할 수 있는 화살표 셋째 버튼을 사용할 수 있습니다. 이 버튼은

이러한 주요, 보조 및 셋째 상호 작용을 다른 순서로 배치하면 플레이어가 선택 버튼을 왼쪽 화살표 버튼과 바꾸는 경우 순서에 대한 명확한 방향이 없습니다. 이 때문에 버튼 순서가 아닌 시

자신의 경험에서 워크플로 대상에 대한 상호 작용 순서를 정의할 때 팔로잉고려하십시오.

• 플레이어는 상호 작용 할 때 사용자 인터페이스에 대한 명확한 이해가 필요하므로 이 문서에서는 상호 작용 가능한 사용자 인터페이스 요소에 대한 최소 한 가지 형태의 시각적 피드백을 제공하는 것이 좋습니다. 이 때문에 캐릭터가 포커스 상태일 때 윤곽을 표시하거나 버튼 크
• 상호 작용 가능한 UI 요소의 레이블이 서로 다른 워크플로에서 유사하거나 혼동하면 플레이어는 동작이나 프로세스를 완료하는 방법을 잘못 이해할 수 있습니다. 부정적인 플레이어 경험을 피하려면 레이블을 만들어 지우다간결하며 서로 다른 레이블을 만듭니다. .
• 상호 작용 가능한 UI 요소가 너무 크면 다른 중요한 정보를 화면에서 멀리 떨어뜨릴 수 있습니다. 반대로, 너무 작으면 화면에 가까이 있는 모바일 장치에서 읽기 어렵거나 선택하기 어렵습니다. 이 때문에 상호 작용 가능한 UI 요소의 크기를 평가하

In Studio에서 구현 에서, 특정 측정 단위를 사용하여 모바일 플레이어가 경험에 액세스하는 것이 어떤 디바이스에서든 특정 측정 단위 비율을 유지하는 방법을 배우게 됩니다. 디자

텍스트 시스템 결정

텍스트 시스템은 모든 단어의 글꼴 및 스타일에 대한 규칙 집합입니다. 예를 들어 "항상 베이드 헤더"나 "건강 통계 참조 시 녹색 글꼴 사용"과 같이 사용자 경험의 초기 단계에서 텍스트 시스템을 구성하면 �����

텍스트 시스템은 경험의 장르나 3D 세계 요구 사항에 따라 다를 수 있지만, 모든 텍스트 시스템이 따라야 할 가장 중요한 규칙은 모든 텍스트 텍스트가 명확하고 쉽게 읽을 수 있도록 하는 것입니다. 이 규칙을 기반

• 장치 플레이어는 경험에 액세스하는 데 사용할 수 있습니다.
• 플레이어가 로컬화된 텍스트를 읽을 수 있는 언어입니다.
• 온-스크린 텍스트 뒤에 있는 가능한 배경 배경입니다.

예를 들어, 플레이어가 태그 아웃될 때 다음 화면 응답 크기는 플레이어의 기기따라 작거나 더 큰 글꼴 크기로 조정되며, 플레이어가 번역을 더 길게 사용하는 경우 영어 텍스트의 양쪽에 충분한 공간을 포함하고, 배경 색상이 변경된 경우 플레이어가 텍스트를 읽을

자신의 경험에 대한 텍스트 시스템을 결정할 때 팔로잉고려하십시오.

• 텍스트는 배경 색상과 섞여 있기 때문에 읽기 어렵습니다. 레이아웃의 가독성을 개선하려면 텍스트를 대비 색상 위에 표시하거나 윤곽선으로 표시하십시오.
• 텍스트를 다른 장치에 맞게 확장하지 않으면 텍스트가 너무 많은 공간을 차지하거나 플레이어의 화면에서 작게 쪼개지게 됩니다. 텍스트의 일관성을 테스트하려면 디자인 과정 전반에 걸쳐 여러 장치에서 테스트하기 를 권장합니다.
• 단어는 원래 디자인을 다른 언어로 로컬화할 때 원래 디자인을 초과할 수 있습니다. 디자인 구성을 개선하려면 화면에 얼마나 많은 공간을 차지하는지 참조하십시오. .
• 일부 서체는 경험의 아름다움에 적합하지만 대량으로 읽기가 어려울 수 있습니다. 이 때문에 타이틀이나 경고 텍스트와 같은 스타일리시 텍스트를 사용하는 것이 좋습니다. 서체를 적절하게 사용하십시오. UI의 아트 스타일 계획을 완료하면 튜토리얼의 다음 섹션으로 이동하여 각 요소의 레이아웃을 배포하는 방법을 배울 수 있습니다.