web-dev-qa-db-ja.com

動画のサムネイルのYouTubeのメインページで使用されているゲシュタルト法は何ですか?

YouTubeのメインページにあるビデオサムネイルで使用されている法律について、少し混乱しています。サムネイルは互いに近くにあり、下にある4行のテキストからのものですが、画像とテキストで構成されるグループが表示され、すべての画像がグループとして表示されるわけではありません。要素を互いに近づけてはいけません。この場合、水平行のすべての画像がグループとして表示されますか?また、ここでの近接性が一般的な原則ではない場合、それは何ですか?

enter image description here

2
Carla Graça

カーラへようこそ!

一般的な原則はわかりませんが(それはとにかく視聴者によって異なる場合があります)、ここで提示されている原則は次のとおりです。

  • 近接
  • continuity(例:配置)
  • 類似性
  • Prägnanz(〜orderliness)
  • 過去の経験

はい、画像はテキストよりも互いに近くですが、テキストは画像と左揃えになり、画像とのつながりが強調されます。独自の水平グループでテキストを表示する前に、実際にテキストを画像からかなり離れた場所に移動する必要があります。

enter image description here

配置のため、画像とテキストが関連していることが意図されていることが明確にされています。

enter image description here

(最も幅の広い要素としての)画像の近接性は、グループの接続されたグループを表示するという点で役割を果たします。各サブグループは構造が非常に似ており、実際の画像やテキストが同じでなくても、それ自体が次のグループに配置されます。これにより、簡単に入手できる整然とした構造が作成されます(プレグナンツの側面)

enter image description here

水平方向の画像は小さなマージンで区切ることができますが、テキストの水平方向のブロックは、次の画像の下で続行するのではなく、次の行に折り返される複数行のテキストがあることを明確にするために、大きなマージンで分離する必要があることに注意してください。これは主に読みやすさに関するものですが、テキスト間のこのより大きな水平方向のギャップは、テキストを相互に離すのに役立ち、代わりに上の画像との関係を促進します。これは、テキストが曖昧さなく中央に配置されていた可能性があることを意味します(ただし、対称性の原則も含まれますが!!)

最後に...ほとんどの人が関連画像の下にあるテキストに精通していることをミックスに追加します。そのため、親しみやすさはレイアウトからの期待に応える役割も果たします。また、テキストを読みやすくするために、テキストと関連オブジェクトの間に適切な量の空白が必要になることもあります。

これはすべてが一緒に機能する複雑な原則のセットのように見えますが、脳はデザインの意味を理解するために無意識のうちにデザインの各側面に重要性を割り当てるという素晴らしい仕事をします。冒頭で述べたように、このレイアウトに曖昧さを導入するためには、かなり多くを壊さなければなりません。

3
Roger Attrill