Pelote
EN
Mise en page

Layout

Le shell responsive : barre en bas, rail à gauche, bento et deux volets.

Catégorie: Mise en pageOuvrir 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.

LayoutClasses de largeur et navigation

Compact
barre en bas
Medium / fold ouvert
rail + deux volets, rien sur la charnière
Posture table
lire en haut, agir en bas
Expanded / Large
rail + contenu jusqu'à 1340 px
Widgets
Extra-large (≥ 1500 px)
volet de widgets à droite, comme vps-admin
Bento pleine largeur
vue d'ensemble : tuiles de tailles différentes

Barre en bas sous 600 px (760 px si plus de 4 destinations, comme vps-admin), rail à gauche au-delà. Pas d'espace mort : une vue d'ensemble passe en bento pleine largeur, un contenu qui se lit reste borné (1340 px) avec un volet utile à côté au-delà de 1500 px.

UX / UIRègles illustrées

À faire
Contenu qui se lit : borné, avec un volet utile (widgets, détail, aperçu) qui ne répète pas le contenu.
À faire
Vue d'ensemble : bento pleine largeur, la mesure principale plus grande, aucun trou.
À éviter
Deux cartes étirées sur 2560 px avec un grand vide entre elles.
À faire
Compact
barre en bas
Téléphone : barre en bas, à portée de pouce.
À éviter
Un rail sur un téléphone en portrait : il mange un quart de l'écran.
À éviter
Dialogue sur la charnière
Un dialogue ou un bouton coupé par la charnière d'un fold.

Le layout est le même dans les trois styles : Plaza et Chrome changent la matière, pas la structure.

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

L'organisation d'un écran selon sa largeur : barre de navigation en bas sur téléphone, rail à gauche au-delà, contenu limité en largeur, volet de soutien sur très grand écran, deux volets sur un fold ouvert.

Ce que fournit le consommateur

Le shell de l'app (rail, barre du bas, zone de contenu, volet optionnel) qui bascule selon la classe de largeur, et la liste des destinations.

Règles

  • Compact : barre en bas (3 à 5 destinations, le reste dans « More »). Medium et plus : rail à gauche. Le point de rupture se choisit : 600 px (classes de fenêtre M3) ou 760 px quand la navigation dépasse 4 destinations ou que le contenu a besoin de largeur. Les deux sont acceptés, mais une seule valeur par app ; le site Pelote utilise 760 px.
  • Pas d'espace mort : vue d'ensemble en bento pleine largeur, ou contenu borné (1340 px) avec un volet utile (barre de widgets de vps-admin) au-delà de 1500 px, sinon centré.
  • Fold : deux volets de part et d'autre de la charnière, rien d'important dessus ; posture table : lire en haut, agir en bas.
  • Détails : section Layout du guide.

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.