Solution de conception de matériaux pour les popovers
La conception matérielle n'a pas de popovers, et je me demande ce qui devrait être utilisé en remplacement?
Par exemple, comment conseilleriez-vous à Product Hunt de remplacer son popover lors du passage à la conception de matériaux?
Voici comment...
Voir cet effet de liste déroulante pour un exemple de la façon dont la physique Material Design peut fonctionner pour un popover. Un schéma similaire est:
Le fondu d'opacité, l'indicateur de légende triangulaire et l'origine de croissance (en haut ou au centre) sont toutes des options valides.
Voici pourquoi
Les directives de conception de matériaux ne spécifient pas de popovers, mais les spécification des propriétés des matériaux fournissent un ensemble clair de propriétés qui peuvent être utilisées pour créer des popups. Les propriétés pertinentes du matériau sont:
- Le matériel ne peut pas occuper le même plan. Mais le matériau peut être empilé.
- Le matériau peut être créé dans un plan. Voir cette vidéo .
- Le matériau peut changer de forme. Voir cette vidéo .
Une séquence popover peut donc être créée avec les paramètres suivants:
- Popover apparaît flottant au-dessus du contenu. Assurez-vous que les ombres sont conformes. Voir ceci .
- Popover est créé dans l'avion sur le contenu, comme avec cette vidéo .
La démo déroulante en haut est généralement conforme à cet ensemble de paramètres.
Il est possible que la spécification Material Design ait changé depuis que cette question a été posée il y a plus d'un an.
Selon la spécification actuelle, Product Hunt devrait remplacer leur popover par une boîte de dialogue. De la spec :
Les boîtes de dialogue informent les utilisateurs sur une tâche spécifique et peuvent contenir des informations critiques, nécessiter des décisions ou impliquer plusieurs tâches.
Plus précisément, la spécification stipule que pour les éléments de liste (c'est à quoi Product Hunt aurait besoin de convertir le contenu de cette page), vous pouvez utiliser une simple boîte de dialogue pour fournir des détails ou des actions sur une heure de liste à partir de la spécification:
Les menus simples affichent des options pour les éléments de liste, tandis que les boîtes de dialogue simples peuvent fournir des détails ou des actions sur un élément de liste.
Voici un exemple similaire à ce dont Product Hunt aurait besoin: 