Share
Denna artikel är den första i en tredelad serie som visar de nya metoderna för ikonografi Iconic kommer att leverera. Om du gillar det du ser i den här artikeln, vänligen överväga att stödja Iconic på Kickstarter.
Sponsrat innehållDetta innehåll var beställt av Iconic och skrevs och / eller redigerades av Tuts + -laget. Vårt mål med sponsrat innehåll är att publicera relevanta och objektiva handledningar, fallstudier och inspirerande intervjuer som erbjuder genuint pedagogiskt värde till våra läsare och gör det möjligt för oss att finansiera skapandet av mer användbart innehåll.
En smart ikon är utformad så att element inom den anpassas till inmatning, interaktion eller tillhörande data. Kort sagt, det är dynamiskt. Smarta ikoner är SVG-baserade och kontrolleras med en kombination av Javascript och CSS.
Webb ikoner fram till denna punkt har varit statiska, främst på grund av tekniska begränsningar. Olika tillstånd eller variationer av en ikon skulle skapas helt enkelt genom att tillhandahålla enskilda filer av varje permutation. En batteriikon skulle till exempel komma i fyra olika versioner: laddning, full laddning, halv laddning och utan kostnad. Inte precis ett optimalt tillvägagångssätt.
En helt ny uppsättning möjligheter är nu genomförbar med den vanliga webbläsarens antagande av SVG 1.1. På grund av SVGs semantiska struktur kan en smart ikon visa hela sitt utbud av tillstånd och variationer. Detta eliminerar behovet av bildbyte och tillåter övergångar mellan tillstånden att ske flukt.
Smarta ikoner ger också konstruktörer möjlighet att visa relevant kontextuell information inom en ikon. En väldesignad ikon är redan ett relativt informativt tätt objekt. Genom att lägga till kontextuell information till en ikon är dess informationsdensitet ännu större utan betydande ökad kognitiv belastning. I teorin kommer dessa typer av ikoner att kunna ta på sig tunga lyft av kommunikation, vilket minskar mängden andra element på skärmen.
Det finns många olika anvisningar smart ikoner kan gå-en del är lättare att genomföra än andra. Vi är fortfarande i upptäckten, men hittills har vi kommit fram till tre primära användningsfall:
Det finns massor av ikoner som skulle kunna ge ett annat lager av information, men helt enkelt inte upp till denna punkt, på grund av deras statiska visningsmetod. Exempel är ikoner som klocka, termometer, bländare, WIFI-signal och batteriladdning.
En av de bästa användningsfallen för smarta ikoner är enkel datavisualisering. Ikoner som passar in i denna kategori är ljudspektrum, mätare / mätare och laddningsindikator. Smarta ikoner kan dramatiskt förenkla processen med att bygga instrumentpanelen. Tänk på att helt enkelt lägga till fyra eller fem ikoner till din HTML och justera mätvärdet med en dataattribut.
Många ikoner kommer ofta i en rad olika variationer för att förmedla alla sina olika stater. Exempel innefattar batteriet, WIFI, mediaavspelning (t ex uppspelning, paus, etc.) och effekt (t ex på, av, vänteläge). En annan potentiell applikation för smarta ikoner är att rulla alla en ikons stater till ett enda SVG. Så istället för att byta ut bildtillgångar när ett ämnes tillstånd ändras, ändrar du helt enkelt en datattribut till lämpligt tillstånd.
Notera: Innan du går in i detaljer är det viktigt att notera att de exempel vi visar är helt enkelt prototyper av principen om koncept. Dessa prototyper är avsedda att kommunicera den funktionalitet vi ska bygga. Ingen av följande kod är slutgiltig, än mindre beta. Vi är fortfarande i FoU-fasen av denna metod och vi vet att det finns många problem som fortfarande behöver lösas. Vi kommer att arbeta mer konkret för denna metod efter att Kickstarter-kampanjen är klar.
Smarta ikoner består av SVG, Javascript och CSS. Vårt nuvarande tänkande är att behandla varje ikon som en liten fristående app med ett enkelt API för att justera element i ikonen. För att uppnå detta tillförlitligt, Detta tillvägagångssätt kräver att SVG-märkningen ingår i DOM.
Tänk på att SVG-markeringen måste vara lämpligt strukturerad för denna arbetssätt. Det här är vad vi tycker gör Iconic unikt. Ikonerna är utformade och tillverkade med nya koncept i åtanke. Dessa begrepp bygger på tydlig semantik och en genomtänkt markupstruktur för att fungera korrekt. Detta skiljer sig inte från lämpligt strukturerad HTML - om din markering är gobbleygoop, blir det svårt att göra något sofistikerat.
En hel del övertygande saker kan hända när väl strukturerad SVG-markup finns i DOM. Problemet är att lägga till SVG-markup i HTML är en smärta. SVG-markeringen kan lägga till en avsevärd mängd uppblåsthet till din kod och det blir svårare att skilja mellan strukturella HTML- och vektorbilder. För att avlägsna denna friktion föreslår vi att injicera SVG-markup i DOM vid körning.
Vi har gjort en enkel prototyp SVG-spruta som ersätter alla angivna img taggar med markeringen från den refererade SVG-filen. Så det här…
Förvandlas till detta:
Notera: Tänk på att den här injektorns tillvägagångssätt verkligen är känner som en stopgap-åtgärd och vi hoppas att vårt arbete kommer att hjälpa till att trycka på en webbläsare-inbyggd standard. Fram till dess är vårt nuvarande tänkande att detta är det bästa tillvägagångssättet.
När SVG injiceras i DOM, exekveras JavaScript som är inkapslat i det och det är klart att användas. Vissa ikoner kommer att köras på egen hand (som en klocka) medan andra kommer att behöva input för att justera.
Klockan är ett perfekt exempel på en ikon som körs ensam. En gång injiceras kommer det bara gå. Se den i aktion
html
JS
$ ( ". Svg-injicera) svgInject ().
SVG: clock.svg
När en ikon svarar på inmatning eller data krävs det lite mer arbete, men grunderna är oförändrade. Se den i aktion
html
JS
$ ( ". Svg-injicera) svgInject ().
SVG: audio-spectrum-analyzer.svg
En smart ikon blir ännu bättre med rörelse. Det finns många sätt att göra detta. Vi använder för närvarande SVG-animeringselement eftersom det här möjliggör en stor funktionalitet byggd direkt in i webbläsaren, vilket betyder mindre kod i SVG. Support är fortfarande lite wonky (vi stötte på problem i Safari 6), men det blir bättre på dagen. Se den i aktion
html
JS
$ ( ". Svg-injicera) svgInject ().
SVG: themometer.svg
Iconography har en viktig roll att spela i gränssnittsdesign. Ju mer relevant information våra ikoner kan ge, desto starkare blir de. Vi tror verkligen att smart ikonografi kan vara ett övertygande verktyg för designers att lägga till ett annat meningslag till deras ikoner. Inte alla ikoner är lämpade för detta tillvägagångssätt - som alla bra saker kräver moderering. Men när den används på rätt sätt kan det vara ett fantastiskt nytt verktyg.
Målet med Iconic är att hjälpa till att ge nya tillvägagångssätt till ikonografi. Det finns mycket mer till Iconic än bara smarta ikoner och vi ser fram emot att dela en annan intressant funktion med dig nästa vecka.
Tänk på att stödja Iconic på Kickstarter.
Accentsconagua
