디자인, UI / UX ( hierarchy - 계층구조 )

디자인, UI / UX



시각적 계층 구조 : UI 콘텐츠 구성 방법

강력한 UI 컨텐츠 구성을위한 시각적 계층 구조에 관한 기사 : 크기, 대비, 근접성, 부정적인 공간 및 UI 요소를 효과적으로 구성하는 기타 사항


시각적 계층 구조 : UI 콘텐츠 구성 방법
헨리 아담스 (Henry Adams)는 "혼돈은 자연의 법칙이며 질서는 인간의 꿈"이라고 말했습니다. 사람들은 물건을 더 이해하기 쉽기 때문에 항상 주문을 선호합니다. 디지털 제품의 사용자 인터페이스에서도 마찬가지입니다. UI 요소가 체계화되고 구조화되면 사람들은 앱이나 웹 사이트를 쉽게 사용할 수 있으며 제품에 만족할 수 있습니다.

사용자가 UI의 내용을 명확하게 구성하기 위해 디자이너는 시각적 계층 구조라는 잘 알려진 기술을 적용합니다. 오늘의 기사에서는이 접근법의 본질과 콘텐츠를 올바르게 구성하는 데 도움이되는 도구에 대한 일반적인 통찰력을 제공합니다.

시각적 계층 구조 란 무엇입니까?

시각적 계층 구조는 설계 프로세스에 적용되는 핵심 기술 중 하나입니다. 처음에는 Gestalt 심리학 이론에 기초하여 서로의 관계에서 사용자의 시각적 인식을 검사하고 사람들이 시각적 요소를 그룹으로 통합하는 경향을 보여줍니다.

시각적 계층 구조는 사용자가 각 요소의 중요도를 이해할 수 있도록 제품의 내용을 표현하는 데 노력합니다. 두뇌가 크기, 색, 대비, 스타일 등과 같은 물리적 인 차이를 기반으로 개체를 구별 할 수 있도록 UI 구성 요소를 구성합니다.

UI 요소의 시각적 표현은 제품의 사용자 경험에 큰 영향을 미칩니다. 콘텐츠 구성 요소가 엉망으로 보이는 경우 사람들은 제품 내에서 탐색하거나 올바르게 상호 작용할 수 없습니다. 또한 구조화되지 않은 복사 콘텐츠는 가독성이 낮기 때문에 사용자는이를 신속하게 스캔 할 수 없으며 찾고 있던 데이터를 구별하기 위해 상당한 노력을 기울여야합니다. 이러한 나쁜 UX는 사용자 만족도를 떨어 뜨릴 수 있습니다. 이는 제품을별로 추구하지 않는다는 것을 의미합니다.

그래픽의 계층 구조

콘텐츠 복사는 모든 UI 디자인의 중요한 부분입니다. 그렇기 때문에 시각적 계층은 종종 활판 인쇄에 크게 의존합니다. 전문가들은 인쇄상의 계층 구조라고하는 별도의 시각적 계층 구조를 만들어 사본 표현의 중요성을 강조하기로 결정했습니다.

이 시스템은 사용자의 인식을 위해 최선의 방법으로 복사 내용을 구성하는 것을 목표로합니다. 디자이너는 글꼴을 수정하고 결합하여 가장 눈에 잘 띠고 눈에 잘 띄는 복사 요소와 일반 텍스트 정보 간의 대비를 만듭니다. 글꼴은 크기, 색상 및 패밀리와 정렬을 조절하여 수정됩니다.

활판 인쇄용 계층 구조에는 헤드 라인, 부제, 본문, 클릭 유도 문안 요소, 캡션 및 기타 다른 복사 내용 요소가 포함됩니다. 효과적인 시각적 계층 구조를 구축하려면 모든 요소를 여러 수준으로 세분화해야합니다. 


1차 수준. 그것은 헤드 라인과 같은 가장 큰 유형을 포함합니다. 기본 수준은 사용자에게 제품에 대한 사람들의 관심을 끌뿐만 아니라 핵심 정보를 제공하는 것을 목표로합니다.

2 차 수준. 이것은 쉽게 스캔해야하는 복사 요소 유형입니다. 일반적으로 사용자는 하위 헤더와 캡션을 사용하여 사용자가 콘텐츠를 빠르게 탐색 할 수 있습니다.

3차 수준. 본문 및 일부 추가 데이터는 3 차 수준을 구축합니다. 디자이너는 종종 상대적으로 작은 유형을 적용하지만 여전히 충분히 읽을 수 있어야합니다.


일반적으로 복사 내용은 UI의 주요 정보 소스이기 때문에 디자이너는 점진적으로 데이터를 표시해야합니다. 복사 요소를 다른 레벨로 세분화함으로써 디자이너는 한 장의 사본에서 다른 사본으로 쉽게 이동하고 올바른 순서로 정보를 인식 할 수 있습니다.

모바일 제품의 타이포그래피를 만드는 동안 설계자는 레이어 수를 2 개 이내로 유지하는 것이 좋습니다. 작은 모바일 화면은 3 단계의 공간을 충분히 제공하지 못합니다. 이것이 하위 헤더와 같은 2 차 수준의 요소가 모바일 UI를 깨끗하게 보이게 만드는 이유입니다.








시각적 계층 구조 도구

디자이너가 이미 모든 콘텐츠 구성 요소를 선택했으면 주문을 작성해야합니다. 디자이너가 UI 구성 요소의 효과적인 시각적 계층 구조를 설정하는 데 도움이되는 정보를 찾아 보겠습니다.

크기

시각 자료 변환을위한 가장 강력한 도구 중 하나는 크기입니다. 큰 것들이 작은 것보다 더 중요하다는 것이 인간의 마음에 뿌리를두고 있습니다. 이것이 바로 사용자의 관심이 자동으로 큰 단어 나 큰 그림으로가는 이유입니다.
 설계자는 각 컨텐츠 요소의 유의 수준을 구별해야하며이 데이터를 기반으로 구성 요소를 크고 작게 변환해야합니다.

색깔

이전 기사에서는 색상이 시각적 계층 구조 생성을위한 효과적인 도구로 사용되는 이유에 대한 사용자의 인식에 큰 영향을 미친다는 점을 언급했습니다.

색상은 사용자의 마음에 미치는 영향력에 따라 정의되는 고유 한 계층 구조를가집니다. 주의를 쉽게 끌 수있는 빨강, 주황, 검정과 같은 대담한 색상이 있습니다. 반면에, 배경처럼 더 잘 작동하는 흰색이나 크림 같은 약하거나 부드러운 색상이 있습니다.

디자이너는 다양한 색상을 사용하여 UI 요소의 약간의 계층 구조를 지원할 수 있습니다. 예를 들어 대담한 색상의 CTA 버튼은 다른 UI 요소가 더 부드러운 팔레트에서 만들어지면 사용자가 가장 먼저 보게됩니다.

대조

계층 구조는 명암 자체를 기반으로합니다. 하나의 요소는 다른 요소와 대조되며 사용자가 콘텐츠 요소 간의 차이점을 볼 수있는 방법입니다. 대비는 크기, 색상 및 스타일을 포함한 시각적 인 차이를 통해 만들 수 있습니다. 하지만 한 개체가 다른 개체를 완전히 가릴 수 없도록 균형을 유지하는 것이 좋습니다.


네비게이션 공간

사용자 인터페이스에는 많은 구성 요소가있을 수 있으며 사용자가 눈을 뗄 수 없을 정도로 눈에 잘 띄게하려면 디자이너가 개인 공간을 제공해야합니다. 음수 공백 또는 공백은 디자인 컴포지션의 요소 사이의 영역입니다. 일부 디자이너는 보통 공백을 디자인의 구성 요소로 생각하지 않지만 전문가는 적절한 공백을 만드는 데 유용한 도구로 활용합니다. 요소 사이에 적절한 양의 공백이 있으면 사용자가 각 요소를 알아 채고 인식하는 데 도움이됩니다.

근접성

위에서 말했듯이 시각적 계층 구조는 Gestalt 원칙을 바탕으로 설계되었으므로 디자이너는 UI 요소의 근접성에 깊은 관심을 기울입니다. 사람들이 시각적 요소를 그룹으로 통합하는 경향이 있으므로 UI 구성 요소를 사용자가 분류 할 수 있도록 배치해야합니다. 일부 요소가 특정 근접 도로 배치되면 사용자는이를 자동으로 그룹으로 인식합니다. 디자이너는 근접을 도구로 사용하여 콘텐츠를 하위 범주로 나눌 수 있습니다.

반복

사람들이 일부 요소가 비슷하게 보이면 자동으로 하나의 그룹으로 통합 할 수 있습니다. 그것은 반복이 작동하는 방법입니다. 디자이너는 목적에 따라 다른 객체에 대해 몇 가지 패턴을 반복하므로 사용자는이를 통합 할 수 있습니다. 예를 들어 한 페이지에 많은 양의 본문이있는 웹 사이트는 가장 중요한 문장을 다른 색상으로 강조 표시 할 수 있습니다. 이 색깔의 문장을 보면서 사용자는 하나의 요점에서 다른 요점을 따라갈 수 있습니다.

시각적 계층 구조는 효과적인 정보 아키텍처의 기초입니다. UI 요소가 구조화되고 체계화되면 사람들은 제품 사용을 즐겁게하며 문제 해결에 더 효과적입니다. 더욱이, 강력한 시각적 계층 구조는 사람들이 제품 내에서 더 나은 방향을 찾을 수 있기 때문에 탐색 시스템을 향상시킵니다. 계속 지켜보고 시각적 계층 구조에 대한 다음 기사를 준비하십시오.

추천 독서

사용자 인터페이스의 콘텐츠 복사 : 팁 및 사례
디자이너를위한 정보 아키텍처의 기초
정보 아키텍처 : 디자이너를위한 기술
효율적인 UX를위한 Gestalt 이론 : 유사성의 원리
UX 디자인을위한 Gestalt 이론 : Proximity of Principle

https://design4users.com/visual-hierarchy-how-to-organize-ui-content/ (번역)