web-dev-qa-db-fra.com

Comment montrer à l'utilisateur qu'il y a plus de photos derrière une image miniature?

Je suis en train de créer une galerie d'images sur une page Web et j'ai plusieurs vignettes d'objets. Comment pourrais-je donner un indice visuel qu'il y a un groupe d'images derrière chaque vignette? Par exemple ... disons que j'ai une voiture comme une des vignettes, qui, lorsque vous cliquez dessus, affichera une grande version de cette photo de voiture avec des flèches de navigation sur les côtés afin que l'utilisateur puisse voir plus de photos de ce même objet ( diaporama).

À l'heure actuelle, la vignette de la voiture a une loupe transparente au-dessus de la vignette pour montrer qu'elle est cliquable.

Comment dois-je donner un indice visuel sur la zone des vignettes pour montrer qu'il y a plus de photos "derrière" cette vignette et pas seulement la version agrandie de cette vignette? Ou, est-ce que cette possibilité supplémentaire est même nécessaire?

Remarque: j'utilise la visionneuse JQuery pour la galerie de photos.

22
redshift

Les piles sont une méthode d'interface utilisateur efficace pour indiquer du contenu supplémentaire derrière ce qui est actuellement visible.

Quelques exemples de piles dans différentes applications:

Piles de vignettes

Probablement le plus proche de ce que vous recherchez. Des vignettes supplémentaires sont cachées ci-dessous, mais avec les bords visibles pour indiquer leur présence.

Thumbnail stacks

Liste de lecture SoundCloud

Semblable à l'exemple ci-dessus, cependant, cette conception utilise un décompte de nombres indiquant le nombre d'articles qu'il contient. De plus, les vignettes "empilées" sont des images statiques pour réduire les ressources graphiques nécessaires.

SoundCloud Playlist

36
Alan

Je pense que l'approche @Alan George est correcte, je vais simplement ajouter deux possibilités qui pourraient aider l'utilisateur à obtenir le message facilement:

Label + numéro : Parce que parfois il y a rien de mieux que d'être explicite

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

La représentation de la quantité au même endroit où "il y a plus d'images" est exprimée graphiquement suivant ainsi le principe de proximité :

mockup

télécharger la source bmml

29
Alejandro Veltri

Je propose une approche légèrement différente de ce que vous aviez demandé. Vous pouvez également considérer la méthode récemment adoptée par Facebook. Vous pouvez envisager de montrer quelques photos de voitures supplémentaires dans un bloc et des camions dans un autre, etc. De plus, si quelqu'un est intéressé à voir plus de voitures, il peut cliquer sur le numéro +.

La manière Facebook

enter image description here

Comment le vôtre pourrait-il être? enter image description here

3
Chethan S.

Carrousel en ligne

Inline Carousel

Une alternative s'il y a suffisamment d'espace. Et vous pouvez voir d'autres images déjà dans l'aperçu.

0
Gustav