Share
Acest articol este primul dintr-o serie de trei părți care prezintă noile abordări ale iconografiei pe care Iconic le va oferi. Dacă vă place ceea ce vedeți în acest articol, vă rugăm să luați în considerare sprijinirea Iconic pe Kickstarter.
Conținut sponsorizatAcest conținut a fost comandat de Iconic și a fost scris și / sau editat de echipa Tuts +. Scopul nostru cu conținut sponsorizat este de a publica tutoriale relevante și obiective, studii de caz și interviuri inspirate care oferă cititorilor o valoare educațională autentică și ne permit să finanțăm crearea de conținut mai util.
O pictogramă inteligentă este proiectată astfel încât elementele din cadrul acesteia să se adapteze la intrare, interacțiune sau date asociate. Pe scurt, este dinamic. Pictogramele inteligente sunt bazate pe SVG și controlate cu o combinație de Javascript și CSS.
Icoanele web până în acest moment au fost statice - în primul rând datorită limitărilor tehnologice. Stări diferite sau variații ale unei icoane ar fi create doar prin furnizarea de fișiere individuale ale fiecărei permutații. De exemplu, o pictogramă a bateriei ar veni în patru versiuni diferite: încărcare, plată, jumătate de încărcare și fără taxă. Nu este o abordare optimă.
Un set complet complet de posibilități este acum viabil cu adoptarea browser-ului principal al SVG 1.1. Datorită structurii semantice a SVG, o pictogramă inteligentă poate afișa întreaga gamă de stări și variații. Acest lucru elimină nevoia de schimbare a imaginii și permite ca tranzițiile între stări să apară în mod fluid.
Pictogramele inteligente oferă de asemenea designerilor opțiunea de a afișa informații contextuale relevante în cadrul unei pictograme. O pictogramă bine concepută este deja un obiect relativ informațional dens. Prin adăugarea de informații contextuale unei pictograme, densitatea informațională este chiar mai mare fără o încărcare cognitivă considerabilă. În mod teoretic, aceste tipuri de icoane vor putea să facă ridicarea greoaie a comunicării, reducând astfel cantitatea de alte elemente de pe ecran.
Există multe direcții diferite, iar icoanele inteligente pot merge - unele fiind mai ușor de implementat decât altele. Încă suntem în procesul de descoperire, dar până acum am ajuns la trei cazuri de utilizare primară:
Sunt mulțime din icoane care ar putea oferi un alt strat de informații, dar pur și simplu nu au ajuns până la acest punct, datorită metodei de afișare statică. Exemplele includ icoane cum ar fi ceasul, termometrul, diafragma, semnalul WIFI și încărcarea bateriei.
Unul dintre cele mai bune cazuri de utilizare pentru pictogramele inteligente este o vizualizare simplă a datelor. Pictogramele care se încadrează în această categorie sunt spectrul audio, gabaritul / metru și indicatorul de încărcare. Pictogramele inteligente pot simplifica dramatic procesul de construire a panourilor de bord - gândiți-vă să adăugați doar patru sau cinci pictograme HTML și să ajustați valoarea gabaritului cu un atribut de date.
Multe icoane vin adesea într-o serie de variante pentru a transmite toate stările lor diferite. Exemplele includ bateria, WIFI, redarea media (de exemplu, redare, pauză etc.) și alimentarea (de exemplu, pornire, oprire, așteptare). O altă aplicație potențială pentru pictogramele inteligente este să rostogolească toate stările unei pictograme într-un singur SVG. Deci, în loc să schimbați activele imaginii atunci când starea unui subiect se schimbă, pur și simplu schimbați un atribut de date în starea corespunzătoare.
Notă: Înainte de a intra în detalii, este important să rețineți că exemplele pe care le prezentăm sunt prototipuri de prototipuri. Aceste prototipuri sunt destinate să comunice funcționalitatea pe care o vom construi. Niciunul din următorul cod nu este definitiv, cu atât mai puțin beta. Încă suntem în faza de cercetare și dezvoltare a acestei metode și știm că există multe probleme care trebuie încă abordate. Vom lucra la o direcție mai concretă pentru această metodă după finalizarea campaniei Kickstarter.
Icoanele inteligente constau din SVG, Javascript și CSS. Gândirea noastră actuală este aceea de a trata fiecare pictogramă ca o mică aplicație autonomă cu un API simplu pentru a ajusta elementele din pictogramă. Pentru a realiza acest lucru fiabil, această abordare necesită includerea marcajului SVG în DOM.
Rețineți că marcajul SVG trebuie să fie structurate corespunzător pentru ca această abordare să funcționeze. Aceasta este ceea ce simtim că face Iconic unic. Icoanele sunt concepute și concepute cu noțiuni noi în minte. Aceste concepte se bazează pe o semantică clară și o structură de markup bine gândită care să funcționeze corect. Acest lucru nu este diferit de HTML corespunzător structurat - dacă marcajul dvs. este gobbleygoop, va fi dificil să faceți ceva sofisticat.
O mulțime de lucruri convingătoare se pot întâmpla odată ce marcajul SVG bine structurat este în DOM. Problema este că adăugarea marcajului SVG în HTML este o durere. Marcajul SVG poate adăuga o cantitate considerabilă de bloat la codul dvs. și devine mai greu să se facă distincția între imaginile structurale HTML și vectoriale. Pentru a elimina această fricțiune, vă sugerăm injectarea marcajului SVG în DOM în timpul rulării.
Am făcut un prototip simplu injector SVG care înlocuiește toate specificațiile img cu marcajul din fișierul SVG menționat. Deci asta…
Se intampla acest lucru:
Notă: Rețineți că această abordare a injectorului este cu siguranță se simte ca o măsură stopgap și sperăm că munca noastră va ajuta la împingerea unui standard nativ al browserului. Până atunci, gândirea noastră actuală este că aceasta este cea mai bună abordare.
Odată ce SVG-ul este injectat în DOM, JavaScript încapsulat în acesta este executat și este gata de utilizare. Unele icoane vor rula pe cont propriu (ca un ceas), în timp ce altele vor avea nevoie de intrare pentru ajustare.
Ceasul este un exemplu perfect al unei icoane care rulează pe cont propriu. Odată injectat, va fi doar merge. Vedeți în acțiune
HTML
JS
$ ( 'Svg-inject') svgInject (.);
SVG: clock.svg
Atunci când o pictogramă răspunde la datele de intrare sau date, aceasta necesită puțin mai multă muncă, dar elementele de bază rămân neschimbate. Vedeți în acțiune
HTML
JS
$ ( 'Svg-inject') svgInject (.);
SVG: audio-spectru-analizor.svg
O pictogramă inteligentă devine și mai bună cu mișcarea. Există multe modalități de a face acest lucru. În prezent, folosim elemente de animație SVG, deoarece acest lucru permite o funcționalitate considerabilă construită chiar în browser - adică mai puțin cod în SVG. Sprijinul este încă un pic neînsemnat (am întâlnit probleme în Safari 6), dar se îmbunătățește din cauza zilei. Vedeți în acțiune
HTML
JS
$ ( 'Svg-inject') svgInject (.);
SVG: themometer.svg
Iconografia are un rol important în proiectarea interfeței. Cele mai relevante informații pe care le pot furniza icoanele noastre, cu atât sunt mai puternice. Credem cu adevărat că iconografia inteligentă poate fi un instrument convingător pentru designeri de a adăuga un alt nivel de semnificație icoanelor lor. Nu orice pictogramă este potrivită pentru această abordare - ca toate lucrurile bune, care necesită moderare. Cu toate acestea, atunci când este utilizat în mod corespunzător, poate fi un instrument extraordinar.
Scopul lui Iconic este de a ajuta la furnizarea de noi abordări ale iconografiei. Există mult mai mult pentru iconițe decât pentru icoane inteligente și așteptăm cu nerăbdare să vă împărtășim o altă caracteristică interesantă cu dvs. săptămâna viitoare.
Vă rugăm să luați în considerare susținerea Iconic pe Kickstarter.
Accentsconagua
