본문 바로가기

자료실/UX ㅣ UI Design

Design, UI/UX (게슈탈트 이론) - 강력한 UI를 위한 모바일 타이포그래피 철칙

디자인, UI / UX


UX 디자이너를위한 Gestalt 이론 : 유사성의 원리.


인터페이스 디자인에서 Gestalt 이론 응용을 고려한 기사 : 이번에는 UI에서 효과적인 콘텐츠 그룹화의 유사성 원칙에 초점을 맞 춥니 다.


UX 디자이너를위한 Gestalt 이론 : 유사성의 원리.

많은 디자이너가 창의적인 직감과 날카로운 눈을 자랑 할 수 있습니다. 미래의 웹 사이트 또는 앱의 레이아웃에 합리적인 사고와 측정으로 많은 열정과 느낌을 더합니다. 많은 경우, 자랑스럽지 않지만 모든 세부 사항을 함께보고, 사용자 흐름의 함정을 느끼고, 유용성을 해치지 않는 독창적 인 솔루션을 찾는 진정한 기술입니다. 그러나이 방법에는 마법이 없습니다.이 기술은 재능뿐 아니라 기술 및 장치와 함께 빠르게 변화하는 이론, 표준 및 지침을 연구함에있어 실용적인 경험과 끈기에 기반합니다. 창의적인 실험조차도 상호 작용 메커니즘 및 요소에 영향을 미치는 지식을 기반으로합니다. 규칙을 어기려면 잘 알아야합니다.

웹 및 모바일 인터페이스의 시각적 계층 구조는 디자이너가 창의적 잠재력을 강화했음을 인식하여 도메인에 속합니다. 사람들이 정보를 인식하고 좋은 네비게이션, 소화가능한 복사 및 효과적인 색상 선택을 구축하는 데 사용하는 방법을 탐색하면 제품의 유용성과 스캔 가능성이 중요한 부분으로 큰 영향을 미칩니다. 이제는 기본으로 돌아가겠습니다. Gestalt 그룹 원칙이 사용자 인터페이스에 긍정적 인 영향을 줄 수있는 방법을 수정 해 봅시다.



게슈탈트 이론이란 무엇입니까?

기본적으로 게슈탈트 (Gestalt)는 독일어의 게슈탈트 (Gestalt)에서 유래 한 용어로 "모양, 형식"을 의미합니다. 그것은 주로 사람들이 주로 혼돈스럽게 보이는 세계로부터 끊임없이 얻는 데이터에 대한 의미있는 지각의 법칙을 탐색하는 분야에서인지 심리학에 주로 사용됩니다. 이 운동의 기본 아이디어는 게슈탈트의 심리학자 인 커트 코프 카 (Kurt Koffka)가 잘 아는 구절을 통해 발견 할 수 있습니다. "전체가 부분의 합계 이외의 것"입니다. 사람들이 여러 요소로 구성된 복잡한 대상을 인식하면 단순한 대상 집합 대신에 전체 구성 시스템에 부분을 배열하는 의식적 또는 무의식적 인 방법을 적용합니다. 다양한 인식 수준에서 작동하지만 시각적 부분은 디자이너가 인터페이스를 만드는 데 가장 흥미로운 것 같습니다.

왜 디자이너들은이 문제에 관심을 가질 수 있습니까? 앱 또는 웹 사이트 사용자의 심리를 더 잘 이해할 수 있기 때문입니다. 시각적 인식에 영향을 미치는 요인을 알면 UX 디자인 프로세스가 훨씬 능숙 해지고 성공적인 상호 작용의 비율이 높아지고 사용자가 이러한 방식으로 얻을 수있는 오해의 수준이 낮아집니다. 이 접근 방식의 다양한 수준 중에서 그룹화 원칙 (또는 법칙)은 디자이너가 고려해야 할 가장 중요한 요소 일 것입니다. 이 원칙은 사람들이 볼 수있는 것을 5 개의 글로벌 카테고리로 구성된 일부 패턴과 함께 정렬한다는 아이디어를 기반으로합니다 : 근접성, 유사성, 연속성, 폐쇄 및 연결성. Vertical Measures 블로그에서 제공하는 infographics 중 하나이며 몇 가지 원칙에 대한 핵심 설명을 시각화합니다.




게슈탈트 이론 - 그룹화 원칙




사용자 인터페이스에서 적용되는 그룹화 원리는 신중하게 레이아웃 요소에 대한 인식을보다 빠르고 쉽게 만들뿐만 아니라 다양한 상호 작용 수준에서 우선 순위를 설정합니다. 오늘날 우리는 디자인 관행에서 널리 사용되는 그룹화의 유사성 원칙을 고려할 것입니다.


유사성 원리

유사성의 원칙은 모양, 크기, 색상, 질감, 가치 또는 방향과 같은 시각적 특성을 공유하는 것들이 함께 소속한다는 생각에 근거합니다. 즉, 사람이 요소 세트를 인식하면 하나 이상의 기능을 모두 가진 항목을 관련 항목으로 그룹화하는 경향이 있습니다. 따라서 서로 다른 레이아웃 요소를 동일하거나 유사한 시각적 기능을 제공함으로써 디자이너는 적절한 연결을 설정하고 전체 스키마를 더 빨리 이해할 수 있습니다.

유사성은 색상, 모양, 크기 및 방향과 같은 다양한 시각적 매개 변수를 기반으로 할 수 있습니다. Tubik 팀이 설계 한 인터페이스의 실용적인 예를 확인해 봅시다.


색깔



Bright Vibe Calendar

다음은 간단한 캘린더 앱에서 색상 유사성을 적용하는 일반적인 예입니다. 달력 화면에서 요일을 나타내는 문자는 달력 격자의 숫자에 사용되는 색상과 다른 하나의 색상으로 시각적으로 그룹화됩니다. 따라서 이러한 유형의 기호를 구분하는 데는 빠른 눈으로 파악할 수 있습니다. 즉, 첫 번째 검색 프로세스가 단순 해집니다. 다음 레벨의 색상 유사성은 숫자 필드에서 발생합니다. 사용자가 선택한 주간 날짜는 더 밝게 보이고 다른 날짜는 더 흐리게 보입니다. 주요 인터랙티브 영역은 밝게 채색되어있어 즉시 눈에 띄며 놓칠 수없는 시각적 액센트를 제공합니다. 따라서 색상을 사용하면 디자이너가 그룹화 원칙을 통해 효과적인 시각적 계층 구조를 통해 사용자가 쉽게 탐색 할 수 있습니다.








응용 프로그램

여기서 한 가지 더 많은 예제는 그래픽 인터페이스의 복사본에 대해 색상 별 그룹화를 효과적으로 적용하는 방법을 보여줍니다. 이미 완료로 표시된 위치가 진행중인 작업과 다른 색상으로 표시되는 할 일 목록의 화면을 볼 수 있습니다. 그것은 사용자가 신속하게 목록을 스캔하고 초 단위로 작업 종류를 그룹화 할 수 있습니다.


UX 디자이너를위한 게슈탈트 이론 유사성의 원리./ 블로그 앱


색상별로 그룹화 원칙을보다 복잡하게 적용하면 카테고리 및 블록 내용을 표시 할 수 있습니다. 블로그, 전자 상거래 또는 교육 리소스 등 다양한 수준으로 구성된 다양한 콘텐츠로 구성된 인터페이스에서 매우 잘 작동합니다. 색상 표시자는 탐색을 단순화하고 디자인의 일관성을 유지하여 사용자가 색상 프롬프트를 기억하고 그들이 원하는 콘텐츠. 위의 예는 블로그 응용 프로그램이이 원칙을 적용하는 것을 보여줍니다. 다양한 게시물이 글로벌 카테고리 주위에 구성되고 아이콘, 색칠 된 탭 및 사용자 프로필의 게시물에 대한 빠른 통계에서 볼 수있는 색상으로 표시됩니다. 아래에 표시된 Moneywise App에서도 동일한 원칙이 적용됩니다.




일러스트레이션 그래픽 디자인 / 
Moneywise 앱



이것은 경제학에 전념하는 교육용 앱입니다. 콘텐츠는 네 가지 글로벌 카테고리로 구성됩니다. 범주를 표시하는 데 사용되는 색은 해당 범주에 속한 모든 카드의 배경색으로 사용됩니다. 따라서 상호 작용 과정에서 사용자는 자신이 어디에 있는지 신속하게 파악할 수 있습니다.

물론이 방식의 색상 그룹화는 한 화면에 요소를 구성하는 것이 아니라 모든 디지털 제품에서 화면이나 페이지를 다르게 구성하므로 더욱 중요합니다. 그러나 이것은 또한 게슈탈트 원칙에 부합한다. 이러한 접근 방식은 디자이너가 일관성있게 보이고 느낄 수있는 인터페이스를 생성하고 상호 작용에서 화면 상호 작용에 이르기까지 화면에서 화면으로의 시각적 인식의 전반적인 무결성을 지원한다.

크기

유사성의 원칙은 크기를 기준으로 요소를 그룹화하여 사용자를 지원하는 강력한 시각적 계층 구조의 기반을 확립하면서 직관적이고 사용자 친화적 인 인터페이스를 만드는 또 다른 초석입니다. 이 접근 방식은 우선 순위를 설정하고 가장 중요한 콘텐츠를 표시하는 데 도움이됩니다. 이 원칙에 따라 유사한 콘텐츠 요소를 그룹화하면 사용자간에 연결이 이루어지며 사용자가 사본을 읽거나 모든 세부 정보를 볼 수있는 것보다 빠릅니다.

이 원칙을 실행하는 좋은 방법은 복사 내용의 구성을 점검하는 것입니다.



건축사 웹 사이트


이 예는 건축 회사의 기업 웹 사이트를 특징으로합니다. 회사의 장점과 접근 방식을 제시하는 복사본 블록은 두 가지 그룹 원칙을 동시에 적용하는 키워드로 지원됩니다. 서로 다른 크기와 다른 텍스트 방향을 사용합니다. 상호 작용의 과정에서, 그들은 분명히 관련 요소로 인식됩니다. 또한 확장 된 메뉴 페이지는 크기에 따라 복사 요소를 키워드, 범주 및 하위 범주로 그룹화하는 활자체 계층 구조를 보여줍니다.



UI 탐색



탭 막대 상호 작용 개념

크기 및 색상별로 그룹화하는 또 다른 예가 있습니다. 중요한 상호 작용 요소가 동일한 크기와 색조가있는 그늘에서 제공되는 탭 표시 줄의 개념을 볼 수 있습니다. 반면 핵심 대화 형 요소 인 + 버튼은 밝은 색상과 더 큰 크기를 통해 두드러지게 나타납니다. 또한,이 버튼을 통해 컨텐츠를 추가하려고 시도하면 사용자는 다른 유형의 컨텐츠에 대해 세 가지 옵션을 제공 받게됩니다. 다시 말해, 부모 버튼과 동일한 색상을 사용하지만 크기가 작은 3 개의 버튼을 그룹화하면 인터페이스는 사용자가 인식 인식의 일반적인 작업을 기반으로 쉽게 탐색 요소의 연결과 계층을 설정할 수 있습니다.


모양

웹 페이지 또는 화면에서 요소를 그룹화하는 또 다른 방법은 모양으로 표시하는 것입니다.



UI 애니메이션 디자인/ Green Spy 앱 상호 작용



이 예제는 동일한 모양의 카드를 사용하여 실제 객체 (데이터 카드의 기반)와의 상호 작용을 시뮬레이션하는 앱을 보여줍니다. 이 접근법은 사용자가 관련 콘텐츠 블록 세트를 인식 할 수있게 해줍니다.




상큼한 앱



위에 표시된 Homey 앱의 인터페이스는 한 화면에서 다른 화면으로 모양을 일관되게 그룹화하는 예를 제공합니다. 룸을 표시하는 버튼은 둥근 사각형 모양을 사용하고 특정 실내 화면 내의 다양한 표시기 버튼은 둥근 모양을 사용합니다. 그것은 응용 프로그램의 글로벌 탐색뿐만 아니라 관련 레이아웃 요소 사이의 명확한 연결을 설정합니다.

우리가 디자인에서 게슈탈트 이론의 사용을 개정하기 시작 했음에도 불구하고,이 단순하면서도 효과적인 원리를 아는 것이 사용자를위한 많은 노력을 덜어주고 인간의인지 능력과 심리적 패턴에 따라 작동하는 메커니즘으로 사용자 친화적 인 인터페이스를 지원할 수 있다는 것은 이미 명백합니다. 업데이트를 따라 근접성, 대칭성, 연속성 및 다른 그룹화 원칙에 대한 설명 및 예를 확인하십시오.




추천 도서

디자인 원리 : 시각 지각과 게슈탈트의 원리
유사성 및 근접성의 원칙으로 디자인 개선
시각 지각의 게슈탈트 이론
게슈탈트 원칙 : 디자인은 어떻게 인식되고 있습니까?
디자인의 심리학 : 사용자 이해를 돕는 원칙


https://design4users.com/gestalt-theory-for-ux-designers-principle-of-similarity/(번역)