Quelle est la différence entre les cartes, les panneaux et les tuiles?

Question

Il semble que, avec certains des cadres de développement frontaux modernes, il y ait un flou entre les différents types d'éléments "conteneurs". Que ce soit une tentative d'abstraire la conception de la mise en œuvre ou si cela est dû à l'absence de normalisation des terminologies, je ne suis pas sûr, mais cela conduit au fait que dans certains cadres de conception, je vois le terme panneaux utilisé mais pas les cartes (par exemple Bootstrap 3) alors que dans d'autres le terme cartes existe mais pas de panneaux (par exemple Iconic), et peut-être les deux existent-ils dans d'autres?

Du point de vue de la conception, il semble que les cartes et les panneaux ne soient que des conteneurs, et comme il n'y a rien qui définit la taille d'une carte et la taille d'un panneau, je me demande s'il y a vraiment une différence. Du point de vue de la mise en œuvre, il semble que les cartes devraient être utilisées pour des éléments de conception de plus petite taille et sont préférées sur les applications spécifiques aux mobiles, tandis que les panneaux sont utilisés pour une gamme plus large d'éléments de conception et sont préférés sur les applications spécifiques au bureau.

Existe-t-il des preuves/références/exemples qui aideront à illustrer ou à mettre en évidence (l'absence de) différences? Pour une raison quelconque, je pense que les cartes et les tuiles sont plus étroitement liées les unes aux autres, et que les panneaux semblent être dans une classe/famille légèrement différente?

Si nous prenons l'argument selon lequel il n'y a pas de différences, il est difficile de comprendre pourquoi les gens associent des "tuiles" aux pages d'accueil de style "Metro" de Microsoft, tandis que sur Google et Android c'est " cartes "et pour Java et les applications Gnome ce sont des" panneaux ". Peut-être y a-t-il des différences de contexte ou d'implémentation?

UPDATE : avec la sortie de Bootstrap 4, il semble que les cartes soient fondamentalement équivalentes aux panneaux (puisqu'un composant a remplacé l'autre), mais avec cela vient le coût d'avoir à maintenir un conteneur plus flexible qui le rendra difficile à mettre en œuvre de manière cohérente. Selon Bootstrap:

Un conteneur de contenu flexible et extensible. Il comprend des options pour les en-têtes et pieds de page, une grande variété de contenus, des couleurs d'arrière-plan contextuelles et de puissantes options d'affichage.

MISE À JOUR SUPPLÉMENTAIRE: Il semble que Bootstrap 5 et Material.io ont adopté le composant d'interface utilisateur de carte dans le nouveau monde de l'écosystème de premier/multi-appareil réactif et mobile systèmes tandis que les "tuiles" ont une signification très spécifique dans le Microsoft Fluent Design System:

Une vignette est la représentation d'une application dans le menu Démarrer. Chaque application a une tuile. Lorsque vous créez un nouveau projet d'application UWP (Universal Windows Platform) dans Microsoft Visual Studio, il comprend une vignette par défaut qui affiche le nom et le logo de votre application.

Les panneaux ne semblent plus faire partie du vocabulaire, du moins en termes de composant d'interface utilisateur, mais dans le monde Microsoft et Java, il représente toujours un concept abstrait de dispositions d'organisation des composants d'interface utilisateur .

Answer 1

Le zoo du conteneur

Les termes carte, panneau, tuile et autres sont souvent utilisés de manière interchangeable, de sorte que leurs définitions ne sont pas précises et peuvent changer d'une entreprise à l'autre ou d'un écosystème à l'autre. Mais, il existe une définition vernaculaire lâche pour les différents conteneurs.

Pourquoi est-ce important?

Parce qu'en pratique, nommer les choses est important . Voici un exemple de la raison pour laquelle les noms de conteneurs sont importants (cliquez sur l'image pour développer):

• Maintenant, imaginez que certains de ces noms de conteneurs ont été échangés. Par exemple, si la carte a été échangée avec le panneau ou la barre d'outils a été remplacée par la tuile . Cela conduirait à des discussions UX assez déroutantes.

• Cet exercice de réflexion nous montre que, bien que les termes conteneurs soient tous vaguement interchangeables, il existe une convention approximative autour de ce qu'ils signifient.

• Il illustre également pourquoi il est important d'avoir des termes différents pour les conteneurs (imaginez à quel point il serait difficile de travailler avec cette disposition si tous les conteneurs étaient nommés "panneau").

---

Définitions vernaculaires

Voici une définition approximative de l'utilisation vernaculaire des termes. L'illustration ci-dessus est une référence décente pour des exemples de chaque conteneur:

• Fenêtre

  • Écosystème commun: MS Windows, Mac OS, Ubuntu et autres systèmes d'exploitation
  • Se réfère généralement au plus grand conteneur visuel pour une vue d'application et est généralement défini par le système d'exploitation.

• Cadre

  • Écosystèmes communs: toutes les interfaces utilisateur numériques
  • Fait généralement référence à un élément extérieur ou un objet de bordure qui contient un seul corps de contenu.
  • par exemple. en HTML, les panneaux sont souvent enveloppés à l'intérieur d'un objet cadre qui permet au cadre d'être stylé indépendamment du contenu du panneau.

• Panneau

  • Écosystèmes communs: toutes les interfaces utilisateur numériques
  • Fait généralement référence à un conteneur dans une fenêtre qui contient plusieurs éléments associés. Par exemple, un panneau peut contenir un formulaire, un ensemble d'informations, un tableau de données, etc.
  • Les panneaux sont souvent utilisés pour sectionner le contenu des fenêtres afin de faciliter l'organisation visuelle.

• Carte

  • Écosystèmes communs: Web, Google Material Design, applications mobiles et de table
  • Fait généralement référence à un conteneur rectangulaire qui contient plusieurs éléments associés qui peuvent apparaître plusieurs fois sur une page. Par exemple, les articles de presse, les résultats de recherche et les listes de restaurants sont tous des éléments qui peuvent contenir plusieurs éléments (image, titre, description) et sont bien adaptés aux mises en page de cartes.
  • Les cartes sont un moyen pratique de découper et d'organiser le contenu en grille, pour faciliter la présentation d'informations complexes/hiérarchiques.
  • Les cartes (contrairement aux tuiles) peuvent contenir et contiennent fréquemment plusieurs éléments interactifs. Par exemple, dans l'illustration ci-dessus, vous avez des boutons d'approbation/refus, et l'utilisateur peut être en mesure de cliquer sur le titre de la carte pour charger plus de détails.
  • Les cartes sont souvent manipulables en tant que conteneurs ... les utilisateurs peuvent souvent rejeter, faire glisser, glisser ou réorganiser les cartes.

• Mosaïque

  • Écosystèmes communs: Interface Microsoft Metro
  • Les tuiles représentent généralement de petits conteneurs à usage unique . Les vignettes peuvent présenter une seule information (par exemple, une icône pour une application) ou un petit groupe d'informations connexes (par exemple, la température et l'humidité), mais présentent rarement des informations détaillées.
  • Les vignettes se distinguent souvent par leur usage unique .... dans Microsoft Windows 8+, les vignettes sont cliquables et envoient l'utilisateur vers une seule application, vue ou Web page.

Encore une fois, ces termes ne sont définis que de manière vague et l'utilisation peut varier d'une organisation à l'autre.

Mais il est toujours utile d'avoir une définition lâche/informelle pour les raisons décrites ci-dessus: distinguer les conteneurs par leur nom est très utile dans la pratique pour les professionnels de l'expérience utilisateur.

Answer 2

Il n'y a probablement pas de réponse objective à cette question. Comme vous l'avez dit, si Microsoft, Google ou Oracle ne semblent pas d'accord, comment pourrions-nous?

Ma vue est principalement basée sur conception de matériel Google sur les cartes et tuiles Microsoft Metro . Pour moi, une carte est proche de ce que Google appelle les cartes. Les tuiles Metro et les tuiles en général sont des objets plus homogènes auxquels peuvent être associées certaines actions. Google utilise la galerie d'images comme exemple d'utilisation des vignettes.

Apparence

Les cartes de conception Google Material ont toujours une largeur constante dans une collection.

Les cartes ont une largeur constante et une hauteur variable. La hauteur maximale est limitée à la hauteur de l'espace disponible sur une plate-forme, mais elle peut se développer temporairement (par exemple, pour afficher un champ de commentaire).

Dans Google Material Design, les cartes ont toujours des coins arrondis tandis que les tuiles ont toujours des coins carrés.

Les tuiles Microsoft Metro peuvent être de taille variable dans une collection.

L'utilisateur peut modifier la taille de votre mosaïque à tout moment, il n'existe aucun moyen par programme de savoir quelle taille est actuellement utilisée et seules les notifications correspondant à sa taille actuelle sont affichées.

Mosaïque et toast des éléments visuels (applications Windows Runtime)

Contenu

Tuiles Microsoft Metro:

Cette rubrique présente les concepts et la terminologie entourant les vignettes d'application, qui sont les vignettes de l'écran de démarrage qui représentent et lancent votre application. Une vignette d'application est plus qu'une grande icône; il a la possibilité d'afficher un ensemble de contenu en constante évolution qui peut être utilisé pour tenir l'utilisateur au courant des événements associés à cette application (tels que les nouveaux messages de réseaux sociaux, les nouveaux titres de nouvelles ou les cotations boursières) lorsque l'application n'est pas en cours d'exécution.

Cartes Google Material Design:

Une carte est un morceau de papier avec des données connexes uniques qui sert de point d'entrée à des informations plus détaillées.

[...]

Les cartes sont un moyen pratique d'afficher un contenu composé de différents éléments. Ils sont également bien adaptés pour présenter des éléments dont la taille ou les actions prises en charge varient, comme les photos avec des légendes de longueur variable.

Les tuiles Metro sont donc un peu plus restreintes en ce qui concerne le contenu. Ils affichent uniquement le logo de l'application et éventuellement certaines notifications envoyées par l'application. Les cartes Google peuvent prendre en charge plusieurs types de contenu, dynamique ou statique.

Donc, d'une certaine manière, les cartes Google sont comme des panneaux en Java. De documentation api Java pour le pannea :

Panel est la classe de conteneur la plus simple. Un panneau fournit un espace dans lequel une application peut attacher tout autre composant, y compris d'autres panneaux.

Mais contrairement au panneau en Java, les cartes Google ou les tuiles Metro ne peuvent pas contenir d'autres cartes ou tuiles.

Actions

Les tuiles Metro ont une action, démarrez l'application, tandis que les cartes Google peuvent prendre en charge plusieurs actions supplémentaires en plus de l'action principale de la carte:

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.

Les applications Metro peuvent avoir des tuiles secondaires qui lancent la même application mais avec un contenu distinct ou à partir d'un état distinct:

Une vignette secondaire permet à un utilisateur de lancer directement depuis l'écran d'accueil vers un emplacement ou une sous-expérience spécifique dans une application. L'application décide du contenu à offrir en tant qu'option d'épinglage, mais l'utilisateur choisit si la vignette secondaire sera créée ou supprimée.

Sur panneaux

J'ai toujours pensé que les panneaux étaient clairement différents des cartes/tuiles. Pour moi, les panneaux sont aussi des conteneurs, mais ils ne doivent jamais être utilisés comme collection de la même manière que les cartes/tuiles sont utilisées.

Les panneaux sont utilisés comme légendes pouvant contenir des actions, principalement des CTA. Les panneaux contiennent beaucoup plus d'informations que les cartes/tuiles et sont presque toujours plus grands que les cartes/tuiles. Voici un exemple de panel du framework Foundation , c'est ce que je pense quand les panels sont mentionnés. Ces panneaux peuvent cependant être utilisés pour créer des cartes/tuiles.

Answer 3

Selon les spécifications matérielles de Google ... Les carreaux ont des coins carrés, pas plus de 2 actions, ne peuvent pas être réorganisés ou ignorés. Les cartes ont des coins arrondis (comme les cartes à jouer), ont plusieurs actions, peuvent être réorganisées ou rejetées

Answer 4

1. Cartes - 2. Tuiles - 3. Panneaux

La réponse courte est qu'il n'y a vraiment aucune différence entre ces termes. Chacun de ces éléments peut être de n'importe quelle taille et j'ai utilisé les termes de manière interchangeable sur divers projets.

Nous devons nous adapter pour utiliser la terminologie avec laquelle le reste de l'équipe est à l'aise, car très peu peut être gagné des cycles de dépenses en essayant de faire une distinction entre eux.

Les dispositions de carte sont très bonnes pour découper des données en morceaux de petite taille et fonctionnent bien dans une conception réactive. Je préfère le terme cards parce que la plupart des gens portent des cartes dans leur portefeuille tandis que tiles et panels sont un peu moins courants.

Answer 5

Je documente des applications qui utilisent ce que l'on pourrait appeler des tuiles, des cartes ou des panneaux. Du point de vue de la programmation, les différences sont peut-être assez vagues. Du point de vue de la documentation, j'ai besoin de poignées descriptives pour référence qui ont un sens logique.

Ma lecture de la plupart des commentaires que j'ai vus est que les différences importent peu. Je dirais que, d'un point de vue taxonomique dans la documentation, les différences sont cruciales.

Dans cet esprit: 1) Mosaïque - image statique à usage unique utilisée comme pointeur vers un autre contenu 2) Carte - conteneur multi-usages et multi-éléments affichant un sous-ensemble de données en direct pouvant contenir des liens vers d'autres contenus ou fonctions 3 ) Panneau - document complexe qui peut, dans certains contextes, être l'équivalent d'un document Word, et dans d'autres contextes, être l'équivalent d'une mise en page ordonnée d'une ligne de données ou de résultats de requête

Peut-être qu'il existe des termes d'interface utilisateur existants dans la conception de base de données que je ne connais pas actuellement. Cependant, les formulaires et les résultats des requêtes ne correspondent pas au modèle que je présente ici.