Construire une mise en page SaaS
Composez les primitives PyColors UI dans une mise en page SaaS évolutive et prête pour la production.
Vue d’ensembleLien vers la section
La plupart des bibliothèques d'interface s'arrêtent aux composants.
Les produits Real SaaS nécessitent une structure :
- navigation
- en-tête
- orchestration de contenu
- Comportement réactif
- Évolutivité à long terme
Ce guide montre comment composer des primitives PyColors dans un réelle mise en page du produit qui survit à la croissance.
Idée de base
La disposition n'est pas un composant. C’est une composition de responsabilités qui évolue au fil du temps.
Ce que vous construisezLien vers la section
Navigation
Contexte
Contenu
Modèle mentalLien vers la section
<AppShell>
<Sidebar />
<Main>
<Header />
<Content />
</Main>
</AppShell>Ce n'est pas une API. Il s’agit d’une séparation des préoccupations :
- Navigation vers où vont les utilisateurs
- En-tête où les utilisateurs comprennent le contexte
- Contenu où les utilisateurs agissent
ÉtapesLien vers la section
Définir les responsabilités de mise en pageLien vers la section
Ne commencez pas par les composants. Commencez par les responsabilités :
- navigation (global)
- contexte (page-level)
- contenu (niveau de fonctionnalité)
Cela empêche les abstractions prématurées.
Construire la navigation desktop-firstLien vers la section
La disposition du bureau doit :
- garder la barre latérale visible
- préserver le balayage vertical
- Prise en charge des vues denses (tableaux, tableaux de bord)
La mise en page mobile devrait :
- Déplacer la navigation dans un panneau latéral
- prioriser le contenu
- exposer la navigation via un déclencheur
Gardez l'en-tête légerLien vers la section
L'en-tête doit contenir :
- titre de la page
- description facultative
- action primaire
- menu utilisateur
Évitez de transformer l'en-tête en panneau de contrôle.
Support de plusieurs types de contenuLien vers la section
Votre mise en page doit gérer :
- vues de données (tables, listes)
- flux de paramètres (formulaires, onglets)
- interactions modales (dialogues)
Une bonne mise en page ne change pas lorsque le contenu change.
Primaires de baseLien vers la section
| Primitif | Rôle |
|---|---|
| Bouton | actions et déclencheurs |
| Sheet | navigation mobile |
| Menu déroulant | actions contextuelles |
| Onglets | paramètres de navigation |
| Tableau | Données structurées |
| boîte dialogue | confirmations |
Principe clé
Vous n’avez pas besoin d’un « système de mise en page ». Vous avez besoin de primitives fiables et d'une bonne composition.
Stratégie réactiveLien vers la section
Disposition du bureau
Desktop layouts prioritize persistent navigation and higher information density.
Exemples de produits réelsLien vers la section
Page de données
- Tableau
- Filtres
- Actions en ligne
- Pagination
Page de paramètres
- Onglets
- Formulaires
- Dialogues
- Validation
Même mise en page. Des contenus différents.
Guide de décisionLien vers la section
Préférez
- Composition sur abstraction
- Une séparation claire des préoccupations
- adaptabilité mobile-first
- Petites primitives réutilisables
Éviter
- monolithique AppShell trop tôt
- logique de mise en page codée en dur
- couplage de la navigation avec le contenu
- Abstractions sur-conçues
Quand introduire un AppShellLien vers la section
Créez votre propre AppShell lorsque :
- La répétition devient réelle
- Plusieurs équipes contribuent
- La complexité de la navigation augmente
- La cohérence devient critique
Pas avant.
RésuméLien vers la section
- La disposition est une composition, pas un composant
- Séparer les responsabilités
- Utiliser des primitives, pas des abstractions magiques
- Structure d'échelle seulement quand nécessaire
Prochaine étape
Combinez cette disposition avec des états et des formes asynchrones pour atteindre l'UX au niveau de la production.