우리는 대칭 요소가 연결되어 있지 않더라도 연결되어 있다고 인식하는 경향이 있습니다.
게슈탈트 디자인 원칙은 게슈탈트 심리학 에서 가져온 일련의 개념과 지침으로 , 마음은 여러 개별 사물이 아닌 조직화된 사물 그룹을 전체적으로 처리하는 경향이 있다고 이론화합니다. 이러한 개념은 우리가 정보를 배열하는 방식에 지각에 대한 더 나은 이해를 통합하는 데 도움이 될 수 있으므로 보다 효과적으로 의사 소통할 수 있습니다.
이것은 디자인의 게슈탈트 원칙에 대한 여러 부분으로 구성된 시리즈의 다섯 번째 항목입니다. 첫 번째 근접성(Proximity )은 사물이 얼마나 밀접하게 배열되어 있는지에 따라 마음이 사물 그룹을 다르게 인식하는 방식을 다룹니다. 두 번째 폐쇄는 마음이 실제로 보이는 것보다 더 많은 정보를 인식할 수 있는 방법을 설명합니다. 세 번째, 유사성(Similarity )은 마음이 유사해 보이는 물체를 그룹이나 패턴으로 인식하는 이유를 설명합니다. 네 번째, 연속성 은 선이나 곡선에 배열된 요소가 그렇지 않은 요소보다 더 관련이 있는 것으로 인식됨을 시사합니다.
대칭이 작동하는 방식
공통 축을 따라 있는 요소의 모양, 크기 및 위치의 균형인 대칭은 아마도 안정성을 만드는 데 있어 가장 강력한 게슈탈트 원칙일 것입니다. 레이아웃에 대칭이 있을 때 보는 사람은 콘텐츠뿐만 아니라 하위 구조 도 더 쉽고 빠르게 인식할 수 있습니다 . 레이아웃의 하위 구조는 기능적 및 개념적 요소 간 연결의 의미 및 목적과 정보의 분류법으로 구성됩니다.
간단히 말해서 균형은 이해를 위한 윤활유입니다.
여러 종류의 대칭이 있습니다. 몇 가지 예는 다음과 같습니다.
반사 대칭 — 가장 일반적인 유형의 대칭입니다. 우리가 가장 자주 생각하는 것. 두 면이 수직 및 수평 축을 따라 정확히 동일한 위치에 있는 요소로 구성될 때 하나는 다른 하나의 반사로 보입니다. 예를 들어 안면 대칭은 사람의 주관적인 미의식을 높이는 경향이 있습니다.
회전 대칭 — 요소가 중심점이나 공통 축을 중심으로 회전하는 동안 위치와 방향을 유지하면 회전 대칭이 됩니다.
병진 대칭 - 요소가 새 위치에서 재생산되거나 재배치되는 동안 위치와 상대 방향을 유지하면 병진 대칭이 됩니다. 아래의 특정 디자인 예제에서 이것을 사용하겠습니다.
병진 대칭은 원자 설계의 필수 요소입니다. 브래드 프로스트(Brad Frost)의 디자인 유기체 ("상대적으로 복잡하고 뚜렷한 인터페이스 섹션을 형성하기 위해 함께 결합된 분자 그룹")에 대한 아이디어는 병진 대칭이 작동하는 방식과 그것이 좋은 디자인을 만드는 이유를 보여주는 완벽한 예입니다.
Frost의 "유기체"를 디자인 시스템 전체에서 사용되는 구성 요소로 생각하십시오. 일반적인 예로는 기사 목록이나 제품 그리드와 같은 다른 위치의 콘텐츠를 소비하고 나열하는 페이지 또는 템플릿에 사용되는 콘텐츠 카드가 있습니다. 카드의 레이아웃이 일관되게 유지되면 레이아웃이 어떻게 표시되는지에 관계없이 모든 "유기체"가 같은 종류라는 것을 보는 사람이 빠르게 이해하는 데 도움이 됩니다 .
비대칭이 작동하는 방식
대칭은 우리가 보는 요소가 균형을 이루고 있기 때문에 안정성을 전달합니다. 그러나 비대칭이 반드시 불균형을 불안정으로 바꾸는 것은 아닙니다. 비대칭은 전반적인 의도를 유지하면서 동작, 동작 및 방향성을 전달하는 데 사용할 수 있습니다.
몇 년 전에 저는 콘텐츠 허브에 대한 3열 레이아웃 의 이점을 설명하는 기사를 썼습니다 . 비대칭은 이러한 종류의 레이아웃 기능에 매우 중요합니다. 왼쪽 열의 요소는 오른쪽의 요소와 동일하지 않지만 기존의 스캔 패턴과 일치하고 의도된 용도와 작업을 용이하게 하기 위해 심리적 기대치를 활용합니다.
이 레이아웃의 왼쪽에는 가운데 열의 콘텐츠 목록을 필터링하는 도구가 있고 오른쪽에는 다른 곳에서 콘텐츠 경험을 심화하기 위한 참여 지점이 있습니다. 물론 여기서는 필터의 요소, 콘텐츠 목록 및 연결 지점이 모두 표준화되고 반복되므로 번역 대칭이 작동합니다. 그러나 기존의 L 패턴 기대치를 의도적으로 활용하는 것은 레이아웃의 전반적인 비대칭성입니다. 이를 설명하기 위해 이전 기사에서 인용하겠습니다.
“사용성 연구는 방문자가 페이지를 스캔할 때 "L" 패턴을 따른다는 사실을 계속 확인합니다. (때로는 F 패턴이라고도 합니다.) 기본적으로 이것은 페이지를 위에서 아래로 스캔한 다음 왼쪽에서 오른쪽으로 스캔한다는 의미입니다. 사용자 행동의 방향성 패턴을 설명하는 것 외에도 "L" 패턴은 기대치를 나타냅니다. 스캔할 때 우리는 특정 장소에서 특정 종류의 정보를 볼 것으로 예상합니다. 웹의 나머지 부분(우리가 일상에서 보는 다른 모든 웹사이트)에서 사용된 수년간의 온라인 광고 및 레이아웃 규칙은 모든 상황에 적용되는 일반적인 기대치를 낳았습니다. 비즈니스와 즐거움.
일반적으로 기대하는 이러한 기대는 세 가지 유형으로 분류되며, L 패턴 덕분에 자연스럽게 페이지의 세 위치에 해당됩니다.
도구 : 방문자는 왼쪽에서 자신의 경험을 변경하는 데 사용할 수 있는 도구를 기대합니다. 대부분의 웹사이트는 페이지의 이 영역에서 탐색 메뉴, 필터 및 지역화된 검색 도구를 제공하는 경향이 있습니다. 사용자가 선택 항목을 사용할 때 페이지에 표시되는 콘텐츠에 어떤 영향을 미치는지 쉽게 확인할 수 있기 때문입니다.
내용 : 페이지의 중앙은 일반적으로 페이지의 주요 내용을 위해 예약되어 있습니다. 사용자가 눈을 위아래로 움직이지 않고 한 방향으로 페이지를 빠르게 스캔할 수 있기 때문입니다. 스캔하기가 더 쉽기 때문에 단일 열을 권장합니다. 예를 들어 그리드는 해석하는 데 훨씬 더 많은 생각이 필요하기 때문에 정보가 부족한 내비게이션 결정을 내리는 경향이 있습니다. 사용자는 선택하기 전에 그리드의 내용이 두 축에 어떻게 배열되어 있는지에 대한 논리를 파악해야 합니다. 종종 그들은 이 작업을 제대로 수행하지 못하고 도착한 페이지가 실제로 찾고 있던 페이지가 아니라는 사실을 깨닫고 나면 단계를 다시 추적하게 됩니다.
관련 정보 : 유사한 기사, 프로모션, 광고 및 클릭 유도문안과 같은 페이지의 주요 콘텐츠와 관련된 정보는 일반적으로 오른쪽에 배치되어 주요 콘텐츠에 문맥적으로 배치될 수 있습니다.”
시청자의 기대치가 다른 곳에서 경험한 바에 의해 이미 어떻게 설정되었는지 이해하는 것은 일반적으로 디자인에서 중요한 포인트입니다. 이것이 디자인 규칙이 존재하는 이유입니다. 특히 원하는 결과가 다른 사람의 관심에 달려 있을 때 우리 모두는 새로운 방식으로 무언가를 하는 것과 기존 방식으로 하는 것 사이에서 균형을 유지해야 합니다.
우리의 디자인 선택이 뷰어가 레이아웃의 구성 요소가 표시될 때마다 작동하는 방식 또는 전체 레이아웃이 축을 가로질러 확장될 때 작동하는 방식을 "재학습"하도록 요구한다면 뷰어의 초점이 너무 일찍 올 것이라고 예상하는 것입니다. 주의는 초점을 지원합니다. 그 반대가 아닙니다.
디자인의 모든 게슈탈트 원칙과 마찬가지로 대칭도 믿을 수 없을 정도로 단순한 개념일 수 있습니다. 이 예제가 전체 디자인 프로세스에서 생성한 레이아웃을 생각하는 데 도움이 되어 보다 스캔 가능한 정보 배열을 만드는 데 도움이 되기를 바랍니다.
