Share
Dieser Artikel ist der erste Teil einer dreiteiligen Serie, die die neuen Ansätze der Ikonografie zeigt, die Iconic liefern wird. Wenn Ihnen das, was Sie in diesem Artikel sehen, gefällt, sollten Sie Iconic auf Kickstarter unterstützen.
Gesponserter InhaltDieser Inhalt wurde von Iconic in Auftrag gegeben und wurde vom Tuts + Team geschrieben und / oder bearbeitet. Unser Ziel mit gesponserten Inhalten ist es, relevante und objektive Tutorials, Fallstudien und inspirierende Interviews zu veröffentlichen, die unseren Lesern einen echten erzieherischen Wert bieten und die Erstellung nützlicherer Inhalte ermöglichen.
Ein intelligentes Symbol ist so konzipiert, dass sich Elemente in ihm an Eingaben, Interaktionen oder damit verbundene Daten anpassen. Kurz gesagt, es ist dynamisch. Intelligente Icons sind SVG-basiert und werden mit einer Kombination aus Javascript und CSS gesteuert.
Bis jetzt waren Web-Icons statisch, hauptsächlich aufgrund technischer Einschränkungen. Verschiedene Zustände oder Variationen eines Symbols würden einfach dadurch erzeugt, dass einzelne Dateien jeder Permutation bereitgestellt werden. Für ein Akkusymbol gibt es beispielsweise vier verschiedene Versionen: Aufladen, Vollladen, Halbladen und Nichtladen. Nicht gerade ein optimaler Ansatz.
Mit der Übernahme von SVG 1.1 durch Browser-Mainstreams sind jetzt völlig neue Möglichkeiten möglich. Aufgrund der semantischen Struktur von SVG kann ein intelligentes Symbol alle Zustände und Variationen anzeigen. Dies macht das Austauschen von Bildern überflüssig und ermöglicht, dass Übergänge zwischen Zuständen fließend auftreten.
Intelligente Symbole bieten Designern außerdem die Möglichkeit, relevante Kontextinformationen innerhalb eines Symbols anzuzeigen. Ein gut entworfenes Symbol ist bereits ein relativ informativ dichtes Objekt. Durch das Hinzufügen von Kontextinformationen zu einem Symbol ist seine Informationsdichte sogar noch größer, ohne dass die kognitive Belastung erheblich erhöht wird. Theoretisch können diese Arten von Symbolen die Kommunikation stark beanspruchen und so die Anzahl der anderen Elemente auf dem Bildschirm reduzieren.
Es gibt viele verschiedene Richtungen, in denen intelligente Symbole einfacher implementiert werden können als andere. Wir befinden uns noch im Entdeckungsprozess, aber bisher haben wir drei Hauptanwendungsfälle entwickelt:
Es gibt reichlich von Symbolen, die eine andere Ebene von Informationen bereitstellen könnten, die jedoch aufgrund ihrer statischen Anzeigemethode einfach nicht bis zu diesem Punkt vorhanden sind. Beispiele sind Symbole wie Uhr, Thermometer, Blende, WIFI-Signal und Batterieladung.
Eine der besten Anwendungsmöglichkeiten für intelligente Symbole ist die einfache Datenvisualisierung. Symbole, die in diese Kategorie passen, sind das Audiospektrum, der Pegelmesser und die Ladeanzeige. Intelligente Symbole könnten die Erstellung von Dashboard-Anzeigen erheblich vereinfachen. Sie können einfach vier oder fünf Symbole zu Ihrem HTML-Code hinzufügen und den Messwert mit einem Datenattribut anpassen.
Viele Symbole kommen oft in einer Reihe von Variationen vor, um alle ihre unterschiedlichen Zustände zu vermitteln. Beispiele sind die Batterie, WLAN, Medienwiedergabe (z. B. Wiedergabe, Pause usw.) und Stromversorgung (z. B. Ein, Aus, Standby). Eine weitere mögliche Anwendung für intelligente Symbole besteht darin, alle Zustände eines Symbols in einer einzigen SVG zusammenzufassen. Anstatt Bildressourcen auszutauschen, wenn sich der Status eines Subjekts ändert, ändern Sie einfach ein Datenattribut in den entsprechenden Status.
Hinweis: Bevor wir ins Detail gehen, ist es wichtig zu wissen, dass die Beispiele, die wir zeigen, lediglich Prototypen eines Proof-of-Concept sind. Diese Prototypen sollen die Funktionalität vermitteln, die wir erstellen werden. Keiner der folgenden Codes ist endgültig, geschweige denn Beta. Wir befinden uns noch in der Forschungs- und Entwicklungsphase dieser Methode, und wir wissen, dass es viele Probleme gibt, die noch angegangen werden müssen. Wir werden nach Abschluss der Kickstarter-Kampagne an einer konkreteren Richtung für diese Methode arbeiten.
Intelligente Icons bestehen aus SVG, Javascript und CSS. Unser aktueller Gedanke ist, jedes Symbol wie eine kleine, eigenständige App zu behandeln, mit einer einfachen API, um Elemente innerhalb des Symbols anzupassen. Um das zu erreichen zuverlässig, Bei diesem Ansatz muss das SVG-Markup im DOM enthalten sein.
Denken Sie daran, dass der SVG-Wert erhöht werden muss entsprechend strukturiert für diesen Ansatz zu arbeiten. Dies ist, was wir fühlen, macht Iconic einzigartig. Die Icons werden mit neuen Konzepten entworfen und gestaltet. Diese Konzepte basieren auf einer klaren Semantik und einer durchdachten Markup-Struktur, um korrekt zu funktionieren. Dies unterscheidet sich nicht von entsprechend strukturiertem HTML-Code. Wenn Ihr Markup "Gobbleygoop" ist, wird es schwierig sein, anspruchsvolle Aufgaben zu erfüllen.
Es können viele überzeugende Dinge passieren, wenn sich im DOM ein gut strukturiertes SVG-Markup befindet. Das Problem ist das Hinzufügen von SVG-Markup in HTML ist ein Schmerz. Das SVG-Markup kann Ihren Code erheblich aufblähen und es wird schwieriger, zwischen strukturiertem HTML- und Vektorbild zu unterscheiden. Um diese Reibung zu beseitigen, empfehlen wir, zur Laufzeit ein SVG-Markup in das DOM einzubringen.
Wir haben einen einfachen Prototyp-SVG-Injektor entwickelt, der alle angegebenen ersetzt img Tags mit dem Markup aus der referenzierten SVG-Datei. Also das…
Daraus wird folgendes:
Hinweis: Denken Sie daran, dieser Injektor-Ansatz sicher fühlt sich wie eine Notlösung, und wir hoffen, dass unsere Arbeit dazu beitragen wird, einen Browser-nativen Standard voranzutreiben. Bis dahin meinen wir derzeit, dass dies der beste Ansatz ist.
Sobald die SVG-Datei in das DOM eingefügt wurde, wird das darin eingeschlossene JavaScript ausgeführt und kann verwendet werden. Einige Symbole werden für sich alleine ausgeführt (wie eine Uhr), während andere Eingaben zum Anpassen erforderlich sind.
Die Uhr ist ein perfektes Beispiel für ein Symbol, das für sich alleine läuft. Einmal injiziert, wird es eben gehen. Sehen Sie es in Aktion
HTML
JS
Accentsconagua
$ ('. svg-inject'). svgInject (); SVG: clock.svg
Wenn ein Symbol auf Eingaben oder Daten reagiert, ist etwas mehr Arbeit erforderlich, die Grundlagen bleiben jedoch unverändert. Sehen Sie es in Aktion
HTML
JS
$ ('. svg-inject'). svgInject (); SVG: audio-spectrum-analyzer.svg
Ein intelligentes Symbol wird mit Bewegung noch besser. Dafür gibt es viele Möglichkeiten. Wir verwenden derzeit SVG-Animationselemente, da dies eine beträchtliche Funktionalität ermöglicht, die direkt in den browserbasierten Code integriert ist. Der Support ist immer noch etwas unklar (wir hatten Probleme mit Safari 6), aber es wird von Tag zu Tag besser. Sehen Sie es in Aktion
HTML
JS
$ ('. svg-inject'). svgInject (); SVG: themometer.svg
Die Ikonografie spielt eine wichtige Rolle beim Interface-Design. Je relevanter Informationen unsere Icons sind, desto leistungsfähiger werden sie. Wir sind fest davon überzeugt, dass intelligente Ikonografie ein überzeugendes Werkzeug für Designer sein kann, um ihren Symbolen eine weitere Bedeutungsebene hinzuzufügen. Nicht jedes Icon ist für diese Herangehensweise geeignet - wie alle guten Dinge, die moderiert werden müssen. Bei richtiger Anwendung kann es jedoch ein enormes neues Werkzeug sein.
Das Ziel von Iconic ist es, neue Ansätze für die Ikonografie zu schaffen. Iconic bietet weit mehr als nur intelligente Icons. Wir freuen uns darauf, Ihnen nächste Woche ein weiteres interessantes Feature mitzuteilen.
Bitte erwägen Sie, Iconic auf Kickstarter zu unterstützen.
