この記事の音声バージョンを聞く

ネガティブスペースは長い間、優れたデザインの定番でした。デザインの要素の周りに空白を残すことは、通常最初に頭に浮かぶことです。しかし、その空白を使用して実際には存在しない要素を推測するデザインがあります（例として、FedExロゴのEとXの間に隠された矢印がすぐに思い浮かびます）。

感圧タッチ技術とは

人間の脳は、画像の空白を埋めて、その部分の合計よりも大きい全体を作成するのに非常に優れています。木の葉や歩道のひび割れなどに顔が見えるのはそのためです。

この原則は、視覚のゲシュタルト原則の背後にある最も重要な根底にある考えの1つです。理論について書かれた最も影響力のある初期の提案は、マックス・ヴェルトハイマーによって1923年に発表されました。 知覚組織のゲシュタルト法 、ヴォルフガングケーラーの1920年の議論 物理的形状 また、このテーマに関する多くの影響力のあるアイデアが含まれています。

かかわらず 最初にアイデアを提案したのは誰ですか （1890年までさかのぼるエッセイがあります）、ゲシュタルトの原則は誰にとっても重要なアイデアのセットです デザイナー 学ぶこと、そしてそれらの実装は、デザインの美学だけでなく、その機能性と使いやすさも大幅に向上させることができます。

簡単に言えば、ゲシュタルト理論は、人間の脳が無意識のうちに部分を組織化されたシステムに配置することによって、多くの要素で構成される複雑な画像やデザインを単純化して組織化しようとするという考えに基づいています。一連の異なる要素。私たちの脳は、私たちが住んでいる環境をよりよく理解するために、構造とパターンを見るために構築されています。

ゲシュタルト理論に一般的に関連する6つの個別の原則があります。 類似性 、 継続 、 閉鎖 、 近接 、 図/地面 、および 対称性と秩序 （とも呼ばれている 簡潔 ）。ゲシュタルトに関連することもある、いくつかの追加の新しい原則もあります。 共通の運命 。

類似性

似たようなものをグループ化するのは人間の本性です。ゲシュタルトでは、類似した要素は、互いに近接しているかどうかに関係なく、視覚的にグループ化されます。それらは、色、形、またはサイズでグループ化できます。 類似性 デザイン内で互いに隣接していない可能性のある要素を結合するために使用できます。

もちろん、群衆から目立たせたい場合は、物事を非類似にすることができます。行動を促すフレーズのボタンは、ページの他の部分とは異なる色でデザインされていることが多いのはそのためです。そのため、ボタンは目立ち、訪問者の注意を目的のアクションに引き付けます。

UXデザインでは、類似性を使用すると、訪問者にどのアイテムが類似しているかが明確になります。たとえば、反復的なデザイン要素（3〜4行のテキストを伴うアイコンなど）を使用する機能リストでは、類似性の原則により、それらを簡単にスキャンできます。対照的に、強調したい機能のデザイン要素を変更すると、それらが目立つようになり、訪問者の認識においてより重要になります。

デザイン全体のリンクが同じようにフォーマットされていることを確認するのと同じくらい簡単なことでも、 類似性の原則 あなたの訪問者があなたのサイトの組織と構造を認識する方法で。

フォントはいくつありますか

継続

ザ・ 連続の法則 線が実際にどのように描かれたかに関係なく、線を表示するとき、人間の目は最も滑らかな経路をたどると仮定します。

この継続は、訪問者の目を特定の方向に導くことが目標である場合に役立つツールになります。彼らはページ上の最も単純なパスをたどるので、彼らが見るべき最も重要な部分がそのパス内にあることを確認してください。

目は自然に線をたどるので、アイテムを一列に並べると、自然にあるアイテムから次のアイテムに目を引きます。アマゾンのようなサイトの関連商品リストと同様に、水平スライダーはそのような例の1つです。

閉鎖

閉鎖 これは最もクールなゲシュタルト原則の1つであり、この記事の冒頭ですでに触れたものです。脳がデザインや画像の欠けている部分を埋めて全体を作成するという考えです。

最も単純な形では、閉鎖の原理により、目は点線のようなものを最後までたどることができます。しかし、世界自然保護基金のように、より複雑なアプリケーションがロゴによく見られます。パンダの輪郭の大きな塊が欠落していますが、脳は欠落しているセクションを埋めて動物全体を見るのに問題はありません。

クロージャはロゴデザインで非常に頻繁に使用され、USA Network、NBC、Sun Microsystems、さらにはAdobeなどの他の例もあります。

UXとで機能するクロージャのもう1つの非常に重要な例 UIデザイン これは、ユーザーが左または右にスワイプするとさらに多くの画像が見つかることを示すために、ユーザーの画面からフェードアウトする部分的な画像を表示する場合です。部分的な画像がない場合、つまり完全な画像のみが表示されている場合、脳はさらに多くの画像が表示される可能性があるとすぐに解釈しないため、ユーザーがスクロールする可能性は低くなります（閉鎖がすでに明らかであるため）。

近接性

近接性 要素が互いにどれだけ近いかを示します。最も強い近接関係は、重なり合う被写体間の関係ですが、オブジェクトを1つの領域にグループ化するだけでも、強い近接効果が得られます。

もちろん、その逆も当てはまります。要素間にスペースを入れることで、他の特性が同じでも分離を加えることができます。

このサークルのグループを例にとってみましょう。

UXデザインでは、ユーザーがハードボーダーなどを使用せずに特定のものをグループ化するために、近接性が最もよく使用されます。各グループの間にスペースを空けて、同じようなものを近づけることで、視聴者はあなたが知覚したい組織と構造をすぐに理解します。

図/地面

ザ・ 図/地面の原則 脳がネガティブスペースを処理する方法を利用するという点で、クロージャーの原理に似ています。この原則の例は、ソーシャルメディアのミームに浮かんでいる、またはロゴの一部として（すでに述べたFedExロゴのように）見たことがあるでしょう。

javascriptの日付と時刻の形式

脳は、画像の前景（図または焦点）にあると見なされるオブジェクトと背景（図が置かれている領域）を区別します。興味深いのは、前景と背景に次のような2つの異なる画像が実際に含まれている場合です。

この画像では、2つの顔がローソク足または花瓶を作成している、より簡単な例を見ることができます。

一般的に、あなたの脳は画像の広い領域を地面として解釈し、小さな領域を図として解釈します。ただし、上の画像に示されているように、明るい色と暗い色は、図として表示されるものと地面として表示されるものに影響を与える可能性があることがわかります。

図/地面の原則は、次の場合に非常に便利です。 プロダクトデザイナー 特にアクティブまたは使用中の場合、たとえば、モーダルウィンドウがポップアップしてサイトの残りの部分が背景にフェードインする場合、または検索バーをクリックしてコントラストが増加した場合に、焦点を強調表示する必要があります。それとサイトの残りの部分。

対称性と秩序

対称性と秩序の法則は、 簡潔 、「良い姿」を意味するドイツ語。この原理が言うことは、あなたの脳は可能な限り単純な方法で曖昧な形を知覚するということです。たとえば、オリンピックのロゴのモノクロバージョンは、曲線の集まりではなく、一連の重なり合う円として表示されます。

ゲシュタルトデザインの原則のもう1つの良い例は次のとおりです。 簡潔 '：

llc vs c corp vs s corp

左側の画像は、画像全体よりも単純な形状であるため、それぞれの輪郭が不完全な場合でも、脳は左側の画像を長方形、円、三角形として解釈します。

レスポンシブデザインのメディアクエリサイズ

共通の運命

一方 共通の運命 もともとゲシュタルト理論には含まれていませんでしたが、その後追加されました。 UXデザインでは、その有用性を見逃すことはできません。この原則は、人々が同じ方向を指している、または同じ方向に動いているものをグループ化することを示しています。

自然界では、これは鳥の群れや魚の群れのようなもので見られます。それらはたくさんの個々の要素で構成されていますが、それらは一見一つとして動くので、私たちの脳はそれらをグループ化し、それらを単一の刺激と見なします。

これは、アニメーション効果が現代のデザインでより一般的になるため、UXで非常に役立ちます。この原則の恩恵を受けるために要素が実際に移動している必要はありませんが、要素は 印象 動きの。

UXデザインにおけるゲシュタルトの原則

他の心理学の原則と同様に、ゲシュタルトの視覚の原則を設計作業に組み込むことを学ぶことで、ユーザーエクスペリエンスを大幅に向上させることができます。人間の脳がどのように機能するかを理解し、人の自然な傾向を利用することで、ユーザーが初めてアクセスした場合でも、Webサイトで快適に感じることができるよりシームレスな対話が作成されます。

ゲシュタルトの原則は、ほぼすべてのデザインに比較的簡単に組み込むことができ、無計画に見えるデザインや、ユーザーの注意を引くために戦っているようなデザインを、ユーザーが実行したいアクションに導くシームレスで自然なインタラクションを提供するデザインにすばやく引き上げることができます。

•••

ApeeScapeデザインブログの詳細：

• 設計原則：階層の概要
• UIデザインのベストプラクティスとよくある間違い
• デザインで強力なゲシュタルト原理を使用する方法（インフォグラフィック付き）
• 情報アーキテクチャの包括的なガイド
• これらの成功したインタラクションデザインの原則でUXを後押しする

基本を理解する

デザインのゲシュタルト原則は何ですか？

視覚のゲシュタルト理論の古典的な原則には、類似性、継続性、閉鎖性、近接性、図/地面、対称性と秩序（プレグナンツとしても知られています）が含まれます。近年、「共通の運命」などが追加されています。

ゲシュタルト理論が重要なのはなぜですか？

ゲシュタルトの原則は、無計画に見えるデザインや、ユーザーの注意を引くために戦っているように見えるデザインを、シームレスで自然なインタラクションを提供するデザインにすばやく引き上げることができます。

デザインの視覚的階層とは何ですか？

デザインでは、視覚的な階層とは、さまざまなデザイン要素を配置または配置して、重要度を増減させることです。さまざまなゲシュタルトの原則は、視覚的な階層に大きく影響します。

知覚のゲシュタルト理論とは何ですか？

知覚のゲシュタルト理論は、人間の脳が、近接性、類似性、閉鎖性などの視覚的な手がかりに基づいて、デザインまたは画像の関係と階層に関する情報を解釈する方法を説明しようとします。