Share
Questo articolo è il secondo di una serie in tre parti che mostra i nuovi approcci all'iconografia che Iconic distribuirà.
Le icone intelligenti hanno suscitato molto interesse, ma lo stile può essere la funzione più utile su base giornaliera. I set di icone coprono una vasta gamma di soggetti diversi, ma sono resi in un unico stile visivo. Spesso è appropriato, se non ottimale. Tuttavia, ci sono molte situazioni in cui le icone specifiche possono e dovrebbero avere uno stile specifico (che si tratti di colore, larghezza del tratto o altri attributi).
Lo stile non era una possibilità con le immagini statiche (a meno che non si stampino file per ogni estetica specifica). I caratteri dell'icona ci avvicinano consentendo uno stile semplice, ma non è granulare, cioè se hai colorato l'icona rossa, il totale l'icona sarebbe rossa. Con SVG, la libertà esiste per modellare i singoli elementi all'interno di un'icona, che apre possibilità completamente nuove.
La combinazione di SVG e CSS è magica. Le immagini possono assumere aspetti completamente diversi, hanno trattamenti personalizzati e interessanti transizioni interattive. Il markup SVG fornisce accesso e controllo a tutti gli elementi in esso contenuti. Ciò significa che un'icona a lampadina può essere "accesa" con i CSS, l'icona di contrasto può essere disegnata per riflettere a specifico contrasto e l'icona di un semaforo può comunicare partire. Essere in grado di disegnare a livello elementare dà nuova vita alle icone: possono essere veramente unico.
Il prossimo passo logico nello styling delle icone con i CSS è creare temi a livello di set per un'estetica coerente. Parte del nostro focus per Iconic è quello di esporre e affrontare le sfide legate al tema delle icone. Normalmente, lo styling di una serie di icone (oltre alla semplice modifica del colore) era un compito laborioso che dipendeva dall'avere i file vettoriali di origine. Non li hanno? Beh, sei sfortunato.
Le icone SVG possono risolvere questo problema. Dico "può" perché la strutturazione coerente di un'intera raccolta di icone SVG è difficile. Le icone devono essere progettate e costruite tenendo presente la tematizzazione perché gli stili siano coerenti in tutto il set. Tuttavia, quando funziona, è davvero fantastico da vedere.
Abbiamo creato una demo per mostrare i temi delle icone in azione. Ti mostra solo quanto può essere fatto quando le regole CSS vengono applicate a un intero set di icone.
Gioca con la nostra demo a tema di icone.
Lo stile delle icone può andare ben oltre le semplici variazioni cromatiche. Questo approccio ci dà l'opportunità di fornire un altro prezioso livello di informazioni.
Pensa a tutte le icone che vedi in un'interfaccia che mostra informazioni contestuali. Basti pensare al pennello o alle icone di riempimento in varie applicazioni che comunicano il colore che stai per disegnare o riempire. Le icone SVG progettate per essere stilizzate possono fare proprio questo.
Comunicare lo stato all'interno di un'icona è spesso semplice quanto utilizzare il colore. Questo può essere già ottenuto con i font di icone, ma cosa succede se si desidera andare oltre una semplice commutazione colore? Questo è un altro caso d'uso perfetto per SVG e CSS. Ad esempio, diamo un'occhiata all'icona del segnale WIFI.
Nota: L'esempio sotto è ancora un prototipo di proof-of-concept. Nessuno dei seguenti codici è definitivo, per non dire beta. Siamo ancora nella fase di ricerca e sviluppo di questo approccio 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.
La meccanica delle icone di stile è abbastanza semplice. Se hai usato i CSS in passato (che supponiamo tu abbia), c'è ben poco da imparare. Questo fa parte di ciò che rende questo metodo così eccezionale: è incredibilmente potente utilizzando le abilità e gli strumenti che già conosci. Lo stile SVG ha un set unico di regole CSS che dovrai imparare, ma i concetti sono chiari e richiedono uno sforzo minimo per raccogliere.
Il vero lavoro viene dalla progettazione e dalla costruzione di un'icona in realtà essere stile-grado. Proprio come le icone intelligenti, questo metodo dipende dal fatto che SVG sia iniettato direttamente nel DOM e che sia semanticamente strutturato per lo styling. Questo va ben oltre l'aggiunta di classi a ciascun elemento nell'icona SVG (ma ciò non guasta). Innanzitutto un'icona per lo styling è ancora un po 'una forma d'arte. Siamo abbastanza sicuri che ci sia una scienza in questo e speriamo di scrivere di più sul processo in futuro. Il nostro obiettivo con Iconic è quello di contribuire a rendere questo processo chiaro e ripetibile in modo che altri progettisti di icone possano rendere le icone in grado di creare stili.
Prendiamo l'esempio dello stile dell'icona del segnale Wi-Fi per visualizzare i suoi vari stati. Vedrai rapidamente quanto è accessibile.
Guarda il codice in azione
HTML
JS
$ ( 'SVG-Inject') svgInject ().;
CSS
/ * Segnale forte * / .iconic-signal.iconic-signal-strong .iconic-signal-base fill: # 569e26; .iconic-signal.iconic-signal-strong .iconic-signal-wave * stroke: # 569e26; / * Segnale medio * / .iconic-signal.iconic-signal-medium .iconic-signal-base fill: # efc411; .iconic-signal.iconic-signal-medium .iconic-signal-wave * stroke: # efc411; .iconic-signal.iconic-signal-medium .iconic-signal-wave-outer opacity: .3; Corsa larghezza: .5; / * Segnale debole * / .iconic-signal.iconic-signal-weak .iconic-signal-base fill: # b52808; .iconic-signal.iconic-signal-weak .iconic-signal-wave * stroke: # b52808; .iconic-signal.iconic-signal-weak .iconic-signal-wave-outer, .iconic-signal.iconic-signal-weak .iconic-signal-wave-middle opacità: .3; Corsa larghezza: .5; / * Nessun segnale * / .iconic-signal.iconic-signal-none .iconic-signal-base fill: # 848484; .iconic-signal.iconic-signal-none .iconic-signal-wave * stroke: # 848484; Opacità: 0,3; Corsa larghezza: .5;
SVG: signal.svg
Non male, giusto? Una volta che un'icona SVG è configurata correttamente per essere abbinata, il resto è in discesa!
Come puoi vedere, puoi farlo Un sacco con SVG e CSS, ma ci sono ancora alcune limitazioni. Uno dei principali problemi che abbiamo incontrato è l'allineamento del tratto. Tutti i tratti in SVG 1.1 sono allineati al centro, il che significa che il tratto sarà diviso equamente su ciascun lato del percorso. Non pensiamo che questo sia ottimale per il design di icone per vari motivi, tra cui il potenziale ritaglio a pesi di corsa aumentati e un processo di disegno più complesso per adattarsi a tratti allineati al centro.
Fortunatamente, questo problema è stato risolto con i tratti di SVG 2.0 che ora possono essere centrati, interni ed esterni allineati. Sfortunatamente, sembra che SVG 2.0 sia ancora lontano. La nostra speranza è che Iconic contribuirà a suscitare maggiore interesse in SVG e ad incoraggiare di più accelerato processi.
Lo stile delle icone è stato un po 'trascurato in Iconic, ma pensiamo che sia una tecnica massicciamente potente. Siamo davvero convinti che avrà un enorme impatto sul modo in cui le persone usano e vedono le icone in futuro. Il bello di questa tecnica è che la tecnologia è già ampiamente supportata: tutto ciò di cui hai bisogno sono icone che possono trarne vantaggio.
L'obiettivo di Iconic è aiutare a fornire nuovi approcci all'iconografia. Abbiamo ancora molto da condividere con te e non vediamo l'ora di condividere la nostra prossima puntata.
Per favore, considera l'idea di sostenere Iconic su Kickstarter
Accentsconagua
