Share
Questo articolo è il primo di una serie in tre parti che mostra i nuovi approcci all'iconografia che Iconic distribuirà. Se ti piace quello che vedi in questo articolo, ti preghiamo di prendere in considerazione l'idea di sostenere Iconic su Kickstarter.
Contenuto sponsorizzatoQuesto contenuto è stato commissionato da Iconic ed è stato scritto e / o modificato dal team Tuts +. Il nostro obiettivo con i contenuti sponsorizzati è quello di pubblicare tutorial pertinenti e obiettivi, case study e interviste ispiratrici che offrono un vero valore educativo ai nostri lettori e ci consentono di finanziare la creazione di contenuti più utili.
Un'icona intelligente è progettata in modo che gli elementi al suo interno si adattino all'input, all'interazione o ai dati associati. In breve, è dinamico. Le icone intelligenti sono basate su SVG e controllate con una combinazione di Javascript e CSS.
Le icone Web fino a questo punto sono state statiche, principalmente a causa delle limitazioni della tecnologia. Diversi stati o variazioni di un'icona verrebbero creati semplicemente fornendo singoli file di ogni permutazione. Ad esempio, un'icona della batteria sarebbe disponibile in quattro versioni diverse: ricarica, carica completa, metà carica e nessuna ricarica. Non esattamente un approccio ottimale.
Un intero nuovo set di possibilità sono ora fattibili con l'adozione del browser mainstream di SVG 1.1. A causa della struttura semantica di SVG, un'icona intelligente può visualizzare l'intera gamma di stati e variazioni. Ciò elimina la necessità di scambiare le immagini e consente alle transizioni tra gli stati di verificarsi in modo fluido.
Le icone intelligenti offrono inoltre ai progettisti la possibilità di visualizzare informazioni contestuali pertinenti all'interno di un'icona. Un'icona ben progettata è già un oggetto relativamente informativo denso. Aggiungendo informazioni contestuali a un'icona, la sua densità informativa è ancora maggiore senza un considerevole aumento del carico cognitivo. In teoria, questi tipi di icone saranno in grado di assumere il pesante sollevamento della comunicazione, riducendo così la quantità di altri elementi sullo schermo.
Esistono molte direzioni diverse che possono essere utilizzate da icone intelligenti, alcune più facili da implementare rispetto ad altre. Siamo ancora nel processo di scoperta, ma finora abbiamo individuato tre casi d'uso principali:
Ci sono abbondanza di icone che potrebbero fornire un altro livello di informazioni, ma semplicemente non hanno fino a questo punto, a causa del loro metodo di visualizzazione statico. Gli esempi includono icone come l'orologio, il termometro, l'apertura, il segnale WIFI e la carica della batteria.
Uno dei migliori casi d'uso per le icone intelligenti è la semplice visualizzazione dei dati. Le icone che rientrano in questa categoria sono lo spettro audio, indicatore / indicatore e indicatore di caricamento. Le icone intelligenti possono semplificare notevolmente il processo di creazione di display del pannello di controllo: pensa semplicemente di aggiungere quattro o cinque icone al codice HTML e di regolare il valore dell'indicatore con un attributo dati.
Molte icone spesso vengono in una serie di variazioni per trasmettere tutti i loro stati diversi. Gli esempi includono batteria, WIFI, riproduzione multimediale (ad es. Riproduzione, pausa, ecc.) E alimentazione (ad es. Accensione, spegnimento, attesa). Un'altra potenziale applicazione per le icone intelligenti consiste nel trasferire tutti gli stati di un'icona in un unico SVG. Quindi, invece di scambiare risorse immagine quando lo stato di un soggetto cambia, basta semplicemente modificare un attributo dati nello stato appropriato.
Nota: Prima di entrare nei dettagli, è importante notare che gli esempi che stiamo mostrando sono semplicemente prototipi di proof-of-concept. Questi prototipi hanno lo scopo di comunicare la funzionalità che costruiremo. Nessuno dei seguenti codici è definitivo, per non dire beta. Siamo ancora nella fase di ricerca e sviluppo di questo metodo e sappiamo che ci sono molti problemi che devono ancora essere affrontati. Lavoreremo su una direzione più concreta per questo metodo dopo che la campagna Kickstarter è stata completata.
Le icone intelligenti sono SVG, Javascript e CSS. Il nostro attuale pensiero è di trattare ogni icona come una piccola app autosufficiente con una semplice API per regolare gli elementi all'interno dell'icona. Per realizzare questo affidabile, questo approccio richiede che la marcatura SVG sia inclusa nel DOM.
Tieni presente che il markup SVG deve essere opportunamente strutturato per questo approccio al lavoro. Questo è ciò che sentiamo rende Iconic unico. Le icone sono state progettate e realizzate con nuovi concetti in mente. Questi concetti si basano su una semantica chiara e su una struttura di markup ben congegnata per funzionare correttamente. Questo non è diverso da un HTML strutturato in modo appropriato: se il tuo markup è gobbleygoop, sarà difficile fare qualcosa di sofisticato.
Un sacco di cose avvincenti possono accadere una volta che il markup SVG ben strutturato è nel DOM. Il problema è che l'aggiunta di markup SVG in HTML è un dolore. Il markup SVG può aggiungere una notevole quantità di bloat al tuo codice e diventa più difficile distinguere tra HTML strutturali e immagini vettoriali. Per rimuovere questo attrito, suggeriamo di inserire il markup SVG nel DOM in fase di runtime.
Abbiamo realizzato un semplice iniettore SVG prototipo che sostituisce tutti gli elementi specificati img tag con il markup dal file SVG di riferimento. Così questo…
Si trasforma in questo:
Nota: Tenete a mente, questo approccio da iniettore certamente si sente come una misura di stopgap e speriamo che il nostro lavoro contribuisca a spingere uno standard nativo del browser. Fino ad allora, il nostro pensiero corrente è che questo è l'approccio migliore.
Una volta che l'SVG è stato iniettato nel DOM, il JavaScript incapsulato al suo interno viene eseguito ed è pronto per essere utilizzato. Alcune icone funzioneranno da sole (come un orologio) mentre altre avranno bisogno di input per adattarsi.
L'orologio è un perfetto esempio di un'icona che funziona da sola. Una volta iniettato, sarà solo partire. Guardalo in azione
HTML
JS
$ ( 'SVG-Inject') svgInject ().;
SVG: clock.svg
Quando un'icona risponde a input o dati, richiede un po 'più di lavoro, ma le basi sono invariate. Guardalo in azione
HTML
JS
$ ( 'SVG-Inject') svgInject ().;
SVG: audio-spectrum-analyzer.svg
Un'icona intelligente diventa ancora migliore con il movimento. Ci sono molti modi per farlo. Al momento stiamo utilizzando elementi di animazione SVG in quanto ciò consente notevoli funzionalità integrate nel browser, ovvero meno codice nell'SVG. Il supporto è ancora un po 'traballante (ci siamo imbattuti in problemi in Safari 6), ma sta migliorando di giorno in giorno. Guardalo in azione
HTML
JS
$ ( 'SVG-Inject') svgInject ().;
SVG: themometer.svg
L'iconografia ha un ruolo significativo nel design dell'interfaccia. Più informazioni importanti possono fornire le nostre icone, più potenti diventano. Crediamo davvero che l'iconografia intelligente possa essere uno strumento convincente per i progettisti per aggiungere un ulteriore livello di significato alle loro icone. Non tutte le icone sono adatte per questo approccio, come tutte le cose buone che richiede moderazione. Tuttavia, se usato in modo appropriato, può essere un nuovo straordinario strumento.
L'obiettivo di Iconic è aiutare a fornire nuovi approcci all'iconografia. C'è molto di più in Iconic che solo icone intelligenti e non vediamo l'ora di condividere un'altra interessante funzionalità con te la prossima settimana.
Per favore, considera l'idea di sostenere Iconic su Kickstarter.
Accentsconagua
