Share
Cet article est le premier d'une série en trois parties présentant les nouvelles approches de l'iconographie que Iconic proposera. Si vous aimez ce que vous voyez dans cet article, merci de penser à soutenir Iconic sur Kickstarter..
Contenu sponsoriséCe contenu a été commandé par Iconic et écrit et / ou édité par l'équipe de Tuts +. Notre objectif avec le contenu sponsorisé est de publier des tutoriels pertinents et objectifs, des études de cas et des interviews inspirantes qui offrent une véritable valeur éducative à nos lecteurs et nous permettent de financer la création de contenu plus utile..
Une icône intelligente est conçue pour que les éléments qu’elle contient s’adaptent à la saisie, à l’interaction ou aux données associées. En bref, c'est dynamique. Les icônes intelligentes sont basées sur SVG et contrôlées avec une combinaison de Javascript et CSS.
Jusqu'à présent, les icônes Web étaient statiques, principalement en raison de limitations technologiques. Différents états ou variations d'une icône seraient créés simplement en fournissant des fichiers individuels de chaque permutation. Par exemple, une icône de batterie se présente sous quatre versions différentes: charge, charge complète, charge à moitié et pas de charge. Pas exactement une approche optimale.
Un nouvel ensemble de possibilités est désormais viable avec l’adoption de SVG 1.1 par les navigateurs grand public. En raison de la structure sémantique de SVG, une icône intelligente peut afficher toute sa gamme d'états et de variations. Cela supprime la nécessité de permuter les images et permet aux transitions entre les états de se produire de manière fluide.
Les icônes intelligentes offrent également aux concepteurs la possibilité d'afficher des informations contextuelles pertinentes au sein d'une icône. Une icône bien conçue est déjà un objet relativement dense en informations. En ajoutant des informations contextuelles à une icône, sa densité informationnelle est encore plus grande sans une charge cognitive accrue considérable. En théorie, ces types d'icônes seront en mesure de prendre en charge la communication, réduisant ainsi la quantité d'autres éléments à l'écran..
Les icônes intelligentes peuvent prendre de nombreuses directions différentes, certaines étant plus faciles à mettre en œuvre que d’autres. Nous sommes toujours dans le processus de découverte, mais jusqu'à présent, nous avons mis au point trois cas d'utilisation principaux:
Il y a beaucoup d’icônes pouvant fournir une autre couche d’informations, mais n’ayant tout simplement pas été à la hauteur, en raison de leur méthode d’affichage statique. Les exemples incluent des icônes telles que l'horloge, le thermomètre, l'ouverture, le signal WIFI et la charge de la batterie..
L'un des meilleurs cas d'utilisation d'icônes intelligentes est la simple visualisation de données. Les icônes entrant dans cette catégorie sont le spectre audio, la jauge / mètre et l'indicateur de charge. Les icônes intelligentes pourraient simplifier considérablement le processus de création d’affichages de tableaux de bord: pensez à simplement ajouter quatre ou cinq icônes à votre code HTML et à ajuster la valeur de jauge avec un attribut de données.
Beaucoup d'icônes viennent souvent dans une série de variations pour transmettre tous leurs états différents. Les exemples incluent la batterie, le WIFI, la lecture multimédia (par exemple, la lecture, la pause, etc.) et l’alimentation (par exemple, allumée, éteinte, en veille). Une autre application potentielle pour les icônes intelligentes consiste à convertir tous les états d'une icône en un seul SVG. Ainsi, au lieu de permuter les ressources d'image lorsque l'état d'un sujet change, vous modifiez simplement un attribut de données en l'état approprié..
Remarque: Avant d'entrer dans les détails, il est important de noter que les exemples que nous montrons sont simplement des prototypes de démonstration de concept. Ces prototypes sont destinés à communiquer la fonctionnalité que nous allons construire. Aucun des codes suivants n'est final, à plus forte raison une version bêta. Nous sommes toujours dans la phase de R & D de cette méthode et nous savons que de nombreux problèmes doivent encore être résolus. Nous travaillerons sur une direction plus concrète pour cette méthode une fois la campagne Kickstarter terminée..
Les icônes intelligentes sont constituées de SVG, Javascript et CSS. Notre idée actuelle est de traiter chaque icône comme une petite application autonome avec une API simple pour ajuster les éléments dans l'icône. Pour y parvenir de manière fiable, cette approche nécessite que le balisage SVG soit inclus dans le DOM.
Gardez à l’esprit que le marquage SVG doit être correctement structuré pour que cette approche fonctionne. C’est ce qui, à notre avis, rend Iconic unique. Les icônes sont conçues et conçues avec de nouveaux concepts. Ces concepts reposent sur une sémantique claire et une structure de balisage bien pensée pour fonctionner correctement. Ce n'est pas différent du HTML structuré de manière appropriée. Si votre balisage est gobbleygoop, il sera difficile de faire quelque chose de sophistiqué..
Beaucoup de choses convaincantes peuvent arriver une fois qu'un balisage SVG bien structuré est dans le DOM. Le problème est que l’ajout de balises SVG dans HTML est une douleur. Le balisage SVG peut ajouter une quantité considérable de ballonnement à votre code et il devient plus difficile de faire la distinction entre l’imagerie HTML structurelle et l’imagerie vectorielle. Afin de supprimer ce frottement, nous suggérons d’injecter du balisage SVG dans le DOM lors de l’exécution.
Nous avons fabriqué un prototype d'injecteur SVG simple qui remplace tous les modèles spécifiés. img balises avec le balisage du fichier SVG référencé. Donc ça…
Se transforme en ceci:
Remarque: Gardez à l'esprit, cette approche par injecteur certainement se sent comme une solution provisoire et nous espérons que notre travail aidera à mettre en place une norme native pour les navigateurs. Jusque-là, notre pensée actuelle est que c'est la meilleure approche.
Une fois que le fichier SVG est injecté dans le DOM, le code JavaScript qui y est encapsulé est exécuté et prêt à être utilisé. Certaines icônes fonctionneront toutes seules (comme une horloge), tandis que d'autres auront besoin d'entrées pour s'ajuster..
L'horloge est un exemple parfait d'icône qui fonctionne toute seule. Une fois injecté, il suffira de aller. Le voir en action
HTML
JS
Accentsconagua
$ ('. svg-inject'). svgInject (); SVG: clock.svg
Lorsqu'une icône répond à une entrée ou à des données, cela nécessite un peu plus de travail, mais les bases ne sont pas modifiées. Le voir en action
HTML
JS
$ ('. svg-inject'). svgInject (); SVG: audio-spectre-analyzer.svg
Une icône intelligente devient encore meilleure avec le mouvement. Il y a plusieurs façons de le faire. Nous utilisons actuellement des éléments d'animation SVG car cela permet une fonctionnalité considérable, intégrée dans le navigateur, ce qui signifie moins de code dans le SVG. Le support est toujours un peu insipide (nous avons rencontré des problèmes dans Safari 6), mais il s'améliore de jour en jour. Le voir en action
HTML
JS
$ ('. svg-inject'). svgInject (); SVG: themometer.svg
L'iconographie a un rôle important à jouer dans la conception des interfaces. Plus les informations que nos icônes peuvent fournir sont pertinentes, plus elles deviennent puissantes. Nous croyons vraiment que l'iconographie intelligente peut être un outil convaincant pour les concepteurs afin d'ajouter une nouvelle couche de signification à leurs icônes. Toutes les icônes ne conviennent pas à cette approche - comme toutes les bonnes choses qu’elle nécessite de modération. Cependant, utilisé de manière appropriée, il peut constituer un formidable nouvel outil..
Iconic a pour objectif de fournir de nouvelles approches en iconographie. Iconic ne se limite pas à des icônes intelligentes. Nous espérons partager avec vous une autre fonctionnalité intéressante la semaine prochaine..
Merci de penser à soutenir Iconic sur Kickstarter.
