UI 디자인에서 시각적 계층 구조의 원칙
시각적 계층 구조는 사용자에게 제품을 안내하는 구조를 제공하여 사용자 경험을 개선하고 잘 디자인된 인터페이스를 만드는 데 도움을 줍니다.
크기(Size)
크기는 사용자의 주의를 끌기 위해 사용됩니다. 디자인 요소가 클수록 더 많은 관심을 끌 수 있습니다. 크기는 디자인 프레임이나 콘텐츠를 강조하여 더욱 중요하게 만들 수 있습니다.
사이즈의 좋은 예는 위의 인테리어 디자인 이미지에서 찾을 수 있습니다. 가장 먼저 눈에 띄는 것은 회사가 하는 일을 설명하는 텍스트입니다.
색상(Color)
밝은 색상은 음소거되거나 칙칙한 색상보다 더 돋보입니다. 색상은 앱이나 웹사이트의 분위기를 설정하는 데 도움이 됩니다. 색상은 브랜드의 개성을 반영할 수 있습니다. 사용자를 끌어들이고 메시지를 더 잘 전달할 수 있습니다.
위 예시의 밝은 색상은 화면의 중요한 요소에 주의를 집중시키는 데 도움이 됩니다. 원색은 클릭 유도 역할을 합니다. 버튼 및 텍스트 가격에 기본 색상을 사용하면 사용자는 어떻게 작동할지 예상하고 어떤 조치를 취해야 할지 이해할 수 있습니다.
정렬(Alignment)
정렬은 시각적 구조를 제공하는 데 사용됩니다. 같은 경로에 정렬된 요소는 서로 연관된 느낌을 주어 스캔하기가 더 쉬워집니다. 정렬은 디자인 요소의 통일성을 형성하는 데 사용됩니다.
위의 예에서와 같이 텍스트가 왼쪽에 정렬되어 사용자에게 더 나은 읽기 환경을 제공합니다. 중앙에 배치된 텍스트는 콜투액션에 사용할 수 있습니다.
구성 요소를 정렬하면 디자인이 더 깔끔하고 체계적으로 정리됩니다. 정렬은 외부 도우미 없이도 사용자가 서로 다른 요소 간의 연결을 더 잘 이해할 수 있도록 도와줍니다.
반복(Repetition)
반복은 동일하거나 유사한 디자인 요소를 재사용하는 것입니다. 사용자가 앱이나 웹사이트의 디자인 요소에 익숙해지도록 하는 데 사용됩니다.
반복은 타이포그래피, 색상, 크기, 선, 도형 등 다양한 형태로 나타날 수 있습니다. 위 디자인의 버튼은 어두운 색상을 사용하여 눈에 잘 띄도록 했습니다. 버튼의 색상은 두 화면과 필터 및 '장바구니에 추가' 기능 등 다양한 기능에서 일관되게 사용되며, 모두 콜투액션 버튼입니다. 앱 전체에 동일한 색상을 사용하여 사용자를 명확한 방향으로 유도합니다.
반복을 통해 일관성을 유지함으로써 사용자 경험을 개선하고 사용자가 어떻게 작동할지 예상할 수 있도록 하여 편안함을 느낄 수 있도록 합니다.
근접성(Proximity)
근접성은 비슷한 디자인 요소가 서로 가까이 있으면 서로 연관성이 있는 것으로 인식된다는 개념입니다. 멀리 떨어져 있는 요소는 별도의 그룹에 속한다는 것을 의미합니다.
근접성은 공백 또는 색상으로 결정할 수 있습니다. 가운데 화면을 예로 들어 보겠습니다. 두 요소에 블로그 정보가 포함되어 있습니다. 두 요소는 서로 연관되어 있지만 공백으로 구분되어 있습니다. 정보를 스캔 가능한 블록으로 표시하면 사용자는 제공된 정보를 스캔하여 읽을 수 있습니다. 공백을 사용하여 사용자의 시선을 한 블로그 콘텐츠에서 다른 콘텐츠로 유도합니다.
공백(Whitespace)
“네거티브 스페이스"라고도 하는 공백은 페이지의 콘텐츠 및 기능 요소 주변의 빈 공간입니다. 공백의 기본 역할은 사용자에게 한 번에 표시되는 텍스트와 기능 요소의 양을 줄여 디자인이 숨을 쉴 수 있도록 하는 것입니다.
예를 들어 다양한 UI 요소에서 공백 또는 음수 공백을 사용하는 것을 볼 수 있습니다. 단락, 버튼, 아이콘, 그림 등에서 볼 수 있습니다. 공백에는 모든 색상, 패턴 또는 텍스처를 사용할 수 있으며 반드시 흰색일 필요는 없습니다.
주어진 예에서는 가독성을 높이기 위해 텍스트와 같은 서로 다른 UI 요소 사이에 공백을 사용했습니다. 왼쪽 화면을 보세요. 의자가 페이지에서 가장 큰 요소이고 주변에 공백이 많기 때문에 주의를 집중시키는 요소로 보입니다. 요소는 주변에 공백이 많을수록 더 눈에 띄게 됩니다.
기본적으로 사용자의 주의를 끌 만한 다른 요소가 없기 때문에 부정적인 공간이 더 많은 요소에 사용자의 시선이 집중됩니다. 반면 오른쪽 화면에는 사용자가 정보를 쉽게 처리할 수 있도록 요소들이 간격을 두고 배치되어 있습니다.
텍스처 및 스타일(Texture & Style)
텍스처는 웹사이트 요소에 중요성을 부여합니다. 주의를 끌어서 특정 제목, 아이콘, 제목 또는 작업 버튼으로 유도합니다. 기본적으로 텍스처는 웹사이트의 가장 중요한 요소를 강조합니다.
텍스처는 누구를 대상으로 디자인하는지에 따라 달라지므로 항상 타겟 고객이 누구인지 파악하기 위해 조사를 해야 합니다. 텍스처는 사용자에게 감정적인 영향을 미치기 때문에 사용자와 디자인 간의 관계를 구축하도록 설계되었습니다. 결과적으로 어떤 사용자는 제품을 편안하게 느끼는 반면 다른 사용자는 지루하거나 흥미롭지 않다고 느낄 수 있습니다.
UI 디자인의 시각적 계층 구조는 제품을 개발하고 사용자 경험을 최적화하는 데 도움이 되는 개념입니다. 시각적 요소로 계층 구조를 만들기 위한 기준점 역할을 합니다. 시각적 계층 개념에는 아이디어를 더 명확하게 만들고, 구조를 부여하고, 정보를 여러 요소로 나누는 등 여러 가지 목표가 있습니다.
출처:
https://uxplanet.org/principles-of-visual-hierarchy-in-ui-design-fbcd31f88088