Explorons les différences entre une bibliothèque de composants et un système de conception et comment vous pouvez les exploiter.
Si vous n’avez pas travaillé avec un système de conception – ou une bibliothèque de composants – avant, les termes peuvent être un peu brumeux. Quelle est la différence entre eux? La réponse courte est que Une bibliothèque de composants n’est qu’une partie d’un système de conception plus grand.
Il est possible que les bibliothèques de composants soient autonomes sans intégration dans un système de conception ou pour que les systèmes de conception existent sans bibliothèque de composants. Cependant, la plupart du temps, un système de conception complet comprendra une bibliothèque de composants.
Examinons de plus près ce que signifie chacun de ces termes et ce qu’ils incluent généralement.
Bibliothèque de composants
Une bibliothèque de composants est une collection de composants modulaires réutilisables que les développeurs peuvent utiliser pour accélérer la création d’interfaces utilisateur. Ils incluent tout, des composants simples (comme les boutons, les listes déroulantes et les cases) à des composants vraiment complexes (comme les grilles de données, les feuilles de calcul et les visualisations de données).
Les bibliothèques de composants peuvent être construites en interne, mais la plupart du temps, il est plus efficace pour tirer parti d’un préexistant (comme des progrès Kendo ui). Lorsque les développeurs utilisent une bibliothèque de composants, ils peuvent passer moins de temps à construire des composants à partir de zéro et plus de temps à les combiner dans des applications uniques et utiles.
L’utilisation d’une bibliothèque de composants est particulièrement utile pour créer des interfaces cohérentes et un code cohérent! Lorsqu’une équipe de développeurs divise le travail, parfois deux développeurs peuvent construire le même élément (comme un bouton) de manière légèrement différente lorsque vous travaillez sur différentes fonctionnalités de l’application. Au fil du temps, cela crée une interface pleine de composants qui fonctionnent tous un peu différemment, à la fois pour l’utilisateur et le développeur. Cela rend l’interface utilisateur difficile à apprendre pour les utilisateurs, et le code est difficile pour les développeurs de mettre à l’échelle et de maintenir.
En général, c’est mieux pour tout le monde si le même composant est réutilisé sur toute l’application; En collectant les composants couramment réutilisés en un seul endroit et en documentant comment ils doivent être utilisés, les bibliothèques de composants facilitent l’objectif beaucoup plus facile à atteindre.
Une bibliothèque de composants est principalement utilisée par les développeurs, mais les concepteurs le feront souvent référence également aux premiers stades de l’idéation et de la conception des caractéristiques. Lorsque les concepteurs savent quels composants les développeurs utiliseront pour construire leurs conceptions, ils peuvent s’aligner tôt dans le processus. Cela réduit la quantité d’itération (et de frustration) pendant la phase de transfert. Pensez-y comme savoir quels legos vous disposez dans votre kit. Une fois que vous comprenez ce que vous avez, vous pouvez commencer à réfléchir à la façon d’utiliser les pièces de différentes manières pour construire ce que vous voulez!
Système de conception
Un système de conception est destiné à être beaucoup plus large –Une collection d’éléments visuels interconnectés, organisés et documentés pour référence facile. Vous pouvez le considérer comme une bibliothèque de toutes les ressources et actifs de conception dont vous pourriez avoir besoin, personnalisé spécifiquement pour votre application. Comme vous pouvez le deviner, cela peut (mais pas devoir) Inclure des composants. Certains des éléments les plus courants que vous trouverez dans un système de conception incluent (mais ne sont pas limités) jetons de conceptionSystèmes de grille, icônes, composants, guides de style et guides de langue de marque ou de ton de la voix.
Tout comme les bibliothèques de composants, vous pouvez créer un système de conception en interne ou en tirer un effet qui existe déjà (comme le matériau ou le flux). Quelle option est le bon ajustement dépend souvent de la taille de l’entreprise et de la vision de conception. Pour les petites entreprises sans beaucoup de ressources qui ne se concentrent pas particulièrement sur la création d’un aspect et une sensation uniques, un système de conception préexistant peut économiser beaucoup de temps et d’efforts.
Cependant, pour une entreprise plus grande, en particulier une avec une équipe de conception dédiée qui doit être coordonnée entre de nombreux départements différents ou qui est très investie dans une marque personnalisée – l’investissement initial de la création d’un système de conception interne sera payant à la pelle.
Les systèmes de conception sont également extrêmement utiles car ils s’assurent que tout le monde parle la même langue. Avez-vous déjà été dans une situation où deux personnes pensée Ils n’étaient pas d’accord sur quelque chose, seulement pour découvrir qu’ils décrivaient réellement la même chose tout le temps – juste avec des mots différents ?! Peut-être que l’un l’appelait une «notification de toast» et que l’autre l’appelait une «barbe à collier»? Ou peut-être que votre idée de «Sky Blue» était différente de ce que votre designer envisageait? Lorsque vous utilisez plusieurs bibliothèques, frameworks ou langues différentes, il peut être incroyablement facile d’obtenir des fils croisés; Les systèmes de conception peuvent aider à les croiser.
Contrairement aux bibliothèques de composants, les systèmes de conception sont largement référencés par beaucoup de différentes personnes de différentes équipes et départements: des concepteurs (bien sûr), mais aussi des développeurs, des chefs de produit, des rédacteurs, des gestionnaires de médias sociaux et plus encore. Honnêtement, très bien que tout le monde bénéficie d’avoir accès au système de conception.
De quel a besoin de votre équipe?
Si vous n’avez rien pour le moment et essayez de comprendre par où commencer, Ma recommandation est de commencer par une bibliothèque de composants préfabriqués. En commençant par une collection de ressources prédéfinies, vous pouvez commencer à voir ces avantages de cohérence et de conception sans avoir à investir beaucoup de temps dans la configuration pour mettre les choses opérationnelles.
Si cela fonctionne bien, vous pouvez commencer à penser à l’expansion. Peut-être que vous souhaitez commencer à personnaliser l’apparence de ces composants, ou de documenter des façons spécifiques de savoir ces composants dans le cadre de votre application. Vous pouvez peut-être consulter vos variables de couleur CSS (ou les jetons de conception Figma) et les transformer en directives de marque plus formelles. Peut-être que vous utilisez principalement une bibliothèque d’icônes préexistante, mais vous avez dû en créer quelques-uns personnalisés – vous créez donc un référentiel où ils peuvent tous vivre au même endroit.
Avant de le savoir, votre bibliothèque de composants se transforme en système de conception. En fait, nous proposons même un Kit de système de conception Pour vous aider à étendre intentionnellement les composants de l’interface utilisateur de Kendo dans un système de conception personnalisé complet!
Bien sûr, il est également possible de s’asseoir avec l’intention et de créer un système de conception complètement à partir de zéro. Si vous avez une équipe de designers talentueux dans votre entreprise, c’est probablement même la meilleure façon de le faire – l’idéal.
Cependant, de manière réaliste, beaucoup de gens ne travaillent pas avec l’idéal, et je pense qu’il est bon de se rappeler qu’il est également acceptable que les systèmes de conception se développent de manière organique. Commencez par ce que vous utilisez maintenant, obtenez tout collecté en un seul endroit et documentez comment vous l’utilisez. Lorsque vous ajoutez de nouveaux composants, des couleurs, des motifs d’interface utilisateur, des polices – ou toute autre chose – l’ajoutez à votre collection. C’est aussi un système de conception!
Vous n’écririez pas encore et encore la même fonction dans votre code; Vous l’exporterez une fois, afin que vous puissiez l’importer et l’appeler partout où vous en aviez besoin. Les bibliothèques de composants et les systèmes de conception sont exactement les mêmes: les bibliothèques de composants vous aident à normaliser et à réutiliser les composants de l’interface utilisateur, et les systèmes de conception vous aident à standardiser et à réutiliser les actifs visuels. Ce sont deux excellents outils qui sont encore meilleurs lorsqu’ils sont combinés et utilisés ensemble!
Source link