apeescape2.com
  • メイン
  • 技術
  • ライフスタイル
  • トレンド
  • ヒントとツール
Uxデザイン

ゲシュタルトの設計原則を探る

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

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

ネガティブスペースは、デザインの重要な要素と原則の1つです

FedExロゴの「E」と「x」は、それらの間の負のスペース内に矢印を作成します。



感圧タッチ技術とは

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

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

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

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

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

類似性

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

類似性のゲシュタルト原理の例

ここの正方形はすべて等間隔で同じサイズですが、韻や配置の理由がない場合でも、色ごとに自動的にグループ化されます。

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

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

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

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

継続

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

連続性のゲシュタルト原理の例

目は、この図の一方の端からもう一方の端まで直線をたどり、途中で線の色が変わっても、上から下まで曲線をたどりたいと思う傾向があります。

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

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

閉鎖

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

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

世界自然保護基金のロゴは、閉鎖のゲシュタルト原則の一例です

閉鎖のゲシュタルト原理は、世界自然保護基金のパンダのロゴに美しく描かれています。明確に定義されていなくても、脳は白い形を完成させます。

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

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

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

近接性

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

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

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

円周群で示される近接性のゲシュタルト原理

左側のグループと右側のグループを区別する唯一の点は、線の近接性です。それでも、あなたの脳は右側の画像を3つの異なるグループとして解釈します。


UXを損なう行動における近接ゲシュタルト原理の例

に USPS 近接ゲシュタルトの原則がUXを損なうPDFフォームの例。フィールドラベルがその下のフィールドに近いため、人々はそれが「c」の情報の行き先であると誤って信じてしまいます。および「d。」ただし、情報はテキストラベルの上のフィールドで提供されることになっています。

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

図/地面

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

javascriptの日付と時刻の形式

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

要素と設計の原則を形成する図と地面の関係の例

ピッツバーグ動物園とPPG水族館のロゴを見るとすぐに木や鳥が見える人もいれば、ゴリラとライオンがお互いを見つめているのを見る人もいます。


フィギュアグラウンドゲシュタルト原理の素晴らしい例

図/地面のゲシュタルト原理のもう一つの素晴らしい例。

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

図地原理の簡単な例、ゲシュタルト設計原理

デンマークの心理学者エドガー・ルビンによって開発されたこの有名な幻想では、通常、視聴者には2つの顔または花瓶という2つの形状の解釈が提示されます。これは、図/地面の原理のもう1つの優れた例です。

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

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

ApeeScapeデザインブログを購読して、eBookを受け取ります

対称性と秩序

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

ゲシュタルトデザインのもう1つの原則である、プラグナンツの原則は、オリンピックのロゴで示されています。

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

llc vs c corp vs s corp

別のゲシュタルト原理であるプラグナンツの原理の複雑な例

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

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

共通の運命

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

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

鳥の群れは、一般的な運命の原則を示しています

鳥の群れは、同じ方向に飛んでいるときに単一のユニットと見なされ、それによって共通の運命を共有します。 (沿って マーティン・アダムズ オン スプラッシュを解除 )

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

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

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

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

•••

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

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

基本を理解する

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

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

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

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

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

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

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

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

イーロンマスクの投資の詳細:億万長者の素質

財務プロセス

イーロンマスクの投資の詳細:億万長者の素質
そのスリルに見えます-急成長している美容業界の内部

そのスリルに見えます-急成長している美容業界の内部

収益と成長

人気の投稿
ラベルなしデータを使用した半教師あり画像分類
ラベルなしデータを使用した半教師あり画像分類
効果的なランディングページをデザインする方法
効果的なランディングページをデザインする方法
コミュニケーションディレクター
コミュニケーションディレクター
3Dグラフィックス:WebGLチュートリアル
3Dグラフィックス:WebGLチュートリアル
インサイドセールスエグゼクティブ-東部地域
インサイドセールスエグゼクティブ-東部地域
 
デジタル遊牧民のための人間工学:自殺せずに道路で働く
デジタル遊牧民のための人間工学:自殺せずに道路で働く
Webレイアウトのベストプラクティス:分析された12の時代を超越したUIパターン
Webレイアウトのベストプラクティス:分析された12の時代を超越したUIパターン
生産的な行動の誘発:仕事の動機付けのヒント
生産的な行動の誘発:仕事の動機付けのヒント
HorusLPを使用した最適化アルゴリズムの設計
HorusLPを使用した最適化アルゴリズムの設計
WebVRとブラウザエッジコンピューティング革命
WebVRとブラウザエッジコンピューティング革命
人気の投稿
  • c ++ヘッダーファイル
  • レスポンシブデザインのメディアクエリサイズ
  • VisualStudioビルドiOSアプリ
  • C ++コードを学ぶ
  • webpackはnode_modulesを解決します
カテゴリー
人とチーム プロセスとツール デザイナーライフ 収益と成長 ヒントとツール ライフスタイル アジャイルタレント Uiデザイン 分散チーム 財務プロセス

© 2021 | 全著作権所有

apeescape2.com