Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. General
Webdesign

Rendre les icônes Web plus intelligentes

by
Length:MediumLanguages:

French (Français) translation by Ahmad Fauzan (you can also view the original English article)

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, pensez à vous appuyer sur Iconic sur Kickstarter.


Qu'est-ce qu'une icône intelligente?

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.


Pourquoi est-ce pertinent

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 dérouler 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.


Cas d'utilisation d'icônes intelligentes

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:

Fournir des informations contextuelles

Il y a beaucoup d'icônes qui pourraient fournir une autre couche d'informations, mais qui ne l'ont tout simplement pas été jusqu'à présent, 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.

clock

Agissant en tant qu'éléments simples vis-à-vis des données (lorsque d3.js est trop important)

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 considérablement simplifier 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.

audio-spectrum-analyzer

Affichage de divers états

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 le pouvoir (par exemple, activé, désactivé, 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 à l'état approprié.

battery

Noix et Boulons

Remarque: avant d'entrer dans les détails, il est important de noter que les exemples que nous montrons sont simplement des prototypes de validation 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 atteindre cet objectif de manière fiable, cette approche nécessite que le balisage SVG soit inclus dans le DOM.

N'oubliez pas que le balisage 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 balise 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 tâche ardue. 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 créé un prototype d'injecteur SVG simple qui remplace toutes les balises img spécifiées par les balises du fichier SVG référencé. Donc ça...

Se transforme en ceci:

Remarque: N'oubliez pas que cette approche par injecteurs a tout à fait une allure de solution et nous espérons que notre travail contribuera à la définition d'une norme native pour le navigateur. Jusque-là, nous pensons actuellement 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 seules (comme une horloge), tandis que d'autres auront besoin d'une entrée pour s'ajuster.

Icône auto-exécutable

L’horloge est un exemple parfait d’une icône qui tourne sur son propre. Une fois injecté, il ira juste. Voyez-le en action

HTML

JS

SVG : clock.svg

Icône basée sur les entrées

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: audio-spectre-analyzer.svg

Ajout de mouvement (la cerise sur le gâteau)

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 vicieux (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 : themometer.svg


Conclusion

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, elle nécessite une modération. Cependant, lorsqu'il est utilisé de manière appropriée, il peut constituer un nouvel outil formidable.


Retour Iconic sur Kickstarter

Iconic a pour objectif de fournir de nouvelles approches en iconographie. Iconic représente bien plus que de simples icônes intelligentes et nous sommes impatients de partager avec vous une autre fonctionnalité intéressante la semaine prochaine.

iconic-logo

Veuillez envisager de soutenir Iconic sur Kickstarter.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.