risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come mostrare all'utente ci sono più foto dietro un'immagine in miniatura?

Sto realizzando una galleria di immagini su una pagina Web e ho diverse miniature di oggetti. Come farei per dare un indizio visivo che ci sia un gruppo di immagini dietro ogni miniatura? Ad esempio ... supponiamo che io abbia un'auto come una delle miniature, che, quando viene cliccata, mostrerà una versione grande di quella foto dell'auto con le frecce di navigazione sui lati in modo che l'utente possa visualizzare più foto dello stesso oggetto ( Presentazione).

In questo momento, l'anteprima dell'auto ha una lente d'ingrandimento trasparente sulla parte superiore dell'anteprima per mostrare che è selezionabile.

Come dovrei dare un indizio visivo nell'area delle miniature per mostrare che ci sono più foto "dietro" quella miniatura e non solo la versione più grande di quella miniatura? Oppure, è necessaria anche questa convenienza extra?

Nota: sto usando JQuery Lightbox per la galleria fotografica.

22
redshift

Le pile sono un metodo di interfaccia utente efficace per indicare contenuti aggiuntivi dietro ciò che è attualmente visibile.

Alcuni esempi di stack in diverse applicazioni:

Stack di miniature

Molto probabilmente il più vicino a quello che stai cercando. Le miniature aggiuntive sono nascoste sotto, ma con i bordi visibili per indicare la loro presenza.

Thumbnail stacks

Playlist SoundCloud

Simile all'esempio precedente, tuttavia, questo design utilizza un conteggio dei numeri che indica quanti elementi ci sono. Inoltre, le miniature "sovrapposte" sono immagini statiche per ridurre le risorse grafiche necessarie.

SoundCloud Playlist

36
Alan

Penso che l'approccio di @Alan George sia corretto, aggiungerò solo due possibilità che potrebbero aiutare l'utente a ricevere facilmente il messaggio:

Etichetta + numero : Perché a volte c'è niente di meglio che essere espliciti

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Mostrare quantità nello stesso posto in cui "ci sono più immagini" è espresso graficamente seguendo quindi il principio di prossimità :

mockup

scarica la fonte bmml

29
Alejandro Veltri

Sto suggerendo un approccio leggermente diverso da quello che avevi chiesto. Puoi anche considerare il metodo adottato di recente da Facebook. Puoi considerare di mostrare qualche altra foto di auto in un blocco e camion in un altro e così via. Inoltre, se qualcuno è interessato a vedere più auto, può fare clic sul + numero.

The Facebook Way

enter image description here

Come potrebbe essere il tuo? enter image description here

3
Chethan S.

Carosello in linea

Inline Carousel

Un'alternativa se c'è abbastanza spazio. E puoi vedere altre foto già nell'anteprima.

0
Gustav