사용자 인터페이스(UI)는 예술적 시각 디자인과 커뮤니케이션 중심 정보 디자인을 결합하여 플레이어가 상호 작용하는 메뉴, 상점 레이아웃, 헤드업 디스플레이(HUD) 및 기타 인터페이스를 생성합니다.사용자 경험 (UX)은 플레이어가 게임과 상호 작용하는 방법, 게임에 선택 사항을 알리는 방법 및 선택 사항에서 다음으로 이동하는 방법과 관련됩니다.UI와 UX는 종종 협력적으로 작동하지만, UX는 UI의 시각적 및 정보 디자인보다는 상호 작용과 플레이어의 경험에 더 큰 초점을 둡니다.
UI
UI는 플레이어가 결정을 내리고 게임을 탐색할 수 있도록 히트포인트, 퀘스트 목표 및 가격과 같은 중요한 정보를 공유합니다.게임이 플레이어와 커뮤니케이션하는 주요 방법 중 하나이기 때문에 UI는 플레이어의 경험에 매우 중요합니다.잘못 설계된 UI는 플레이어를 혼란스럽게 하고 좌절시킬 수 있으며 전문적으로 설계된 UI는 참여와 수익 창출에 기여할 수 있습니다.효과적으로 설계된 UI는 다음 원칙을 사용합니다:
- 우선 순위 지정
- 주의
- 시각 언어
- 약속들
- 일관성
우선 순위 지정
가장 중요한 정보를 먼저 공유하는 것을 정보 계층이라고 합니다.특히 플레이어가 제한된 정보 세트를 바탕으로 즉시 결정을 내리는 게임에서 중요합니다.UI 우선 순위를 지정할 때 플레이어의 경험에 필수적이거나 가장 관련성이 높은 것을 식별하고 액세스할 수 있으며 쉽게 찾을 수 있는지 확인하십시오.다음 질문을 고려하십시오:
- 플레이어가 현재 어떤 작업을 수행하고 있나요?
- 그들이 알아야 하거나 액세스할 수 있는 가장 중요한 것은 무엇입니까?
- 그들은 어떤 선택을 해야 하나요?
- 그 선택을 하기 위해 필요한 정보는 무엇입니까?
- 그들은 얼마나 자주 그러한 선택에 참여할 것인가?
플레이어가 맡는 역할, 게임 세계에서의 위치 및 보유하는 아이템과 같은 요소에 따라 게임 진행 중에 중요한 정보와 기능이 변경됩니다.Important information and features change during the course of a game, depending on factors like the role the player assumes, their location in the game world, and the items they hold.UI는 컨텍스트별로 중요한 것만 표시하도록 디자인할 수 있습니다 - 각 컨텍스트에서 유용한 것에 따라 버튼과 정보를 교체합니다.이렇게 하면 플레이어가 항상 필요한 것만 갖추고, 필요하지 않은 모든 것의 혼란을 피할 수 있습니다.
예시
관련이 없는 요소는 혼란과 산만을 유발할 수 있습니다.스킬바운드 RPG 는 모바일 인터페이스에 특히 중요한 깔끔하고 미니멀한 UI를 갖추고 있으며, 작은 화면은 과도한 버튼, 화면 및 텍스트로 쉽게 압도될 수 있습니다.
In 슈퍼 스트라이커 리그 , 플레이어 상호 작용은 공을 제어하는지 여부에 따라 다릅니다.공이 없으면 플레이어가 질주하고 태클하여 컨트롤을 회복할 수 있습니다.한 번 소유하면 버튼이 Deke와 Pass로 전환되어 플레이어가 상대를 피하고 공을 패스할 수 있습니다.이러한 버튼을 교대하여 사용자 인터페이스가 상황에 적합하게 유지되고 불필요한 산만함을 피할 수 있습니다.
In 생존 게임에서, 플레이어는 자신의 체력과 배고픔 상태를 인식하고, 맵, 인벤토리 및 도구에 신속하게 액세스해야 합니다.이 정보를 통해 생존을 위한 결정을 내리고 행동 우선 순위를 정할 수 있습니다.이 정보나 도구가 찾기 어렵거나 누락되어 있으면 생존이 더 어려워지고 불필요하게 좌절됩니다.
주의
최소화, 우선 순위 및 컨텍스트화된 UI에도 불구하고 플레이어는 여전히 필요한 것을 찾는 데 도움이 필요할 수 있습니다.UI 디자이너는 다음과 같은 시각적 도구를 사용하여 플레이어의 주의를 끌고 안내할 수 있습니다.
- 색상: 밝은 색상은 지루한 색상보다 주목을 끌 수 있습니다.중요한 텍스트, 버튼 및 기타 요소에 활기찬 색상을 사용하고 덜 중요한 요소에는 음소거된 색상을 사용합니다.이 대조는 가시성을 향상시키고 산만함을 줄입니다.
- 크기: 더 큰 요소는 더 눈에 띄고 더 작은 요소보다 중요하다고 인식됩니다.
- 공간: 충분한 부정 공간이나 여백으로 둘러싼 요소는 눈에 띕니다.
- 근접성: 그룹화된 요소는 연결을 암시합니다.관련 기능과 아이템을 서로 가까이 배치하면 플레이어가 자신의 연관성을 이해하고 쉽게 찾을 수 있습니다.
- 이동: 애니메이션된 요소가 주목을 끕니다.미세한 움직임조차도 정적 상대방 사이에서 요소를 돋보이게 할 수 있습니다.입자 효과, 흔들리는 버튼 및 애니메이션된 화살표는 종종 가이드를 위한 튜토리얼에 사용됩니다.
이러한 도구로 조정이 중요합니다. 밝고 움직이는 요소의 과도한 사용은 플레이어를 돕는 대신 압도하고 혼란스럽게 할 수 있습니다.
예시
In 탈옥의 시즌 패스 UI에서, 황금색 줄무늬가 시즌 패스-전용 아이콘 아래에 있어 프리미엄 보상에 주목을 끌고 무료 보상과 시각적으로 구별되게 만듭니다.
In 드래곤 어드벤처에서, 시각적 우선 순위는 크기를 늘리고 더 많은 여백으로 분리하여 더 작은 패키지와 구별하기 위해 가장 값이 높은 코인 패키지에 주어집니다.
In 타워 방어 시뮬레이터 에서는 크기와 근접성이 사용되어 일일 타워 스킨과 일일 상자를 시각적으로 그룹화하고 구별합니다.
시각 언어
플레이어의 화면에서 가장 중요한 요소에 주의를 끄는 것 외에도, UI 디자이너는 플레이어가 보고 있는 것을 이해하도록 시각적 언어를 개발합니다.시각적 언어는 요소의 목적, 상태, 연관 및 관련성에 대한 한눈에 알 수 있는 정보를 제공하는 의도적이고 일관된 디자인 선택의 집합입니다.언어는 모양, 색상 및 스타일과 같은 도구로 구축됩니다.시각적 언어의 사용 중 일부는 다음과 같습니다:
아이콘
아이콘은 의미와 연관을 전달하는 시각적 정체성을 사용할 수 있습니다.예를 인스턴스, 특정 통계와 관련된 아이콘은 색상 팔레트와 유사한 모양을 공유하여 플레이어가 기능을 인식하고 이해할 수 있도록 합니다.
버튼
플레이어 입력의 일반적인 형태로서 버튼은 식별하기 쉬워야 합니다.텍스트나 아이콘을 둘러싼 색상과 같은 컨테이너의 주택 버튼은 배경과 구별되어 상호 작용적으로 보이게 합니다.하이라이트나 그림자를 추가하면 3D 깊이를 제안하여 그들의 감각적 매력을 향상시킬 수 있습니다.
텍스트
중요한 고위급 정보가 포함된 머리글과 제목은 본문 텍스트보다 크고 과감해야 합니다.읽기 쉽고 배경 색과 대조가 잘 되는 색상은 고려해야 합니다. 표시될 배경 색은 다음과 같습니다. Colors that are highly legible and contrast well against the background color they'll be displayed over should be considered.색상이나 볼드와 같은 스타일 선택은 게임 내 아이템, 통계 또는 능력과 같은 중요한 정보를 강조할 수 있습니다.서체를 선택할 때 항상 가독성을 우선시합니다.
시각적 언어가 디자인되면 스타일 가이드에 문서화할 수 있으며, 팀의 모든 사람이 언어를 일관되게 게임에 적용하는 방법을 이해하는 데 도움이 되는 규칙과 예제 집합입니다.
약속들
규칙은 다양한 게임에서 볼 수 있는 일반적으로 적용되는 디자인 선택입니다. 몇 가지 예에는 다음이 포함됩니다:
- 대화 상자를 닫는 버튼에 있는 X 기호 An X symbol on a button that closes the dialog when pressed
- 현재 사용할 수 없는 버튼에 적용된 회색 색 The color gray applied to buttons that are currently unusable
- 플레이어가 아직 획득하거나 잠금 해제하지 않았음을 나타내는 버튼이나 기능 위에 잠금 아이콘 오버레이
널리 사용되기 때문에 플레이어는 일반적으로 이러한 규칙에 익숙합니다.이러한 친숙도를 활용하면 인터페이스를 더 직관적으로 만들고 게임 특정 지침의 필요성을 줄일 수 있습니다.대상 장르 내에서 게임을 플레이하면 플레이어가 인식할 수 있는 규칙을 식별하는 데 도움이 될 수 있습니다.UI 디자이너는 게임에 더 적합하도록 독특한 접근법을 선택할 수 있지만, 이러한 규칙을 알면 의사 결정 과정이 정보에 입각합니다.
X 닫기 버튼 in 행운의 바람 , 드래곤 어드벤처 , BotClash Simulator , 그리고 DOORS >
그린 "건강" 상태 일관성 in 아케인 오디세이 >
일관성
UI 디자이너가 내린 결정이 무엇이든, 게임 전반에 걸쳐 일관되게 적용해야 합니다.일관성은 플레이어가 게임을 더 효율적으로 탐색하고 혼란과 좌절을 방지하도록 돕습니다.
여기에는 게임의 UI 일관성의 몇 가지 예가 있습니다.
- 상태 "건강"은 모든 텍스트, 관련 아이콘 및 건강 바에서 녹색으로 나타납니다.
- NPC 대화가 게임 내 아이템을 언급할 때마다 볼드체로 강조됩니다.
- 닫기 버튼은 항상 정사각형이며 빨간색이고 대화 상단 오른쪽 모서리에만 나타나는 흰색 X를 포함합니다.
- 플레이어가 둘러보다아이템을 구매할 수 없을 때마다 가격이 빨간색으로 표시됩니다.
이러한 선택은 의도적이며, 플레이어의 이해와 탐색을 용이하게 하기 위해 합니다.일관되게 적용하면 플레이어가 관련 요소를 연결하고, 중요한 항목을 식별하고, 근육 기억을 개발하고, 신속하게 정보를 수집하고, 게임에 더 많은 시간을 보내도록 할 수 있습니다.
UX
UX 디자인은 플레이어가 게임과 상호작용하는 방법, 게임에 선택 사항을 알리는 방법 및 선택 사항에서 다음으로 이동하는 방법과 관련이 있습니다.UX는 사용자 인터페이스(UI)와 종종 손잡이로 작동하지만, UI의 시각적 및 정보 디자인보다 상호 작용 및 플레이어 경험에 더 집중합니다.
플레이어 이해
UX 디자이너의 주요 목표는 플레이어가 사용하기 쉽고 방해가 되지 않으며 직관적인 상호 작용과 흐름을 만드는 것입니다.그 과정은 플레이어 자체, 게임의 대상 오디언스를 이해하는 것으로 시작됩니다.경험의 플레이어를 식별할 때 팔로잉고려하십시오:
인구 통계: 인구 통계는 플레이어 그룹에 대한 일반화된 정보를 공개하여 디자인 선택에 대한 정보를 제공합니다.예를 들어, 젊은 플레이어는 일반적으로 개인 컴퓨터보다 모바일 또는 태블릿 장치에서 플레이할 가능성이 더 높으므로 그 대상 오디언을 위한 게임은 종종 모바일 사용자 경험 디자인과 정제에 우선순위를 두고 있습니다.
경험 레벨: 개발자는 게임 경험이 거의 없거나, 상당한 수량 또는 중간에 있는 플레이어를 위해 디자인하기로 선택할 수 있습니다.도구 모음에서 아이템을 장착하기 위해 숫자 키를 탭하거나 c를 누르는 등 경험 한 플레이어에게 익숙한 상호 작용은 초보 플레이어에게는 명확하지 않을 수 있으며 추가 메시징이나 교육이 필요합니다.
장르 친숙도: 일반 경험 레벨비슷하게, 장르 친숙도는 특정 유형의 게임으로 플레이어의 경험 수준을 반영합니다.Roblox의 인기 장르인 롤플레이, 서바이벌 호러, 1인칭 슈터와 같은 게임은 이전에 비슷한 게임을 플레이한 잠재 플레이어가 많을 가능성이 있습니다.다른 장르의 게임에는 경험 많은 플레이어가 적을 수 있지만, 튜토리얼과 사용성을 통해 그 경험 격차를 극복할 수 있습니다.
게임플레이 스타일: 플레이어는 종종 경쟁과 업적 수집에서 탐험과 협력에 이르기까지 특정 유형의 플레이를 선호합니다.이러한 기본 설정은 게임 메커니즘에서 선호하는 것뿐만 아니라 UX 결정에도 영향을 미칩니다.디자이너는 우선 순위가 있는 상호 작용, 정리할 상호 작용 및 플레이어에게 제공할 상호 작용을 고려합니다.또한 플레이어가 이러한 상호 작용에 참여하고 그들에게서 유발하려는 감정을 고려합니다.
이러한 요소를 고려하고 대상 플레이어 그룹(또는 그룹)을 선택한 후, 그들을 만나고, 함께 플레이하고, 디자인 선택에 대한 목표와 선호도를 알아보아 더 나은 정보를 제공합니다.
디자인 상호 작용
상호 작용은 플레이어가 게임에서 선택을 경험하고 커뮤니케이션할 수 있는 기능입니다.UX 디자이너는 상호 작용이 직관적이고 가능한 한 적은 설명으로 수행되기를 원합니다.이를 위해 사용:
- 약속들
- 메타포라
- 피드백
약속
규칙은 플레이어가 다른 게임에서 이미 익숙한 UX 디자인과 원칙입니다.
규칙의 예로는 다음이 있습니다: examples of conventions include:
- Roblox 개발자가 플레이어에게 아이템이 상호 작용할 수 있는지 신호를 보내기 위해 사용하는 "E" 근접 프롬프트.
- 플레이어의 아바타가 웅크릴 수 있도록 하는 "C" 키로, 장애물 아래에 숨거나 좁은 공간에 맞출 수 있습니다.
- 도구 모음에서 아바타의 손으로 숫자 키 장착 아이템을 사용할 수 있도록 아이템을 장착합니다.
- 매치에 대기하기 위해 지상에서 일치안으로 걸어가는 중.
특정 구현 또는 디자인 선택이 사용 편의성 때문에 인기가 높아지면 규칙이 확립됩니다. Conventions become established when a particular implementation or design choice grows in popularity due to its ease of use.예를 들어, "C"는 웅크리기의 첫 번째 글자이기 때문에 기억하기 쉽고 WASD, 플레이어가 탐색하는 데 사용하는 키, 옆에 편리하게 위치하고 있습니다.접근하는 위협으로부터 숨거나 도망치려는 것이 웅크리기의 일반적인 사용 사례이기 때문에 신속하고 압박 아래에서 수행되는 쉬운 상호 작용입니다.
메타포라
메타포라는 추상 개념을 더 친숙한 개념과 관련시켜 이해를 위한 단축키를 만듭니다.이 예제에서 스킬바운드 마법사 RPG에서 마법 주문을 던지는 행위는 갑판에서 카드를 뽑아 수행됩니다.덱 기반 UI/UX는 실제 생활 표현이 없는 주문 던지기의 추상적인 행위를 플레이어가 쉽고 빠르게 이해할 수 있는 무언가로 구체화합니다.
피드백
게임에서 플레이어로의 통신은 피드백으로 알려져 있습니다.피드백은 플레이어가 취한 행동이 게임에 영향을 미쳤음을 이해하는 데 도움이 됩니다.게임의 기능을 배우고 사용하기 더 만족스러운 기능을 추가하는 데 기여할 수 있습니다.피드백의 일부 예시는 다음과 같습니다:
- 적이 플레이어의 무기로부터 피해를 입었음을 나타내기 위해 "타격" 반응 애니메이션을 재생하는 경우
- 호버, 압축 및 릴리스(선택됨) 상태를 나타내는 색상을 변경하는 버튼
- 플레이어가 구매를 완료할 때 발생하는 계산대 "차-팅!" 효과음
- 플레이어가 퀘스트 목표를 완료할 때 진행률 바가 채워지는 것
피드백이 누락되거나 부족하면 플레이어가 달성한 것을 모를 수도 있고, 효과가 좋았는지 나쁘었는지 이해하거나, 사용 중인 기능이 올바르게 작동하는지 또는 오류가 발생하는지 알 수도 없습니다.
디자인 흐름
플레이어가 목표를 완료하려면 여러 상호 작용이 종종 필요합니다.UX 디자이너는 플레이어가 하나의 작업이나 UI 화면이나 선택에서 다음으로 이동하고 이 경로가 논리적이고 편리한지 확인합니다.
예를 들어, 베리 애비뉴 RP에서 아바타에 아이템을 장착하려면 플레이어가:
- 아바타 버튼을 찾아 탭하세요
- 아이템 카테고리 선택(얼굴, 머리, 목 등)
- 관심 있는 항목을 찾으려면 스크롤하세요
- 아이템을 탭하여 아바타에 장착하세요
- 아바타 사용자 정의를 종료하려면 완료 버튼을 찾아 탭하세요
이 단계는 함께 수행되어 아바타 사용자 지정 흐름을 나타냅니다.이 흐름은 간단하고 직관적이며, 아이템을 장착하기 위해 필요한 단계가 최소한으로 제한됩니다.플레이어가 많은 작업을 수행하거나 목표에 필요한 것에 대해 너무 많이 생각할 필요가 없기 때문에, 이 흐름은 마찰 이 낮고 목표에 필요한 노력의 측정입니다.
효율적이고 마찰이 적은 흐름을 디자인하려면 사용 사례를 신중하게 고려해야 합니다. 이러한 사용 사례는 플레이어 목표와 같이 표현될 수 있습니다.
- 아바타를 신속하게 수정할 수 있으려고
- 수정하는 동안 아이템을 쉽게 찾기
- 선택하기 전에 항목 미리 보기
- 선택 후 쉬운 아이템 제거
이러한 목표는 기능의 UI 및 UX 디자인을 안내합니다:
- 플레이어는 HUD에서 눈에 띄는 버튼을 통해 아바타 사용자 정의 기능에 액세스하고 즉시 아바타에 아이템을 장착하기 시작할 수 있습니다
- 탭은 항목을 편리한 카테고리로 정렬하고 검색 필드를 통해 플레이어가 항목을 직접 검색할 수 있습니다
- 아바타에서 아이템이 즉시 미리 보여집니다
- 플레이어는 다시 탭하여 선택 해제하거나 장착된 아이템 목록에서 탭하여 아이템을 제거할 수 있습니다
디자이너는 그런 다음 UI를 구성하고 플레이어가 아바타 수정의 목표를 완료하기 위해 취할 단계를 계획하기 시작할 수 있습니다.이 프로세스는 UI를 탐색하는 동안 플레이어의 작업을 시각적으로 묘사하는 흐름 차트 사용으로 도움을 받을 수 있습니다.이러한 다이어그램은 간과된 단계, 단계가 불명확하거나 불편한 점, 과도한 마찰을 식별하는 데 도움이 될 수 있습니다.
