À l'aide de l'interface utilisateur de la carte, où doit aller un ensemble d'actions? (Partager, détails, info)
J'utilise l'interface utilisateur de la carte pour un projet et, alors que certaines cartes peuvent être une ligne ou une colonne, beaucoup constituent une grille. Le problème est que certaines cartes ont une action comme "partager" tandis que d'autres ont 2 ou 3 actions. Je veux un look cohérent qui ne gâche pas la grille.
Quelles sont mes meilleures options? Placer les actions au bas de la carte semble populaire au moins sur mobile. Mais cela ne tient pas compte de la grille sur le Web.
Des idées sur les meilleures pratiques?
Les consignes de conception de matériel Google sur les cartes est une bonne lecture, recommandée.
Vous n'avez pas précisé si vos cartes sont de taille égale ou non mais sur la base de ne pas "gâcher la grille", elles sont probablement de taille égale.
Une grille de cartes de différentes tailles est une possibilité mais vous devez faire très attention à ne pas les surcharger d'actions.
Depuis Google Material Design:
L'action principale d'une carte est généralement la carte elle-même.
Les actions supplémentaires peuvent varier d'une carte à l'autre dans une collection, selon le type de contenu et le résultat attendu; par exemple, jouer un film ou ouvrir un livre. Dans les cartes d'une collection, positionnez les actions de manière cohérente.
aussi:
Les actions supplémentaires au sein de la carte sont explicitement appelées à l'aide d'icônes, de texte et de contrôles d'interface utilisateur, généralement placés en bas de la carte.
Limitez les actions supplémentaires à deux actions, en plus d'un menu de débordement.
et:
Bien que les cartes puissent prendre en charge plusieurs actions, contrôles d'interface utilisateur et menu de débordement, faites preuve de retenue et n'oubliez pas que les cartes sont des points d'entrée pour des informations plus complexes et détaillées.
Donc, la cohérence et la retenue sont la clé ici, comme Michael Lai l'a dit:
si vous ne faites pas attention, vous constaterez que cela devient un dépotoir d'informations et de fonctionnalités
Votre grille pourrait donc ressembler à ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Ces cartes sont vraiment similaires avec des médias sur chacune et des actions supplémentaires en bas. Mais en même temps un peu incompatible avec une quantité différente d'actions supplémentaires.
Il y a deux stratégies de conception auxquelles je peux penser, et je pense que cela dépendrait du contenu réel que vous mettez dans les cartes.
- Option A - associez l'action au contenu, en supposant que le contenu est modulaire et agit comme des sous-sections dans la carte
- Option B - séparer le contenu de l'action, en supposant que toutes les actions sont pertinentes et s'appliquent à tout le contenu (où le contenu est un bloc d'informations discret)
Tout le reste en général provoquera sans aucun doute beaucoup de deuil alors que vous regardez le terme d'interface utilisateur de carte `` propre '' et simple dans un dépotoir d'informations et de fonctionnalités (ne dites pas que je ne vous ai pas averti).