Découverte des systèmes de conception
Objectifs de formation
Une fois cette unité terminée, vous pourrez :
- Identifier les caractéristiques et les fonctionnalités d’un bon système de conception
- Décrire l’utilisation, l’amélioration et la gestion des systèmes de conception par les concepteurs et les développeurs
- Expliquer comment le système SLDS (Salesforce Lightning Design System) aide les développeurs à créer des solutions sur la plate-forme Salesforce
- Décrire les différences entre SLDS et la plupart des systèmes de conception et expliquer pourquoi
Salesforce Lightning Design System (SLDS) est désormais disponible en deux versions.
Salesforce Lightning Design System 2 (SLDS 2) a été publié dans la version Spring ‘25. Le SLDS original est maintenant appelé SLDS 1.
Ce badge Trailhead se concentre sur les systèmes de conception en général, sur SLDS dans son ensemble et sur SLDS 1. Pour en savoir plus sur SLDS 2, participez à l’essai Premiers pas avec SLDS 2.
SLDS 2 s’appuie sur un nouveau modèle CSS qui sépare la structure de la conception visuelle à l’aide de points d’ancrage de style. Les points d’ancrage de style sont des propriétés CSS personnalisées qui offrent des possibilités plus poussées en matière de personnalisation et de création de thèmes, ce qui vous permet de créer des expériences uniques plus rapidement.
Vous pouvez opter pour SLDS 2 en choisissant le thème Salesforce Cosmos dans votre organisation. Consultez notre article Disponibilité du thème Salesforce Cosmos et de SLDS 2.
Définition d’un système de conception
Avant d’examiner plus en détail les systèmes de conception et leurs possibilités remarquables, commençons par en donner une définition.
Définition d’un système de conception |
Explication |
|---|---|
|
Un système de conception est un ensemble d’éléments réutilisables de l’interface utilisateur, appelés composants, et de modèles de conception reproductibles. Les composants peuvent inclure des boutons, des menus, des sons, des animations, des modèles visuels, etc. Certains systèmes de conception incluent des composants entièrement fonctionnels qui sont créés sur une plate-forme d’interface utilisateur. D’autres systèmes de conception, tels que SLDS, fournissent des composants indépendants de la plate-forme. Les composants fournissent le HTML et le CSS, mais pas le code fonctionnel. Un modèle est une solution documentée et réutilisable aux problèmes ou aux tâches courants des utilisateurs. Un modèle est constitué d’une combinaison spécifique de composants, de présentations et d’interactions qui créent une expérience utilisateur complète. Contrairement à un composant simple, un modèle fournit un contexte et des meilleures pratiques relatifs à l’objectif d’un utilisateur ou à un processus (tel qu’un formulaire à plusieurs étapes ou un écran de connexion). Pour résumer, les modèles d’interface utilisateur guident la manière dont les composants sont organisés et interagissent pour proposer une expérience utilisateur optimale. |
Un système de conception est un ensemble complet de normes qui guide la création de produits. Il englobe une bibliothèque de modèles, de composants, de directives et de meilleures pratiques, et garantit la cohérence des conceptions. Les systèmes de conception fournissent un cadre global et un vocabulaire commun aux équipes, en vue de rationaliser le processus de développement produit. Les modèles de conception, quant à eux, offrent des solutions uniques et constituent des éléments individuels dans l’architecture globale d’un système de conception. Considérez les composants comme des blocs de construction et les modèles, les règles, ainsi que les directives comme des instructions détaillées permettant l’utilisation de ces blocs de construction. |
Un système de conception est guidé par des normes, des principes et des directives clairs et accessibles. |
Les composants d’un système de conception sont hautement standardisés et reconnaissables. Les modèles fournissent des plans structurés et ciblés pour combiner et utiliser les composants. |
|
Les concepteurs associent des composants et des modèles pour concevoir une interface utilisateur. Les développeurs implémentent les conceptions d’interface utilisateur créés par les concepteurs en combinant les composants du système de conception de différentes manières afin de créer des applications en HTML et JavaScript. Les instructions de conception servent d’instructions pour l’assemblage des composants en modèles dans le cadre de cas d’utilisation spécifiques. S’il existe un code de composant pour les conceptions de composants, les développeurs s’appuient sur celui-ci. Dans le cas contraire, les développeurs élaborent l’interface utilisateur en utilisant leur propre code HTML et JavaScript. Ils utilisent les modèles et les directives du système de conception pour leur permettre de créer le code. |
Indépendamment, les composants n’ont pas une grande utilité, mais en les assemblant vous pouvez construire presque tout ce que voulez. |
Caractéristiques d’un bon système de conception :
-
Évolutivité : à mesure que le système évolue, la quantité de temps et d’argent consacrée à la création des éléments fondamentaux (briques emboîtables) diminue. Les développeurs réutilisent ces éléments de base dans un grand nombre de produits et de fonctionnalités.
-
Efficacité : les systèmes de conception font gagner du temps et de l’énergie, car ils permettent aux concepteurs et aux développeurs de se concentrer sur l’ergonomie et l’utilité.
-
Cohésion visuelle : Les instructions détaillées d’un système de conception (modèles, règles, directives) sont ancrées dans l’objectif. Ses éléments esthétiques découlent des besoins des utilisateurs. Les composants standardisés renforcent à la fois le style visuel et l’image de marque, et permettent de créer des produits et des fonctionnalités visuellement cohérents pour offrir une expérience utilisateur homogène.
-
Partage : des éléments réutilisables, documentés et accessibles facilitent la collaboration et permettent aux développeurs de récupérer les parties d’un projet et de s’appuyer sur le travail de leurs collègues.
Disponibilité immédiate
À l’instar des briques à emboîter, un système de conception vous permet de commencer immédiatement à développer des solutions. Grâce aux composants prédéfinis, vous pouvez vous concentrer sur la résolution de problèmes complexes et sur l’amélioration de l’expérience utilisateur.
L’autre avantage considérable d’un système de conception réside dans sa grande évolutivité. La bibliothèque de composants, de modèles, de règles et de directives permet de maintenir la cohérence entre les concepteurs, les développeurs, les équipes et les produits. Un système de conception évolue en fonction des besoins et permet aux concepteurs et aux développeurs de mettre à jour des interfaces et des outils rapidement et facilement sur une plate-forme complexe.
Présentation des acteurs
L’efficacité de tout système de conception dépend des personnes qui y contribuent.
-
Les consommateurs sont les concepteurs, les développeurs et les utilisateurs des éléments du système de conception aidant à créer des applications. Les consommateurs peuvent être des employés de l’entreprise à l’origine du système de conception ou des tiers, si celle-ci dispose d’un écosystème de clients qui développent des applications sur sa plate-forme, comme c’est le cas pour Salesforce.
-
Les contributeurs créent des éléments et des modèles qui composent le système de conception. À chaque nouvelle version, tout le monde peut proposer de nouveaux modèles, composants ou consignes, ou suggérer des modifications des éléments existants.
-
Les administrateurs s’occupent du système de conception. Cette équipe d’ingénieurs, de concepteurs de produits et de concepteurs graphiques gère le système de conception, supervise son code et explique à la communauté comment l’utiliser. Les administrateurs examinent les mises à jour proposées et les incorporent pour faire évoluer le système de conception.
Si vous lisez ceci, vous êtes probablement un consommateur ou un contributeur de SLDS.
Lightning Design System chez Salesforce
Chez Salesforce, nous travaillons uniquement avec des systèmes de conception. La capacité de Salesforce Platform à s’adapter aux besoins complexes d’un large éventail d’utilisateurs est l’une de ses principales forces.
Nous connaissons également une croissance très rapide. Notre gamme de produits s’élargit et notre nombre d’employés s’accroît. Au fur et à mesure de notre croissance, nous répondons à davantage de besoins des utilisateurs. Il est donc essentiel que nous concevions une expérience produit cohérente de manière efficace et à grande échelle.
SLDS aide les équipes Salesforce à atteindre cet objectif. L’utilisation de modèles spécifiques à chaque situation permet aux concepteurs d’itérer plus rapidement les tâches de développement et de créer des solutions cohérentes plus efficacement. Les développeurs de composants disposent toujours de la dernière infrastructure, avec un balisage propre et accessible, ainsi qu’un CSS parfait afin qu’ils travaillent plus vite et commettent moins d’erreurs. Les clients et les partenaires créent des personnalisations sur Salesforce Platform à l’aide d’un système propre, cohérent et régulièrement mis à jour, qui fournit des explications claires et des exemples de conception. Ils ne sont donc pas tentés de désosser des logiciels.
La plupart des systèmes de conception mettent à disposition un code entièrement fonctionnel. Toutefois, comme SLDS prend en charge de nombreuses bases de code différentes, comme Lightning Web Components (LWC) et React, il doit rester indépendant. Salesforce fournit un code fonctionnel qui implémente de nombreuses conceptions de composants SLDS via les composants de base Lightning. (Pour en savoir plus sur les différences entre SLDS et les autres systèmes de conception, consultez les ressources énumérées à la fin de cette unité.)
Dans l’unité suivante, nous revenons dans le passé pour aborder la naissance de SLDS.