Plus d'interaction avec les options pour les lignes de tableau et les vignettes
Je conçois une application Web qui a une vue de ligne et de tuile de tableau dans l'écran du tableau de bord. En termes de réalisation esthétique et fonctionnelle, j'ai décidé de mettre plus de boutons (trois points comme style de conception de matériau) dans les lignes du tableau où l'utilisateur peut avoir une vue étendue en cliquant dessus.
Vue normale des lignes du tableau, 
Vue étendue de la ligne du tableau, 
Voici une vue en mosaïque de la même chose,
Mon problème est que lorsque l'utilisateur passe de la vue des lignes de la table à la vue des tuiles affichant des informations supplémentaires, c'est un peu difficile. Au départ, j'ai pensé à une sorte d'interface utilisateur de fenêtre contextuelle, mais ce n'est pas assez bon pour aller avec. Y a-t-il une meilleure suggestion?
Merci d'avance.
Réponse courte: Utilisez une superposition modifiée avec du contenu en cascade à partir du bas.
Réponse longue: Vous pouvez résoudre ce problème démocratiquement - ou vous pouvez donner un coup de pied sérieux.
Le principal problème est que l'icône "conception matérielle" à 3 points ajoute une couche de mystère. Je ne savais pas que cela élargirait le contenu JUSQU'À ce que vous l'expliquiez. Vous voudrez peut-être échanger cela contre une icône de flèche déroulante et un texte qui dit "Plus" ou "Détails"
Le deuxième problème est le placement de l'icône dans la disposition de la vue Carte . Elle est trop éloignée de l'élément qu'elle affecte - la proximité est un problème.
Tuez chaque oiseau avec une pierre: 1. Laissez le contenu tomber naturellement du fond. 2. Appliquez un overaly modifié qui donne l'impression que la carte elle-même a augmenté à l'aide de z-index. 3. Jouez avec des hauteurs fixes pour la carte, puis laissez-la déborder en bas pour révéler le contenu avec élégance.
Oui, vous devez connaître votre CSS et JavaScript pour y parvenir.
Commencez donc avec une seule carte, vous pouvez dupliquer l'interaction pour toutes les autres cartes.
afficher le contenu supplémentaire dans une fenêtre contextuelle est une très mauvaise idée avec les cartes. les cartes peuvent être étendues, c'est-à-dire étendues pour accueillir du contenu supplémentaire. vous pouvez trouver beaucoup d'interactions telles que
redimensionnement de la carte windows 8.
https://dribbble.com/shots/1893589-Material-design-card-animation
vous pouvez trouver des interactions Web similaires quelque chose de similaire.
Je peux suggérer d'utiliser une disposition de maçonnerie lors du passage à la vue tuile dans la conception de votre application. Il élimine l'utilisation de fenêtres contextuelles et maintient également la grille en place correctement sur une page en plaçant automatiquement les éléments dans une position optimale en fonction de l'espace vertical disponible
Consultez l'exemple suivant de Codepen, https://codepen.io/bharath-bhony/pen/oGKNjQ