web-dev-qa-db-ja.com

サムネイル画像の後ろに写真があることをユーザーに示す方法は?

Webページに画像ギャラリーをレイアウトしていて、オブジェクトのサムネイルがいくつかあります。各サムネイルの後ろに画像のグループがあることを視覚的に示すにはどうすればよいですか?たとえば、サムネイルの1つとして車があるとすると、クリックすると、その車の写真の大きなバージョンが両側にナビゲーション矢印で表示され、ユーザーは同じオブジェクトの写真をさらに表示できます(スライドショー)。

現在、車のサムネイルには、サムネイルの上に透明な虫眼鏡があり、クリック可能であることを示しています。

サムネイルの大きなバージョンだけでなく、そのサムネイルの「背後」にさらに多くの写真があることを示すために、サムネイル領域に視覚的な手掛かりを与えるにはどうすればよいですか?または、この追加のアフォーダンスも必要ですか?

注:フォトギャラリーにJQueryライトボックスを使用しています

22
redshift

スタックは、現在表示されているコンテンツの背後にある追加コンテンツを示すための効果的なユーザーインターフェイスメソッドです。

さまざまなアプリケーションでのスタックの例:

サムネイルスタック

おそらくあなたが探しているものに最も近いでしょう。追加のサムネイルは下に非表示になっていますが、その存在を示すためにエッジが表示されています。

Thumbnail stacks

SoundCloudプレイリスト

ただし、上記の例と同様に、このデザインではアイテムの数を示す数値カウントを使用しています。また、「スタックされた」サムネイルは、必要なグラフィックリソースを減らすための静的画像です。

SoundCloud Playlist

36
Alan

@Alan Georgeのアプローチは正しいと思います。ユーザーがメッセージを簡単に取得できるように、2つの可能性を追加します。

ラベル+番号:明示的であるよりも何もないため

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

「より多くの写真があります」と同じ場所に数量を表示すると、グラフィカルに表現されます。したがって、近接原理に従います:

mockup

bmmlソースをダウンロード

29

私はあなたが求めていたものとは少し異なるアプローチを提案しています。最近Facebookで採用されている方法も検討できます。ブロックに車の写真をいくつか表示し、別のトラックにトラックを表示することを検討できます。さらに誰かがもっと多くの車を見たいと思っているなら、彼らは+ numberをクリックすることができます。

Facebookの方法

enter image description here

あなたはどうですか?enter image description here

3
Chethan S.

インラインカルーセル

Inline Carousel

十分なスペースがある場合の代替手段。また、プレビュー内に既に他の画像が表示されます。

0
Gustav