시각적 계층 효과(Visual Hierarchy Effect)
시각적인 순서를 인식하는지 설계하는 효과로
사용자가 화면을 보게될때 순서대로 시각적인 구조를 만들어서 의도대로 인지하는 효과를 말한다.
게임 디자인에서 시각적 계층을 잘 활용하면, 플레이어가 중요한 정보에 집중하고 자연스럽게 게임의 흐름을 따라가도록 도록 도울 수 있다.
반응형
<시각적인 계층 효과를 만드는 방법 : UI 요소의 우선순위 정하기>
설명 | |
중요도에 따른 크기 조절 | 중요한 UI 요소(예: 체력바, 미션 목표 등)는 크기를 더 크게 만들어 쉽게 눈에 띄도록 합니다. |
색상 대비 | 중요한 정보를 전달할 때, 강렬한 색상 대비를 사용하여 시선을 끕니다. 예를 들어, 붉은색 경고 표시는 플레이어가 즉각적인 위협을 인식하게 만듭니다. |
위치 배치 | 시야의 중심 또는 눈에 잘 띄는 위치에 중요한 요소를 배치합니다. 상단 중앙이나 화면 우측 상단은 플레이어가 자주 보는 위치입니다. |
<시각적인 계층 효과를 만드는 방법 : 시선을 유도하기 >
설명 | |
빛과 명암 | 특정 장소나 오브젝트에 빛을 집중시켜 플레이어가 주목해야 할 위치를 자연스럽게 인지하도록 합니다. 예를 들어, 어두운 던전에서 문이 있는 곳에 빛이 비치면 플레이어는 그곳으로 가야 한다는 힌트를 얻게 됩니다. |
움직임 | 움직이는 오브젝트는 정적인 오브젝트보다 더 눈에 띕니다. 중요한 NPC나 상호작용 가능한 오브젝트가 살짝 움직이게 하여 시선을 끌 수 있습니다. |
<시각적인 계층 효과를 만드는 방법 : 레벨 디자인에서 활용>
설명 | |
길 안내 | 길이나 통로의 방향을 강조하는 요소(예: 바닥의 화살표나 빛나는 길)를 사용해 플레이어가 자연스럽게 다음 목표 지점으로 이동하도록 유도합니다. |
높이와 깊이 | 중요한 목표나 아이템은 높은 곳에 위치시키거나, 깊이감을 줘서 플레이어가 접근하고 싶도록 만듭니다. |
<시각적인 계층 효과를 만드는 방법 : 폰트와 텍스트 크기>
설명 | |
텍스트 계층 | 텍스트를 쓸 때 제목은 크고 굵게, 부제목은 조금 작고 덜 강조, 설명 텍스트는 더 작게 배치해 정보를 자연스럽게 이해하게 만듭니다. |
색상 강조 | 중요한 텍스트는 다른 색상이나 음영 처리를 통해 눈에 잘 띄게 만듭니다. |
시각적 계층 효과를 적절하게 활용하면 사용자의 집중도를 높이고 의도한 방향으로 유도를 하는데 많은 도움을 준다.
7 visual hierarchy principles for web design : [링크]
★★★★☆
반응형
'지식 > 잡학지식' 카테고리의 다른 글
잡학지식) 보답 기대 효과(Reciprocity) (1) | 2024.11.10 |
---|---|
잡학지식) 게임에서의 '내실'이란? (11) | 2024.09.24 |
잡학지식) 내재화(Inernalization) (0) | 2024.08.20 |
잡학지식) 메타 인지(Meta Cognition) (0) | 2024.08.12 |
잡학지식) 마케팅용어 : 시각 고정 효과(Visual Anchors Effect) (0) | 2024.07.19 |
댓글