잡학지식) 시각적 계층 효과(Visual Hierarchy Effect)

시각적 계층 효과(Visual Hierarchy Effect)

 

시각적인 순서를 인식하는지 설계하는 효과로 

사용자가 화면을 보게될때 순서대로 시각적인 구조를 만들어서 의도대로 인지하는 효과를 말한다.

게임 디자인에서 시각적 계층을 잘 활용하면, 플레이어가 중요한 정보에 집중하고 자연스럽게 게임의 흐름을 따라가도록 도록 도울 수 있다.

https://i0.wp.com/visualcox.com/wp-content/uploads/2016/03/07.jpg?w=650&ssl=1

 

반응형

 

<시각적인 계층 효과를 만드는 방법 : UI 요소의 우선순위 정하기>

	설명
중요도에 따른 크기 조절	중요한 UI 요소(예: 체력바, 미션 목표 등)는 크기를 더 크게 만들어 쉽게 눈에 띄도록 합니다.
색상 대비	중요한 정보를 전달할 때, 강렬한 색상 대비를 사용하여 시선을 끕니다. 예를 들어, 붉은색 경고 표시는 플레이어가 즉각적인 위협을 인식하게 만듭니다.
위치 배치	시야의 중심 또는 눈에 잘 띄는 위치에 중요한 요소를 배치합니다. 상단 중앙이나 화면 우측 상단은 플레이어가 자주 보는 위치입니다.

 

<시각적인 계층 효과를 만드는 방법 : 시선을 유도하기 >

	설명
빛과 명암	특정 장소나 오브젝트에 빛을 집중시켜 플레이어가 주목해야 할 위치를 자연스럽게 인지하도록 합니다. 예를 들어, 어두운 던전에서 문이 있는 곳에 빛이 비치면 플레이어는 그곳으로 가야 한다는 힌트를 얻게 됩니다.
움직임	움직이는 오브젝트는 정적인 오브젝트보다 더 눈에 띕니다. 중요한 NPC나 상호작용 가능한 오브젝트가 살짝 움직이게 하여 시선을 끌 수 있습니다.

 

<시각적인 계층 효과를 만드는 방법 : 레벨 디자인에서 활용>

	설명
길 안내	길이나 통로의 방향을 강조하는 요소(예: 바닥의 화살표나 빛나는 길)를 사용해 플레이어가 자연스럽게 다음 목표 지점으로 이동하도록 유도합니다.
높이와 깊이	중요한 목표나 아이템은 높은 곳에 위치시키거나, 깊이감을 줘서 플레이어가 접근하고 싶도록 만듭니다.

 

<시각적인 계층 효과를 만드는 방법 :  폰트와 텍스트 크기>

	설명
텍스트 계층	텍스트를 쓸 때 제목은 크고 굵게, 부제목은 조금 작고 덜 강조, 설명 텍스트는 더 작게 배치해 정보를 자연스럽게 이해하게 만듭니다.
색상 강조	중요한 텍스트는 다른 색상이나 음영 처리를 통해 눈에 잘 띄게 만듭니다.

 

시각적 계층 효과를 적절하게 활용하면 사용자의 집중도를 높이고 의도한 방향으로 유도를 하는데 많은 도움을 준다.

 

7 visual hierarchy principles for web design : [링크]

7 visual hierarchy principles for web design | Webflow Blog

 

 

★★★★☆