テクノロジーとユーザーインターフェイスが変化するにつれて、ビジュアルデザインにおけるデザインスキルの必要性は高まり続けています。典型的なユーザーインターフェイスの新しい例が毎年出現していますが、視覚的な階層、知覚、構成に関する基本的な理解は変わりましたか？

現代の視覚の概念は、科学だけでなく心理学にも根ざしています。その結果、絶えず変化するユーザーインターフェイスに関係なく、視覚情報の表示方法と認識方法は同じままです。これを考慮して、現代のインタラクションデザインがグラフィック構成と視覚的階層の基礎を改善することは可能ですか？

視覚の基本的なルールは、意味が埋め込まれた情報を可能な限り迅速に伝達する方法を指示するため、視覚デザインにとって重要です。ただし、ビジュアルデザインはグラフィックデザインのいとこであるため、これらの標準は印刷メディア用に確立されており、デジタル用に再定義されていません。

新しい設計原則を確立する可能性のある「デジタルバウハウススクール」のようなものはまだ形成されていません。人々は印刷とはまったく異なる方法でUIを体験するため、視覚的な階層と構成のルールは時代遅れであるだけでなく、ユーザーインターフェイスで単純に崩壊します。

ほとんどの場合、 デザイナー それでも、画面を静的な2次元オブジェクトとして扱う傾向があり、 インタラクティブなデザイナー 単に印刷フォーマットをデジタルメディアプロジェクトに適用するだけでなく、革新することです。しかし、新しいデザインを進める前に、視覚的な階層、知覚、構成の基本的な理解を再検討する必要があります。

視覚的階層：インタラクティブインターフェイスの視覚的構成の新しい理解

視覚的階層とは何ですか、なぜそれが重要なのですか？視覚的階層とは、情報を効果的に伝達し、意味を伝えるために、コンポジション内のコンテンツをレイアウトすることです。視覚的な階層は、視聴者を最初に最も重要な情報に導き、次に二次的なコンテンツに導きます。

の適切な使用を通じて確立された サイズ、色、形、距離、比率、向き、 コンポジションの意味、コンセプト、ムードは、視覚的な階層を決定するグラフィック要素の創造的な使用を通じて伝えられます。

ビジュアル階層は、訪問者の目をガイドする必要のあるランディングページであろうと、モバイルUIのナビゲーションであろうと、あらゆるタイプのビジュアルデザインにとって重要です。すべての要素に対するユーザーの理解は、構成内の他の要素とそのコンテキストに基づいています。構成要素は、視覚的な関係を形成し、それによって確立するためにそれに応じて扱われます デザイン全体の視覚的階層 。

Ruby on Railseコマースチュートリアル

視覚的階層の色

視覚的階層のルールの多くは非常に単純で平凡にさえ思えるかもしれませんが、それらは優れた視覚的デザインの重要な基盤です。たとえば、色は 最も影響力のある創造的な要素 ビジュアルデザインで。

赤十字とモノクロの十字の直接的な意味合いを考えてみてください。ほぼ普遍的に、赤十字は中立性と保護を意味します。これは、色を使用した即時のコミュニケーションの可能性です。色は、グループを識別するためにもよく使用されます。3つの単色のものの中で1つの赤い十字が、どういうわけかより重要であると目立つ場合です。

明るく豊かな色は、落ち着いた色よりも目立つため、視覚的な影響が大きくなります。インターフェースでは、色を使用して構造の感覚を示し、利用可能な相互作用を示すことができます。単色インターフェース内の単一の色は、選択を区別することができ、ユーザーがホバーしているボタンの先にあるものを示唆することさえできます。

色もシードされています 意味と感情 視聴者の潜在意識に明示的な情報を送信することができます。ブランディングでは、色を作成するため、色について多くの心理学的研究が行われてきました。 内臓反応 消費者がブランドと有意義な相互作用をする前に。たとえば、青は信頼性が高く、安全で落ち着いたものとして認識されることがよくありますが、赤は刺激的であり、人々の心拍数を増加させることが知られています。しかしながら、 色は異なる意味を持つかもしれません 文化によって異なります。

ウェブデザインにおける色の意味のある構造的な使用の良い例は 変更の名前 地点。このサイトは、色を使用してその構造を即座に伝えます。組織はデフォルトで散在していますが、トピックや色で再配置できます。

c法人vss法人

ただし、選択したトーンは、サイトの意味に関する潜在的な問題の1つを克服するのに役立ちます。靴下やタンポンなどの日用品の資金調達は、それ自体を売るほど刺激的ではありません。そのため、サイトの急進的なグラフィックトーンは、必要な基本的な組織構造を確立しながら、日用品の知覚的価値を高めます。

視覚的階層のサイズ

3羽の小さな鳥の隣に座っている1羽の大きな鳥のイラストを想像してみましょう。これ以上の情報がなくても、この単純なグラフィックは、その要素間の関係を即座に伝えます。親と子は、集合的に家族を伝えます。

従来のグラフィックデザインでは、一般的な戦略は、最も重要な要素を最大にしてから、要素を階層的に縮小することです。 サイズは視覚的な階層を確立します 最大の要素が最初に注目を集めるため、最も重要であるように見えます。

ヘッダー、セクション、引用符などの重要な違いを示すために、テキストの本文でもさまざまなフォントサイズがよく使用されます。画像のキャプションなどの二次的なコンテンツは、通常、テキストの本文と競合しないように小さくなっています。

次のような最も広く使用されているビジュアルインターフェイスのいくつかを検討してください。 インスタグラム 。画面上の画像や動画と競合するものはありません。ほとんどの画面の60％以上を占めています。 UIの目的は即時です。

典型的なものを覆す例 視覚的階層の構造 in web designは、アート/デザインスタジオのポートフォリオサイトです。 Ro / Lu 。彼らの珍しいサイトは最も直感的ではないかもしれませんが、それは典型的なオンラインクリエイティブポートフォリオの視覚的な配置に挑戦します。さまざまなプロジェクトが意図的にランダム化されているため、訪問者がサイトにアクセスするたびに異なるプロジェクトが支配的であるように見え、各訪問がユニークで興味深いものになります。

各プロジェクトは独自のものであり、等しく重要であると考えられているため、ほとんどのクリエイティブデザインスタジオのポートフォリオでは、作業が階層的に編成されていません。 Ro / Luサイトのデザインは、訪問するたびにさまざまなレベルの関心を持つダイナミックな構成を作成し、視聴者がスタジオの広範なポートフォリオを調査することを奨励します。その結果、デザインスタジオの折衷的で学際的な性質は、コンテンツのランダム化された表示によって表されます。

視覚的階層における配置

視覚的階層における整列は、要素を空間的に接続することによって秩序感を伝えます。非線形小説の章と同様に、グラフィック構成で線から外れた正方形を想像してください。単一の要素が確立された構造を壊すとき、それは構成から際立っており、それによって他の要素と比較して意味を成し遂げます。

給与から契約率を計算する

要素が視覚グリッドから、つまり秩序感から目立たない限り、硬い構成は停滞し、視覚的に面白くないように見える場合があります。ミスアライメント、つまり「グリッドの破損」は、グラフィック要素に視覚的な重みを与える機会です。この概念は、デザインの視覚的階層の基本です。

従来のビジュアルデザインの原則によれば、フレームの中央に配置される要素はより重要であるように見えます。たとえば、プライマリコンテンツまたはインターフェイス要素を中央に配置し、ナビゲーション、メニュー、およびその他のセカンダリコンテンツを横に配置しないことがよくあります。

しかし先駆的 デザイナー 現状に挑戦するのが好きです。インタラクティブデザインが適用される場合 基本的な視覚的階層の原則 そして、その境界を革新的な視覚的構成に押し込み、興味深い新しい体験が生み出されます。異なる配置を使用することにより、要素間に新しい関連付けと意味が作成されます。

例えば、 DNAプロジェクト は、一連のばらばらの階層を使用して、ミュージシャンのアルバムの創造的な構成を伝えるサイトです。アルバムの構成と同様に、サイトの構造は複雑です。

まず、訪問者は、従来アルバム形式で配置されていたアルバムのトラックをクリックして、音楽を聴くように招待されます。ただし、訪問者がサイトのDNA要素を再調整できるようにすることで、アルバムの概念は、一連のトラックとしてだけでなく、時間の経過とともに断片化された要素の非線形構造として伝達されます。

視覚的階層の形状

形に関しては、単純なハートの形が、ほとんどのソーシャルネットワーキングUIでの「いいね」の潜在的な用途をどのようにすぐに伝えるかを考えてみましょう。重要性やグループを確立するには、4つのサークルのうちの1つのハートを検討します。幾何学的な形は、形が要素に個性や意味を与える特定の意味合いを持っているという点で色のようなものです。

インタラクティブデザインでは、幾何学的形状はテキストよりも迅速かつ普遍的に意味を伝えるため、効率的なコミュニケーションに不可欠です。テキストの代わりに、多くの場合単純な幾何学的形状であるアイコン（記号）は、ほとんどのナビゲーションシステムおよびUIのアナログになっています。

画像の「いいね」、ファイルのダウンロード、電話の発信、メッセージの確認の背後にある目的は、アイコン（幾何学的形状）で簡単かつ直接伝えられます。この形式の効率的なビジュアルコミュニケーションは、デジタル製品が多言語で膨大な数の国際的な視聴者にサービスを提供することが多いグローバル市場でますます重要になっています。

従来の印刷メディアとデジタルメディア間のさまざまな相互作用モードを強調するには、実際の新聞で「芸術」セクションを検索する場合と、ほとんどのアプリで検索アイコンを使用する場合の違いを検討してください。最近まで、ほとんどの新聞のWebサイトは、印刷されているかのようにページをレイアウトし、コンテンツをふるいにかける経験は不器用で方向感覚を失っていました。

従来のWebレイアウトを破り、 毎日の兆候 Webサイトは、基本的な正方形と円の形状を微妙に使用して、訪問者にコンテンツを案内する独自の視覚的階層を提示します。メニューはページの中央にあり、訪問者がメニューをクリックすると、サイトの4つのセクションを表す4つの色付きのドットが表示されます。次に、訪問者はドットの1つを正方形にドラッグして、そのセクションに移動します。

視覚的階層における動き

動く要素は停滞した要素のグループでより大きな視覚的重みを運びます、そして視覚的階層の動きは印刷で使用することは不可能ですが間違いなく含まれることができる原則です ビジュアルデザイナー のツールキット。

モーションは、それ自体の直訳以外に何を伝えることができますか？モーションは、要素を操作できる手がかりとしてUIでよく使用されます。モーションの使用をさらに推し進めて、何かユニークなものを伝える方法として使用できますか？視覚的階層がコミュニケーションの効率だけでなく、埋め込まれた意味にも関係している場合、モーションを不可欠な視覚的コミュニケーションツールとしてどのように使用できるでしょうか。

のために 私はサイトを覚えています 、メインインターフェイス（アニメーション化されている）は、対話を促すため、すぐに目立ちます。モーションとインターフェイスは機能的なナビゲーションツールですが、 ビジュアルデザイナー ウェブサイトの根底にある使命であるアルツハイマー病を伝える方法として、これらの要素が失われる可能性を利用しました。組織が資金を調達している患者の色あせた記憶のように、ウェブサイトは積極的な相互作用なしにゆっくりと消えていきます。

情報の階層における音

サウンドは、印刷メディアでは使用できないもう1つのツールですが、階層の原則の範囲内でまだ開発されていません。音は完全に非視覚的であるため、参照する規則はありません。しかし、音は、気分や意味だけでなく、コンテンツを効果的に伝達するデザインツールにもなり得ます。特定の音を運ぶデザイン要素は、相互にグループ化されている場合があり、最も大胆なものが最も重要であるように見えるか、グループからの分離を意味する場合があります。

ヘッダーファイルの使用c ++

要素に付加されたサウンドの品質は、コンテンツをすばやく識別、特性評価、または構造化するのに役立ちます。関連する視覚要素と対照的な音は、どのように新しい意味を伝えるのでしょうか？

サウンド自体は非常に複雑であるため、視覚的なものが認識される前に、全体的なムードやデザインのメッセージが確立されます。カラフルな背景がムードを確立するのと同じように、サウンドを背景に置いたり、モバイルのボタンのタップに応答するなど、UIでフィードバックを提供したりできます。テクニックの原理は基本ですが、それを使用できる創造性は魔法が起こり得る場所です。

集団の創造的な仕事におけるその重要性のために、ドイツの芸術家グループの展示会のために作成されたウェブサイト グッゲンハイムでゼロ 雰囲気のある背景として、またサイトをナビゲートする際のフィードバックの形式としてサウンドを使用します。太字の着信音はテーマの始まりを表す部分を確立し、3次プロジェクトは背景をクリックします。

視覚的階層の概念

視覚的な階層は単純な概念であり、理論を理解することは、適切に構造化された構成を実行する設計者の実際的な能力よりも実際には簡単です。それにもかかわらず、優れたデザインを維持しながら新しい媒体で発明することは困難です。

新しい媒体が常に登場し、困難な状況が衰えることはありません。まったく逆です。今日は200以上あります 異なる画面サイズ 使用中で。そしてそれはただの二次元のものです。最初はインターネット、デスクトップブラウザ、次にモバイルとタブレットでしたが、今ではインタラクティブTVなどのテクノロジーで新しい領域に移行しています。 IoT 、 ウェアラブル 、 バーチャルリアリティ、拡張現実 。

デジタルメディアの限界を真に押し上げるデザインはまだ始まったばかりです。うまくいけば、視覚的な階層と優れたデザインの原則がテクノロジーの急速な進歩に追いつき、デジタルメディアの経験が意味と喜びに満ちたままになることを願っています。

•••

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

• 明確な視覚的階層でUXを後押し
• デザインの基礎–ビジュアル階層のガイド（インフォグラフィック付き）
• 設計原則：階層の概要
• スキャン性を向上させるためのUIデザインのベストプラクティス
• これらの成功したインタラクションデザインの原則でUXを後押しする