Infografice: tipuri, exemple de lucru, viitor. Infografice interactive cu animație SVG și CSS
În acest tutorial vom învăța cum să construim infografice interactive folosind SVG, CSS și JavaScript. Unul dintre subiectele mai puțin discutate este tendința noilor browsere de a crește suportul pentru fișierele SVG. Spre deosebire de imaginile raster, cum ar fi PNG, JPG sau GIF, graficele vectoriale din fișierele SVG sunt complet scalabile la orice dimensiune și se vor afișa la orice rezoluție sau densitate a ecranului fără pierderi de calitate. În multe cazuri, fișierele SVG sunt mult mai mici ca dimensiune și se încarcă mai repede. Dar lucrul interesant de care unii dezvoltatori nu își dau seama este că SVG se bazează pe specificația XML și poate fi aplicat într-un mod similar cu HTML.
Aceasta înseamnă, de asemenea, că putem accesa și manipula elementele grafice și elementele dintr-un fișier SVG folosind tehnologiile CSS și JavaScript cu care dezvoltatorii web sunt deja familiarizați. Dezvoltatorii pot crea acum niște animații și efecte destul de impresionante folosind SVG. Astăzi vom explora puterea SVG prin crearea de infografice vectoriale interactive pentru web. Puteți vizualiza demonstrația sau descărca codul sursă făcând clic pe linkurile de sub imaginea de mai jos. Să începem.
Pregătirea fișierului SVG
Există multe moduri de a crea grafică SVG. Deși este posibil să faceți SVG prin codificare manuală, vom dori ca graficele mai complexe să aibă un anumit tip de software vectorial care să poată exporta în format SVG. O alegere populară printre majoritatea designerilor poate fi cea familiară Adobe Illustrator, dar există și alte aplicații disponibile public, de exemplu, Inkscape, care poate fi mai potrivit pentru scopurile noastre.
Indiferent de software-ul pe care îl alegeți, capacitatea de a grupa obiecte împreună și de a putea numi acele grupuri (prin scrierea atributelor id) rămâne esențială. Acest lucru ne permite să ne organizăm SVG-ul într-o ierarhie adecvată, pe care o putem accesa ulterior folosind CSS și/sau JavaScript. Illustrator și Inkscape au capacitatea de a face acest lucru selectând mai multe elemente grafice accesând Obiect > Grupare (sau Degrupare - degrupare) din meniul principal.
Orice obiect sau grup i se poate atribui apoi un nume, care devine atributul id al grupului sau obiectului atunci când este exportat, deci evitați spațiile, caracterele speciale și duplicatele.
În Illustrator, acest lucru se poate face în panoul Straturi ( straturi). Găsiți pur și simplu obiectul pe care doriți să-l denumiți în panou, faceți dublu clic pe câmpul stratului și introduceți id-ul dorit. În utilizarea Inkscape Obiect > Proprietăți obiect panou pentru atribuirea unui id unui obiect sau grup. Acest lucru se poate face și cu Editare > Editor XML panou unde vă puteți înregistra nu numai id-ul, ci și cursurile.
În exemplul nostru, când salvăm fișierul SVG și îl deschidem într-un editor de text, acesta va avea următoarea structură:
Markup-ul de mai sus ne arată structura pe care o urmăm.
După cum putem vedea în marcajul nostru SVG, fiecare etichetă
Se încarcă SVG în HTML folosind JAVASCRIPT
HTML
Există modalități de a include sau de a plasa SVG în HTML. Acest lucru este posibil prin utilizarea unei etichete , etichetă
Mai întâi, să creăm un div în documentul HTML:
JavaScript
Acum, folosind încărcarea jQuery, vom încărca fișierul SVG în blocul #stage și îi vom atribui clasa svgLoaded, pe care o vom folosi pentru a declanșa animația:
$(funcție () ( $("#stage") .load ("interactive.svg" ,funcție (răspuns) ( $(this ) .addClass ("svgLoaded" ); dacă // Asigurați-vă că executați acest lucru pe un server web sau localhost! } } ) ; } ) ;
Important: Încărcăm SVG-ul folosind JavaScript pentru a-i accesa DOM. Chrome (și posibil alte browsere) nu vă va permite să faceți acest lucru local; acest lucru va funcționa numai atunci când este rulat cu protocolul HTTP din motive de securitate.
CSS
Vă rugăm să rețineți că CSS-ul din acest tutorial nu va conține nicio specificație de browser, dar fișierele vor conține.
În primul rând, specificăm câteva stiluri pentru blocul div. Când încărcați un SVG, fișierul trebuie să se încadreze în dimensiunea blocului, așa că este important să setați dimensiunea blocului pentru a se potrivi cu dimensiunea pânzei SVG.
#scenă ( lățime : 1024px ; înălțime : 1386px ; )
Stilizarea elementelor SVG: setarea „transform-origins”
Cheia pentru a aduce la viață elementele din pânză este în proprietatea de origine a transformării. În mod implicit, toate transformările oricărui element dintr-un SVG provin din pânza SVG (0px, 0px). Pentru orice element pe care dorim să-l transformăm (de exemplu, scară, rotire), trebuie să setăm o origine de transformare adecvată în raport cu partea stângă și superioară a pânzei SVG. Sursa va fi diferită pentru fiecare element în funcție de efectul/animația dorit, dar în cele mai multe cazuri va fi egală cu punctul central în care elementul este deja plasat. Acest lucru poate fi destul de obositor, dar este mai ușor să copiați pur și simplu informațiile de coordonate care sunt furnizate în editorul nostru vectorial.
#cafea ( transform-origin: 517px 484px ; ) #coffee-badge ( transform-origin: 445px 488px ; ) #coffee-title ( transform-origin: 310px 396px ; ) #coffee-details ( transform-origin: 311px; 4) #design ( transform-origin: 514px 603px ; ) #design-badge ( transform-origin: 580px 606px ; ) #design-title ( transform-origin: 712px 513px ; ) #design-details ( transform-origin: 710px 620px ;) #build ( transform-origin: 511px 769px ; ) #build-badge ( transform-origin: 445px 775px ; ) #build-title ( transform-origin: 312px 680px ; ) #build-details ( transform-origin: 310px 790px ;) #complain ( transform-origin: 512px 1002px ; ) #complain-badge ( transform-origin: 586px 1000px ; ) #complain-title ( transform-origin: 718px 921px ; ) #complain-details ( transform-origin: 702px; 718px 921px ; ) #bere ( transform-origin: 513px 1199px ; ) #beer-badge ( transform-origin: 444px 1193px ; ) #beer-title ( transform-origin: 313px 1097px ; ) ) #bere-detalii ( transform-origin: 316px 1202px ; )
Aplicarea unor transformări inițiale
Trebuie să setăm stiluri inițiale pentru a schimba poziția unor obiecte. De asemenea, trebuie să ascundem anumite obiecte pe care nu dorim să le arătăm până nu trecem cu mouse-ul peste ele.
Pentru a face acest lucru vom folosi selectoare CSS. Selectăm în principal obiecte cu id „sufixe”.
[ id$=insignă] ( /* Orice element cu un id care se termină cu „insignă” */ transform: scale(0 . 5 , 0 .5 ); ) [ id$=titlu] ( transform: scale(1 . 8 ) translate(0px , 48px ) ; ) [ id$=detalii] ( transform: scale(0 , 0 ) ; )
Adăugarea stilului pentru :hover și aplicarea tranzițiilor
Selectăm elementele din interiorul grupului hoverat și le întoarcem înapoi în poziția inițială. Apoi setăm tranziția 0,25 s pentru un efect de animație cool.
#cronologie > g:hover [ id$=insignă] , #cronologie > g:hover [ id$=detalii] ( transform: scale(1 , 1 ) ; ) #cronologie > g:hover [ id$=title] ( transformare : scale(1 ) translate(0px , 0px ) ; ) [ id$=insignă] , [ id$=title] , [ id$=detalii] ( tranziție: transformare 0,25s ease-in-out; )
Introducere în animație
Folosim animație CSS. În primul rând, trebuie să creăm câteva cadre cheie pentru a anima unele proprietăți CSS diferite:
@keyframes stânga-acolada-intro ( 0 % ( transform: translateX(220px ) ; opacitate: 0 ; ) 50 % ( opacitate: 1 ; transformare: translateX(220px) ; ) 100 % ( transforma: translateX(0px ) ; ) ) @keyframes dreapta-acolada-intro ( 0 % ( transform: translateX(-220px ) ; opacitate: 0 ; ) 50 % ( opacitate: 1 ; transformare: translateX(-220px ) ; ) 100 % ( transform: translateX(0px ) ; ) ) @keyframes fade-in ( 0 % (opacitate: 0; ) 100 % ( opacitate: 1 ; ) ) @keyframes grow-y ( 0 % ( transforma: scaleY(0 ) ; ) 100 % ( transform: scaleY(1 ) ; ) ) @keyframes grow-x ( 0 % ( transforma: scaleX(0 ) ; ) 100 % ( transform: scaleX(1 ) ; ) ) @keyframes cresc ( 0 % ( transforma: scară(0 , 0 ) ; ) 100 % ( transforma: scară(1 , 1 ) ; ) )
Crearea unei secvențe de animație
Putem folosi selectoare bazate pe clasa svgLoaded pe care am folosit-o mai devreme.
Pentru a seta secvența de animație, vom seta proprietatea animation-delay, și vom seta animation-fill-mode: înapoi, astfel încât animația să aibă pauze.
SvgLoaded #logo (animație: fade-in 0,5s ease-in-out; ) .svgLoaded #quote-text (animație: fade-in 0,5s ease-in-out 0,75s ; animation-fill-mode: înapoi ; ) .svgLoaded #quote-left-brace ( animație: stânga-acolada-intro 1s ease-in-out 0 .25s ; animation-fill-mode: înapoi; ) .svgLoaded #quote-right-brace ( animație: dreapta- brace-intro 1s ease-in-out 0.25s ; animation-fill-mode: backwards; ) .svgLoaded #background (animație: grow-y 0.5s ease-in-out 1 .25s ; transform-origin: 512px 300px ; animation-fill-mode: backwards; ) .svgLoaded #background > g ( animație: grow-x 0 .25s ease-in-out 1 .75s ; animation-fill-mode: backward; ) .svgLoaded #background > g: last-of-type ( transform-origin: 458px 877px ; ) .svgLoaded #background > g:first-of-type ( transform-origin: 563px 877px ; ) .svgLoaded #coffee , .svgLoaded #design , .svg #build,Loaded .svgLoaded #complain , .svgLoaded #bere ( animație: crește 0,25 s ease-in-out; animation-fill-mode: înapoi; ) .svgLoaded #cafea (animation-delay: 2s; ) .svgLoaded #design (animation-delay: 2 .25s ; ) .svgLoaded #build (animation-delay: 2 .5s ; ) .svgLoaded #complain: (animation-delay: 2 .75s ; ) .svgLoaded #beer ( animație-întârziere: 3s; )
Fonturi WEB
Deoarece am folosit fonturi personalizate în fișierul nostru SVG, trebuie să le includem și în pagina noastră web. Este important să specificați corect numele fontului care a fost folosit la exportul SVG. Deschidem fișierul SVG într-un editor de text și pur și simplu găsim textul în care a fost folosit fontul și ne uităm la proprietatea familiei de fonturi:
După cum putem vedea, fișierul SVG a fost exportat folosind un font din familia de fonturi numit „LeagueGothic”. Deci, trebuie doar să definim fontul web în CSS folosind exact același nume.
@font-face (familie de fonturi: „LeagueGothic”; url ( „../fonts/league-gothic/league-gothic.eot.woff”) format("woff" ); )
Asta este tot! Sperăm că v-a plăcut tutorialul și l-ați găsit util și informativ. Ne-ar plăcea să auzim comentariile dvs.
Traducere - Cameră de serviciu.
Probabil ați observat o schimbare masivă în lumea online de la conținut bazat pe text la conținut vizual.
Nu se poate nega puterea imaginilor pe Internet și în viața noastră de zi cu zi. YouTube și Instagram sunt dominate de conținut vizual; YouTube este al 3-lea cel mai vizitat site de pe web, iar Instagram are peste 80 de milioane de fotografii postate în fiecare zi.
Postările de blog și articolele au șanse cu 80% mai mari de a fi consumate dacă au imagini color, titluri sau miniaturi, iar oamenii nu vor petrece mai mult de 15 secunde pe un site dacă acesta nu le atrage atenția imediat.
Infograficele sunt preferate în rândul publicului și al comercianților cu amănuntul și sunt cu 800% mai interesante pentru oameni astăzi decât în 2012.
În plus, conținutul este creat într-un ritm alarmant - 60% dintre agenții de marketing creează cel puțin o cantitate mică de conținut nou în fiecare zi! Puteți afla mai multe din articolul de recenzie.
Pe măsură ce tot mai mulți oameni încep să creeze conținut, un lucru devine clar: pentru a fi văzut, trebuie să ieși în evidență.
Desigur, marketerii de conținut se gândesc deja la viitorul conținutului vizual, luând în considerare ce pot face acum, ce pot implementa și ce tehnologii noi sunt la orizont. Acest tip de gândire anticipată este ceea ce poate face sau distruge eforturile dvs. de marketing de conținut; trebuie să te adaptezi sau te vei îneca.
Cu conținut vizual, cum ar fi infografice, marketerii au o oportunitate unică de a vedea viitorul pe măsură ce se apropie. Companiile, designerii grafici și agenții de marketing încep cu toții să folosească infograficele și să le actualizeze pentru a le face și mai atractive pentru publicul lor. Chiar dacă deja „doar postați” infografice în mod regulat, nu este niciodată prea devreme pentru a afla despre tendințele care abia încep să se dezvolte, așa cum nu este niciodată prea devreme pentru a învăța cum să le implementați în strategiile dvs. de marketing de conținut.
Dacă vrei să privești în viitor și poate chiar să înveți câteva trucuri înaintea tuturor, acum este momentul!
Iată cele trei tipuri de infografice care vor fi cele mai comune în viitorul (aproape).
Dacă sunteți în căutarea unui instrument grozav de creare a infografică, vă recomand să verificați Visme. Pentru început, oferă un cont gratuit și caracteristici excelente și ușor de utilizat pentru non-designeri. Puteți obține un cont gratuit acum.
1. Infografice interactive
Deși am văzut frumusețea site-urilor web interactive și a jocurilor ușor de utilizat, infograficele interactive sunt încă destul de noi în domeniul lor. La fel ca infograficele, ele conțin în mod evident unele informații și sunt de obicei dinamice. Dar utilizarea elementelor interactive oferă utilizatorilor posibilitatea de a se conecta cu informații și de a crea propriile lor informații.
Indiferent de afacerea, produsul, serviciul sau mesajul dvs., puteți crea un infografic interactiv care le permite oamenilor să se evalueze (de exemplu, „calculați-vă IMC aici”). De asemenea, utilizatorii pot face clic pe informații relevante, care le vor trimite către o resursă mai aprofundată sau înapoi la o pagină de destinație, generând astfel trafic. Este o modalitate foarte adaptabilă și distractivă de a vă implica publicul.
Mulți marketeri s-au adaptat deja la acest tip de infografic și se transferă rapid. Dar, în același timp, mulți încă mai iau ca bază infografică simplă:
....imaginați-vă ce altceva puteți face cu infografice interactive.
Poti incerca:
- Folosind tehnici de defilare care fac imaginile sau formele să iasă în evidență din fundal
- Construirea de „ferestre pop-up” care extind zonele de text
- Imaginile sau statisticile apar când faceți clic pe ele
- Transformați-vă infograficele în mai multe pagini pe care utilizatorii le pot vizualiza
Pentru un exemplu mai detaliat de infografică interactivă, aruncați o privire la acesta:
Pentru a face o infografică extrem de interactivă (cu derulare, ferestre pop-up etc.), va trebui să înveți puțin despre HTML5 sau CSS sau să angajezi pe altcineva să-ți dea seama.
În ciuda efortului suplimentar, vei fi răsplătit cu un conținut unic, captivant și eficient.
De ce ar trebui să încerci să implementezi infografice în viitorul apropiat?
- Acest lucru vă încurajează publicul să interacționeze cu conținutul dvs. și să le distribuie.
- Aceasta generează trafic (prin linkuri)
- Acest lucru demonstrează audienței dvs. că sunteți inovator, plin de resurse și că intenționați să oferiți conținut în timp util și interesant.
- Există straturi de infografice interactive care fac dezvoltarea sa ușor de gestionat
2. Videoclip încorporat și GIF
Acesta este un alt tip de infografic pe care îl vedem din ce în ce mai des astăzi. Infograficele care oferă videoclipuri scurte sau chiar GIF-uri (Graphics Interchange Format) sunt o modalitate excelentă de a atrage atenția și de a vă face infograficul să iasă în evidență din mulțime. Deși acest lucru este limitat de platforme, vă puteți partaja infograficele la timpul prezent.
Multe instrumente infografice simple, cum ar fi Easel.ly, oferă o opțiune „Video YouTube încorporat” sau puteți adăuga videoclip la o infografică pe care o creați în Photoshop utilizând un strat video. Puteți chiar să adăugați un videoclip la un diapozitiv Powerpoint, pe care îl puteți transforma și într-un infografic.
Mai mult, puteți găsi milioane de GIF-uri online și le puteți introduce în același mod. Problema aici este că va trebui să vă distribuiți infograficul ca URL pentru a vă asigura că este încorporat corect în site-ul dvs. Nu puteți distribui sau salva astfel de infografice în format .jpeg sau PDF. Fără îndoială, pe măsură ce acest lucru devine mai popular, vor exista și alte instrumente de inserare video și GIF pentru a face procesul și mai ușor.
Dar dacă vrei să folosești acest tip de infografic înainte ca toată lumea din jurul tău, chiar și câinii lor, să învețe cum să o facă, începe acum cu instrumentele pe care le găsești online.
Dacă vrei să o duci la nivelul următor, poți face un videoclip dintr-un infografic pe care îl ai deja. Aceasta este o oportunitate grozavă de a fi văzut pe YouTube, Instagram și chiar pe platforme video precum Vimeo, Snapchat și altele. Videoclipul de mai jos este un exemplu minunat despre cum să transformați un infografic într-un videoclip.
De ce să încorporați un videoclip sau un GIF într-o infografică?
- Acest lucru vă oferă un element de surpriză - oamenii nu se așteaptă ca imaginea să se miște!
- Este foarte distractiv și original, ceea ce crește șansa ca oamenii să interacționeze și să distribuie infograficul tău.
- Aceasta este o modalitate bună de a arăta tuturor unicitatea mărcii dvs.
3. Infografice animate
Infograficele animate au un număr mare de modele vizuale și necesită multă atenție. Când un utilizator vizualizează o pagină, de obicei nu se așteaptă să se miște nimic, așa că este o idee bună dacă înveți toate aceste tehnici înainte ca toți ceilalți să o facă.
Deoarece multe infografice animate sunt destul de complexe și pot necesita un fel de design grafic, codare și/sau cunoștințe de software, acestea sunt foarte apreciate.
Iată un exemplu despre ce vorbesc:
Dacă doriți să aflați mai multe despre cum să creați infografice animate, consultați acest infografic de la Tabletop Whale. De asemenea, puteți găsi diverse servicii care vă ajută să creați infografice de acest fel. În orice caz, acesta este unul dintre cele mai dificile procese din evoluția infograficelor.
De ce ar trebui să vă investiți timpul, energia și/sau banii în crearea de infografice animate?
- Acest lucru te va face de fapt să ieși în evidență din mulțime, deoarece nu toată lumea are acces la acest tip de software sau conținut
- În doar câțiva ani, acest lucru va fi obișnuit - vei fi unul dintre primii care o vor face!
- Animația va face informațiile din interiorul infograficului mai memorabile
- Acest lucru va inspira utilizatorii să lucreze cu dvs.
Aceasta nu este science fiction.
Acest lucru poate suna prea tehnic și dincolo de capacitățile tale în acest moment, dar este probabil ca aceste tipuri de infografice să devină foarte comune în 2-3 ani. Putem observa deja o descoperire puternică în infograficele animate și GIF-urile, mai ales că GIF-urile continuă să crească în popularitate. Infograficele devin unul dintre cele mai consumate și mai des create tipuri de conținut de pe Internet. De ce? Da, pentru că creierul are nevoie de doar 250 de milisecunde pentru a accepta și procesa semnificația unui simbol.
Dacă o persoană obișnuită petrece aproximativ 15 secunde pe un site și apoi începe să se plictisească, atunci în mod firesc doriți să ridicați orice pe ecran care l-ar putea împiedica - sau cel puțin să primiți un mesaj în 15 secunde sau mai puțin. Unele studii au demonstrat chiar că oamenii se pot concentra pe ceva timp de cel mult 8 secunde, iar această cifră scade în fiecare an.
Acesta este motivul și poate un produs secundar al nevoii noastre constante de a primi informații. Trăim în era informației și toate informațiile ne sunt disponibile. Dar asta înseamnă și că, cu cât mai mulți oameni încearcă să partajeze mesaje și să răspundă la fiecare întrebare posibilă, cu atât mai mult conținut produs devine zgomot de fundal.
Dacă disponibilitatea infograficelor astăzi este un indiciu, acestea vor fi în curând peste tot. Aceasta înseamnă noi schimbări în munca ta. Nicio campanie de marketing din istorie nu a obținut succes făcând același lucru din nou și din nou.
Ideea aici este să vedeți infograficul ca mai mult decât o imagine jpeg. Infograficele pot fi adaptate la diferite medii și utilizate pe o mare varietate de platforme. Antreprenorii și agenții de marketing au văzut deja potențialul în acest sens. Și tu?
Viitorul vizualizării datelor este interactiv.
Dar cum poți crea infografice interactive cu adevărat uimitoare?
Infograficele sunt peste tot, iar în ultimul timp devin din ce în ce mai interactive.
În articolul de astăzi vă vom împărtăși secretele creării de infografice interactive, precum și link-uri către resurse utile.
1. Înțelegeți psihologia
Înainte de a face un infografic interactiv, este important să înțelegeți de ce doriți să îl faceți interactiv.
După cum este detaliat în acest infografic, oamenii percep mai bine informațiile vizuale. Este mult mai probabil să citim, să înțelegem și să ne amintim o prezentare dacă are imagini captivante. este un instrument eficient de învățare, dar poate deveni și mai bun.
Învățarea cinetică este o alternativă excelentă, deoarece oamenii învață mai bine prin activități fizice.
De aceea, adăugarea interactivității în câmpul promițător al vizualizării vă va ajuta să creați infografice și mai memorabile și mai eficiente.
Această combinație de abordare vizuală și cinetică face din infografica animată conținutul viitorului. Desigur, pentru unele teme este mai bine să nu folosiți elemente interactive, dar în cele mai multe cazuri acestea vor îmbunătăți doar conținutul.
Mișcarea adaugă sens informațiilor, permite utilizatorului să controleze experiența și antrenează imaginația într-un mod în care infografica statică nu poate.
2. Adăugați efecte de defilare
Testix publică o traducere a articoluluiRobbie Richards . Original:Cum să faci o infografică interactivă (un ghid în 6 puncte)
Una dintre cele mai mari provocări cu care se confruntă marketerii astăzi este lupta de a crea conținut captivant.
Algoritmii de căutare se schimbă în mod constant în încercarea de a filtra conținutul de calitate scăzută. Acestea fiind spuse, acest lucru duce la schimbări masive în strategiile de creare a conținutului.
Unele mărci au trecut la citiri lungi...
...sau tipul de conținut pe care Brian Dean îl promovează cu „Tehnica lui zgârie-nori”.
Rezultatul este o explozie de conținut care inundă Internetul. Astăzi, peste 2 milioane de articole sunt publicate în fiecare zi numai pe bloguri.
Acest nivel de saturație a conținutului a provocat o schimbare dramatică în strategiile companiilor.
În ultimii ani, mulți au lucrat pentru a-și diversifica conținutul adăugând alte formate — cum ar fi infograficele. Realitate: Infografica a cunoscut o creștere explozivă pe tot parcursul anului 2016, 58% dintre agenții de marketing clasându-le printre cele mai bune tactici pe care le folosesc pentru a implica publicul.
De exemplu, unii specialiști în marketing consideră că crearea de infografice necesită anumite abilități profesionale sau un designer grafic scump. Dar asta nu este adevărat.
Nu aveți nevoie de o echipă de dezvoltare dedicată atunci când aveți platforme* care oferă un set de instrumente care fac crearea de conținut interactiv mai rapidă și mai ușoară.
În acest articol, veți vedea că infograficele interactive nu sunt doar ușor de creat — ele sunt chiar mai eficiente în a-ți atrage publicul decât infograficele statice și pentru a-ți transforma cititorii în potențiali clienți.
De ce infograficele interactive își bat omologul static.
Conceptul de infografic este simplu: includeți cât mai multă valoare posibil într-un conținut pentru cititori și vizualizați-l pentru a-i implica mai bine.
Exact pentru asta a fost creat acest infografic interactiv.
Designul grafic se potrivește perfect atât cu povestea, cât și cu setul de date. Te trezești călătorind cu 3.000 de kilometri pe oră, zburând pe lângă Stația Spațială Internațională până în vârful fluxului format din 21,9 miliarde de fotografii postate pe Instagram într-un an.
Iată ce trebuie să țineți cont atunci când alegeți o temă vizuală pentru infograficul dvs. interactiv:
- Imaginile și elementele interactive ajută la aducerea datelor la viață?
- Cât de bine reflectă imaginile, animațiile și elementele de design marca dvs., precum și orice alte mărci care au colaborat cu dvs. pentru a crea conținutul?
- Unde va trăi grafica interactivă? Dacă va fi prezentat pe site-ul dvs. web, este posibil să doriți să potriviți designul cu tema sau șabloanele site-ului dvs.
- Asigurați-vă că ideea de vizualizare este relevantă pentru publicul, industria și povestea dvs. Infograficele despre vacanțele în stațiune vor avea un stil vizual complet diferit de evenimentele promoționale pentru managerii de top.
Un alt exemplu grozav este acest infografic de Joho Bean:
Îl duce pe utilizator într-o aventură multimedia neobișnuită, folosind imagini suculente și povestește despre călătoria boabelor de cafea de la locul de coacere la consumator.
Acțiunile utilizatorului ar trebui să creeze un răspuns
Infograficele interactive ar trebui să fie interactive, dar asta nu înseamnă că ar trebui să se limiteze la elemente individuale pe care se poate face clic.
Fiecare acțiune a utilizatorului ar trebui să creeze un fel de răspuns în conținut, astfel încât întregul lucru să creeze o experiență cu adevărat personală — chiar dacă este doar o simplă derulare a paginii.
Nu numai conținut ascuns obligă cititorul să participe activ la învăţarea conţinutului, încurajează curiozitatea și, de asemenea, permite cititorilor să sară peste secțiuni care sunt de puțin interes pentru ei.
Personalizați conținutul cu introducerea utilizatorului
Puteți garanta un angajament mult mai puternic dacă oferiți date utilizatorilor pe baza informațiilor pe care le introduc. Acest lucru se potrivește cu ceea ce doresc utilizatorii: doresc mai mult conținut interactiv și mai multă personalizare.
Un exemplu uimitor în acest sens este un infografic personalizat care oferă o perspectivă asupra faptului dacă munca dvs. poate fi în pericol de a fi automatizată de roboți:
Utilizatorii trebuie să aleagă o profesie care îi interesează pentru a primi informații relevante.
Includeți formulare grafice pentru a colecta informații
Ce este infografica interactivă? Aceasta este o întrebare pe care ne-o pun tot mai mult clienții noștri. Până nu demult, un număr mic de agenții și studiouri înțelegeau în general despre ce vorbim, dar astăzi firmele de comunicare care țin pasul cu vremurile sunt obligate nu doar să includă acest serviciu în lista de prețuri, ci și să-l presteze eficient. Din păcate, nu toată lumea poate face asta încă.
Există mai multe tipuri și definiții de infografice interactive.
În primul rând: infograficele interactive sunt infografice care implică cititorul în controlul datelor afișate. Interactivitatea este creată folosind tehnologiile Flash sau JavaScript, HTML 5.
În al doilea rând: orice infografică care vă permite să modificați online datele afișate sub formă grafică.
Proiectele de creare a infografice interactive câștigă avânt doar datorită complexității și costului lor ridicat. Unul dintre exemplele izbitoare de infografice interactive a fost proiectul „Cine l-a felicitat pe Lukașenko pentru președinția sa”, 2011.
Infografice, actualizate interactiv, au permis să vedem care dintre șefii de stat l-a felicitat pe A.G. Lukașenko cu alegerile din 2010. Datele afișate pe infografic ar putea fi selectate după fotografia președintelui, steagul țării, într-un tabel sau pe un glob. Astfel, utilizatorul însuși a ales ce date îl interesează și care vor fi afișate. În tabel, a fost posibilă sortarea țărilor după durata de timp în care șeful statului a fost la putere la momentul felicitărilor, după starea drepturilor și libertăților, calitatea vieții, libertatea presei, alegerile democratice de facto. și ratingul dictatorilor. Disponibilitatea felicitărilor a fost verificată pe site-urile oficiale ale președinților și schimbată manual.
A trecut destul de mult timp de la lansarea acestui proiect, iar astăzi mulți experți încearcă să se asigure că infograficele interactive modifică automat informațiile. Deși, acest lucru afectează grav bugetul proiectului.
Marile companii occidentale au fost printre primele care au folosit infografica interactivă ca mijloc de construire a unei reputații sau de creștere a loialității utilizatorilor, care au înțeles valoarea afișării informațiilor comprimate în dinamică și posibilitatea de a-și implica utilizatorii.
Unele tipuri de infografice vă permit să ajustați în mod interactiv unii parametri și să obțineți date interesante. De exemplu, utilizatorului i se pune o întrebare pentru a introduce un anumit număr, după care graficul sau diagrama se schimbă în fața ochilor lui - se obține un material informativ complet nou, a cărui creație a devenit el însuși un participant direct.
De exemplu, la a treia aniversare a browserului Chrome, Google a vizualizat istoria dezvoltării tehnologiilor și programelor de vizualizare a paginilor web: vă recomandăm cu insistență să urmați linkul și să vă bucurați de spectacolul colorat al infograficelor interactive în cele mai bune tradiții ale Vest.
În exemplul menționat mai sus, utilizatorii principalelor browsere Internet Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+ pot vedea două decenii de dezvoltare a tehnologiilor utilizate în browsere - de la protocolul http la offline Aplicații AppCache.
Companiile rusești nu au stăpânit încă infografica interactivă, deoarece chiar și infograficele simple astăzi nu sunt disponibile pentru toată lumea de bună calitate. În ciuda faptului că serviciul de creare a infografice interactive este destul de nou pe piața rusă, agenția noastră este pregătită să îndeplinească astfel de sarcini astăzi, deoarece acest format devine din ce în ce mai solicitat. Costul acestui serviciu este ridicat, deoarece astfel de tehnologii sunt rare și întotdeauna strict individuale, ceea ce necesită crearea unui produs software de la „0” pentru fiecare sarcină.
