Afficher les images associées avec l'image principale
Disons que j'ai un écran contenant 10 à 20 images. Chacun d'eux aura jusqu'à 4 images liées. J'aurais besoin d'afficher les images associées avec l'image principale. Une suggestion sur la mise en page des images associées par rapport à l'image principale?
J'inclus une maquette pour mieux illustrer mon problème.
Il y a 2 choses que vous devez résoudre dans cette interaction:
- Comment puis-je dire aux utilisateurs qu'il existe des images liées?
- Comment dois-je montrer la collection complète?
En fonction de vos ressources de développement, il existe 2 façons d'aborder le premier problème . Le plus simple consiste simplement à mettre un lien texte sous l'image qui lirait See X related, comme ça:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La difficulté est de créer un semblant de pile d'images et de placer un badge dans le coin inférieur droit (de manière conventionnelle) pour indiquer le nombre d'images associées. Il n'est pas nécessaire d'utiliser les images liées réelles dans la pile (économise les temps de traitement et de rendu) tant qu'il est clair quelle image a des éléments liés et laquelle n'en a pas. Cela ressemblerait à quelque chose comme ceci:
Le deuxième problème est beaucoup plus facile à résoudre. Vous pouvez étendre la collection d'images dans une page dédiée ou dans une sous-fenêtre modale (ou une boîte de dialogue - dépend du flux de travail de vos utilisateurs).
Ajouté
Puisque l'OP a ajouté une maquette de l'interface, je peux certainement dire que les piles et les modaux fonctionneront mieux dans sa situation. Pour tout le monde, les choix susmentionnés sont toujours valables.
Possible d'avoir un état de mise au point, où votre image mise au point (cliquez, survolez, appuyez, faites défiler pour centrer, quelque chose) anime les vignettes de ses images connexes ci-dessous ou quelque chose? Je suppose que cela dépend de ce que vous pouvez faire avec notre plateforme et de la signification des images.