Share
Dit artikel is de eerste in een driedelige serie die de nieuwe benaderingen van de iconografie toont die Iconic zal leveren. Als je het leuk vindt wat je in dit artikel ziet, overweeg dan om iconisch op Kickstarter te steunen.
Gesponsorde inhoudDeze inhoud is gemaakt in opdracht van Iconic en is geschreven en / of bewerkt door het Tuts + -team. Ons doel met gesponsorde inhoud is het publiceren van relevante en objectieve zelfstudies, casestudy's en inspirerende interviews die echte educatieve waarde bieden aan onze lezers en ons in staat stellen om het creëren van bruikbare inhoud te financieren..
Een slim pictogram is zo ontworpen dat elementen daarin zich kunnen aanpassen aan invoer, interactie of bijbehorende gegevens. Kortom, het is dynamisch. Slimme pictogrammen zijn SVG-gebaseerd en worden bestuurd met een combinatie van Javascript en CSS.
Webpictogrammen tot nu toe waren statisch - voornamelijk vanwege beperkingen in de technologie. Verschillende toestanden of variaties van een pictogram zouden eenvoudig gecreëerd kunnen worden door individuele bestanden van elke permutatie te verschaffen. Een batterijsymbool kan bijvoorbeeld in vier verschillende versies worden geleverd: opladen, volledig opladen, half laden en zonder opladen. Niet bepaald een optimale aanpak.
Een hele reeks nieuwe mogelijkheden is nu haalbaar met de algemene browser-acceptatie van SVG 1.1. Vanwege de semantische structuur van SVG kan een slim pictogram het volledige bereik van toestanden en variaties weergeven. Dit maakt de noodzaak voor beeldwisseling overbodig en maakt overgangen tussen toestanden vloeiend mogelijk.
Slimme pictogrammen bieden ontwerpers ook de mogelijkheid om relevante contextuele informatie binnen een pictogram weer te geven. Een goed ontworpen pictogram is al een relatief informeel dicht object. Door contextuele informatie aan een pictogram toe te voegen, is de informatiedichtheid nog groter zonder een aanzienlijk toegenomen cognitieve belasting. In theorie zullen dit soort pictogrammen in staat zijn de zwaarste communicatie aan te nemen, waardoor het aantal andere elementen op het scherm wordt verminderd.
Er zijn veel verschillende richtingen waarop slimme pictogrammen kunnen gaan-sommige zijn eenvoudiger te implementeren dan andere. We zijn nog steeds bezig met het ontdekkingsproces, maar tot nu toe hebben we drie primaire use-cases bedacht:
Er zijn overvloed van pictogrammen die een andere informatielaag zouden kunnen bieden, maar eenvoudigweg niet tot dit punt zijn toe te schrijven aan hun statische weergavemethode. Voorbeelden hiervan zijn pictogrammen zoals de klok, thermometer, diafragma, WIFI-signaal en batterijlading.
Een van de beste gebruiksvoorbeelden voor slimme pictogrammen is een eenvoudige gegevensvisualisatie. Pictogrammen die in deze categorie passen, zijn het audiospectrum, de meter / meter en de laadindicator. Slimme pictogrammen kunnen het proces van het bouwen van dashboarddisplays drastisch vereenvoudigen - denk eraan om gewoon vier of vijf pictogrammen aan uw HTML toe te voegen en de meterwaarde aan te passen met een gegevensattribuut.
Veel pictogrammen komen vaak in een reeks variaties om al hun verschillende toestanden over te brengen. Voorbeelden omvatten de batterij, WIFI, afspelen van media (bijv. Afspelen, pauzeren, etc.) en vermogen (bijv. Aan, uit, standby). Een andere potentiële toepassing voor slimme pictogrammen is om alle statussen van een pictogram in één SVG te rollen. In plaats van beeldelementen uit te wisselen wanneer de status van een onderwerp verandert, wijzigt u eenvoudig een gegevenskenmerk in de juiste staat.
Notitie: Voordat we ingaan op de details, is het belangrijk om op te merken dat de voorbeelden die we tonen eenvoudig prototypes van het prototype zijn. Deze prototypen zijn bedoeld om de functionaliteit te communiceren die we gaan bouwen. Geen van de volgende code is definitief, laat staan bèta. We bevinden ons nog in de R & D-fase van deze methode en we weten dat er nog veel problemen zijn die nog moeten worden aangepakt. We zullen werken aan een meer concrete richting voor deze methode nadat de Kickstarter-campagne is voltooid.
Slimme pictogrammen bestaan uit SVG, Javascript en CSS. Onze huidige gedachte is om elk pictogram te behandelen als een kleine zelfstandige app met een eenvoudige API om elementen binnen het pictogram aan te passen. Om dit te behalen betrouwbaar, deze aanpak vereist dat de SVG-markup wordt opgenomen in de DOM.
Houd er rekening mee dat het SVG-markeringsniveau moet zijn adequaat gestructureerd voor deze manier van werken. Dit is wat we voelen maakt iconisch uniek. De pictogrammen worden ontworpen en vervaardigd met nieuwe concepten in gedachten. Deze concepten vertrouwen op een heldere semantiek en een goed doordachte markup-structuur om correct te werken. Dit is niet anders dan op de juiste manier gestructureerde HTML-als je opmaak gobbleygoop is, zal het moeilijk zijn om iets geavanceerds te doen.
Er kunnen veel overtuigende dingen gebeuren als de SVG-markup goed is opgebouwd in de DOM. Het probleem is dat het toevoegen van SVG-markeringen in HTML is een pijn. De SVG-markup kan een aanzienlijke hoeveelheid bloat aan uw code toevoegen en het wordt moeilijker om onderscheid te maken tussen structurele HTML- en vectorafbeeldingen. Om deze wrijving te verwijderen, raden we aan om SVG-markup tijdens runtime in de DOM te injecteren.
We hebben een eenvoudige prototype SVG-injector gemaakt die alle gespecificeerde vervangt img tags met de markup van het SVG-bestand waarnaar wordt verwezen. Dus dit…
Verandert in dit:
Notitie: Houd in gedachten, deze injector aanpak zeker voelt als een noodmaatregel en we hopen dat ons werk een browser-native standaard zal helpen pushen. Tot die tijd is ons huidige denken dat dit de beste aanpak is.
Nadat de SVG in de DOM is geïnjecteerd, wordt de JavaScript-code die erin is ingesloten, uitgevoerd en is deze klaar om te worden gebruikt. Sommige pictogrammen zullen op zichzelf lopen (zoals een klok) terwijl anderen de invoer nodig hebben om aan te passen.
De klok is een perfect voorbeeld van een pictogram dat op zichzelf staat. Eenmaal geïnjecteerd, zal het gewoon Gaan. Zie het in actie
HTML
JS
$ ( 'Svg-inject') svgInject (.);
SVG: clock.svg
Wanneer een pictogram reageert op invoer of gegevens, vereist dit iets meer werk, maar de basis is ongewijzigd. Zie het in actie
HTML
JS
$ ( 'Svg-inject') svgInject (.);
SVG: audio-spectrum-analyzer.svg
Een slim pictogram wordt nog beter met beweging. Er zijn veel manieren om dit te doen. We gebruiken momenteel SVG-animatie-elementen, omdat hierdoor aanzienlijke functionaliteit in de browser kan worden ingebouwd, wat betekent dat er minder code is in de SVG. Ondersteuning is nog steeds een beetje rommelig (we hebben problemen ondervonden in Safari 6), maar het wordt met de dag beter. Zie het in actie
HTML
JS
$ ( 'Svg-inject') svgInject (.);
SVG: themometer.svg
Iconografie speelt een belangrijke rol bij het ontwerpen van interfaces. Hoe meer relevante informatie onze pictogrammen kunnen bieden, hoe krachtiger ze worden. We zijn er echt van overtuigd dat slimme iconografie een aantrekkelijk hulpmiddel kan zijn voor ontwerpers om een extra laag betekenis toe te voegen aan hun pictogrammen. Niet elk pictogram is geschikt voor deze aanpak, net als alle goede dingen waarvoor moderatie vereist is. Wanneer het op de juiste manier wordt gebruikt, kan het echter een geweldig nieuw hulpmiddel zijn.
Het doel van Iconic is om nieuwe benaderingen van iconografie te helpen bieden. Iconic biedt veel meer dan alleen slimme pictogrammen en we kijken er naar uit om volgende week een andere interessante functie met je te delen.
Overweeg steun aan iconic op Kickstarter.
Accentsconagua
