저자에 관하여

존이었다 비주얼 디자이너에 대한 몇 년 전에 힘입어 상호 작용을 디자인합니다. 그는 석사 학위를 가지고 인간-컴퓨터 상호작용에서 드폴…더 aboutJon↬

지각 처리할 수 있 인식의 감각을 통해 세계의 시각,후각,소리,맛을 터치합니다. 특히,우리의 시각 시스템은 환경에서 방대한 양의 정보를 처리합니다. 요소를 별도로 인식하기보다는 우리의 뇌는 패턴,대상 및 모양을 우리가 이해할 수있는 전체 형태로 구성합니다.

gestalt grouping 원리를 시각적 인식의 이직으로 설정의 원리를 설명하는 방법을 우리가 인식하고 구성하는 이의 거대한 양의 시각 자극에. 론 원칙—유사성,호텔,마감,그 땅,지속성과 일반적인 운명은 인기 있는 도구를 사용하여 디자이너에 대한 시각적으로 조직하는 정보입니다. 비주얼 디자이너와 같은 기능을 수행,지금은 상호작용 디자이너가 이러한 원칙이 적용됩니다 정기적으로 관계를 만들과의 차이 요소들 사이에서 나는 디자인. 이러한 원칙이 어떻게 작동하는지,그리고이를 디자인에 사용하는 방법을 이해하면 더 강력하고 매력적인 작업이 생성됩니다.

디자인을 개선 할 준비가 되셨습니까? 유사성을 파헤 치면서 시작합시다.

유

론 원칙의 유사성을 말하는 요소는 유사한 인식을 더 관련 요소보다는 것은 비슷합니다. 유사성에 도움이 우리를 개체를 구성하여 그들의 관련성을 다른 개체 내에 그룹에 의해 영향을 받을 수 있는 속성의 색상,크기,형태와 방향입니다.

색상을 사용하여 관계 할당

유사성은 특히 색상의 영향을받습니다. 아래 예에서,어떻게 착색한 모양의 강력한 효과에 할당하여 그룹화하거나 관계도면 다른 모양이 포함되어 있습니다.

를 사용하여 크기를 할당 관계

크기는 또 다른 유용한 도구는 우리가 사용할 수 있을 만드는 유사성이 있습니다. 아래 예에서 크기의 유사성은 모든 모양이 동일하더라도 더 큰 모양이 눈에 띄고 그룹을 형성하게합니다.

를 사용하여 모양을 지정한 관계

모양에서 유용한 그룹으로 유사하지만,그것은 약한 그룹화 효과 비교했을 때 효과가 있습니다. 여기에서 볼 수있는 예에서 모양은 원과 사각형이 번갈아 나타나는 행과 반대로 원과 사각형의 열로 요소를 해석하게합니다.

사용하는 방향을 할당 관계

방향하는 데 사용될 수 있습 유사성에 의해뿐만 아니라. 이 그룹의 사각형 중 일부를 45 도 돌리면 관련이있는 것으로 인식되는 별도의 그룹화가 만들어집니다. 그들은 거의 그들 주위의 모양과 비교하여 비슷한 방향으로 함께 움직이는 것처럼 보입니다. 이것은 실제로 일반적인 운명의 게슈탈트 원리,우리가 미래의 기사에서 들어갈 원칙에 닿아 있습니다. 하지만 당신은 물론이 문서를 읽은 후(앞서 뛰어 구글 주시기 바랍니다!). 그것은 당신 주위에서 자주 일어나는 매혹적인 원칙입니다.

에 더 많은 색상

으로 앞서 언급한 유사성은 특히 영향을 받는 색상과 재정의할 수 있습니다 다른 속성이 있습니다. 예를 들어 색상을 추가하여 모양의 유사성 예를 재정의 할 수 있습니다. 이제 우리는 원과 사각형의 열과는 반대로 빨간색과 흰색 모양의 행을 번갈아 가며 인식합니다. 그것을 시도를 제공합니다. 원과 사각형의 열을 보려고합니다. 가능하지만 지금은 꽤 힘들지 않습니까?

또한 색상은 크기를 재정의 할 수 있습니다. 우리는 크기가 유사성의 예에 색상을 추가 할 때,우리는 서로 분리 두 그룹을 만듭니다. 지금 우리가 인식하는 대형 빨간색 사각형 중 하나로 그룹과 하나의 큰 흰색 사각형을 별도로 관련이 없는(고 외로운)그룹이다.

이러한 두 가지 예제를 통하여 얼마나 강력한 색이 될 수 있습에서 할당하여 간의 관계 요소입니다. 작업에 색상을 사용하여 요소를 차별화하려고하면 그룹화가 얼마나 강한지에 놀랄 것입니다.

유사성에서 연습

때 우리는 디자인 우리가 사용할 수 있는 유사성을 전하는 조직 및 연결하여하는 요소는 관련,또는 관련되어 있지 않습니다. 예를 들어 아래 살롱 사이트에 표시된 두 섹션은 상대 크기별로 그룹화됩니다. 우리는 왼쪽에 톱 스토리가 있고 오른쪽에 가장 많이 읽혀지는 두 개의 개별 그룹을 분명히 인식합니다. 도 두 섹션을 통해 이와 같은 기능을 표시하는 기사를 읽을 그룹화하여 크기를 할당합니다 더 돌출 왼쪽에 그룹화할 수 있는 살롱에 관심을 안내하여 그들의 최고의 이야기입니다.나는 이것이 어떻게 작동하는지 잘 모르겠습니다.Salon.com 기사 크기 차이에서 그들의 관계에 의해 그룹화.

대조적으로,크기의 부족에 차이가 이 예제에서 아마존하지 않는 할당을 어떤 특정한 중요성을 어떤 섹션입니다. 그럼에도 불구하고 유사성은 여전히 비슷한 크기와 모양의 반복을 사용하여 달성되어 항목의 행을 인식하게합니다.

비슷한 색상의 사용

우리가 알고 있는 컬러는 강력한 표시의 유사성을 구성하고 콘텐츠를 이해할 수 있습니다. 이 예에서 Cars.com 비슷한 색상을 사용하면 제목,본문 사본 및 링크 텍스트가 무엇인지 구분하는 데 도움이됩니다. (전체 공개:나는에서 작동 Cars.com 상호 작용 디자이너로서.)사용하여 뚜렷한 색상 이러한 각각의 요소에 대해,우리가 기대하는 함수와 마찬가지로,경우에는 파란색의 링크 텍스트,행동 유사하다는 것이다.

호텔

하는 형태의 원리 호텔에는 것을 말한 요소를 가까이 함께 인식하여 더 관련된 보다는 요소는 멀리 떨어져있다. 유사성과 마찬가지로 근접성은 우리가 다른 객체와의 관계성에 의해 객체를 구성하는 데 도움이됩니다. 근접성은 물체의 상대성을 나타내는 가장 강력한 원칙으로 정보를 더 빠르고 효율적으로 이해하고 구성 할 수 있도록 도와줍니다.

아래의 원의 예는 근접성이 우리가 물체를 관련이있는 것으로 인식하는 데 어떻게 사용될 수 있는지를 보여줍니다. 우리가 여기에서 보는 바와 같이,원은 각각이 별개의 대상으로 인식되면서 아무런 관계도 나타내지 않고 펼쳐져 있습니다.

그러나,원는 가까운 공간적 근접하여,그들은 할당된 관계는 더 이상 감지로 별도체.

공백

공백은 근접성을 만들기위한 귀중한 도구입니다. 같은 그룹의 서클을 가져 와서 공백을 추가하면 사물을 다르게 인식하는 데 도움이됩니다. 이제 왼쪽에서 도형의 근접성으로 인해 우리는 두 그룹을 각각 고유 한 그룹으로 인식하게됩니다. 오른쪽에서 도형의 근접성은 우리가 두 그룹을 행으로 인식하게하고,다시 각각 자체 그룹을 인식하게합니다. 디자인에 공백을 사용하여 그룹화를 강화할뿐만 아니라 다른 요소와 차별화하십시오.

근접의 힘

근접은 변화의 다른 요소를 압도 할만큼 강하다. 색상 및 모양과 같은 다른 속성이 추가 되더라도 근접성이 여전히 어떻게 승리하는지 알 수 있습니다. 그들이 할 수도로 시도,색상과 모양은 여기에 근접 압도하지 않으며 각 그룹화는 여전히 별도의 요소로 인식된다.

호텔에서는 실습

때 우리는 조직에서 정보를 우리의 디자인이,우리가 사용할 수 있는 인접한 관계를 만드는 요소 간의 이해를 돕기위해 정보를 제공됩니다. 예를 들어,애플 스토어에서 이러한 이미지를 가까이에서 함께 그룹화하여 전체 그룹에 관계를 할당합니다. 우리는 그것들을 관련이있는 것으로 인식하고 내용이 비슷할 것으로 기대합니다.

그러나 우리는 우리 제거 중심 열을,우리는 갑자기 감지 두 가지 별도의 그룹과는 기대에는 다양한 컨텐츠이다.

결합하는 호텔 및 유사성

그룹에 의해 근접 결합할 수도 있습와 유사성이 강하게 만들 관계입니다. 이 예에서,아마존 그룹에 의해 근접과 유사한 크기의 원인이 우리를 인식하는 두 개의 별도의 그룹에 할당 더 많은 돌기를 왼쪽 그룹입니다.

호텔과 계층 구조

호텔은 우수한 조직을 위해 계층적 요소입니다. 이 예제에서 상&배럴,옵션을 함께 그룹화에서는 일반적인 제목의 관계를 만드는 스캔과 정보를 발견하기 훨씬 더 쉽습니다.

때의 제목은 제거하고 옵션을 그룹화되지 않고 호텔에,우리는 잃는 관계를 만들어졌고 그것은 훨씬 더 어려워진이 신속하게 스캔하고 찾을 수 있는 정보를 원했다. 직접 해보십시오. 가서 제목이없는 그룹화 대 제목이있는 그룹화에서 커피 머그잔을 얼마나 빨리 찾을 수 있는지 확인하십시오. 빨리 그것에 뛰어 들기가 조금 더 어렵지 않습니까?

결론

사용하는 방법을 이해와 유사성에 근접에 영향을 미치는 요소 간의 관계에서의 작품을 만드는 데 도움이 됩니다는 디자인도록 쉽게 조직의 사용성을 향상시킨다. 유사성과 근접성을 사용하여 디자인에서 요소 간의 관계와 차이점을 모두 만듭니다. 실험의 사용으로 백색의 공간,색상,크기,형태와 방향으로의 요소를 섞어 모두 원리들을 함께 생산하는 매우 강력하고 매력적인 관계입니다.

의 다음 부분에서 이 시리즈,우리는 볼 것이퍼고 그 땅,하는 방법을 탐구하고 이러한 두 가지 형태 원리가 사용하여 긍정적이고 부정적인 공간을 만들 간단하면서도 강력한 관계입니다.

자원과 좋은 읽기

• Scholarpedia 에 게슈탈트 원리.
• “지각 형태의 조직 법칙”:1923 년 Max Wertheimer 의 정액 논문의 텍스트.
• 보편적인 디자인의 원리를 수정 및 업데이트:125 방법으로 유용성을 향상시키기 위해 영향을 인식,증가한 매력,더 나은 디자인의 결정,그리고 가르치는 디자인을 통해,윌리엄에 의해 Lidwell,Kritina Holden 과 질 Butler. 록 포트 펍,2010.
• 정보 시각화:Colin Ware 의 디자인에 대한 인식. 엘스 비어,2012.

• 디자인 원리: 시각적 인식과 원칙의 형태
• 연결 및 분리하는 요소를 대비와 유사성
• 작곡 균형,대칭 및 비대칭
• 을 개선하는 방법을 이메일 워크플로우 모듈 디자인을 가진
• 사용자 환경을 개선하는 데 실시간 기

(ml,da og,jb, il)