Share
Denne artikkelen er den første i en tredelerserie som viser de nye tilnærmingene til ikonografi Ikonisk vil levere. Hvis du liker det du ser i denne artikkelen, kan du vurdere å støtte ikonisk på Kickstarter.
Sponset innholdDette innholdet ble bestilt av Iconic og ble skrevet og / eller redigert av Tuts + -laget. Vårt mål med sponset innhold er å publisere relevante og objektive opplæringsprogrammer, casestudier og inspirerende intervjuer som gir ekte pedagogisk verdi til våre lesere og gjør det mulig for oss å finansiere etableringen av mer nyttig innhold.
Et smart ikon er utformet slik at elementene i det tilpasses til innspill, samhandling eller tilhørende data. Kort sagt, det er dynamisk. Smarte ikoner er SVG-baserte og kontrolleres med en kombinasjon av Javascript og CSS.
Web-ikoner opp til dette punktet har vært statiske, hovedsakelig på grunn av begrensninger i teknologi. Forskjellige stater eller variasjoner av et ikon vil bli opprettet ganske enkelt ved å gi individuelle filer av hver permutasjon. For eksempel vil et batteriikon komme i fire forskjellige versjoner: lading, full ladning, halvlading og gratis. Ikke akkurat en optimal tilnærming.
Et helt nytt sett av muligheter er nå levedyktig med vanlig nettleserinnstilling av SVG 1.1. På grunn av SVGs semantiske struktur kan et smart ikon vise hele spekteret av stater og variasjoner. Dette fjerner behovet for bildeveksling og tillater overganger mellom tilstandene å forekomme flytende.
Smarte ikoner gir også designere muligheten til å vise relevant kontekstuell informasjon innenfor et ikon. Et godt designet ikon er allerede et relativt informativt tett objekt. Ved å legge til kontekstuell informasjon til et ikon, er dens informasjonsdensitet enda større uten betydelig økt kognitiv belastning. I teorien vil disse typene ikoner kunne ta på seg tyngdekraften av kommunikasjon, og dermed redusere mengden av andre elementer på skjermen.
Det er mange forskjellige retninger, smarte ikoner kan gå, noe som er enklere å implementere enn andre. Vi er fortsatt i oppdagelsesprosessen, men så langt har vi kommet opp med tre primære brukstilfeller:
Det er rikelig av ikoner som kunne gi et annet lag med informasjon, men ganske enkelt ikke har opp til dette punktet, på grunn av deres statiske visningsmetode. Eksempler er ikoner som klokke, termometer, blenderåpning, WIFI-signal og batterilading.
En av de beste brukssakene for smarte ikoner er enkel datavisualisering. Ikoner som passer inn i denne kategorien er lydspektrum, måler / meter og lastindikator. Smarte ikoner kan dramatisk forenkle prosessen med å bygge instrumentpaneldisplayer - tenk på å bare legge til fire eller fem ikoner til HTML og justere måleverdien med en datatilstand.
Mange ikoner kommer ofte i en rekke variasjoner for å formidle alle deres forskjellige stater. Eksempler inkluderer batteriet, WIFI, mediaavspilling (for eksempel avspilling, pause, etc.) og strøm (f.eks. På, av, ventemodus). Et annet potensielt program for smarte ikoner er å rulle alle ikonets stater i en enkelt SVG. Så i stedet for å bytte ut bildeaktier når et fagstatus endres, endrer du bare et datatributt til den aktuelle tilstanden.
Merk: Før du går inn i detaljer, er det viktig å merke seg at eksemplene vi viser er rett og slett prototypebestemmelser. Disse prototyper er ment å formidle funksjonaliteten vi skal bygge. Ingen av følgende kode er endelig, enn mindre beta. Vi er fortsatt i FoU-fasen av denne metoden, og vi vet at det er mange problemer som fortsatt må tas opp. Vi vil jobbe mer konkret for denne metoden etter at kampanjen Kickstarter er fullført.
Smarte ikoner består av SVG, Javascript og CSS. Vår nåværende tenkning er å behandle hvert ikon som en liten, selvstendig app med en enkel API for å justere elementer i ikonet. For å oppnå dette pålitelig, Denne tilnærmingen krever at SVG-oppsummeringen skal inkluderes i DOM.
Husk at SVG-merket må være hensiktsmessig strukturert for denne tilnærmingen til arbeidet. Dette er hva vi føler gjør Iconic unik. Ikonene er utformet og utformet med nye konsepter i tankene. Disse konseptene stole på klar semantikk og en gjennomtenkt markupstruktur for å fungere riktig. Dette er ikke annerledes enn riktig strukturert HTML - hvis oppslaget ditt er gobbleygoop, vil det være vanskelig å gjøre noe sofistikert.
Mange overbevisende ting kan skje når velstrukturert SVG-oppslag er i DOM. Problemet er at du legger til SVG-merking i HTML er en smerte. SVG-oppslaget kan legge til en betydelig mengde oppblåsing til koden din, og det blir vanskeligere å skille mellom strukturelle HTML- og vektorbilder. For å fjerne denne friksjonen foreslår vi at du injiserer SVG-markering i DOM-enheten ved kjøretid.
Vi har laget en enkel prototype SVG-injeksjon som erstatter alle spesifiserte img koder med merket fra den angitte SVG-filen. Så dette…
Skifter inn i dette:
Merk: Husk, denne injeksjonen tilnærming sikkert kjennes som et stopptaksmål, og vi håper at arbeidet vårt vil bidra til å skape en nettleser-innfødt standard. Inntil da er vår nåværende tenkning at dette er den beste tilnærmingen.
Når SVG er injisert i DOM, blir JavaScript innkapslet i det utført og det er klart å bli brukt. Noen ikoner vil kjøre på egenhånd (som en klokke) mens andre vil trenge innspill for å justere.
Klokken er et perfekt eksempel på et ikon som kjører på egenhånd. En gang injisert, vil det bare gå. Se det i aksjon
HTML
JS
$ ( 'Svg injisere') svgInject (.);
SVG: clock.svg
Når et ikon svarer på inngang eller data, krever det litt mer arbeid, men det grunnleggende er uendret. Se det i aksjon
HTML
JS
$ ( 'Svg injisere') svgInject (.);
SVG: audio-spectrum-analyzer.svg
Et smart ikon blir enda bedre med bevegelse. Det er mange måter å gjøre dette på. Vi bruker for øyeblikket SVG-animasjonselementer, da dette gir en betydelig funksjonalitet bygget rett inn i nettleseren, noe som betyr mindre kode i SVG. Støtten er fortsatt litt wonky (vi kjørte inn i problemer i Safari 6), men det blir bedre på dagen. Se det i aksjon
HTML
JS
$ ( 'Svg injisere') svgInject (.);
SVG: themometer.svg
Ikonografi har en viktig rolle å spille i grensesnittdesign. Jo mer relevant informasjon våre ikoner kan gi, desto kraftigere blir de. Vi tror virkelig at smart ikonografi kan være et overbevisende verktøy for designere å legge til et annet lag med mening til deres ikoner. Ikke alle ikonene passer for denne tilnærmingen, som alle gode ting det krever moderering. Men når det brukes riktig, kan det være et enormt nytt verktøy.
Målet med Iconic er å bidra til å gi nye tilnærminger til ikonografi. Det er mye mer til ikonisk enn bare smarte ikoner, og vi gleder oss til å dele en annen interessant funksjon med deg neste uke.
Vær så snill å vurdere Backing Iconic på Kickstarter.
Accentsconagua
