質問: 商品画像ギャラリーで多くのサムネイルを最適に処理する方法 サムネイルをクリックして画像ビューを拡大すると、ビューポートにサムネイルが表示されます。レイアウトが満たす必要があるいくつかの条件を次に示します。 ギャラリーはさまざまな画像の比率に対応する必要があるため、画像のサムネイルはビューポートの下ではなく横に表示する必要があります。 ビューポートが優先されるため、サムネイルをメインビューポートの上に配置することはできません。 サイトはレスポンシブで、小さいサイズのサムネイルはメインビューポートの下に表示されます。 このページは実際にはeコマースサイトの商品ページであるため、ユーザーが1つを購入していないことを明確にするために、ビューポートが必要です製品。 そして、これが現在のインターフェースのスケッチです download bmml source – balsamiq mockups で作成されたワイヤーフレームご覧のとおり、問題は、サムネイルが多いとリストがぎこちなくなることです。この問題を緩和するために、スクロールバーを使用して自分自身を確認できます。 bmmlソースをダウンロード または他のスクロールメカニズム これのように どちらのソリューションも非常にエレガントに見えません。どちらがux標準に従っているのか、それともユーザーフレンドリーで完全に異なるアプローチがあるのですか?提案を裏付けるために、調査または既存の実装を提供してください。
回答: ユーザーはページ分割に慣れており、ページをめくることを気にしません。まるでお店のカタログみたい。実際のユーザー(argosなど)、仮想のユーザー(amazonなど)がそれを行います。ページネーションを使用する利点のいくつかは次のとおりです。 ページネーションは、ユーザーに彼らがどこまで進んでいるかの感覚を与えます ページネーションにより、好きなものを見た場所を簡単に思い出すことができ、簡単に戻ることができます。スクロールすると覚えにくくなります。 ページ分割により、ページをより速く読み込むことができます もう1つのコメントは、レイアウトにスペースがあり、画像が密集していない場合は、二重列を使用できるということです。それは本当にあなたがデザインしているサイトとグラフィックスに依存します。白い背景の画像が本当にきれいに表示されているミニマリストの白いサイトであれば、このアプローチを使用できますが、非常に明るいカラー画像が実際に視覚的に読み込まれたサイトでは、ユーザーが何を購入するかを決定するのが難しくなります。