Share
Acest articol este al doilea dintr-o serie de trei părți care prezintă noile abordări ale iconografiei pe care Iconic le va oferi.
Pictogramele inteligente au devenit foarte interesante, dar stilul poate fi cea mai utilă funcție de zi cu zi. Seturile de pictograme acoperă o gamă largă de subiecte diferite, dar sunt redate într-un singur stil vizual. Asta este de multe ori adecvat, dacă nu optim. Cu toate acestea, există multe situații în care anumite pictograme pot și ar trebui să aibă un stil specific (indiferent de culoare, de lățimea cursei sau de alte atribute).
Styling-ul nu a fost o posibilitate cu imagini statice (dacă nu ieșiți fișiere pentru fiecare estetică specifică). Fonturile de tip Icon ne-au apropiat, permitând stilul simplu, dar nu a fost granular - adică dacă ați colorat pictograma roșie, întreg pictograma ar fi roșu. Cu SVG, libertatea există pentru a modela elementele individuale într-o icoană, care deschide posibilități complet noi.
Combinația dintre SVG și CSS este magică. Imaginile pot lua un aspect complet diferit, au tratamente speciale și tranziții interactive interesante. Marcarea SVG oferă acces și control asupra tuturor elementelor conținute în acesta. Aceasta înseamnă că o pictogramă cu becuri luminoase poate fi "aprinsă" cu CSS, pictograma de contrast poate fi stilistică pentru a reflecta a specific contrastul și o pictogramă de semnalizare pot comunica merge. A fi capabil să stil la nivelul elementar respiră noua viață în icoane - ele pot fi cu adevărat unic.
Următorul pas logic al icoanelor de styling cu CSS este de a crea teme la nivel de setare pentru o estetică consecventă. O parte a focusului nostru pentru Iconic este să expunem și să abordăm provocările legate de tematica iconițelor. În mod normal, modelarea unui set de icoane (dincolo de simpla schimbare a culorii) a fost o sarcină laborioasă care depindea de existența fișierelor vectoriale sursă. Nu le ai? Ei bine, ai noroc.
Imaginile SVG pot rezolva această problemă. Eu spun "poate", deoarece structurarea în mod constant a unei întregi colecții de pictograme SVG este dificilă. Pictogramele trebuie să fie proiectate și construite ținându-le cont de tematică pentru ca stilurile să fie consecvente în cadrul setului. Cu toate acestea, atunci când funcționează, este destul de minunat să vedem.
Am creat o demonstrație pentru a afișa temele în icon-uri în acțiune. Vă arată cât de mult se poate face atunci când regulile CSS sunt aplicate unui întreg set de pictograme.
Joacă-te cu demo-ul nostru cu tema iconițelor.
Stocarea pictogramelor poate merge mult mai departe decât schimbările de culoare arbitrare. Această abordare ne oferă posibilitatea de a furniza un alt nivel valoros de informații.
Gândiți-vă la toate pictogramele pe care le vedeți într-o interfață care prezintă informații contextuale. Gândește-te doar la pensula sau umple icoane în diferite aplicații care comunică ce culoare ești pe cale să desenezi sau să umple. Imaginile SVG care sunt concepute pentru a fi decorate pot face acest lucru.
Starea de comunicare în interiorul unei pictograme este de multe ori la fel de simplă ca folosirea culorii. Acest lucru se poate realiza deja cu fonturile de pictograme, dar ce se întâmplă dacă doriți să treceți dincolo de un simplu switch de culoare? Acesta este un alt caz perfect pentru SVG & CSS. De exemplu, să aruncăm o privire la pictograma semnalului WIFI.
Notă: Exemplul de mai jos este încă un prototip de tip proof-of-concept. Niciunul din următorul cod nu este definitiv, cu atât mai puțin beta. Încă ne aflăm în faza de cercetare și dezvoltare a acestei abordări și știm că există multe aspecte care trebuie încă abordate. Vom lucra la o direcție mai concretă pentru această metodă după finalizarea campaniei Kickstarter.
Mecanica icoanelor de styling este destul de simplă. Dacă ați folosit CSS în trecut (pe care le presupunem că aveți), este foarte puțin de învățat. Faceți parte din ceea ce face această metodă atât de mare - este uimitor de puternică utilizând abilitățile și instrumentele pe care le cunoașteți deja. Stilul SVG are un set complet unic de reguli CSS pe care va trebui să îl învățați, dar conceptele sunt simple și necesită un efort minim pentru a ridica.
Lucrarea reală vine de la proiectarea și construirea unei icoane de fapt, să fie stil capabil. La fel ca Smart Icons, această metodă depinde de SVG pentru a fi direct injectat în DOM și că este structurat semantic pentru stil. Acest lucru merge mult mai departe doar adăugând clase la fiecare element din pictograma dvs. SVG (dar asta nu durează). Gravarea unei pictograme pentru stil este încă o formă de artă. Suntem siguri că există o știință în acest sens și sperăm să scriem mai multe despre acest proces în viitor. Obiectivul nostru cu Iconic este de a ajuta acest proces să devină clar și repetabil, astfel încât ceilalți designeri de icoane să poată face ca icoanele lor să aibă stil.
Să luăm exemplul de a modela pictograma semnalului WIFI pentru a afișa diferitele sale stări. Veți vedea rapid cât de accesibil este.
Vizualizați codul în acțiune
HTML
JS
$ ( 'Svg-inject') svgInject (.);
CSS
/ * Semnal puternic * / semnalul-semnal.iconic-semnal puternic -iconic-bază-semnal (umplere: # 569e26; . semnalul-semnal. semnal-semnal-puternic. unde-semnal-vectoric * cursa: # 569e26; / * Semnal mediu * / semnal-semnal-semnal-semnal-mediu-semnal-bază-bază umplere: # efc411; semnalul-semnal.iconic-semnal-mediu. wave-signal-wave * cursa: # efc411; semnalul-semnal.iconic-semnal-mediu. wave-signal-wave-exterior opacitate: .3; accident vascular cerebral lățime: 0.5; / * Semnal slab * / semnal -iconic.icic-semnal-slab-semnal-bază-bază umplere: # b52808; semnalul-semnal.iconic-semnal-slab. unde-semnal-vectoric * cursa: # b52808; semnalul-semnalul-semnalul-semnal-slab-semnalul-semnal-wave-exterior, semnalul-semnalul-semnalul-semnal slab-semnalul-semnal-val-mijloc opacitate: .3; accident vascular cerebral lățime: 0.5; / * Nici un semnal * / semnalul-semnalul-semiconductor-none-semnal-bază-bază umplere: # 848484; . Semnalul-semnal-semnal-semiconductor-none. unde-semnal-vector * cursa: # 848484; opacitate: 0.3; accident vascular cerebral lățime: 0.5;
SVG: signal.svg
Nu prea rău, nu-i așa? Odată ce o pictogramă SVG este configurată corespunzător pentru a fi decorată, restul este în jos!
După cum puteți vedea, puteți face mult cu SVG și CSS, dar există încă unele limitări. Una dintre problemele principale pe care le-am întâlnit este alinierea accidentului. Toate cursele din SVG 1.1 sunt aliniate în centru, ceea ce înseamnă că cursa va fi împărțită uniform pe fiecare parte a traseului. Nu credem că acest lucru este optim pentru proiectarea icoanelor din diferite motive, inclusiv eventualele tăieturi la greutăți crescute ale cursei și un proces de desenare mai complex pentru a acoperi cursele orientate în centru.
Din fericire, acest lucru este stabilit în SVG 2.0-strokes pot fi acum centru, interior și exterior aliniate. din pacate, se pare că SVG 2.0 este încă o cale de oprire. Sperăm că Iconic va ajuta la creșterea interesului pentru SVG și va încuraja mai mult urgentate proces.
Icon stil a fost puțin trecut cu vederea în Iconic, dar credem că este o tehnică extrem de puternică. Credem cu adevărat că va avea un impact enorm asupra modului în care oamenii vor folosi și vor vedea icoanele în viitor. Marele lucru pe care îl are această tehnică este că tehnologia este deja susținută pe scară largă - tot ce aveți nevoie sunt icoane care pot profita de ea.
Scopul lui Iconic este de a ajuta la furnizarea de noi abordări ale iconografiei. Mai avem multe de împărțit cu dvs. și așteptăm cu nerăbdare să ne împărtășim următoarea noastră tranșă.
Vă rugăm să luați în considerare susținerea Iconic pe Kickstarter
Accentsconagua
