web-dev-qa-db-ja.com

「3D」要素を含むレイアウトは解析しやすいですか?

現代のWebアプリケーションは、3D要素の効果を作成するために、シャドウとグラデーションを 多用 にするデザインを支持しています。

このプラクティスの正当化の1つは、3D効果を使用して、レイアウト内のオブジェクトの認識を ビジュアルアフォーダンス として強化できることです。

しかし、3D要素がグラフィックデザイン(Webアプリケーションデザインがサブフィールドである)でよく使われるようになったのは最近のことです。これは、3D要素が2D要素に対する正当な改善ではなく、単なる流行であるのか、それとも松葉杖であるのかを疑問に思います。

セクションとコントロールを区別するために3D要素に依存するレイアウトが解析しやすいという証拠はありますか?ユーザーは、適切に設計された2D要素よりも3D要素のアフォーダンスを実際に認識していますか?

これは文脈上の質問ですか?たとえば、色の知覚では、目はシーンのコントラスト比に順応します。これにより、デザイナーは(理由の範囲内で)低コントラストのデザインを使用できます。深さ知覚についても同様のことが言えますか?

3
terrace

ドロップシャドウやその他の高さの影響を具体的に調べる学術研究については知りません。そのため、私の意見を述べる必要があります:

3D要素は松葉杖以上のものです。 Webページが現実世界の3Dオブジェクトを何らかの形で表す物理的なアナロジーの作成に不可欠であるだけでなく、高さの効果は関係や階層の伝達に最適です。適切に使用すれば、設計者は「デュアルプレーン」効果を作成でき、各レベルの要素には特定の目的またはステータスがあります。

この良い例は、現在のビューのコンテキストの外にある管理または「メタ」コントロールです。丸みのあるグラデーション、アンダーライト、わずかなドロップシャドウなどの浮き出し効果を使用することにより、ユーザーは、要素がそのピアから分離されていること、つまり異なるコンテキストに存在していることに気付きます。

別のポイントは、物理的なアナロジーは強力であることです。要素をスクロールできることを示したいとしましょう。カットアウトウィンドウのあるカードのようにページをデザインすると、コンテナーの境界が下のコンテンツの境界ではないことを伝えることができます。そのためには、カットアウトの端にわずかなドロップシャドウを付けるのが理想的です。

また、人間は-ほとんどの動物と同様に-それらが最も脅威であるため、それらに近い要素に特に注意を払うことを忘れないでください(視聴者に「近づく」アニメーションが最も目立つ理由です)。要素を少し上げることは、重要な通知には適切な方法です(ただし、広告では行わないでください)。

最後に、「3Dの多用」と「3Dの多用」には大きな違いがあることを常に覚えておいてください。一貫した簡単な方法で微妙なレイズとシャドウエフェクトを使用することは問題ありません。すべての要素にビューポート上の独自の高さを与えることは、高さと3D効果が意味を失うことを意味し、特定の要素がどの「ペイン」に属しているかを識別することが難しくなるためです。要素を過度に上げると、要素が非常に近くなり、ユーザーが他の要素を見ることができなくなる可能性があります。これにより、ページ全体のユーザビリティが損なわれます。

tl; dr-3Dのいくつかの良い習慣:

  • 高さに意味があることを確認してください。要素に注意を引くためだけに要素を発生させないでください。要素は意味のあるレイヤーに順序付けする必要があります。レイヤーのグループ化を壊さないでください。
  • 効果を微妙に保ち、そうしないと気が散ります。
  • 3D効果を作成するためにシャドウやグラデーションも必要ありません。照明だけで十分です。
1