知覚プロセスは、視覚、嗅覚、音、味、触覚の感覚を通して世界を知覚することを可能にします。 特に、私たちの視覚システムは、その環境内の膨大な量の情報を処理します。 要素を別々に知覚するのではなく、私たちの脳はパターン、オブジェクト、形を理解できる全体の形に整理します。

視覚知覚のゲシュタルトグループ化の原則は、この組織を、この膨大な量の視覚刺激をどのように知覚して整理するかを説明する一連の原則とし Gestaltの原則-類似性、近接性、閉鎖、図地面、継続および共通の運命-は視覚的に情報を整理するために設計者によって使用される一般的なツールです。 ビジュアルデザイナーとして、そして今はインタラクションデザイナーとして、私はこれらの原則を定期的に適用して、デザイン内の要素間の関係と違い これらの原則がどのように機能するか、およびデザインでそれらを使用する方法を理解することは、より強く、より魅力的な作業を生成します。あなたのデザインを改善する準備ができていますか？

あなたのデザインを改善する準備ができています 類似性を掘り下げることから始めましょう。

類似性

類似性のゲシュタルトの原則は、類似している要素は、類似していない要素よりも関連していると認識されていると言います。

類似性

類似性の 類似性は、グループ内の他のオブジェクトとの関連性によってオブジェクトを整理するのに役立ち、色、サイズ、形状、向きの属性の影響を受ける可能性

色を使用して関係を割り当てる

類似性は特に色の影響を受けます。 次の例では、異なる図形が含まれている場合でも、色付きの図形がグループ化または関係を割り当てる際にどのように強い効果を持つかに注目してく

関係を割り当てるためにサイズを使用して

サイズは、我々は類似性を作成する際に使用できる別の便利なツールです。 以下の例では、サイズが類似していると、すべての図形が同じであっても、より大きな図形が目立つようになり、グループが形成されます。

Shapeを使用してリレーションシップを割り当てる

Shapeは類似性によるグループ化に便利ですが、色やサイズと比較して最も弱いグルー ここに見られる例では、shapeは、要素を円と正方形の列として解釈し、円と正方形を交互に並べた行とは対照的に解釈します。

オリエンテーションを使用して関係を割り当てる

オリエンテーションは、類似性によってグループ化するためにも使用できます。 このグループの正方形のいくつかを45度回転させることによって、関連していると認識される別のグループ化が行われます。 彼らはほとんど彼らの周りの形状と比較して、同様の方向に一緒に移動しているように見えます。 これは実際に共通の運命のゲシュタルトの原則に触れ、将来の記事では原則に触れます。 しかし、（あなたはもちろん、この記事を読んだ後、先にジャンプし、それをGoogleに自由に感じます！). それはあなたの周りで頻繁に起こる魅力的な原則です。

色の詳細

前述のように、類似性は特に色の影響を受け、他の属性を上書きすることができます。 たとえば、色を追加することで、形状の類似性の例を上書きすることができます。 今、私たちは円と正方形の列とは対照的に、赤と白の形の交互の行を知覚します。 それを試してみてください。 円と正方形の列を見てみてください。 可能ですが、今はかなり厳しいですよね？

さらに、色はサイズを上書きすることができます。 サイズの類似性の例に色を追加すると、互いに別々の2つのグループが作成されます。 今、私たちは大きな赤い四角を1つのグループとして認識し、単一の大きな白い四角を別々の無関係な（そして孤独な）グループとして認識します。

これら二つの例は、要素間の関係を割り当てる際に色がどれだけ強力であるかを示しています。 要素を区別するためにあなたの仕事で色を使用してみてください、あなたはあなたのグループがどのくらい強いで驚かれることでしょう。

実際の類似性

私たちが設計しているとき、どの要素が互いに関連しているか、または関連していないかを示すことによって、類似性を使 例えば、以下のサロンのサイトに示されている二つのセクションは、それらの相対的なサイズでグループ化されています。 私たちは明らかに左のトップストーリーと右のほとんどの読み取りで、二つの別々のグループを知覚します。 両方のセクションが同じ機能を提供しているにもかかわらず—記事を読むために表示する—サイズでグループ化すると、サロンが彼らのトップストーリーに注意を導くことを可能にする左のグループ化に多くのsalienceを割り当てます。p>

これとは対照的に、Amazonからのこの例のサイズの違いの欠如は、いずれかのセクションに特に重要性を割 それにもかかわらず、類似性は、類似したサイズと形状の繰り返しを使用することによって達成され、私たちはアイテムの行を知覚する。p>

同様の色の使用

私たちは、色が整理し、コンテンツを理解できるように支援し、類似性の強力な指標であ この例ではCars.com、同様の色の使用は、見出し、本文のコピー、およびリンクテキストとは何かを区別するのに役立ちます。 （完全開示：私はで働いていますCars.com インタラクションデザイナーとして。）これらの要素のそれぞれに異なる色を使用することにより、それらは同様に機能し、青いリンクテキストの場合は同様に動作することが期待され

近接

近接のゲシュタルトの原則は、一緒に近い要素は、遠く離れている要素よりも関連していると 類似性と同様に、近接性は、他のオブジェクトとの関連性によってオブジェクトを整理するのに役立ちます。 近接性は、オブジェクトの関連性を示すための最も強力な原則であり、情報をより迅速かつ効率的に理解し、整理するのに役立ちます。以下の円の例は、オブジェクトが関連していると認識するのに役立つ近接性をどのように使用できるかを示しています。

以下の円の例は、オブジェクト 私たちがここで見るように、円は広がり、関係を示さず、それぞれが別々のオブジェクトとして認識されています。

しかし、円が互いに近接した空間に引っ張られると、それらは関係が割り当てられ、もはや別々のオブジェクトとして認識されません。

ホワイトスペース

ホワイトスペースは、近接を作成するための非常に貴重なツールです。 同じグループの円を取って空白を追加すると、物事を別々に認識するのに役立ちます。 さて、左側では、形状の近さは、私たちは列、それぞれ独自のグループとして二つのグループを認識する原因となります。 右側では、形状の近接性により、2つのグループが行として認識され、それぞれが独自のグループとして認識されます。 デザインに空白を使用して、グループを強化したり、他の要素と区別したりすることができます。

近接のパワー

近接は、変化の他の要素を圧倒するのに十分強いです。 色や形状などの他の属性が追加された場合でも、近接性がどのように勝つかに注意してください。 彼らがかもしれないように試してみて、色と形はここで近接を圧倒しないし、各グループ化はまだ別の要素として認識されています。P>

実際に近接

デザイン内の情報を整理するとき、近接を使用して要素間の関係を作成し、提示された情報を理解するのに役立 たとえば、Apple Storeからのこれらの画像を近接してグループ化することで、グループ全体に関係を割り当てます。 私たちはそれらを関連していると認識し、コンテンツが類似していることを期待しています。