web-dev-qa-db-ja.com

共通領域のゲシュタルト原理をいつ使用するのですか?

下の画像は this の記事で見られますが、線を使用してさまざまなグラフィックを分離していますが、異なる背景を使用することもできます。これは、ダッシュボードを設計するときにかなり一般的なものです。私の質問は、近接の原則は、関連する画像とテキストをグループ化し、他の要素から分離するのに十分ではないでしょうか?この原則はいつ使用しますか?

enter image description here

13
Carla Graça

frameとして使用される近接原理は、コンテナの仮想制限を生成する要素が少なくとも2つまたは3つある場合に正しく機能します。

References points

それは閉鎖法としてより機能します:

enter image description here

または、コンテンツには中央の視覚軸があり、それを単一の要素として解釈できるほど強力です。

Central axis


これに続いて、コンテナフレームを定義する4つの区切り要素があるため、上部のテキストは完璧です。

Top text

しかし、画像の場合、コンテンツの不規則性により、参照軸を単一の要素である下/右のテキストに分離することにより、近接則が変更され、この回答の上部のグラフィックの4番目のオプションに危険なほど近くなります。

enter image description here

可能な解決策

1-余白を誇張して大きくし、各画像をできるだけ分離して、一意のグループ化された要素として解釈されるようにします。

margins

2-2番目または3番目の参照点を復元するためにグラフィックまたは情報要素を追加します。

reference

3-背景を使用し、不規則なコンテナとして機能します

enter image description here

4-コンテンツの中心軸を強化します:

axis

24
Danielillo

ルールを見たことがなく、ルールを作成するのは非常に難しいと思います表示しているデザイン、フォント、色、およびタイプ情報に依存するためそこ。

例えば:

  1. 凡例のないグラフィックのみの場合、スペースで区切ることができます
  2. テーブルがあるだけの場合、デザインのために自動的に分離されますが、テーブルに線がない場合、背景は1つのテーブルのように見えません。
  3. テーブルとグラフィックスが混在している場合は、divラインが混乱しないようにする必要があります。

最良の方法は、デザインのバリエーションを作成して比較することです。実物を見てデザインせずに決めるのは難しいです。

いくつかの例(悪い例と良い例)を見ると、これはユーザーエクスペリエンスに影響を与えないはずです。

気をつけた方がいい:

  • 使用するグラフィックのタイプ
  • データを表示する順序
  • そこに表示するデータ
  • 色とあなたが重要なことをどのように強調するか
  • 汚れた画面を防ぐ方法

enter image description hereenter image description hereenter image description hereenter image description here

3
Rafael Perozin