01/01
Visual Flowとは何ですか？
視覚的な流れは、すべての重要な要素が顕著に現れるような方法で文書を通して視聴者の目を運び、ビジョンを妨害することも、視聴者にその感覚を失わせることもない。 矢印や数字などの明白なフロー要素を使用するのは、Webデザイナーがフローを使用する最も一般的な方法ですが、特定のパスに沿って移動するように読者を誘導するために使用され、誤って使用される要素もあります。 このチュートリアルの手順では、良いフローと悪いフローの例を示し、デザインにおけるビジュアルフローの語彙を学ぶのに役立ちます。
ビジュアルフローはさまざまな方法で実現できます。
- 矢印
- 逐次画像またはテキスト要素
- 展望
- グラジエント
- サイズの変更
- 曲線
- 画像の動き
- 顔 - 特に目
次の画像は、Webページ上のフローによくある間違いや、それらを修正する方法を示します。
02の07
西洋のテキストは左から右に流れる
あなたが西洋の言語を読んで育ったのであれば、テキストは左から右に動くべきだと考えています。 したがって、目がテキストの行を移動すると、左から右に移動します。
上の写真では、滝が右から左の方向に流れており、テキストが滝を流れています。 我々は皆、滝が落ちることを知っているので、テキストの流れに沿って水の流れの方向に切り離されている。 観察者の目は、テキストを読むために間違った方向に動く。
03/07
あなたのテキストは、画像と共に流れなければならない
この場合、テキストは水と同じ方向に流れるように画像が反転されています。 すべての要素は、水の流れと文章の流れと一緒に、視聴者の目を引く。
04/07
左から右は速く等しい
この写真の馬は右から左に走っていますが、テキストは英語で左から右です。 競馬の一方向の視覚的な影響は、テキストとは異なる方向に向いているため、ドキュメント全体のペースを遅くします。
西洋文化では、言語が左から右に移動するため、視覚の方向は左から右に順方向と高速に、右から左へとは逆方向と遅い方向に関連付けられています。 速度の意味を含むレイアウトを作成するときは、これを覚えておいてください。イメージをテキストと同じ方向に動かしてください。
05/07
ビューアの目を遅くしないでください
馬とテキストの両方が同じ方向に向いているとき、暗示された速度が増加します。
07年6月
ウェブフォトで目を見る
写真を持つ多くのWebサイトでは、間違いを犯しています。つまり、ページに人の写真を置くと、その人はコンテンツから目を離しています。 これは、古いデザインのAbout.com Web Designサイトでも見ることができます。
ご覧のように、私の写真はテキストの隣に置かれています。 しかし、私はそのテキストから離れて見ている、私はほとんど私の背中をそれになっている。 あなたがグループ内の2人の人の間でそのボディーランゲージを見たなら、私が隣にいる人（この場合はテキストのブロック）が気に入らないと考えるのは簡単でしょう。
多くのアイトラッキング研究は、人々がウェブページ上の顔を見ることを示している。 また、関連する研究によると、写真を見ると、人々は無意識のうちに目の前を見て、その写真が何を見ているかを見ています。 あなたのサイトの写真がブラウザの端を見ている場合、それはあなたの顧客が見えるところです。そして、戻るボタンを押します。
07/07
すべての写真の目はコンテンツに直面するべきです
About.comの新しいデザインでは、写真は少し良いです。 今、私の目はもっと先を見ていて、私は私の左に向かって見ている - テキストがどこにあるのかという少しのヒントがあります。
そのポジションのためにさらに優れた写真は、私の肩もテキストの方に傾けられたものです。 しかし、これは最初の写真よりはるかに良い解決策です。 また、画像がコンテンツの右側と左側にある状況では、これは良い妥協である可能性があります。
人々の顔のイメージが最も注目を集める一方で、同じことが動物の写真にも当てはまることを忘れないでください。 たとえば、このサンプルレイアウトでは、私の犬は左に見えますが、イメージは右に向いています。 彼らはページを見ている。 犬の姿勢を変更して画面の中央を見ていると、このレイアウトが改善されます。