초보자를 위한 시각적 계층

시각적 계층은 의도된 영역에 주의를 끌기 위해 특정 순서로 개체를 구성하는 것입니다.

UX 디자인에서 일반적으로 사용되는 시각적 계층 구조는 독자에게 탐색 시간을 더 쉽게 제공하고 원하는 위치에 주의를 집중시키는 데 도움이 됩니다.

부적절하게 사용하거나 시각적 계층 구조가 부족하면 웹 사이트 방문자가 혼란스러워지고 길을 잃을 수 있습니다.

시각적 계층 구조는 의도된 요소에 주의를 집중시키는 데 도움이 되는 포스터와 광고에 널리 사용됩니다.

이 블로그는 초보자에게 시각적 계층 구조의 기초를 제공합니다.

분해된 시각적 계층

시각적 계층을 더 간단한 청크로 나누면 디자이너가 디자인 개념을 다루는 방법을 설명하는 데 도움이 됩니다.

세 가지는 시각적 계층 구조의 세 가지 주요 역할이며, 그 중 두 가지는 밀접한 관련이 있습니다.

크기

물체의 크기를 변경하면 주의를 끌거나 멀어지게 할 수 있습니다.

표현하고자 하는 가장 중요한 정보는 가장 큰 사이즈를 남겨두는 것이 필수입니다. 비슷한 크기의 요소를 너무 많이 사용하면 눈에 띄는 것이 없기 때문에 이 효과가 사라집니다.

크기를 조정하는 것은 다른 개체와 비교하는 방법을 보여주는 데 중요합니다. 균형 감각을 만드는 것은 가장 큰 물체가 작은 물체와 어떻게 비교되는지 강조하기 위해 크기 조정에 도움이 됩니다.

중요하지 않은 정보가 있는 경우 작은 크기로 유지하면 방해가 되지 않고 사용자가 마지막으로 볼 수 있는 곳에 남겨 둘 수 있습니다.

색상 및 대비

밝은 색상은 다른 것보다 주의를 끄는 데 더 효과적입니다. 이 효과는 밝은 색상과 어두운 배경을 결합할 때 증가합니다. 그 결과 정보가 더 눈에 띄고 쉽게 주의를 끌 수 있습니다.

색상과 대비는 시각적 계층 구조의 두 부분이지만 주의를 끌기 위해 완벽하게 함께 작동합니다.

이 방법을 사용하는 한 가지 방법은 텍스트를 화려한 색상으로 강조 표시하여 색상을 변경하는 것입니다. 다른 무딘 색상의 텍스트보다 먼저 주의를 끌 것입니다.

콘트라스트가 클수록 주의가 집중됩니다. 밝은 빨간색 글꼴이 있는 어두운 배경과 같은 과감한 색상 차이를 추가하면 사용자의 관심을 끌고 이미지나 웹 페이지에서 가장 먼저 눈에 띄게 됩니다.

주의를 끌기 위해 대비되는 색상을 만들 때는 색상을 최소화하는 것이 가장 좋습니다. 대조되는 개체가 너무 많으면 독자를 혼란스럽게 만들고 바람직하지 않고 불쾌한 효과를 만듭니다.

색상을 사용하는 또 다른 방법은 유사한 팔레트를 선택하여 특정 개체 간의 상관 관계를 만드는 것입니다.

페이지에서 가장 필요한 요소에 대해서만 이 전술을 예약하는 것이 가장 좋습니다. 페이지에서 모든 주의를 먼저 집중시켜야 하기 때문입니다.

좋은 UX 디자인에는 많은 대비가 포함되며 대부분의 미학은 강한 대비를 사용하여 멋진 작품을 만듭니다.

F & Z 패턴

주로 텍스트를 통해 정보를 제공할 때 시각적 정보를 처리하는 방법을 가장 잘 활용하는 두 가지 기본 패턴이 있습니다.

이 패턴은 대부분의 언어에서 작동하지만 단어가 왼쪽에서 오른쪽으로, 위에서 아래로 읽히기 때문에 영어에 효과적입니다.

F 패턴

F 패턴은 광범위한 텍스트가 포함된 디자인에 완벽한 선택입니다. 디자인은 왼쪽 상단에서 시작하여 오른쪽으로 이동하여 이름을 따서 명명된 문자를 따릅니다.

그런 다음 뷰어는 소제목이나 헤드라인을 찾기 위해 척추 아래를 스캔합니다.

F-패턴이 더 상징적이지만 패턴은 E-패턴으로 번갈아 명명됩니다.

F-패턴을 사용하려면 왼쪽에 모든 중요한 정보를 작은 헤드라인에 배치하여 관심을 끌 수 있도록 해야 합니다.

이 디자인은 단락의 큰 블록에서 텍스트를 읽는 것과 관련된 지루함을 없애는 데 탁월합니다.

사용자는 헤드라인을 스캔하여 시선을 사로잡는 헤드라인이나 글머리 기호를 찾을 수 있습니다.

Z 패턴

F 패턴은 텍스트가 많은 웹 사이트에 적합하지만 Z 패턴은 다릅니다.

Z 패턴은 여러 단락의 텍스트가 없는 웹사이트나 광고에 적합합니다.

디자인은 우선 순위가 가장 높은 정보가 왼쪽 상단에 있는 것으로 시작한 다음 중요도가 오른쪽 상단, 왼쪽 하단, 오른쪽 하단에 차례로 표시됩니다.

Z 패턴은 이해하기 쉽게 자주 사용되는 디자인이므로 사용자가 쉽게 탐색할 수 있습니다.

왼쪽 상단 섹션은 일반적으로 사람들이 가장 먼저 알아차릴 수 있는 로고용으로 예약되어 있습니다. 오른쪽 상단에는 사용자가 회사 로고를 본 후에 배치된 클릭 유도문안이 있습니다. 이 상황에서 행동 촉구는 일반적으로 등록 프롬프트입니다.

디자인의 중간에는 일반적으로 빈 부분을 채우기 위한 이미지가 포함됩니다.

왼쪽 및 오른쪽 하단에는 방문자에게 보여주고 싶은 모든 의도된 텍스트 또는 정보가 포함됩니다.

타이포그래피 이해하기

타이포그래피 계층 구조는 이해하기 쉽고 대다수의 텍스트가 포함된 모든 디자인에 적용할 수 있습니다. 헤드라인, 부제목, 마지막으로 텍스트 순으로 세 부분으로 나눌 수 있습니다.

헤드라인은 필수 정보를 포함하고 디자인에서 가장 높은 위치에 배치되며 가장 눈에 잘 띄는 콘텐츠입니다.

부제목은 모든 텍스트를 정렬하고 복잡한 단락에 순서를 제공하는 역할을 합니다. 부제목은 우선 순위에서 경쟁해서는 안 되므로 항상 헤드라인보다 작게 유지하십시오.

부제목은 사용자가 특정 정보를 쉽게 찾을 수 있도록 합니다.

마지막 조각은 일반적으로 단락이 포함된 텍스트입니다. 글꼴 크기는 작아야 하지만 가독성을 유지해야 합니다. 앞의 두 섹션은 사용자가 밀도 있는 텍스트를 더 쉽게 탐색할 수 있도록 합니다.

간격의 중요성

최소한의 정보만 포함하는 웹사이트의 경우 중요한 정보를 둘러싸고 충분한 공간을 남겨두는 것은 모든 공간이 있는 중앙에 주의를 끌게 합니다.

이 개념은 다른 모든 디자인에도 적용되어야 하며 너무 많은 정보를 추가하면 불쾌한 사용자 경험을 남길 수 있습니다.

콘텐츠를 공간으로 둘러싸는 심플하고 따라하기 쉬운 UX 디자인을 제공합니다.

너무 많은 정보를 집어넣고 주변에 공간을 거의 두지 않으면 압도적으로 느껴지고 사람들이 당황하게 만드는 디자인이 남게 됩니다. 사용자가 혼란스러울 때 항상 웹사이트를 떠날 기회가 있으며 중요한 정보만 묘사해야 합니다.

정렬 사용

텍스트를 무작위로 배치하면 보기에 바쁜 이미지가 생성되므로 디자인을 정렬하는 것이 중요합니다.

F 패턴 및 Z 패턴 디자인은 모두 정렬 사용을 구현합니다. F 패턴 디자인은 왼쪽 정렬을 사용하는 반면 Z 패턴 디자인은 왼쪽 및 오른쪽 정렬과 중앙 정렬을 사용합니다.

텍스트를 중심으로 시각적 디자인을 만들 때는 왼쪽에 맞추는 것이 가장 좋습니다.

단순에 초점을 맞춘 엄격한 시각적 디자인의 경우 모든 요소를 ​​중앙에 정렬하면 매력적인 디자인을 만드는 경향이 있습니다.

그리드 사용

설계를 작성할 때 그리드는 작성 프로세스를 돕는 일반적인 방법입니다. 3분의 1 법칙을 사용하면 디자인에 균형을 추가할 수 있습니다.

3분의 1의 법칙을 사용하려면 디자인에 격자를 추가하고 두 개의 가로선과 세로선에 놓이도록 하십시오. 그 결과 눈에 즐겁고 편안한 디자인이 제공됩니다.

중심에 가까운 물체는 주의를 끌고 멀리 있는 물체는 마지막에 주의를 끕니다.

근접성과 관계

요소가 서로 더 가까이 있을 때 독자는 해당 요소가 관련되어 있다고 가정합니다.

이렇게 하면 많은 정보를 구성하고 시청자가 더 쉽게 이해할 수 있습니다.

이미지를 텍스트와 함께 그룹화하면 둘 다 관련되어 있으며 독자는 이 둘을 함께 연관시킵니다. 이미지와 텍스트가 멀리 떨어져 있으면 독자는 두 요소가 관련이 없고 서로 관련이 없다고 가정하게 됩니다.

글꼴 및 시각적 계층

중요한 정보를 위해 예약된 더 큰 글꼴로 글꼴 크기를 변경하면 관심을 집중시키는 데 도움이 됩니다.

포스터의 경우 이름은 큰 글꼴 중 하나를 사용하고 주소와 같은 항목은 작은 글꼴로 작성해야 합니다.

글꼴 크기에서 계속해서 다양한 유형의 글꼴을 사용하면 사용자의 관심을 유도하는 데 도움이 됩니다. 제목, 부제목 및 정보 텍스트에 다른 글꼴을 사용하십시오. 이 디자인 방법은 독자의 관심을 모으고 유지하는 데 필요한 팝을 작업에 제공하는 데 도움이 됩니다.

시각적 계층 구조 팁

디자인 만들기를 시작하기 전에 몇 가지 메모를 작성하면 디자인을 구성하는 데 도움이 될 수 있으며 더 심미적인 디자인을 만드는 데 도움이 될 수도 있습니다.

우선 순위를 지정해야 하는 가장 중요한 정보와 이를 위해 사용할 방법을 기록해 두십시오.

또한 독자의 여정을 상상하고 UX 디자인을 개선하고 복잡한 세부 사항을 제거하십시오.

좋은 UX 디자인의 ROI는 항상 추가 작업의 가치가 있으므로 그 중요성을 과소평가하지 마십시오.

마무리

시각적 계층 구조는 독자의 관심을 끌기 원하는 순서를 지정하는 것입니다. 중요한 정보가 먼저 표시되고 다른 모든 정보가 표시되기를 원합니다.

대비를 사용하면 독자가 디자인에서 가장 먼저 눈에 띄는 색상을 만들 수 있습니다.

독자에게 어떤 정보를 먼저 보여주고 싶은지 알면 시각적 계층의 모든 요소를 ​​사용하여 다른 사람들에게 좋은 UX 디자인을 제공할 수 있습니다.