Cartes avec marges VS conteneur Edge à Edge
Y a-t-il une logique derrière l'utilisation de cartes avec des marges dans la conception des conteneurs VS Edge to Edge? J'ai suivi les directives de conception matérielle ainsi que les directives iOS, ce qui ne donne aucune logique claire. Vérifié Facebook, qui avait auparavant des cartes avec marge, mais qui est maintenant passé aux conteneurs Edge to Edge. N'a pu trouver aucune recherche derrière leur décision de changer également.
Les cartes avec marge et ombre ressemblent à de vraies cartes.
C'est la devise de la conception matérielle. Pour faire apparaître les choses comme de vrais objets. Les objets sont présentés à l'utilisateur sans rompre la continuité de l'expérience.
Le matériau est la métaphore
Une métaphore matérielle est la théorie unificatrice d'un espace rationalisé et d'un système de mouvement. Le matériau est ancré dans la réalité tactile , inspiré par l'étude du papier et de l'encre, mais technologiquement avancé et ouvert à l'imagination et à la magie.
Les surfaces et les bords du matériau fournissent des repères visuels ancrés dans la réalité . L'utilisation d'attributs tactiles familiers aide les utilisateurs à comprendre rapidement les possibilités. Pourtant, la flexibilité du matériau crée de nouvelles possibilités qui remplacent celles du monde physique, sans enfreindre les règles de la physique.
Les principes fondamentaux de la lumière, de la surface et du mouvement sont essentiels pour transmettre comment les objets se déplacent, interagissent et existent dans l'espace et les uns par rapport aux autres . Un éclairage réaliste montre les coutures, divise l'espace et indique les pièces mobiles.
La logique est dans le contenu.
Avertissement: Veuillez garder à l'esprit que la dernière fois que j'ai vérifié Apple n'avait pas de section pour les cartes, cela s'applique donc au matériel.
La différence que vous avez remarquée est que l'une est une carte (celle des marges) et l'autre est une tuile d'une liste.
Les cartes permettent différents types de contenu, comme de grandes photos (y compris la taille complète de la carte), des titres, du texte et des actions. Il est ensuite utilisé lorsqu'ils ont une hiérarchie suffisamment élevée pour mériter leur propre conteneur.
Quand utiliser
Utilisez une présentation de carte lorsque vous affichez du contenu qui:
- En tant que collection, comprend plusieurs types de données, tels que des images, des films et du texte
- Ne nécessite pas de comparaison directe (un utilisateur ne compare pas directement des images ou du texte)
- Prend en charge le contenu de longueur très variable, comme les commentaires
- Contient du contenu interactif, tel que des boutons +1 ou des commentaires
- Serait autrement dans une liste de grille mais doit afficher plus de contenu pour compléter l'image
Cependant, si le contenu est trop homogène et qu'il y a peu d'actions (ou aucune), il est préférable d'utiliser une liste de tuiles. En fait, Material montre cet exemple spécifique
Faire
Une liste rapidement numérisable, au lieu de cartes, est un moyen approprié de représenter un contenu homogène qui n'a pas beaucoup d'actions.
Ne le fais pas
L'utilisation de cartes ici empêche l'utilisateur de pouvoir numériser rapidement. Ces éléments de liste ne sont pas non plus admissibles, donc les avoir sur des cartes distinctes est source de confusion.
Toutefois...
Rappelez-vous toujours que Le matériel n'est qu'un guide , et vous pouvez jouer avec lui un peu. En fait, à moins que vous ne vouliez vraiment que votre application ressemble à tout le monde, je vous suggère de lui donner un peu de personnalité
De nombreuses applications Web ou sites Web utilisent des cartes Edge to Edge dans les écrans mobiles.
Cela leur donne plus d'espace pour afficher le contenu dans un écran déjà petit. Imaginez un téléphone mobile avec une largeur de 360dp. Si, selon certaines directives, vous utilisez des marges de 8dp ou 16dp, vous perdez essentiellement 16dp ou 32dp respectivement. Et ce 16dp ou 32dp peut jouer un rôle énorme (par exemple, vous pouvez tenir dans un bouton de débordement ou afficher plus de caractères sur une seule ligne).
Le fait d'avoir des cartes en médaillon sur mobile donne également l'impression que le contenu se casse fréquemment. Pour démontrer cette idée, imaginez que vous visualisez en Full HD, une application de messagerie comme Gmail avec des cartes avec 4px Gutter entre les deux, au lieu de lignes de cellules de tableau. Cela ne serait-il pas inconfortable?
La plupart * des sites Web/applications Web réactifs que vous voyez utilisent Bootstrap style de grille). Autrement dit, ils ont une largeur maximale définie définie pour les conteneurs à différents points d'arrêt, mais pour les appareils mobiles, la largeur du conteneur est défini à 100% de la largeur du navigateur. Donc, évidemment, les cartes lorsqu'elles sont placées dans les conteneurs, sont ajustées à 100% de la largeur du navigateur par défaut (c'est-à-dire bord à bord). Celui-ci est plus un résultat qu'une logique. J'ai expliqué le probable logique dans les deux points précédents.
* La plupart - Je n'ai aucune statistique pour le supporter, mais je ne l'ai utilisé ici que pour souligner la raison probable.