3つまたは5つの画像で要素を視覚的にレイアウトする最良の方法は何ですか

Question

私の問題は、iOSアプリに可変数の画像（2-> 5）で表される要素があることです。 2、3、4の画像の場合、単純に this のようなものを使用すると効果的です。

5つの画像のギャラリーに最適なレイアウトは何でしょうか。

Answer 1

この問題にはさまざまなアプローチがありますが、主にホワイトスペース、グループ化、対称性を使用してバランスの取れた印象を作成し、1つまたは2つの画像がメイン画像として適切に機能するかどうかを考慮する必要があります。

GoogleやFlickrのようなウェブサイトは、通常、行に収まるようにいくつかの画像のサイズを変更する傾向がありますが、行に2つまたは3つの画像しか含まれていない場合、上部とボトムエッジがきれいに表示されます（ただし、自動トリミングが可能である可能性もあります-詳細は下を参照してください）。

したがって、3つの画像では、次のような選択肢がある場合があります。

1. このレイアウトは、同じサイズの3つの正方形の画像を使用します。これは、同じ重みで3つのアイテムを配置する最も賢明な方法です。それは、楽しくバランスの取れたフォーマットであり、アーティストにとって一般的なものです。たとえば、絵画や写真の三連祭壇画です。

   

2. これを、1つの画像がプライマリ画像であり、2つのセカンダリ画像が上下に揃うように配置されているレイアウトと比較してください。正方形または長方形の画像（縦向きか横向きか）を組み合わせて一致させることができます

   

5つの画像の場合、いくつかの画像のサイズを変更できる場合は、実際により多くの選択肢があります。

1. 1つのプライマリイメージを持つことができます。

   

2. または、2つの主要な画像（横向きまたは縦向きのレイアウト）を使用できます。

   

3. または、同じことがすべての正方形の画像でも機能します-または、2つの長方形（上部/下部のトリミングされた正方形）の上部の画像と3つの下部の正方形の画像でも機能します。

   

4. すべての画像を同じサイズに保つ必要がある場合は、6番目のスペーサー要素を導入することを選択できます。

   

5. 最後に、はがきによく見られるように、他の4つの交差部分の上に5番目をオーバーレイすることを選択できます。ただし、これは、コンテンツが画像内でどの程度中心になっているかによって異なります。

   

私個人的には、次の例のように、一番上にある2つの主な画像が最も気に入っています。

5つのトリミングされていない画像を使用する：

または、可能であれば、コアコンテンツを維持するために必要に応じて小さい画像を自動トリミングしますが、ユーザーが画像をクリックして表示すると、画像全体が表示されます。

---

ここで興味深い小さな転換は、エッジの長さがLの上部に2つの正方形と下部に3つの正方形が必要であり、D = 0.236×Lとなるように、各画像間のギャップDを選択できる場合、上の正方形のエッジと下の正方形のエッジの比率は 黄金比 に等しくなります。

上記の例に比べて分厚い間隔を超えると、これは次のようになります（実際には奇妙な美しさがあります）。