Webデザインにおける視覚情報の処理方法の利用

Webサイトとユーザーインターフェイスのデザインは、ここ数年でずっと簡単になりました。そこにはたくさんのツールがあるので、UIを開発するときに最初からやり直すのは無意味です。しかし、私はWebデザインの死について議論するためにここにいません.

代わりに、私がやることは、ビジュアルデザインツールの多くの背後にある、最も心理学に基づいた基本的な概念を説明することです（最も基本的なCSSキットから最も先進的なプレミアムテーマまで）。. あなたはただそれらを使うつもりではありませんが、またそれらを理解しようとしています. これによって、既存のものも同様に変更しやすくなり、成功すると確信しています。.

視覚的情報の処理に関して、人間の心と体がどのように機能するのか、そしてこの知識がWebの設計にどのように解釈されるのかを調べてみましょう。.

知覚的組織の原理

ゲシュタルト心理学によると, 全体はその部分の合計とは異なります. この考え方の学者たちは、人間の心が物をまとめる方法についていくつかの原則があると主張しています。これらは単なる理論ではありません、あなたを心に留めてください、しかし視覚グループを組織することに関する実際の実際的な事実.

以下に、これらの原則のいくつかの法律およびより一般的でよく知られている用途を見つけるでしょう。あなたはあなたの次のデザインのためにいくつかの新しいアイデアを見つけることさえできるかもしれません.

相似の法則

最初の原則は、 似ている小さなオブジェクトはグループとして認識されます, 同じ小さなオブジェクトの複数のインスタンスではなく。類似性は、形、色、濃淡、その他の品質に基づいています。この原則はの基礎です パターンデザイン 多くの幾何学的およびミニマルロゴデザイン.

たとえば、この写真は別々の三角形ではなく円形のロゴとして表示されています。ワシの底にある三角形の形状は、その形状も画像の一部であると考えさせます.

あなたはおそらくいくつかを作成するときにも無意識のうちにこの法律を利用しました, 同サイズのコンテンツボックス あなたのウェブサイトのために。特定のコンテンツ要素が同じ重要度であること、または類似の情報を共有していることを示したい場合, その目的のためだけに特定の形状を作成する. このようにして、あなたのユーザーは即座にその特定の形状を特定の情報領域と関連付けるでしょう.

近接の法則

この法律によると 近い方のオブジェクト お互いに 同じグループに属すると見なされる. 同じ正方形を、密接に規則的に近接させて互いに隣接してレンダリングすると、グループ化の感覚が生まれます。.

この原則は最近Web上で、特に以下のものを扱うときに大いに利用されています。 コンテンツループ, 例えばブログやウェブショップで.

枠線や背景がなくても、タイトル、注目の画像、メタデータ、および抜粋をすぐにグループ化できます。デザインから不要な線や色を削除して、デザインをよりシンプルにしながらも、完全にわかりやすくすることができます。.

あなたの便宜のために、私はウィキペディアも引用します：

グッドフォームの法則

Pragnanzの法則またはGood Gestaltとしても知られるこの法則では、オブジェクトが存在する場合はオブジェクトをグループ化する傾向があると規定されています。 シンプルで規則正しく整然としたパターンを形成する. 私たちの心は複雑で知覚的に困難な形を単純に理解できる形の多くのグループに分けることを試みます。これにつながる 簡潔さの重要性.

これはまたの成功の背後にある考えられる理由の1つです。 グリッドベースのデザイン そしてこれはテーブルベースとフレームベース（ありがたいことにデザインの暗黒時代のもの）のWeb構造をとても人気のあるものにしました。.

この原則を念頭に置いておくと、複雑な形のコンテンツブロックでいっぱいになったWebサイトを作成することにはならないでしょう。それでも、あなたはできます オブジェクトを面白い方法でグループ化する, 例えばそれはまだ整然とした簡潔な形として認識されているので、ダイヤモンドやカイトの形で.

色彩理論、知覚および用法

色覚と色の知覚は 主観的 に基づく 視聴者の脳の反応 カラフルな物や形によって反射された光波に。ルールは、視覚障害のない人でも、同じオブジェクトを異なる色で表示することです（あなたはドレスを覚えているかもしれません）。.

カラープロパティ

それでも色の客観的な特性は3つあります。 色相, 値 そして 強度.

色相 カラーホイール上または虹の中のラベルの色の名前です。赤、オレンジ、黄色、緑、青、紫の6つの基本的な色合いがあります。.

黄色、青、赤は 一次, オレンジ、グリーン、バイオレットは 二次 色合いまた、あります 三次 2つの一次色相と二次色相の直接の混合物である色相（例えば、黄緑または赤紫）.

値 と呼ばれる色の明るさまたは暗さです。 高い価値 明るい色の 低い価値 暗い色用.

強度 を参照 明るさまたは薄暗さ 色のこれは、同じ色相と同じ値を持つ色は、強度を変更して異なる色出力を作成することによって、まだ薄暗くしたり明るくしたりできることを意味します。.

各色の最高の強度はカラーホイールに表示される色相であり（下図参照）、最低の色はグレーです。.

カラーコントラスト

前述の類似性の法則を参照すると、知覚者の心は、類似した異なる特性、多くの場合は色に基づいて自分が見る小さなオブジェクトのグループを作成します。.

あなたがあなたのウェブサイトのためにあなたのカラーパレットを選んだとき、特にあなたが最小限のアプローチを望むか、またはあなたがテキストを多用するコンテンツ領域をデザインするならば。ブログや広告、あなたがすべき 色の違いを意識する それはあなたが最良の結果のために正しい色の値を見つけるのを助けるかもしれません.

Johannes Ittenによると、7つのカラーコントラストがあります。.

色相のコントラスト

最大強度で黄色、赤、青 直接的で鮮やかな対比です。二次色相は、それほど明確ではない区別をしますが、三次色相と同じように機能します。 一次色相と同様に素晴らしい結果.

補完的なコントラスト

2色を混ぜ合わせるとニュートラルグレーになる場合、2つの色は互いに対照的です。これらはまた呼ばれます 奇妙なペア. それらが隣接している場合、それらは鮮やかさと強度を高め、一緒に混合されている間、それらは互いに打ち消し合う。すべての色には補色が1つだけあります。 カラーホイール上では、ペアは互いに対角線上にあります。.

明暗コントラスト

単色のWebサイトを試したい場合, 同じ色相の異なる値を使う 素晴らしい結果を生み出すかもしれません。ミニマルなWebデザインでよく使用されますが、テーマカラーオプションをユーザーに提供したい場合は、明暗のコントラストに基づいて優れた結果を生み出すこともできます。このコントラストはグレースケールデザインにも使用されます。.

あなたが残りの4色のコントラストを追求したいならば、あなたはここでそれらを見つけることができます.

パレットの作成とコントラストの確認

理論を知ることは素晴らしいことです、あなたの考えを解釈することは全く別のことです。しかし、心配する必要はありません。Webは、カラージャグリングのニーズを大きくサポートします。カラーコントラストルールに基づいてカスタムカラーパターンを作成するのに役立つツールはたくさんあります。パレットまたはAdobe Kuler.

Webの目的では、webAIM、Jonathan Snookのサイトで使用することを選択したコントラストを確認するか、The Paciello GroupによるColor Contrast Analyzerのインスタンスをここでダウンロードしてください。.

結論

新しいテーマを使ったり、既存のテーマを変更したりするときは、コンテンツを整理するための知覚の原則を考え、デザインの最終的な形式と色合いを決めるときにはカラールールを考慮してください。.

編集者のメモ： このゲスト投稿はHongkiat.comのためにによって書かれています マートンフェケテ. Martonは、最近WordPressに夢中になったハンガリーのサイト開発者です。彼は、フリータイムにRPGをプレイするのが好きな、再設計愛好家でフリーランスのコンテンツライターです。.