예술 스타일 선택

예술 스타일 선택 은 UI 요소에 대한 미적 방향을 계획하는 과정입니다.아트 스타일로 디자인 프로세스를 시작하는 것이 중요하며, 아트 스타일은 플레이어가 경험에서 수행할 수 있는 작업에 대한 정보를 쉽게 파악할 수 있도록 시각적 지침을 제공합니다.

참조로 샘플 레이저 태그 경험.rbxl 이 섹션의 사용자 인터페이스 커리큘럼은 경험 장르에 따라 UI 요소를 디자인하는 방법에 대한 의미 있는 결정을 보여줍니다. 지침에는 다음이 포함됩니다.

• 경험 내내 플레이어에게 전달하려는 내용에 따라 필요한 UI 요소를 식별합니다.
• 청중에게 직관적인 색상 규칙을 강화하는 색상 테마를 선택하여 장르별 색상 규칙을 강화합니다.
• 모든 화면 크기에서 해독하기 쉬운 간단한 아이콘을 개요화합니다.
• 다양한 플레이어 워크플로의 가능성에 부합하는 버튼 순서 설정
• 대상 장치에서 가독성을 보장하는 텍스트 시스템 확인.

이 섹션을 완료하면 경험 내 UI를 통해 플레이어에게 전달하려는 정보의 구조와 흐름을 디자인하는 방법을 배웁니다.

UI 요소 식별

UI에 대한 아트 스타일을 선택하는 첫 번째 단계는 대상 그룹에 전달하려는 다양한 유형의 정보에 필요한 UI 요소를 식별하는 것입니다.디자인 프로세스 시작 시 이러한 작업을 수행하는 것은 중요합니다, 왜냐하면 플레이어가 각 UI 요소와 상호작용할 위치와 시기에 따라 의미 체계 결정을 내릴 수 있고, 경험 전반에서 UI 요소를 재사용할 수 있는 위치를 계획할 수 있기 때문입니다.

게임플레이 요구 사항에 필요한 UI 요소가 무엇인지 뇌우할 수 있는 방법은 많이 있지만, 플레이어가 경험에 참여하자마자 알아야 할 사항을 시각화하는 것이 좋습니다.예를 들어, 플레이어가 샘플 레이저 태그 경험을 열 때 다음 질문을 스스로에게 할 수 있습니다:

• 경험의 목표는 무엇입니까?
• 팀에 누가 있는지 어떻게 알 수 있나요?
• 팀의 포인트를 어떻게 추적합니까?
• 블래스터를 어떻게 선택합니까?
• 레이저를 발사하는 블래스터의 위치를 어떻게 알 수 있나요?
• 모바일 기기있는 경우 내 블래스터를 어떻게 쏘나요?
• 레이저를 발사한 후, 언제 다시 발사할 수 있나요?
• 라운드를 시작할 때 어떻게 알 수 있나요?
• 내 블래스터로 누군가를 성공적으로 태그했을 때 언제 알 수 있나요?
• 적 팀이 나를 성공적으로 태그할 때를 어떻게 알 수 있나요?

이러한 질문을 사용하여 플레이어가 성공하기 위해 알아야 할 정보가 무엇인지 이해하면 샘플 레이저 태그 경험의 UI 요구 사항을 3개 범주로 분류할 수 있습니다.

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

경험의 UI 요구 사항을 카테고리로 분류하는 것은 각 그룹화 주위에 예술 스타일을 형성하여 각 카테고리가 플레이어에게 가르쳐야 하는 정보를 강화할 수 있기 때문에 도움이 됩니다.예를 들어, UI가 플레이어에게 캐릭터의 건강 상태에 관한 행동을 알려야 하는 경우, 색상 녹색 및/또는 플러스 아이콘을 우선시하는 UI 요소 스타일을 선택하여 플레이어가 신속하게 자신의 기능을 인식할 수 있도록 할 수 있습니다.

경험의 UI 요구 사항을 카테고리로 정렬한 후, 각 카테고리의 요구 사항을 충족하기 위해 필요한 UI 요소 목록을 만들 수 있습니다.시연을 위해 샘플 레이저 태그 경험은 다음 표의 UI 요소를 사용하여 이전 목록의 잠재적 플레이어 질문을 처리합니다.이 자습서를 진행하는 동안 UI 커리큘럼은 계속해서 이 목록을 참조하고 UI 요소의 각 범주와 관련된 주요 디자인 결정을 강조 표시합니다.

이제 경험에 대한 UI 요소 목록이 있으므로 색상 테마를 시작으로 각 그룹화된 UI 요소에 대한 스타일과 의미 선택을 시작할 시간입니다.

색상 테마 선택

A 색상 테마 또는 색상 팔레트는 밝은 색을 사용하여 무언가가 선택 가능한 시점을 나타내는 등 경험 내에서 일관되게 전달되는 색상의 선택입니다.UI 요소에 색상 테마를 적용하는 것은 특히 경험의 장르 내에서 색상 규칙에 의존할 때 중요합니다, 왜냐하면 플레이어가 최소한의 노력으로 귀하의 UI를 신속하게 이해할 수 있기 때문입니다.

환경 예술 커리큘럼에서 레이저 태그 환경의 각 절반은 위에서 아래로 보기에서 색상 코딩되어 맵의 어느 영역이 각 팀의 별도 스폰 영역에 가까운지 구분합니다. 민트는 맵의 왼쪽에 모여드는 팀을, 카네이션 핑크는 맵의 오른쪽에 모여드는 팀을 구분합니다.이러한 특정 색상은 보색이기 때문에 유용하며 서로 잘 대조되어 플레이어가 건설직면하는 방향과 상관없이 주변을 쉽게 스캔하고 자신을 방향 지정할 수 있습니다

>

샘플 레이저 태그 경험은 UI에서 각 팀에 관련된 정보를 강조하기 위해 이 같은 색상 테마를 사용하여 3D 공간 내의 각 플레이어의 팀 표시기 또는 화면을 덮는 팀 포인트 추적기를 강조합니다.이 일관성은 1인칭 슈팅 환경의 빠른 게임플레이 중에 플레이어가 경험의 목표에 대해 신속하게 이해할 수 있도록 돕고, 특히 플레이어가 환경을 탐색하는 동안 신속하게 결정을 내려야 하기 때문에 1인칭 슈팅 환경에서 특히 중요합니다.

자신의 경험에 색상 테마를 선택할 때, 팔로잉고려하십시오:

• 색상 테마의 강점은 플레이어가 각 색상과 기능 사이에서 빠른 정신적 연결을 할 수 있도록 돕는 데 있습니다.이러한 이유로, 색상 테마를 제한 하여 플레이어가 UI 요소와 연관시키기를 원하는 주요 정보만 강조합니다.
• 색맹이 있는 플레이어가 색상 테마의 메시지를 이해할 수 있도록 하려면 UI 요소를 구분하기 위해 색만 항상 의존하지 마십시오 .대신, 색상을 아이콘, 모양 및/또는 애니메이션과 결합하여 사용자 인터페이스가 모든 플레이어와 효과적으로 통신하도록 합니다.
• UI가 시각적으로 만족스럽기보다는 읽기 쉬워야 합니다.이러한 이유로, 3D 세계의 밝고 어두운 요소 모두에서 읽을 수 있는 색으로 간단한 UI 우선순위 를 지정합니다.

마지막 단계에서 가이드를 강조하기 위해 샘플 레이저 태그 경험은 2D 화면을 겹치는 대부분의 다른 UI 요소에 대해 검정색과 흰색의 중립 색상을 사용합니다.검정과 흰색은 서로 잘 대조되며, 화면의 나머지 부분이 색상이 풍부한 3D 환경을 표시하기 때문에 읽기 쉽습니다.

간단한 아이콘 개요

아이콘 은 경험에서 액션, 개체 또는 개념을 나타내는 상징입니다.간단하고 직관적인 아이콘을 개요화하는 것이 중요합니다, 왜냐하면 최종 결과가 플레이어가 쉽게 자신이 수행할 수 있는 작업과 당신이 전달하고 싶은 내용을 텍스트 없이 UI를 통해 쉽게 인식할 수 있도록 하기 때문입니다, 이는 화면을 어지럽히고 중요한 콘텐츠에서 주의를 끌 수 있습니다.대상이 모바일 장치의 작은 화면을 사용하여 경험에 액세스하는 경우 이 프로세스는 더욱 중요합니다.

간단한 아이콘은 이상적으로 3D 요소와는 구별되는 스타일을 가지고 있으면서도 여전히 경험의 전체 세계를 칭찬합니다.예를 들어, 환경 미술 커리큘럼의 최종 환경에서 모듈러와 프로프 3D 자산은 부드럽고 둥근 모서리가 있는 직사각형 형태를 사용하는 깨끗하고 고도의 기술 미술 스타일을 사용합니다.바닥을 따라 평면화된 패널에서 천장의 거의 원형 창문까지, 아무것도 날카로운 가장자리를 포함하지 않습니다.

이 튜토리얼에서 나중에 배울 모든 UI 요소는 환경의 3D 자산의 모양 언어와 일치하지 않는 미래 지향적 미학과 원형 각도를 포함하여 이 예술 스타일을 보완합니다.이렇게 하면 2D와 3D 공간에서 각 아이콘의 의미가 다른 정보와 구별됩니다.

이 개념을 보여주려면 플레이어에게 화면에서 발사되는 블래스터의 위치를 알려주는 크로스헤어의 샘플 레이저 태그 경험과 모바일 장치에서 플레이어가 블래스터를 발사할 수 있는 버튼을 참조하십시오.두 아이콘 모두 전체 세계와 조화를 이루기 위해 부드러운 각도를 포함하지만, 헥사곤 및 원형 모양은 플레이어가 경험에서 아이콘을 연관시킬 수 있는 것과 구분됩니다.

자신의 경험에 대한 간단한 아이콘을 개요화할 때 팔로잉사항을 고려하십시오:

• 간단한 아이콘은 작을 때도 읽을 수 있습니다.이러한 이유로, 모바일 장치 화면에서 식별할 수 없게 되는 아이콘의 세부 정보를 제한 합니다.
• 아이콘은 플레이어의 언어에 관계없이 메시지를 전달할 수 있기 때문에 강력합니다.플레이어가 UI의 이해에 영향을 주지 않는 한, 불필요한 텍스트를 아이콘으로 교체하여 지역화 노력을 개선하세요.
• 동일한 장르의 많은 경험은 강도를 나타내는 검 아이콘이나 마법을 나타내는 컵과 같이 스타일적으로 유사한 아이콘을 사용합니다. 경험의 장르 내에서 상징을 받아들이십시오 그래서 플레이어가 추가 지침 없이 아이콘을 이해할 수 있습니다.

경험의 장르 내에서 어떤 아이콘 유형이 일반적인지 모르는 경우 게임 UI 데이터베이스를 확인하십시오.UI 디자이너를 위한 무료 리소스 도구에는 디자인 프로세스 중에 참조할 수 있는 수백 개의 다양한 장르의 게임 스크린샷이 포함되어 있습니다.

상호 작용 순서 설정

상호 작용 순서 는 사용자가 귀하의 UI와 가질 수 있는 상호 작용 시퀀스입니다. 화면에 종종 상호 작용할 수 있는 여러 UI 요소가 있으므로 플레이어가 다양한 워크플로를 탐색하면서 결정을 내리는 데 도움이 되도록 직관적인 상호 작용 순서를 설정하는 것이 중요합니다.

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

• 주요 상호 작용 – 플레이어가 가장 가능성 있게 수행하는 행동.
• 보조 상호 작용 – 플레이어가 기본 액션대안으로 수행할 가능성이 높은 작업.
• 3차 상호 작용 – 플레이어가 수행할 가능성이 가장 적은 행동.

각 상호 작용 유형에는 플레이어가 액션수행할 가능성에 따라 다른 수준의 시각적 강조가 있어야 합니다.이 개념을 설명하기 위해, 작업 흐름에서 샘플 레이저 태그 경험에서 블래스터를 선택하기 위한 상호 작용 순서의 다음 이미지를 살펴보겠습니다. A는 주요 상호 작용을 나타내고, B는 보조 상호 작용을 나타내며, C는 세 번째 상호 작용을 나타냅니다.

이 워크플로에서 플레이어가 가장 가능성 있게 수행할 작업은 두 가지 유형의 블래스터 중에서 선택하는 것이므로 블래스터 버튼은 디자인의 다른 상호 작용 가능한 요소보다 훨씬 큽니다.이러한 시각적 강조 수준은 플레이어의 주의를 끌고 전체 UI 요소의 중앙으로 눈을 끌어옵니다.플레이어가 결정을 내린 후, 워크플로의 논리적 다음 단계는 선택을 확인하고 라운드를 시작하는 것입니다.이러한 이유로 SELECT 버튼은 주 상호 작용 아래에 직접 있습니다.

불가능하지만, 플레이어는 선택한 블래스터 버튼 중 하나를 통해 사용하려는 블래스터를 커뮤니케이션할 수 있다는 것을 알지 못할 수도 있습니다.이 상황을 돕기 위해, 플레이어가 선택 사이를 순환할 수 있는 두 개의 화살표 세컨더리 버튼이 있습니다.이 버튼은 주요 및 보조 상호 작용 요소보다 미묘하고 훨씬 작지만, 수행할 수 있는 작업에 대해 플레이어에게 방향을 제공해야 하는 플레이어에게도 감지할 수 있습니다.

이러한 주, 보조 및 삼차 상호 작용을 다른 상호 작용 순서에 배치하면 선택 버튼을 왼쪽 화살표 버튼과 바꾸는 것처럼, 플레이어는 선택해야 할 순서에 대한 명확한 방향을 잃게 됩니다.이러한 이유로, 버튼 순서의 시각적 강조에 더해, 효과적인 워크플로는 위에서 아래로 및 왼쪽에서 오른쪽처럼 플레이어가 정보를 스캔할 가능성이 높은 순서에 따라 플레이어를 안내하는 시각 계층 을 따릅니다.

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

• 플레이어는 액션을 수행하기 위해 언제 귀하의 UI와 상호작용할 수 있는지에 대한 명확한 이해가 필요합니다.이러한 이유로, 대화형 UI 요소(예: 개요를 표시하거나 버튼의 크기, 색상 또는 애니메이션을 변경할 때 초점에 있음)에 대해 적어도 하나의 시각적 피드백 형식을 제공하는 것이 좋습니다. For this reason, it's recommended to provide at least one form of visual feedback for interactable UI elements, such as displaying an outline or changing a button's size, color, or animation when it's in focus.
• 상호 작용 가능한 UI 요소의 레이블이 동일한 워크플로에서 모호하거나 서로 유사하면 플레이어가 작업이나 프로세스를 완료하는 방법을 오해할 수 있습니다.부정적인 플레이어 경험을 피하려면 명확하고 지우다서로 구별되는 레이블을 만듭니다 .
• 상호 작용 가능한 UI 요소가 너무 크면 화면의 다른 중요한 정보에서 방해받을 수 있습니다.반대로, 너무 작으면 읽기가 어렵거나 선택하기 어려울 수 있습니다, 특히 모바일 장치에서 가까이에 있는 경우.이러한 이유로, 다양한 화면 크기에서 상호 작용할 수 있는 UI 요소의 크기를 검토하는 것이 중요합니다 **** .

In Studio에서 구현 , 당신은 어떤 장치를 사용하여 경험에 액세스하든 간에 UI 요소가 특정 비율을 유지하도록 하기 위해 UIAspectRatioConstraint 개체를 사용하는 방법을 배울 것입니다.디자인 프로세스를 더 쉽게 만드는 것 외에도, 이 기술은 웹 콘텐츠 액세스성 가이드라인의 터치 대상 크기 및 간격 권장 사항을 충족하여 모바일 장치에서 최소 9x9mm의 상호 작용 가능한 UI 요소 터치 영역을 생성하는 데 도움이 될 수 있습니다.

텍스트 시스템 결정

A 텍스트 시스템 은 "항상 대담한 제목"이나 "건강 상태 통계를 참조할 때 녹색 글꼴을 사용"과 같이 UI의 모든 단어에 대한 글꼴과 스타일 규칙의 집합입니다. 디자인 프로세스 초기에 텍스트 시스템을 결정하면 플레이어가 필요한 정보를 검색할 때 일관되게 적용할 수 있는 구조를 갖게 되므로 플레이어가 필요한 정보를 검색할 때 기대할 수 있습니다.

텍스트 시스템은 경험의 장르나 3D 세계 요구 사항에 따라 다를 수 있지만, 모든 텍스트 시스템이 따라야 하는 가장 중요한 규칙은 모든 UI 텍스트가 명확하고 읽기 쉽도록 하는 것 입니다.이 규칙을 텍스트 시스템과 관련된 모든 결정의 기반으로 사용하여 플레이어가 읽는 UI에서 플레이어가 텍스트와 상호작용할 수 있는 다양한 방법을 고려하여 액세스성과 사용자 경험을 향상시킬 수 있습니다. 예를 들어:

• 장치 플레이어가 경험에 액세스하는 데 사용할 수 있는 장치.
• 플레이어가 지역화된 텍스트를 읽을 수 있는 언어.
• 화면에 표시된 텍스트 뒤에 있을 수 있는 가능한 기본 배경.

예를 들어, 플레이어가 태그되었을 때의 다음 화면 응답 디자인은 플레이어의 기기따라 더 작거나 더 큰 글꼴 크기로 확장되며, 영어 텍스트의 양쪽에 충분한 공간이 포함되어 더 긴 번역을 가진 언어를 읽을 수 있으며, 배경에 어떤 색이 있든 상관없이 플레이어가 텍스트를 읽을 수 있도록 대조되는 배경이 포함됩니다.

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

• 배경의 소음과 섞여서 텍스트를 읽기 어렵습니다.UI의 가독성을 향상시키려면 대조되는 색이나 스트로크로 텍스트를 표시하십시오 .
• 다른 장치에 대해 텍스트를 확장하지 않으면 텍스트가 너무 많은 공간을 차지하거나 플레이어의 화면에서 작아지고 독해할 수 없게 됩니다.텍스트에서 불일치를 검색하려면 디자인 프로세스 내내 여러 디바이스에서 디자인 테스트 를 수행하십시오.
• 단어는 다른 언어로 지역화할 때 원래 디자인을 넘어서 확장될 수 있습니다.디자인의 구성을 개선하려면 텍스트가 화면에 차지할 수 있는 가장 많은 공간을 참조하십시오 .
• 일부 서체는 경험의 미학에 맞출 수 있지만, 대량으로 읽기가 어려울 수 있습니다.이러한 이유로, 타이틀이나 경고 텍스트와 같이 스타일화된 텍스트를 적게 사용합니다 .

UI의 아트 스타일 계획이 있으면 다음 섹션의 튜토리얼로 이동하여 다양한 플레이어 워크플로에서 각 요소의 레이아웃을 어떻게 와이어프레임할지 배울 수 있습니다.