Mises en page
Présentation
Les mises en page constituent une base solide pour créer efficacement des applications. Elles garantissent la cohérence et la réactivité entre les différents types d’applications, ce qui permet une composition transparente de l’interface utilisateur. Les concepteurs et les développeurs peuvent choisir parmi nos mises en page et autres composants de mise en page de contenu disponibles et les adapter pour répondre aux besoins spécifiques d’une application.
Tout comme les dessins d’architecture qui illustrent la forme, la taille et la disposition d’une salle, les mises en page définissent la structure et l’organisation d’une interface, garantissant ainsi clarté et convivialité.
Structure
- En-tête : l'en-tête permet de parcourir de façon homogène les différentes expériences applicatives. Il définit la partie supérieure d'une page donnée. Les en-têtes sont des composants de conteneur. En d'autres termes, ils contiennent d'autres composants pour répondre à un cas d'utilisation spécifique.
- Sous-en-tête : positionné sous l’en-tête, le sous-en-tête fournit un contexte ou des actions supplémentaires liés au contenu principal de la page.
- Panneau latéral : il organise la structure du contenu et fournit un contexte pour orienter les utilisateurs. Il occupe la partie gauche de l'écran et s'étend verticalement, depuis l'en-tête jusqu'au bas de la page.
- Panneau latéral des outils : utilisé pour des actions supplémentaires, des comparaisons ou des informations contrastées. Il fonctionne comme une superposition d’espace de travail ou comme un panneau push pour basculer entre les paramètres et les détails.
- Pied de page : section persistante en bas de la page, contenant généralement des liens légaux, une navigation secondaire ou des actions de support.
Solutions Jutro Design System
Jutro Design System fournit plusieurs composants pour gérer les mises en page et le contenu, facilitant ainsi les tâches de conception et d'implémentation grâce à une combinaison de solutions génériques et spécifiques.
Composants de mise en page
Les composants de mise en page permettent aux concepteurs et aux développeurs de commencer rapidement à créer leurs applications, ce qui garantit une composition d’interface utilisateur cohérente et réactive pour différents types d’applications. Les équipes peuvent choisir parmi cinq composants de mise en page individuels disponibles et les adapter pour répondre à des exigences d’application spécifiques, ou elles peuvent utiliser le composant AppFloorPlan qui fournit un ensemble prédéfini d’options.
AppFloorPlan.L’utilisation des composants de mise en page nécessite la conception et l’implémentation du contenu des différentes sections de page, telles que l’en-tête, les menus et le pied de page. Ces composants exigent également que l’application gère le routage indépendamment. Toutefois, ces aspects sont fournis par le composant AppFloorPlan.
Évaluez les besoins de votre projet avant de prendre une décision.
Quelle est la différence entre des composants de mise en page individuels et AppFloorPlan ?
| Fonctionnalité | Composants individuels de mise en page | AppFloorPlan |
|---|---|---|
| Flexibilité | Flexible, permettant une personnalisation | Structures et options rigides prédéfinies |
| Création de thèmes | Entièrement à base de jetons, ce qui garantit la cohérence et facilite la création de thèmes | Absence de jetons |
| Séparation des responsabilités | Se focalise uniquement sur les aspects UX | UX et routage |
| Contenu | Pas de contenu prédéfini | Contenu prédéfini avec options de personnalisation : menus, éléments d’en-tête et mise en page |
Composants individuels de mise en page
Les mises en page sont flexibles et reposent sur l'utilisation de jetons, ce qui permet une personnalisation et une adaptation plus facile sur différents écrans. Chaque composant de mise en page est totalement indépendant du contenu affiché en son sein. Les composants de mise en page comprennent les éléments suivants :
Composant AppFloorPlan
Le composant AppFloorPlan présente une structure plus rigide avec des règles et du contenu prédéfinis, tels qu’un en-tête et un menu de navigation, et intègre également le routage.
Applications auxiliaires de mise en page de contenu
Les composants d’aide à la mise en page de contenu facilitent la création de différentes structures pour la distribution de contenu. Alors que les différents composants de mise en page contrôlent des sections spécifiques de la page, telles que l’en-tête ou le pied de page, ces composants d’aide fournissent des solutions génériques pour organiser le contenu dans la page, comme la gestion des colonnes, des lignes et de leur contenu. Les applications auxiliaires de mise en page de contenu comprennent :
FlexetFlexItem: implémentation de conteneurs Flex avec des options prédéfinies.GridetGridItem: conteneur de grille et implémentation des éléments enfants.GridLayout: simplification du composantGrid.ColumnLayout: composant de structure de colonnes.
Les applications auxiliaires de mise en page de contenu sont principalement des composants orientés développeur.
Exemples de mises en page
Jutro inclut plusieurs exemples de mises en page. Ces exemples servent de kits de démarrage et de références, en démontrant comment utiliser efficacement les mises en page. Considérez-les comme des variantes de page, telles qu’une page de destination ou une vue Détails. L’objectif de ces exemples est de vous fournir une représentation visuelle de ce à quoi une mise en page pourrait ressembler, ce qui vous aide ainsi à conceptualiser et à affiner votre conception avant de commencer le travail proprement dit. Au lieu de partir de zéro, vous pouvez vous inspirer de ces exemples et les adapter à vos besoins, ce qui rend l’ensemble du processus plus efficace et plus transparent.
