web-dev-qa-db-fra.com

Conception matérielle - Carte dans une carte

J'utilise Material Design pour notre produit et j'ai une zone qui a des cartes affichant des informations.

Une carte peut-elle être répertoriée dans une carte?

Similaire à l'image ci-dessous mais avec du contenu, évidemment.

enter image description here

18
Bryce Snyder

Alors que d'autres ont noté qu'il s'agit clairement d'un gros Ne pas dans les directives, il convient de noter que Google utilise des cartes imbriquées dans l'application Google elle-même:

enter image description here

Personnellement, je pense qu'une meilleure alternative serait de diviser les cartes à défilement horizontal en une section en dessous de la carte principale avec un surlignage "histoires liées", et 0dp pour indiquer leur nature secondaire

6
micimize

Non

Selon directives de la carte MD :

Les cartes peuvent contenir une photo, du texte et un lien sur un seul sujet. Ils peuvent afficher du contenu contenant des éléments de taille variable, tels que des photos avec des légendes de longueur variable.

Une collection de cartes est une présentation de cartes sur le même plan.

Aussi:

Une collection de cartes est coplanaire, ou une disposition de cartes sur le même plan.

Si vous souhaitez utiliser un coplanaire, chaque carte doit être sur le même plan les unes dans les autres, où le plan est l'arrière-plan de l'application ou de la page.

Enfin, à propos de conten :

Les cartes peuvent être construites en utilisant des blocs de contenu qui comprennent:

An optional header
A primary title
Rich media
Supporting text
Actions
17
Devin

Il y a déjà eu un certain nombre de bonnes explications et références de Google Material Design pour suggérer que ce n'est pas une bonne idée, donc je vais aborder cela du point de vue du design pur de deux manières:

Le but de la carte: pour faire apparaître le contenu afin qu'il puisse être affiché de manière simple et claire. Parfois, les gens essaient d'ajouter trop d'interaction (par exemple, Live Tiles dans Windows 10 ou actions/liens sur les cartes) et cela va vraiment à l'encontre du but pour lequel les cartes sont censées servir.

Le problème avec les cartes : comme avec la plupart des éléments de conception "plats", il n'y a pas de moyen clair d'indiquer les interactions possibles au sein de la carte autre que pour les utilisateurs de explorer (c'est-à-dire avec leur souris ou toucher), vous voulez donc rendre l'interaction et le contenu aussi simples que possible. Cependant, nous constatons de nos jours la prolifération dans la variation de ce modèle de conception pour inclure à la fois l'interaction pour la carte entière et les parties/sections de la carte. Cela rend la complexité de l'interaction plus que nécessaire pour l'utilisateur à comprendre, et donc la conception globale, en particulier lorsqu'il y a un certain nombre de types de cartes différents présents en même temps, très "peu intuitifs".

Vous pouvez donc voir pourquoi ce n'est pas quelque chose normalement encouragé dans les modèles de conception, bien que cela n'empêche certainement pas les gens d'essayer de le faire.

En outre, un intéressant article sur certains pièges de la conception matérielle à éviter, qui traite également de l'utilisation des cartes:

Les cartes ont leur propre but et ne conviennent pas à tous les scénarios où nous devons afficher des données. Non, ils ne sont pas la panacée pour tous les problèmes de conception: lorsqu'ils sont mal utilisés, ils finissent par être un obstacle cognitif - beau, mais toujours obstruant.

5
Michael Lai

J'ai eu le même problème et je ne pense pas que ce soit définitivement un "non, vous ne pouvez pas". Peut-être que cela revient plus pour les ordinateurs de bureau/appareils plus grands.

La raison pour laquelle je considère cela est que j'ai une carte (sur le bureau) avec un contenu à onglets. Chaque onglet contient une "liste" d'informations CERTAINES d'entre elles nécessitent plus de 3 lignes de contenu (et ne peuvent donc pas être présentées sous forme de liste - ce qui est explicite dans la spécification - "Si plus de trois lignes de texte doivent être affichées dans les tuiles de liste, utilisez plutôt des cartes. "). Cela semble donc suggérer qu'une carte est le contenant approprié pour ces articles.

Je ne vois pas pourquoi vous ne pouvez pas avoir un plan de cartes à l'intérieur d'une carte. Les cartes ne se limitent pas à contenir uniquement du texte, des images, des médias enrichis et un lien. Selon les spécifications, il est acceptable d'avoir toutes sortes de contenus différents dans les cartes, comme:

Onglets !, Entrées, listes et listes de grilles. Voici un exemple de Specs montrant les onglets d'une carte:

enter image description here

Alors pourquoi pas un plan de cartes?

Une collection de cartes est coplanaire mais cela ne signifie pas qu'une carte dans cet avion ne peut pas contenir une collection de cartes, cela signifie simplement que cette collection serait sur un autre plan. C'est-à-dire que la carte parent est dans un avion avec ses frères et sœurs tandis que la collection enfant est également sur son propre avion (qui se trouve être sur un avion qui se trouve à l'intérieur d'une autre carte). Il vous suffit donc d'élever une collection imbriquée vers un plan supérieur (comme indiqué dans la question).

3
Meli

Je dirais que ce n'est probablement pas la façon dont les cartes doivent être utilisées.

Après avoir lu les directives pertinentes , je n'ai trouvé aucune mention spécifique des cartes intégrées dans les cartes, mais j'ai trouvé des directives sur les gestes pris en charge pour les cartes. Le fait que le geste "ramasser et déplacer", par exemple, soit pris en charge pour les cartes me fait penser que ces éléments ne doivent pas être imbriqués.

2
maxathousand

Les cartes ne doivent pas être dans les cartes.

Les cartes sont censées représenter une seule instance de quelque chose donné un certain sujet ou contexte . En ayant des cartes imbriquées, vous représentez deux contextes de cartes différents dans le même élément conteneur. Les cartes imbriquées doivent avoir leur propre élément conteneur, car elles représentent un contexte de carte différent de leur carte parent.

Conception matérielle - Cartes

tilisation de la conception basée sur des cartes pour améliorer l'UX

2
Tory

Un aspect important est quel est le contenu des cartes ( s'il s'agit d'un contenu homogène qui n'a pas beaucoup d'actions ) et quelle est la largeur et la hauteur des éléments.

Si votre conception est juste pour illustrer le concept et que nous pouvons discuter d'une carte principale, 1200px x 1200px, par exemple, qui sera le conteneur principal, avec deux cartes à l'intérieur, je trouve cela acceptable.

Si la carte principale est petite et que l'utilisation des cartes à l'intérieur empêche l'utilisateur de numériser rapidement, ce n'est pas recommandé.

1
Madalina Taina