사용자 인터페이스는 플레이어가 상호 작용하는 메뉴, 쇼핑 센터 레이아웃, 헤드업 디스플레이(UX) 및 기타 인터페이스를 생성하기 위해 아티스틱
UI
UI는 플레이어가 결정을 내리고 게임을 탐색할 수 있도록 하는 중요한 정보를 공유합니다. 플레이어가 결정을 내리고 게임을 탐색할 수 있도록 하는 주요 방법은 두 가지가 있습니다. 잘못 설계된 UI는 플레이어를 혼란스럽게 하고 수익 창출
- 우선 순위 지정
- 경고
- 시각적 언어
- 규칙
- 일관성
우선 순위 지정
가장 중요한 정보를 먼저 공유하는 것이 알려진 하이어 오브 정보입니다. 이것은 제한된 세트의 정보에 기초한 즉각적인 결정을 내리는 플레이어에게 매우 중요합니다. 유저 경험에 우선을 지정할 때 필수적인 정보를 확인하고 신속하게 찾을 수 있도록 하세요. 다음과
- 이 순간 플레이어가 무엇을 하고 있습니까?
- 그들이 알고 있거나 액세스해야 하는 가장 중요한 것은 무엇입니까?
- 그들은 어떤 선택을 할 수 있나요?
- 그들이 그 선택을 내리는데 필요한 정보는 무엇인가요?
- 그들은 어떤 선택에 얼마나 자주 참여합니까?
게임 내내 중요한 정보 및 기능이 변경되지만, 플레이어가 맡는 역할, 게임 세계의 위치 및 아이템을 포함한 다양한 요소에 따라 중요한 정보가 변경됩니다. UI는 컨텍스트에 따라 버튼과 정보를 교체하여 제공할 수 있습니다. 이렇게 하면 플레이어가 필
예시)
무관한 요소로 혼란과 방해를 일으킬 수 있습니다. 스킬바인드 RPG 는 모바일 인터페이스에 특히 중요한 작은 화면에 클리어하고 최소화된 UI를 가지고 있습니다, 너무 많은 버튼, 화면 및 텍스트으로 쉽게 넘쳐 버릴 수 있습니다.
In Super Striker League , 플레이어 상호 작용은 공을 제어하는 방식에 따라 변경됩니다. 공을 제어하지 않으면 플레이어는 질주하고 탭하여 통제를 회복할 수 있습니다. 이 버튼을 얻으면 버튼을 Deke로 전환하고 패스로 전환하여 플레
생존 게임에서, 생존자는 자신의 체력 및 배고픔 상태를 인식해야 하고, 맵, 인벤토리 및 도구에 대한 빠른 액세스를 가져야 합니다. 이 정보는 생존자가 결정을 내릴 수 있도록 도우며, 정보 또는 도구를 쉽게 찾거나 누락할 수 없게
경고
최소화, 우선 순위 및 컨텍스트 지향적 UI에도 불구하고, 플레이어는 여전히 필요한 것을 찾는 데 도움이 필요할 수 있습니다. UI 디자이너는 다음과 같은 시각적 도구를 사용하여 플레이어의 관심을 끌고 가이드할 수 있습니다.
- 색상: 밝은 색상은 주목을 더 많이 끕니다. 중요한 텍스트, 버튼 및 기타 요소에 대한 명확한 색상을 사용하고, 덜 중요한 색상에 대한 섬광 색상을 사용하십시오. 이 대비는 시야를 향상시키고 지침을 줄여줍니다.
- 크기: 더 큰 요소는 더 잘 보이고 더 중요하게 인식됩니다.
- 공간: 넓은 부정 공간이나 패딩으로 둘러싸인 요소는 시각적 경로를 끌어옵니다.
- 근접성: 그룹화된 요소는 연결을 암시합니다. 관련 기능과 아이템을 서로 배치하여 플레이어는 쉽게 연결을 이해하고 위치를 찾을 수 있습니다.
- 이동: 애니메이션 요소는 주목을 끕니다. 심지어 약간의 이동도 요소를 静態 대응 중에 눈에 띄게 할 수 있습니다. 입자 효과, 흔들리는 버튼 및 애니메이션 화살표는 튜토리얼에서 가이드를 제공하는 데 종종 사용됩니다.
이 도구와 함께 조정은 열쇠입니다. 밝은 이동 요소의 과도한 사용은 플레이어를 너무 많이 놀라게 하고 혼란스럽게 할 수 있습니다.
예시)
In 탈옥 's season pass UI, a stripe of golden yellow lies beneath the season pass-exclusive icons, drawing attention to the premium rewards and making them visually distinct from the free ones.
In 드래곤 모험, > 시각적 우선 순위는 크기를 증가하고 더미를 더 많이 분리하여 작은 번들과 구별하여 드래곤 모험을 식별하도록 합니다.
In 타워 디펜스 시뮬레이터 > , 두 크기 및 접근성은 일일 타워 스킨을 일일 상자에서 시각적으로 그룹화하고 구별하는 데 사용됩니다.
시각적 언어
플레이어의 주의를 화면에서 가장 중요한 요소로 돌리는 것 외에도 UI 디자이너는 시각적 언어를 개발하여 플레이어가 볼 수있는 것을 이해하도록 돕습니다. 시각적 언어는 시각적 개체에 대한 명시적 및 명시적 선택 세트로 구성됩니다. 언어는 도구 및 색상
아이콘
아이콘은 의미와 관련이 있는 시각적 식별자를 사용할 수 있습니다. 예를 인스턴스, 특정 통계와 관련이 있는 아이콘은 색상 팔레트 및 유사한 모양을 공유하여 플레이어가 기능을 인식하고 이해할 수 있습니다.
버튼
플레이어 입력의 일반적인 형태인 버튼은 쉽게 식별할 수 있어야 합니다. 텍스트 또는 아이콘 주위에 색이 둘러싸거나 버튼을 숨기는 등의 방법으로 버튼을 구분하여 배경과 구분하여 상호 작용을 개선합니다. 하이라이트 또는 그림자를 추가하여 버튼의 손댈 수 있는 부분을 확장할
텍스트
중요한 고위험 정보가 포함된 헤더 및 타이틀은 바디 텍스트보다 크고 베이지어야 합니다. 색이 충분히 가독하고 배경 색과 잘 조화되는 색을 사용하면 텍스트 위에 표시되는 항목, 게임 내 아이템, 통계 또는 능력과 같은 중요한 정보를 더 잘 강조할
시각적 언어가 디자인된 후, 그것을 스타일 가이드에 문서화할 수 있습니다. 이 가이드는 팀원이 언어를 일관되게 적용하는 방법을 이해하는 데 도움이 되는 규칙 및 예시를 제공합니다.
규칙
규칙은 많은 다른 게임에서 볼 수 있는 일반적으로 적용되는 디자인 선택입니다. 몇 가지 예는 다음과 같습니다.
- 버튼을 눌렀을 때 대화 상자를 닫는 X 기호
- 현재 사용할 수 없는 버튼에 적용된 회색 색상
- 플레이어가 아직 획득하지 않았거나 잠금을 해제하지 않았음을 나타내는 버튼 또는 기능 아이콘
널리 사용되므로 플레이어는 이러한 규칙을 익숙하게 생각합니다. 이러한 규칙을 이해하는 것은 플레이어가 게임 관련 명령을 보다 쉽게 이해하고 게임 전체에 걸리는 시간을 줄일 수 있습니다. 게임 내 게임 관련 명령을 작성하는 것은 플레이어가 명
일관성
UI 디자이너가 내리는 모든 결정은 게임 전체에 적용되어야 합니다. 일관성은 플레이어가 게임을 더 효율적으로 탐색하도록 돕고 혼란과 짜증을 피합니다.
게임에서 UI 일관성을 보여주는 몇 가지 예:
- 모든 텍스트, 관련 아이콘 및 건강 바에 초록색으로 표시됩니다.
- NPC 대화에서 언급된 게임 내 아이템은 모두 강조 표시됩니다.
- 닫기 버튼은 항상 사각형, 빨간색이며 화이트 X가 포함되어 대화 상자의 오른쪽 상단에만 나타납니다.
- 플레이어가 상점에서 아이템을 구매할 수 없는 경우, 가격이 빨간색으로 표시됩니다.
이 선택은 플레이어의 이해와 탐색을 용이하게 하기위한 것입니다. 일관되게 적용함으로써 플레이어는 관련 요소를 연관 지정하고, 중요 항목을 식별하고, 근육 메모리를 개발하고, 신속하게 정보 된 결정을 내리고, 게임에 더 많은 시간을 보내도록 합니다.
UX
UX 디자인은 플레이어가 게임과 상호 작용하는 방법, 플레이어가 선택을 게임에 알리고 게임에서 이동하는 방법에 관련이 있습니다. UX는 종종 UI와 함께 작동하지만 시각적 및 정보 디자인보다는 상호 작용 및 플레이어 경험에 집중됩니다.
플레이어 이해
UX 디자이너의 주요 목표는 플레이어가 사용하기 쉽고 직관적이며 편리한 상호 작용 및 흐름을 만드는 것입니다. 이 프로세스는 플레이어 자신의 이해, 게임의 대상 잡기 시작합니다. 플레이어를 식별할 때 팔로잉고려하십시오.
데모그래픽: 데모그래픽은 플레이어 그룹에 대한 일반화된 정보를 공개하여 디자인 선택을 제공합니다. 예를 들어, 더 젊은 플레이어는 일반적으로 모바일 또는 태블릿 장치에서 플레이하는 경향이 더 크며, 이 대상 응용 프로그램에 대해 디자인 및 최적화된 모바일 사
경험 수준: 개발자는 플레이어에게 적은 게임 경험, 중요한 금액 또는 어딘가 사이에서 디자인하는 것을 선택할 수 있습니다. 익숙한 플레이어, 예를 들어 도구 모음에 아이템을 장착하려는 키를 탭하거나 c를 누르여 숨다, 더
장르 친숙도: 일반적인 경험 레벨장르 친숙도는 플레이어의 경험 수준을 특정 유형의 게임으로 반영합니다. 플레이어가 플레이한 게임에 대해 많은 잠재적 플레이어를 가질 가능성이 높은
게임 플레이 스타일: 플레이어는 종종 특정 유형의 플레이를 선호합니다. 경쟁, 업적 수집, 탐색 및 협업 등을 포함하여 이 선호 유형은 게임 메카닉 플레이어가 선호하는 것만큼이나 플레이어의 경험과 �
이러한 요소를 고려하고 대상 플레이어 그룹(또는 그룹)을 선택한 후 그들을 만나서 놀아 보고 그들의 목표와 선호를 알아 보면 디자인 선택을 보다 잘 알 수 있습니다.
상호 작용 디자인
상호 작용은 플레이어가 게임에서 선택을 경험하고 통신할 수 있는 기능입니다. UX 디자이너는 이러한 상호 작용이 직관적이기를 원하며 최소한의 설명을 필요로 합니다. 이를 수행하려면 다음을 사용합니다.
- 규칙
- 메타포
- 피드백
규칙
규칙은 플레이어가 다른 게임에서 이미 친숙한 개념 및 원칙입니다.
규칙의 예는 다음과 같습니다.
- Roblox 개발자가 플레이어가 충분히 가까이 있으면 상호 작용 가능한 항목을 표시하도록 플레이어에게 신호를 보내는 가장 좋은 방법은 "E" 근접 프롬프트입니다.
- 플레이어의 아바타가 장애물 아래로 숨을 수 있도록 하는 "C" 키입니다.
- 도구 모음에서 아바타의 손에 아이템을 장착하여 사용할 수 있습니다.
- 매치를 위해 지면에서 일치걸어다니세요.
특정 구현 또는 디자인 선택이 인기를 얻으면 규칙이 정의됩니다. "C"를 누르면 플레이어가 탐색데 사용되는 첫 번째 글자인 crouch이 쉽게 기억됩니다. 이 키는 WASD와 함께 빠르게 숨기거나 도망하
메타포르
메타포어 개념을 익숙한 개념과 관련하여 작성하는 단순한 경로를 만듭니다. 이 예에서 Spellbound Wizard RPG 의 카드를 그리는 행위는 마법 스킬을 실행하는 행위를 나타냅니다. 캐드 기반 UI/UX는 실
피드백
게임에서 플레이어에게 피드백을 보내는 것은 피드백이라고 합니다. 피드백은 플레이어가 취한 조치가 게임에 영향을 미쳤음을 알려줍니다. 게임 기능을 배우는 데 도움이 되고 특정 기능을 사용하기 위해 추가 폴더를 추가하는 데 기여할 수 있습니다. 피드백 예시는 다
- 적이 적의 "타격" 애니메이션을 재생하여 플레이어의 무기로부터 피해를 입었음을 나타냅니다
- 마우스를 가리키고, 누르고, 릴리스하기 (선택) 상태를 나타내는 버튼입니다
- 플레이어가 구매를 완료할 때 작동하는 현금 레이저 "cha-ching!" 사운드 효과
- 플레이어가 퀘스트 목표를 완료하면 진행률 표시줄이 채워집니다.
피드백이 누락되거나 부족하면 플레이어가 무엇을 달성했는지 모를 수 있으며, 효과가 좋았는지 또는 나쁘게 되었는지를 이해하거나, 기능이 올바르게 작동하는지 여부를 알아보거나 버그가 발생했는지 여부를 알 수 있습니다.
흐름 디자인
플레이어가 목표를 완성하기 위해서는 여러 가지 상호 작용이 필요합니다. UX 디자이너는 플레이어가 하나의 작업 또는 UI 화면 또는 선택에서 떠나 다음 경로를 논리적이고 편리하게 만드는 데 관심이 있습니다.
예를 들어, 아바타에 있는 아이템을 장착하려면 플레이어는 베리 아베니ュ 로드 플레이어에 있어야 합니다.
- 아바타 버튼을 찾아 탭하십시오
- 아이템 카테고리(얼굴, 머리, 목 등)를 선택합니다.
- 스크롤하여 관심 항목을 찾습니다
- 아바타에 장착하려는 아이템을 탭하세요
- 찾아 및 탭하여 아바타 사용자 정의를 종료하십시오
이 단계는 아바타 사용자 지정 흐름을 나타냅니다. 이 흐름은 간단하고 명확하며, 아이템을 장착하는 데 필요한 최소한의 단계만 필요합니다. 플레이어는 많은 작업을 수행하거나 목표에 대해 너무 많이 생각하지 않아도 이 흐름이 작은 힘에 의해 더욱
효율적이고 마찰이 적은 흐름을 설계하려면 사용 사례를 신중하게 고려해야 합니다. 이러한 사용 사례는 플레이어 목표와 같이 표현될 수 있습니다.
- 아바타를 빠르게 수정할 수 있으려고
- 수정 중에 아이템을 쉽게 찾을 수 있습니다.
- 선택 전에 항목 미리보기
- 선택 후 쉬운 항목 제거
이 목표는 기능의 UI 및 UX 디자인을 가이드합니다:
- 플레이어는 HUD에 있는 두드러진 버튼을 통해 아바타 사용자 정의 기능에 액세스하고 즉시 아바타에 아이템을 장착할 수 있습니다.
- 탭은 항목을 편리한 범주로 정렬하고 검색 필드를 통해 플레이어가 직접 항목을 검색할 수 있습니다.
- 항목은 아바타에 즉시 미리 보여집니다
- 플레이어는 다시 탭하여 선택 해제하거나 장착된 항목 목록에서 탭하여 선택 해제할 수 있습니다.
디자이너는 다음으로 플레이어가 아바타를 수정하는 목표를 완료하기 위해 수행할 단계를 계획하기 시작할 수 있습니다. 이 프로세스는 흐름 차트 를 사용하여 플레이어가 UI를 탐색하는 동안 작업을 시각적으로 표시하여 중요한 단계를
