Présentation de Calcite Design System (version bêta)
Depuis plusieurs années, les concepteurs et les développeurs d'Esri
collaborent sur un Design Sytem (système de conception) qui est utilisé sur les produits et sites
Web d'Esri pour permettre une expérience utilisateur unifiée. Il s’appelle le
Calcite Design System. Une version bêta de Calcite a été publiée pour la
communauté des développeurs qui est entièrement intégrée au site des
développeurs. En utilisant Calcite, les développeurs peuvent créer de belles expériences, conviviales, réactives et cohérentes entre les
applications avec un minimum d'effort. Il comprend les meilleures pratiques de
conception, des icônes, des jeux de couleurs et une bibliothèque de composants
Web accessible avec des éléments d'interface utilisateur tels que des boutons,
des panneaux, des accordéons, des alertes et bien d'autres. Il gère également
l'espacement et la mise en page avec un positionnement relatif afin que votre
application puisse obtenir un design net et réactif pour toutes les tailles
d'écran.
Intégration avec l'écosystème ArcGIS
Le Design System est né d'une collaboration entre les équipes de
conception et de développement d'Esri pour créer une norme visuelle
unifiée et cohérente. À l'aide d'un ensemble partagé de ressources et de
directives, les équipes peuvent créer des expériences Esri cohérentes et
adaptées à la marque à utiliser par les produits ArcGIS et les projets
Esri Professional Services.
Au fur et à mesure que le Design System évoluait et s'améliorait,
il a été constaté qu'il pouvait offrir un avantage significatif à la
communauté des développeurs au sens large. En plus de créer plus
rapidement de belles applications, les développeurs auraient la
possibilité de créer une expérience produit cohérente en utilisant les
modèles et les meilleures pratiques établies qui sont natifs d'ArcGIS.
Leurs applications pourraient s'intégrer à l'écosystème ArcGIS en offrant
l'aspect et la convivialité familiers d'ArcGIS, tout en présentant leur
propre marque et leur propre style. Par conséquent, les ressources de conception et de développement du Design System sont disponibles via le
site ArcGIS Developers.
Le nouveau Map Viewer utilise Calcite pour la mise en page et les
composants de l'interface utilisateur pour construire l'expérience
utilisateur. Cela montre des exemples d'utilisation de Calcite.
Il s'agit d'une application personnalisée créée avec Calcite et l'API
ArcGIS pour JavaScript. Vous pouvez reconnaître certains des mêmes
composants utilisés dans la nouvelle visionneuse de carte.
Blocs de construction de l'interface utilisateur: composants Web
Les développeurs peuvent créer leurs applications Web à l'aide d'une
collection de plus de 50 composants d'interface utilisateur qui sont
les éléments de base de toute application Web. Ils ont tous les
caractéristiques suivantes:
Souple. Ils sont flexibles car ils peuvent être configurés
de différentes manières (par exemple, des boutons à bords carrés ou
arrondis).
Sensible. Les composants de l'interface utilisateur ont des
options de dimensionnement et d'autres caractéristiques adaptatives
pour s'adapter aux tailles d'affichage.
Localisable. Ils prennent en charge la localisation de
gauche à droite et de droite à gauche, et les propriétés de texte
peuvent être définies pour n'importe quel paramètre régional.
Framework-agnostic. Parce qu'ils sont construits sur des
normes de composants Web, ils sont indépendants du framework afin
que les développeurs puissent les utiliser dans le cadre JavaScript
de leur choix. Pour les utiliser, ils ne nécessitent rien de plus
que du JS / HTML / CSS vanilla.
Accessible. Chacun des composants est soumis à des tests
d'accessibilité réguliers et formalisés pour s'assurer qu'ils
peuvent être facilement utilisés par n'importe quel public.
Thématique. Les développeurs peuvent appliquer un thème clair
ou sombre, ou définir leur propre thème personnalisé pour
correspondre à leur marque.
Esri dépend fortement du Design System pour créer
l'interface utilisateur / UX des produits ArcGIS. Ainsi, à mesure
que les produits évoluent, que de nouveaux produits sont introduits
et que la communauté des développeurs commence à répondre aux
exigences, la bibliothèque de composants va s'étendre et évoluer.
Personnalisez pour correspondre à votre propre marque
Le thème vous permet d'intégrer votre propre style ou l'image de
marque de votre entreprise dans votre application.
Par défaut, les composants de l'interface utilisateur
utiliseront la
palette de couleurs ArcGIS, la police et la forme du composant ArcGIS. Si vous souhaitez
adapter l'apparence à votre marque ou à vos préférences de
style, vous pouvez facilement personnaliser les composants de
différentes manières:
Thème clair / sombre. À l'aide d'une seule propriété,
vous pouvez configurer tous les composants pour utiliser un
thème sombre ou clair, tous deux conçus pour l'accessibilité.
Les thèmes sombres et clairs styliseront tous les composants et
leurs états (survolés, sélectionnés, etc.) pour bien s'afficher
dans le thème choisi.
Le réglage theme = "dark" appliquera le thème sombre aux
composants. Cette application montre également comment vous
pouvez jouer avec la couleur du fond de carte pour contribuer au
style général de votre application.
Couleurs. À l'aide des variables de couleur des
composants, vous pouvez configurer le jeu de couleurs dans votre
application. Par exemple, la définition du CSS suivant donnera à
tous les composants une couleur verte avec une couleur d'état de
survol légèrement plus sombre:
--calcite-ui-brand: #00DBAA; --calcite-ui-brand-hover:
#C71585;
Forme du composant. Vous pouvez configurer la forme de
certains composants de l'interface utilisateur; par exemple,
choisissez d'utiliser un style de bouton arrondi.
Typographie. Si vous souhaitez utiliser une police
spécifique, vous pouvez l'appliquer à l'ensemble de
l'application ou individuellement à travers les composants.
Il s'agit de la même application que le chercheur de
vaccins, mais a été personnalisé pour être un chercheur de
boulangerie à la place. Il utilise des couleurs de marque,
une forme de bouton et des polices personnalisées.
De la conception à l'application grâce aux kits d'interface utilisateur
Quel est votre processus de conception de votre application?
Peut-être que vous travaillez avec une équipe de conception
pour créer d'abord l'expérience, ou peut-être que vous
concevez et développez l'application vous-même. Dans les
deux cas, vous pouvez choisir d'utiliser des outils de
conception populaires et le kit d'interface utilisateur de
notre Design System pour glisser-déposer facilement
des composants dans la disposition de l'interface
utilisateur de votre application.
Remarque: avec cette
première version, seul Sketch est pris en charge, mais Esri travaille à ajouter la prise en charge de Figma et Adobe
XD plus tard cette année.
Dans le kit d'interface utilisateur, vous trouverez des
versions symbolisées de tous les composants Web, composants
calcite, couleurs, icônes et polices qui font partie du
Design System. Au fur et à mesure que vous
construisez vos conceptions dans Sketch, les développeurs
pourront les implémenter dans le code.
Découvrez comment utiliser le kit d'interface utilisateur
pour concevoir
votre application dans Sketch.
Icônes
L'équipe d'icônes et d'illustrations d'Esri maintient une
collection d'icônes pour les produits et les efforts de
marketing. Ces icônes peuvent être utilisées dans l'interface
utilisateur de votre application ou utilisées comme symbologie
dans votre carte.
Calcite comprend deux bibliothèques principales : calcite-ui-icons
et calcite-point-symbols. Toutes les icônes sont
disponibles sous forme d’images SVG et sont associées à des
balises afin que les utilisateurs puissent facilement trouver
les icônes fonctionnelles ou cartographiques qu’ils
recherchent. Vous pouvez parcourir les deux bibliothèques
d'icônes à l'aide de la page des
icônes.
calcite-point-symbols
Une collection de plus de 700 icônes de symboles ponctuels monochromes à
utiliser sur les cartes. Construit à 13px, 17px et 21px. Construire ces
symboles sur une grille de pixels impairs signifie qu'ils peuvent être
centrés horizontalement et verticalement.
Couleurs
Les
couleurs d'Esri utilisent rarement des couleurs fortes et audacieuses et
laissent l'accent principal sur la couleur bleue principale de la marque
et les états de l'interface utilisateur. De plus, toutes les couleurs
sont conçues dans un souci d'accessibilité lors de la création de la
bibliothèque de composants. De plus, les thèmes clairs et sombres
passent le rapport de contraste d'accessibilité WCAG AA.
Commencer
Tout ce dont vous avez besoin pour commencer est disponible sur le
site Web des développeurs. Vous y trouverez des ressources telles que les consignes d'utilisation,
les bonnes pratiques (à faire et à ne pas faire), les consignes de rédaction
et de copie, la documentation d'accessibilité et une référence sur l'API des
composants. Plus remarquable, vous trouverez des boutons pour la
configuration du composant pour visualiser la flexibilité de ses propriétés,
le thème clair / sombre et la disposition de droite à gauche pour la
localisation. Lorsque vous ajustez les boutons et les propriétés des
composants, vous pouvez copier le code de ce que vous avez modifié et le
coller directement dans votre application.
Les composants sont des composants Web partagés pour le cadre de conception d'Esri construit avec Stencil JS. La bibliothèque de composants contient des composants fondamentaux tels que des alertes, des boutons, des entrées, des modaux et bien plus encore. Pour voir les composants en action, consultez la documentation complète des composants.
Composants via CDN
L'approche la plus courante pour accéder aux composants Web consiste à utiliser la version hébergée. Référencez le JS et le CSS de notre CDN pour commencer à utiliser les composants de votre application. Les composants peuvent être chargés via deux balises <script> dans l'en-tête de votre document HTML:
<script type="module" src="https://jsdev.arcgis.com/calcite-components/1.0.0-beta.52/calcite.esm.js"></script>
<script nomodule="" src="https://jsdev.arcgis.com/calcite-components/1.0.0-beta.52/calcite.js"></script>
Les navigateurs qui prennent en charge les modules chargeront le premier, tandis que les navigateurs plus anciens chargeront la deuxième version fournie.
Une fois ces balises de script ajoutées, les composants peuvent être utilisés comme n'importe quel autre élément HTML. Seuls les composants réellement utilisés seront chargés.
Styles
Vous devrez également charger explicitement le fichier calcite.css:
<link rel="stylesheet" type="text/css" href="https://jsdev.arcgis.com/calcite-components/1.0.0-beta.52/calcite.css"/>
Et vous pouvez visualiser des samples ici.
Un regard vers le futur
Restez à l'écoute pour la version de production. La calcite est
actuellement en version bêta. Tant qu'il est en version bêta, n'hésitez pas
à l'essayer et à partager vos commentaires avec Esri à
calcite_feedback@esri.com!
Un Design System évolutif. Comme pour les autres systèmes de
conception de pointe, le Design System d'Esri évolue constamment
avec les progrès de la technologie ArcGIS, les outils disponibles pour le
développement Web et la technologie sous-jacente. Étant donné qu'Esri dépend
fortement du Design System pour créer l'expérience utilisateur des
produits, la bibliothèque de composants continuera de croître et de
bénéficier d'améliorations en cours.
Au-delà du Web. Bien que les composants d'interface utilisateur
actuels soient limités à la plateforme Web, l'offre sera étendue pour prendre en charge davantage de plateformes. En fait, les
applications créées avec des technologies autres que le Web peuvent toujours
bénéficier de nombreuses ressources du Design System telles que les
directives de conception, la bibliothèque d'icônes et les couleurs.
Maintenant à vous de tirer partie du Calcite Design System pour construire vos applications ! Envie d'apprendre à utiliser un composant du design system ? Vous pouvez retrouver ce tutoriel où nous apprenons à implémenter un bouton.
Vous pouvez vous abonner à ce blog pour lire d'autres articles sur le développement Web d'applications cartographiques et découvrir comment réaliser des applications Web cartographiques et dynamiques. N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Aucun commentaire:
Enregistrer un commentaire