webentwicklung-frage-antwort-db.com.de

Wie kann ich dem Benutzer zeigen, dass sich hinter einem Miniaturbild mehr Fotos befinden?

Ich lege eine Bildergalerie auf einer Webseite an und habe mehrere Miniaturansichten von Objekten. Wie würde ich vorgehen, um einen visuellen Hinweis darauf zu geben, dass sich hinter jedem Miniaturbild eine Gruppe von Bildern befindet? Zum Beispiel ... Nehmen wir an, ich habe ein Auto als eine der Miniaturansichten, die beim Klicken eine große Version dieses Autofotos mit Navigationspfeilen an den Seiten anzeigen, sodass der Benutzer mehr Fotos desselben Objekts anzeigen kann ( Diashow).

Im Moment hat das Auto-Miniaturbild eine transparente Lupe über dem Miniaturbild, um zu zeigen, dass es anklickbar ist.

Wie soll ich einen visuellen Hinweis auf den Miniaturbildbereich geben, um zu zeigen, dass sich "hinter" diesem Miniaturbild mehr Fotos befinden und nicht nur die größere Version dieses Miniaturbilds? Oder ist diese zusätzliche Leistung überhaupt erforderlich?

Hinweis: Ich verwende den JQuery-Leuchtkasten für die Fotogalerie.

22
redshift

Stapel sind eine effektive Benutzeroberflächenmethode, um zusätzlichen Inhalt hinter dem anzuzeigen, was derzeit sichtbar ist.

Einige Beispiele für Stapel in verschiedenen Anwendungen:

Thumbnail Stacks

Höchstwahrscheinlich am nächsten an dem, was Sie suchen. Zusätzliche Miniaturansichten sind unten ausgeblendet, die Kanten sind jedoch sichtbar, um ihre Anwesenheit anzuzeigen.

(Thumbnail stacks

SoundCloud-Wiedergabeliste

Ähnlich wie im obigen Beispiel verwendet dieses Design jedoch eine Anzahl, die angibt, wie viele Elemente sich darin befinden. Außerdem sind die "gestapelten" Miniaturansichten statische Bilder, um die erforderlichen grafischen Ressourcen zu reduzieren.

(SoundCloud Playlist

36
Alan

Ich denke, der Ansatz von @Alan George ist richtig. Ich füge nur zwei Möglichkeiten hinzu, die dem Benutzer helfen könnten, die Nachricht leicht zu erhalten:

Label + Nummer : Weil es manchmal nichts Besseres gibt als explizit zu sein

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Das Anzeigen der Menge an derselben Stelle, an der "es gibt mehr Bilder", wird grafisch ausgedrückt und folgt dabei dem Näherungsprinzip :

mockup

bmml Quelle herunterladen

29

Ich schlage einen etwas anderen Ansatz vor als den, nach dem Sie gefragt haben. Sie können auch die Methode berücksichtigen, die Facebook kürzlich übernommen hat. Sie können in Betracht ziehen, einige weitere Auto-Bilder in einem Block und Lastwagen in einem anderen zu zeigen und so weiter. Wenn jemand mehr Autos sehen möchte, kann er auf die + Nummer klicken.

Der Facebook-Weg

(enter image description here

Wie könnte deins sein? enter image description here

3
Chethan S.

Inline-Karussell

(Inline Carousel

Eine Alternative, wenn genügend Platz vorhanden ist. Und Sie können andere Bilder bereits in der Vorschau sehen.

0
Gustav