Pelote
EN
Contenu

ExpressiveShape

26 des 35 formes officielles de Material 3 Expressive, aux tracés exacts.

Catégorie: ContenuOuvrir l'aperçu seul

Aperçu en direct

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

ExpressiveRéférence

Basiques

circle
square
slanted
arch
fan
arrow
semiCircle
oval
pill
triangle
diamond
clamShell
pentagon
gem

Soleils et cookies

sunny
verySunny
cookie4
cookie6
cookie7
cookie9
cookie12

Organiques

ghostish
clover4
clover8
puffyDiamond
bun

Séquence de l'indicateur de chargement (sans softBurst)

Tracés générés depuis les sources androidx-main (MaterialShapes.kt et graphics-shapes), normalisés dans un carré comme RoundedPolygon.normalized(). En production Compose, l'indicateur passe d'une forme à l'autre avec Morph ; ici la séquence est montrée à plat.

UX / UIRègles illustrées

À faire
Deux formes max, teintes conteneur, proportions intactes.
À éviter
Une forme étirée sur un axe : elle perd sa géométrie.
À éviter
Confettis de formes en couleurs vives et sémantiques.

Variante M3EMême composant, mêmes rôles, autre matière

PlazaWii U / 3DS

Les formes se posent dans des tuiles brillantes ; la tuile sélectionnée prend le cadre primary.

ChromeY2K

Sphère de métal, cookie en gel primary, gem en accent tertiary.

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

26 des 35 formes officielles de Material 3 Expressive (MaterialShapes de Compose), aux tracés exacts : bundle.js porte l'algorithme RoundedPolygon d'androidx et expose chaque forme dans Pelote.SHAPES.

Ce que fournit le consommateur

<svg data-shape="cookie9"> (le tracé est ajouté par bundle.js) ou Pelote.shapePath("cookie9"), un chemin SVG dans une boîte de 100. Couleur via color, toujours un conteneur (pc, secc, tc). Les fichiers SVG sont aussi dans le groupe d'assets Shapes.

Quelle forme pour quoi

  • Logo, badge de section : cookie9.
  • Avatar, photo : circle, cookie12, clover4, gem.
  • Décor de MetricCard : cookie9, clover4, sunny, cookie12, cookie6.
  • Indicateur de chargement : cookie9, pentagon, pill, sunny, cookie4, oval (la séquence officielle sans softBurst).

Formes exclues

Éclats (burst, softBurst, boom, softBoom), pixel (pixelCircle, pixelTriangle), heart, puffy et flower ne font pas partie de ce système.

Règles

  • Proportions conservées : on agrandit une forme, on ne l'étire jamais sur un seul axe.
  • Une forme ne porte jamais seule une information, et ne remplace pas un bouton (les boutons restent des pilules qui se déforment à l'appui).
  • Deux formes visibles maximum par bloc.
  • cookie et clover, les anciens noms, pointent vers cookie9 et clover4.

Plus

TokensAssetsLicence GitHub

Apparence

Le choix s'applique tout de suite et reste sur cet appareil.

Mode
Couleur du thème Tous les rôles sont régénérés depuis cette couleur source.
Style La matière change, les composants et les rôles restent les mêmes.
Material YouSur le web, la couleur du fond d'écran n'est pas accessible. Choisis une couleur source ci-dessus ; dans les apps Android 12+, Material You suit le fond d'écran.