サムネイルをクリックして画像ビューを拡大すると、ビューポートにサムネイルが表示されます。
レイアウトが満たす必要があるいくつかの条件を次に示します。
そして、これが現在のインターフェースのスケッチです
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ご覧のとおり、問題は、サムネイルが多いとリストがぎこちなくなることです。この問題を緩和するために、スクロールバーを使用して自分自身を確認できます。
または他のスクロールメカニズム これのように
どちらのソリューションも非常にエレガントに見えません。
どちらがUX標準に従っているのか、それともユーザーフレンドリーで完全に異なるアプローチがあるのですか?提案を裏付けるために、調査または既存の実装を提供してください。
同じ製品なので、重要なサムネイル画像の数があるかもしれません:
このリストの各質問と回答は排他的ではありません。
これらの質問が役に立たない場合:別のアプローチを試してください。
ユーザーはページ分割に慣れており、ページをめくることを気にしません。まるでお店のカタログみたい。実際のユーザー(Argosなど)、仮想のユーザー(Amazonなど)がそれを行います。
ページネーションを使用する利点のいくつかは次のとおりです。
もう1つのコメントは、レイアウトにスペースがあり、画像が密集していない場合は、二重列を使用できるということです。それは本当にあなたがデザインしているサイトとグラフィックスに依存します。白い背景の画像が本当にきれいに表示されているミニマリストの白いサイトであれば、このアプローチを使用できますが、非常に明るいカラー画像が実際に視覚的に読み込まれたサイトでは、ユーザーが何を購入するかを決定するのが難しくなります。
大きな画像には専用のスペースを使用しません(必要でない場合)。代わりに、サムネイルのすべての領域を使用して、ユーザーが一度にできるだけ多くの画像をスキャンしてから、興味のある画像をクリックします。クリックされた画像はモーダルポップアップに表示されます。
モーダルポップアップには、「前の」画像と「次の」画像を表示するためのオプションが含まれているため、ユーザーは各サムネイルをクリックしたり閉じたりせずにすべての画像をフルサイズで参照できます。これは、写真の右端または左端(facebookスタイル)などをクリックすることにより、ボタンで実行できます。