Advertisement
  1. Web Design
  2. General

Web-Icons intelligenter machen 

Scroll to top
Read Time: 10 min

German (Deutsch) translation by Wilhelm Wolf (you can also view the original English article)

Dieser Artikel ist der erste in einer dreiteiligen Serie zeigt die neuen Ansätze zur Ikonographie Legendären liefern wird. Wenn Sie mögen, was Sie sehen in diesem Artikel, bitte prüfen Legendären backing auf Kickstarter. 


Was Genau ist ein Smart-Icon? 

 Ein smart-icon ist so gestaltet, dass die Elemente, um Sie auf input, Interaktion oder die zugehörigen Daten. Kurz gesagt, es ist dynamisch. Smart icons sind SVG-basiert und kontrolliert mit einer Kombination von Javascript und CSS.


Warum Dies Relevant ist 

Web-Ikonen bis zu diesem Punkt waren statisch—in Erster Linie aufgrund von Einschränkungen in der Technologie. In anderen Staaten oder Variationen ein Symbol geschaffen würden einfach durch die einzelnen Dateien der einzelnen permutation.  Zum Beispiel, ein Akku-Symbol kommen würde, in vier verschiedenen Versionen: Aufladung, volle Ladung, halbe Ladung und ohne Ladung. Nicht gerade die optimale Vorgehensweise. 

Eine ganze Reihe neuer Möglichkeiten sind jetzt lebensfähig mit mainstream-browser die Annahme von SVG 1.1. Wegen SVG-semantischen Struktur, ein smart-icon anzeigen zu können, seine volle Reihe von Zuständen und Variationen.   Dadurch entfällt die Notwendigkeit für image-swapping und ermöglicht übergänge zwischen Zuständen auftreten, flüssig.

Smart icons auch Entwicklern die option zur Anzeige der relevanten kontextuellen Informationen in einem Symbol. Eine gut gestaltete Symbol ist schon ein relativ informationell dichtes Objekt.   Durch hinzufügen von Kontextinformationen in ein Symbol, Informations-Dichte ist noch größer, ohne erheblich erhöhte kognitive Belastung. In der Theorie sind diese Arten von icons werden in der Lage sein, die schwere Hebe-Kommunikation, wodurch die Menge an anderen Elementen auf dem Bildschirm. 


Use-cases für Smart Icons 

Es gibt viele verschiedene Richtungen smart icons gehen können—einige sind leichter umzusetzen als andere. Wir sind immer noch in der discovery-Prozess, aber so weit wir kommen mit drei primären use-cases: 

Bereitstellung von Kontext-Informationen 

 Es gibt viele Symbole, die könnte eine weitere Schicht von Informationen, aber einfach nicht bis zu diesem Punkt, die aufgrund Ihrer statischen Methode display. Beispiele sind die Symbole wie die Uhr, thermometer, Blende, WIFI-signal-und Akku-Ladung.

clockclockclock

 Handeln als einfache Daten-vis-Elemente (wenn d3.js ist zu viel)

 Eine der besten Anwendungsfälle für smart icons ist eine einfache Daten-Visualisierung. Symbole, die passen in diese Kategorie sind das audio-Spektrum, Messgerät/meter und Ladeanzeige.  Smart Symbole könnten erheblich vereinfachen den Prozess der Erstellung von dashboard—denke einfach das hinzufügen von vier oder fünf Symbole, um Ihre HTML-und Anpassung der gauge-Wert mit einem data-Attribut.

audio-spectrum-analyzeraudio-spectrum-analyzeraudio-spectrum-analyzer

Anzeige verschiedener Staaten 

 Viele Symbole kommen Häufig in einer Reihe von Variationen zu vermitteln, in all Ihren verschiedenen Zuständen. Beispiele sind der Akku, die WIFI, die Wiedergabe von Medien (z.B. play, pause, etc.) und Kraft (z.B. in, an, aus, standby).  Eine weitere mögliche Anwendung für smart icons zu Rollen alle ein Symbol-Staaten in einem einzigen SVG. Anstatt also den Austausch von Bild-assets wenn Sie ein Thema Zustand ändert, Sie ändern Sie einfach ein data-Attribut auf den entsprechenden Status.  

batterybatterybattery

Muttern und Schrauben 

Hinweis: Bevor ich in die details, es ist wichtig zu beachten, dass die Beispiele, die wir zeigen sind einfach nur proof-of-concept Prototypen.  Diese Prototypen sollen zu kommunizieren, um die Funktionalität werden wir bauen. Keine der folgenden code-Finale, geschweige denn beta.  Wir sind immer noch in der R&D phase dieser Methode, und wir wissen, es gibt viele Probleme, die noch angegangen werden müssen. Wir arbeiten auf eine konkrete Richtung für diese Methode auf, nachdem die Kickstarter-Kampagne abgeschlossen ist. 

 Smart icons bestehen von SVG, Javascript und CSS-Dateien. Unsere aktuelle denken ist zur Behandlung jedes Symbol wie eine kleine autarke app mit einem einfachen API anpassen Elemente innerhalb des symbols.  Um dies zu erreichen, zuverlässig, erfordert dieser Ansatz die SVG-markup enthalten sein, die in der DOM.

 Beachten Sie, dass die SVG-mark-up braucht, um angemessen strukturiert für diesen Ansatz zu arbeiten. Dies ist, was wir empfinden, macht Ikonischen einzigartig. Die icons sind entworfen und in Handarbeit mit neuen Konzepten in den Sinn.  Diese Konzepte setzen auf klare Semantik und ein durchdachtes markup-Struktur, um korrekt zu arbeiten. Dies ist nicht anders als entsprechend strukturierte HTML—, wenn Ihr markup ist gobbleygoop, es wird schwierig sein, etwas zu tun anspruchsvoll.

 Viele fesselnde Dinge können passieren, wenn gut strukturierte SVG-markup wird in der DOM. Das problem ist, dass das hinzufügen von SVG-markup in HTML ist ein Schmerz.  Die SVG-markup können eine beträchtliche Menge von aufblasen, um Ihren code und es wird schwieriger zu unterscheiden zwischen strukturellen HTML-und Vektor-Bilder. Um zu entfernen, diese Reibung, empfehlen wir die Injektion SVG-markup in den DOM zur Laufzeit.

 Wir haben einen einfachen Prototyp SVG-Injektor ersetzt alle angegebenen img-tags das markup aus der referenzierten SVG-Datei. Also diese...

Verwandelt sich in diese: 

 Hinweis: bitte beachten Sie, dieser Injektor Ansatz sicherlich fühlt sich an wie eine Notlösung und wir hoffen, dass unsere Arbeit helfen wird, schieben Sie einen browser-basierten standard. Bis dann, unsere aktuelle denken ist, dass dies der beste Ansatz.

 Nachdem die SVG injiziert, die in den DOM, JavaScript gekapselt ausgeführt und es ist bereit, verwendet werden. Einige Symbole werden auf Ihre eigenen laufen (wie eine Uhr), während anderen müssen die Eingaben anpassen.

 Self-running Symbol

Die Uhr ist ein perfektes Beispiel für ein Symbol, das läuft auf seine eigenen. Einmal injiziert, wird es nur gehen. Sehen Sie es in Aktion  

HTML 

JS 

SVG: Uhr.svg 

Input-basierte Symbol 

Wenn ein icon reagiert auf Eingaben oder Daten, Bedarf es ein wenig mehr Arbeit, aber die Grundlagen sind unverändert. Sehen Sie es in Aktion 

HTML 

JS 

SVG: audio-Spektrum-analyzer.svg 

Hinzufügen von Bewegung (das Sahnehäubchen) 

Ein smart-icon wird noch besser mit Bewegung. Es gibt viele Möglichkeiten, dies zu tun. Wir sind derzeit mit SVG-animationselemente, wie dies ermöglicht eine erhebliche Funktionalität direkt in den browser—also weniger code im SVG.  Ist zwar noch ein wenig wackelig (wir lief in Probleme in Safari 6), aber es wird immer besser von Tag zu Tag. Sehen Sie es in Aktion 

HTML 

JS 

SVG: themometer.svg 


Fazit

Ikonographie eine wichtige Rolle zu spielen in interface-design. Die mehr relevanten Informationen, die unsere Symbole bieten kann, desto mächtiger werden Sie.   Wir glauben wirklich, dass smart-Ikonographie werden können, ein überzeugendes Werkzeug für Designer, fügen Sie eine weitere Schicht von Bedeutung, Ihre Symbole.  Nicht jedes Symbol ist geeignet für diesen Ansatz—wie alle guten Dinge, die es erfordert moderation. Allerdings, wenn richtig eingesetzt, kann es eine enorme neue tool.


Zurück Ikonischen auf Kickstarter 

 Das Ziel der Ikone ist zu helfen, neue Ansätze zur Ikonographie. Es gibt eine Menge mehr Kult als nur smart-icons, und wir freuen uns auf die Freigabe ein weiteres Interessantes feature, mit dem Sie nächste Woche.

iconic-logoiconic-logoiconic-logo

 Bitte beachten Legendären backing auf Kickstarter.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.