Tippek lenyűgöző interaktív infografikák készítéséhez. A legjobb példák az interaktív infografikák használatára a céloldalakon. Ez nem sci-fi
Az elmúlt néhány évben az infografika statikus képekből gazdag, interaktív élményekké fejlődött, egyedi tartalomra szabott animációs és videóelemekkel. Már nem korlátozódik az előre elkészített, egy méretben használható sablonokra. A mai válogatás pedig az infografikák legjobb példáit tartalmazza, amelyek bemutatják, milyen egy érdekes és informatív élmény.
A listában szereplő infografikák többségét a megjelenítésre választottuk ki különféle módokon, amellyel a tervezők megközelítik az adatvizualizációt. Van azonban néhány „hibrid”, amelyek az infografikák és a multimédiás élmények közötti határvonalak elmosódását illusztrálják, amikor vonzó tartalmat és lenyűgöző történeteket hoz létre a nyitóoldalakon. A hagyományos formáktól való eltérés azt jelenti, hogy összetettebb médiaterületre lépünk, és a technológiával és történetmeséléssel való ilyen jellegű kísérletezés lesz kritikus a jövő alakításában. grafikai tervezés.
1. Széltérkép
A Wind Map egy lélegzetelállító alkotás, amely a szél irányát és sebességét mutatja az Egyesült Államok felett. Ennek a kialakításnak inkább művészi, semmint haszonelvű célja van, és ez csodálatos: nagyon kellemes csak ülni és nézni, hogyan kanyarognak a vékony, vékony szálak a térképen. Egy egyszerű, de jól átgondolt példa arra, hogy az alakpályákat bemutató infografikák milyen hasznot húznak az animációból és a mozgóképekből.
2. Repülés közben
A The Guardian 2014-ben elindított egy infografikát In Flight címmel, amely a kereskedelmi járatok valós idejű adatait mutatta be (úgy tűnik, már nem frissül, ami kár), és egy repüléstörténeti leckét is tartalmazott. Az interaktív műsor elején a légiszemélyzetek közötti csendes beszélgetések különleges hangulatot teremtenek. Úgy tűnik, hogy az infografika manapság lassan moziélménysé válik. Legalább az "In Flight" ebbe az irányba mutat...
3. Tárcsázza a Holdat
A Dial A Moon infografikán nem sok minden történik, de a célját elég jól teljesíti. 2015-ben a NASA jóvoltából óránként frissültek a holdfázisok infografikái, és nem kellett a Google-t keresni e titokzatos információ után. Most már megtekintheti a képeket a hónap, a nap és az idő manuális megadásával.
4. Nap a Plutóval
A Nature magazin sok érdekes infografikát közöl a tudomány iránt érdeklődő közönsége számára. Köztük volt egy űrhajó híres elrepüléséről a Plútó közelében (24 Hours Of Pluto). Az infografika sok szöveges információt tartalmazott, de a látványvilág megkönnyítette a csúcspontok megértését, a törpebolygó szerkezetétől a holdjai kialakulásának folyamatáig. A szöveges rész már elérhető az interneten, valamint két animációs videó is az infografikáról.
5. Hogyan változtak az amerikai házak
Tegyen egy utazást a nagy amerikai álomban, amely tükröződik az otthoni stílusok evolúciójában. Ezzel a jól illusztrált infografikával beülhet egy autó volánja mögé (amelynek megjelenése is változik, ahogy görget, hogy lépést tudjon tartani a korszakkal), és eligazodjon az 1900-as évektől a 2000-es évekig, elhaladva az egyes évtizedekben népszerű épületek mellett. Útközben rengeteg hasznos anyaggal találkozhatsz (beleértve a korabeli társadalmi-politikai viszonyokat, valamint a divatirányzatokat), és mindez egy olyan kérdéssel zárul, amely kihívást jelent az amerikai otthon jövőjének elképzelésében. A Decades Of American Homes infografika remek példa a vízszintes görgetésre, és itt jól jön.
6. A marketingelemzés fejlődése
Az Evolution of Insight infografikájában a Vision Critical felhasználói intelligencia-cég nyomon követi a marketingtechnológiai piac fejlődését szerte a világon az 1890-es évektől napjainkig. A Hogyan változtak az amerikai otthonok infografikához hasonlóan működik, és így lehetővé teszi az interaktív idővonal használatának hatékonyságának összehasonlítását két nagyon különböző történethez. A Decades Of American Homes infografika azzal az előnnyel jár, hogy vezetés közben láthatja az otthonokat, ami sokkal intuitívabb, mint a Great American Analytics segítségével utazni. A jó infografikák a tartalom körül jönnek létre, nem körülötte.
7. LMBT jogok szerte a világon
A The Guardian újabb helyet foglal el listánkon ezzel a remek infografikával, amely az LMBT-jogok jogi helyzetét magyarázza számos kérdésben (házasság, munkahelyi diszkrimináció, gyűlölet-bűncselekmények stb.) a világ minden államában. A félkörben való mozgás gyors és egyszerű módot kínál a statisztikák összehasonlítására különböző országokban, és az infografika kompozíciója elöl és középen tartja a globális állapotot. Itt van egy erőteljes cselekvésre való felhívás is, amelynek célja a tudatosság és az aktivizmus közötti szakadék áthidalása.
8. Az egyenlőtlenség javítható.
Egy másik nagyszerű példa az interaktív infografikára, az Inequality Is Fixable, amely arra kéri a közönséget, hogy merüljön el egy kérdésben, miközben mélyen személyessé teszi azt. A nézőt garantáltan továbbra is érdeklik az olyan anyagok, amelyek elmondják neki, hogy főnöke mennyivel és miért alulfizet. Azáltal, hogy a felhasználót a történet részévé teszik, a fejlesztők felkeltik a kíváncsiságot, és végigvezetik a felhasználót az összes szükséges lépésen egészen a cselekvésre való felhívásig.
– Hagytuk, hogy megtörténjen – hogyan tudnánk most megjavítani?
9. Rajzold le magad: Hogyan jósolja meg a család jövedelme a gyermek esélyeit az egyetemre
A listán szereplő infografikák közül sok animációt és interaktivitást használ, hogy gazdag élményt nyújtson. Ez a New York Times infografika (You Draw It: How Family Income Predicts Children's College Chances) vizuálisan a klasszikus diagramformátumhoz ragaszkodik, de a felhasználói viselkedés megértését is felhasználja az infografika tervezésének hatókörének kiterjesztésére, nevezetesen a proaktív technikára. és interaktív vizualizáció. Azzal, hogy megkérik az olvasókat, hogy rajzolják meg saját görbéjüket, bevezetik az önérdek elemét, és így valóban értékes információkkal látják el az embereket.
Nem a legrosszabb eredmény! A függőleges tengely azon gyerekek százalékos aránya, akik főiskolára jártak. Vízszintes tengely: szülői jövedelem százalékos
10. Hogyan halnak meg az amerikaiak
A címkép kivételével ez a példa többnyire egyszerű régi diagramokat használ a tartalom megjelenítéséhez. De ez egyáltalán nem unalmas, mivel a felhasználók önállóan navigálhatnak az adatok között, a kurzort a grafikonok mentén mozgatva. Így sokkal könnyebb összehasonlítani például a 70-es évek öngyilkossággal összefüggő halálozásainak számát a jelenlegihez képest (tipp: ez most növekszik), amit egy statikus diagram nem csinálna olyan jól.
11.
Mióta a Snowfall debütált széles körben és dicséretben, a The New York Times megőrizte kiváló hírnevét a multimédiás újságírás terén. A kiadói csapat az infografikus tervezés és a mélyreható történetmesélés kombinációjával lenyűgözően lebilincselő élményt teremt. Vannak frappánsabb példáik is, de a The Russia Left Behind egy bizonyos visszhangot kiváltó mű. Az infografika interaktív oroszországi körútként működik (térképen navigál).
12. Bond autói
Ha valaha is szeretné megtapasztalni James Bond történetét úgy, hogy megnézi az autóit, akkor köszönje meg Evans Halshaw brit autókereskedőnek a lehetőséget. Interaktív Bond Cars infografikájával felfedezheti Bond egyes autóinak márkáját és kialakítását, valamint néhány pluszt érdekes tények. A mindenütt jelenlévő csúszka-taktika segítségével az autó teljes fémes pompájában is "feltárható" (alapértelmezés szerint csak egyszínű dizájn van megadva). Így oldották meg kreatívan a szerzők azt a problémát, hogy az infografika esztétikájához nem egészen passzoló fényképeket kell beilleszteni.
13. A mozgás színei
A Colours Of Motion egy infografikus sorozat, amely kizárólag az összes képkocka kombinálásából származó színpalettájuk alapján elemzi a filmeket. Ha valaha is töprengett, most megvan a válasz. Nem talál címet az adatbázisban? Csak küldjön üzenetet a fejlesztőknek – elfogadják a kéréseket.
14. Királyi sír Peruban
A National Geographic meglehetősen lenyűgöző gyűjteményt tartalmaz az úgynevezett "interaktív grafikákról" (amelyek többségét részletes szöveges leírások kísérik, mint például a Traianus-oszlop), de ezt a viszonylag egyszerű példát választottuk, hogy kiemeljük a technikák igazán hatékony alkalmazását. interaktív infografikák. A „Peru királyi Wari sírja” egy akkori nemesasszony temetésének sajátosságait tárja elénk. A hangsúly a múmia csomagolásáról a díszítésére és helyzetére kerül. Azáltal, hogy az információkat apró darabokra osztja, és lehetővé teszi a felhasználó számára, hogy navigáljon közöttük, az interaktív grafika elkerüli a legalattosabb buktatókat: adattúlterhelést és vizuális effektusok. Sőt, minden további interakció fokozza az élményt, így sokkal kifizetődőbb, mintha mindent egyszerre mutatnánk be. Agyunk rendelkezik egy olyan mechanizmussal, amely elutasítja a túlnyomó ingereket, és ezt a típust Az interakció kiváló megoldássá válik a felhasználó számára, megkönnyítve az információk befogadását.
15. Mi az a „skót népszavazás”? Magyarázat nem briteknek
A The Guardian, akárcsak a New York Times, elkötelezett a multimédiás újságírás mellett, videójuk pedig remekül teljesíti az infografika egyik fő funkcióját: a nehézkes információkat kezelhető formába hozni. Sokunk számára, akik az Egyesült Királyságon kívül élünk, a népszavazás nagyon zavaros téma. Szerencsére ez a videó (Scottish Referendum Explained For Non-Brits) segít gyorsan megismerni a fontos szempontokat anélkül, hogy mélyre kellene merülnie a történelemben.
16. Közegészségügy
Az Atlanti-óceán küldetése az volt, hogy víziót dolgozzon ki a közegészségügy javítására. A Truth Labs megbízásából dolgozzon ki egy 3 részes sorozatot a „Népesség egészségéről” digitális történetmesélésre. A művész fő célja az volt, hogy megőrizze a dokumentum természetes görgetését és a felhasználó normál olvasási élményét, miközben vizuális szempontból eltérő élményt teremt. A vízió életre keltése érdekében eszközöket és stratégiákat kölcsönöztek a filmből, de egy sor tervezési elvre is támaszkodtak az olvashatóság, mint kulcsfontosságú szabály támogatására.
17. Joho szemcséi
Az osztrák kávégyártó, a Joho's létrehozta a magával ragadó multimédiás élményt, a Joho's Bean-t, hogy elmesélje a kávébab eredetét. A narratíva zökkenőmentesen ötvözi a hangot, a videót és a fényképet, hogy a felhasználó szinte minden érzékszervét lekösse egy kávéültetvény, hallod a madarak csiripelését, a pörkölt kávészemek zacskóba csomagolt hangját, valamint a nyüzsgő utcák és a forgalom zaját a városban.
A Joho's elvezeti Önt egy utazásra, amely elmagyarázza a szemes kávé eredetét
18. Érintetlen út
A The Wild Path egy interaktív utazási élmény, amelyet a Canvas segítségével hoztak létre. A fő elem a térkép, amely az oldal görgetése közben animálja az útvonalat a térképen. Előfordulhat, hogy a projekt nem működik minden böngészőben. De mellékelve van egy cikk, amely elmagyarázza az infografikák létrehozásának kulisszatitkait.
19.
A The Guardian tudósítása a 2016-os amerikai elnökválasztásról (élő választási eredmények) szórakoztató elemet hozott a szavazók számával és a szavazóhelyiségekkel kapcsolatos komoly üzletbe. Egy interaktív infografika négy államban követte nyomon a szavazatokat. A grafikon alapértelmezés szerint az egész országra vonatkozóan mutatta az eredményeket, és ha a felhasználó a térképen egy terület fölé vitte az egérmutatót, akkor azt mutatta, hogy a jelöltek ott milyen számokat szereztek. Az elnökjelölteket vicces pixeles avatarként mutatták be. Mivel az infografika valós időben frissült, az emberek a megnyert állapotokat színezték. Időnként egy-egy idézet jelent meg egy buborékban a jelölt mellett.
A választási eredmények valós idejű tükrözése
Az adatvizualizáció jövője interaktív.
De hogyan készíthetsz igazán lenyűgöző interaktív infografikákat?
Infografika mindenhol megtalálható, és utóbbi időben egyre inkább interaktívvá válik.
A mai cikkben megosztjuk Önnel az interaktív infografikák készítésének titkait, valamint hasznos forrásokra mutató hivatkozásokat.
1. Értsd a pszichológiát
Mielőtt interaktívvá tesz egy infografikát, fontos megértenie, miért szeretné interaktívvá tenni.
Amint az ebben az infografikában részletezi, az emberek jobban érzékelik a vizuális információkat. Sokkal nagyobb valószínűséggel fogunk elolvasni, megérteni és emlékezni egy prezentációra, ha vonzó látványvilága van. van hatékony eszköz edzés, de még jobbá válhat.
A kinetikus tanulás nagyszerű alternatíva, mert az emberek jobban tanulnak a fizikai tevékenységek révén.
Ezért kell hozzáadni az interaktivitást ígéretes terület A vizualizáció segít még emlékezetesebb és hatékonyabb infografikák létrehozásában.
A vizuális és kinetikai megközelítés kombinációja az animált infografikákat a jövő tartalmává teszi. Természetesen bizonyos témáknál jobb, ha nem használunk interaktív elemeket, de a legtöbb esetben csak javítják a tartalmat.
A mozgás értelmet ad az információnak, lehetővé teszi a felhasználó számára, hogy irányítsa az élményt, és olyan módon vonzza be a képzeletét, ahogy a statikus infografikák nem képesek.
2. Görgetési effektusok hozzáadása
Chip virtuális valóság az, hogy mások számára idiótának fogsz tűnni
A Google Cardboard Design Lab egy jó „oktatóanyag” kezdő virtuális valóság-tervezőknek
Infografika – mint egy kalandjáték
A Unity problémája az, hogy nem olyan egyszerű jót tenni a web számára.
A virtuális valóság olyan, mint a fejhallgató a szemed számára
A virtuális valóság biztonságos környezetet igényel, nem mehet bele „menet közben”. Ez korlátozza azt, amit a VR képes tenni
Az ülést a nap első felében lezártuk Archie Tse a The New York Times-tól a „Miért csinál kevesebb interaktív munkát a NYT” provokatív témával.
A NYT munkája a vizuális történetmesélés három szabályán alapul:
- Ha az olvasónak kattintania kell görgetés helyett, akkor valami szokatlannak kell történnie.
- Tételezzük fel, hogy az eszköztippeket és bármely más lebegő effektust soha senki nem fogja látni. Ha a tartalom fontos, győződjön meg róla, hogy az olvasó azonnal látja.
- Ha interaktívvá szeretne tenni valamit, ne feledje, hogy költséges lesz minden platformon működni.
Kétszer vagy háromszor újra kell rajzolnia a grafikát, hogy az asztali számítógépen és mobileszközön is működjön
Hogyan változtatták meg ezek a szabályok a NYT megközelítését:
- A legtöbb vizualizáció most már statikus
- Több szöveg is van
- Ha a képen mozgásra van szükség, az görgetés közben megjelenik
(A negyedik pontban az áll, hogy továbbra is interaktív munkát végeznek. De most az ok NAGYON értelmesnek kell lennie).
„Több lépést” csináltunk. A felhasználók megálltak a 3. lépésnél. Az olvasók csak görgetni akarnak, nem kattintani
Archie Tse: Görgetés vs. kattintással
Az elmúlt 18 hétben Andy Kriebel minden vasárnap este közzétette az infografikát és az annak alapjául szolgáló adatokat a VizWiz-en. A feladat az, hogy hétfőn szánj rá körülbelül egy órát, gyorsan elemezd a vizualizációt és készítsd el a saját verziódat.
Az alábbiakban a múlt hét eredményeit közöljük - Rabszolgaság a 21. században.
#MakeoverMonday, Andy Kriebel. Részletes leírásés interaktív - Andy blogján:
#MakeoverMonday, Andy Cotgreave. Részletes leírás és interaktív - Andy blogján:
Azt is megtudtam, hogy a világon az emberek 51%-a fiatalabb nálam, Oroszországban pedig 63%-a idősebb, és nem olyan nagy az esélye annak, hogy most meghalok. A számok hirtelen megszűntek „statisztika” lenni, és megütöttek engem.
Adatvizualizáció - nagy adathalmazokat használ kevesebb kézi tervezési munkával; algoritmusok alapján. Például a New York Times interaktív munkája.
Vizuális művészet - egyirányú kódolás. Gyönyörű, de nehezen megfejthető vizualizációk, mint például Kunal Anand számítógépes művészete.
mi a probléma?
Ennek eredményeként sok mű csak a kifinomult felhasználókat vonzza, de nem engedi, hogy az avatatlan olvasók megértsék a probléma lényegét, ezzel megsemmisítve a vizualizáció célját - a nyilvánosság tájékoztatását. Ezért olyan fontos felismerni és megérteni a vizuális műveltség problémáját a vizualizáció kontextusában.
Az újságírás új „vizuális nyelvtana”.
Íme három olyan mű, amely az interaktív újságírás bemutatásának módjaival kísérletezik. Lenyűgözőnek tűnnek, de értelmezésük sokak számára nehéz feladat lehet.
A melegjogok az Egyesült Államokban, államról államra
A ma rendelkezésre álló adatforrások és feldolgozó eszközök száma egyértelműen mutatja, hogy még soha ennyien nem próbáltak megszokni az adatvizualizáció világát. És amikor ilyen sok anyag áll rendelkezésre tanulmányozásra, akkor csak egy kérdés van – Hol kezdjem? minden újonc számára megfélemlítő lehet. Tehát melyik könyvtár a legjobb, és mit ajánlanak a szakemberek? Erről lesz szó ebben a cikkben.
Adatvizualizációról beszélni és nem említeni ugyanaz, mint a teremtés történetéről beszélni személyi számítógépekés egy szót se szóljon Steve Jobsról. A D3 (Data Driven Documents) túlzás nélkül a legfontosabb és piacdomináns nyílt forráskódú JavaScript-könyvtár, amelyet általában SVG-grafikák készítésére használnak. Az SVG (az angol Scalable Vector Graphics szóból) viszont egy formátum vektoros kép, amelyet a webböngészők támogatnak, de korábban alig használtak.
A D3 könyvtár népszerűségét nagyrészt annak köszönheti, hogy a webdizájnerek hirtelen felkeltették az érdeklődést az SVG iránt, ami nagyrészt annak tudható be, hogy a vektorgrafika milyen jól néz ki a nagyfelbontású képernyőkön (különösen az Apple készülékekben használt Retina kijelzőkön), amelyek egyre inkább terjednek. közös.
„Legyünk őszinték, ha a probléma az SVG-alapú adatvizualizáció, akkor az összes többi könyvtár közel sincs a megoldásához” – mondja Moritz Stefaner, független adatvizualizációs szakértő és cégtulajdonos. Igazság és szépség. „Vannak is jó néhányan érdekes projektek, amely a D3 alapján készült, például az NVD3, amely szabványos grafikus komponenseket biztosít - használatra kész, de testreszabható; vagy tegyük fel, hogy a Crossfilter egyszerűen egy kiváló adatszűrő eszköz.”
Scott Murray programozó tervező és könyvszerző Interaktív adatvizualizáció a weben, egyetért az előző véleménnyel: „A D3 rendkívül erős, mert kihasználja mindazt, amit a böngészők kínálnak. Bár az is van hátoldal: Ha a böngésző nem támogat valamit, például a WebGL alapú 3D képeket (az angol Web Graphics Library-ből), akkor a D3 nem támogatja."
És bár ez a könyvtár valóban univerzális, mégsem az ideális megoldás bármilyen feladatra. „A D3 könyvtár fő hátránya, hogy úgy mondjam, az, hogy nem ír elő, sőt nem is javasol semmilyen különleges megközelítést a vizualizációhoz” – teszi hozzá Scott Murray. "Tehát ez valóban egy eszköz az adatok böngészőbe való betöltésére, majd az adatok alapján DOM-összetevők generálására."
Míg a D3 nagyszerű eszköz az egyéni képek készítéséhez, ha szabványos grafikont szeretne létrehozni anélkül, hogy a vizuális szemponton sokat kellene dolgoznia, akkor találhat egy olyan eszközt, mint pl. Vega. A D3 tetején kifejlesztett keretrendszerként a Vega alternatívát kínál a grafikus komponensek megjelenítésére. A Vega segítségével megjelenítheti az adatokat JSON formátumban az Európai Újságírás Központban és az Adatvezérelt Újságírás projektben. A tanfolyam pontos időpontja még nem ismert, de már lehet jelentkezni.
Öt nap alatt a tanfolyam résztvevői megtanulhatják, mi az az adatújságírás, hogyan működik, és milyen kulcsfontosságú készségeket kell elsajátítaniuk ahhoz, hogy e terület specialistájává váljanak. Találja ki, hol keressen olyan adatokat, amelyek alátámasztják történeteit, és hogyan találhat új ötleteket a meglévő adatokban. Tanulja meg az unalmas adatok lenyűgöző történetté, infografikává vagy akár interaktív vizualizációvá alakításának művészetét. Ismerkedjen meg a grafikai tervezés alapelveivel, amelyeket egy újságírónak tudnia kell.
A tanfolyam oktatói a világ öt vezető szakértője az adatújságírás és -vizualizáció területén.
