Τα καλύτερα παραδείγματα χρήσης διαδραστικών infographics σε σελίδες προορισμού. Διαδραστικά infographics με κινούμενα σχέδια SVG και CSS

Πιθανότατα έχετε παρατηρήσει μια τεράστια αλλαγή στον διαδικτυακό κόσμο από περιεχόμενο που βασίζεται σε κείμενο σε οπτικό περιεχόμενο.

Δεν υπάρχει καμία αμφιβολία για τη δύναμη των εικαστικών στο Διαδίκτυο και στην καθημερινή μας ζωή. Το YouTube και το Instagram κυριαρχούνται από οπτικό περιεχόμενο. Το YouTube είναι ο τρίτος ιστότοπος με τις περισσότερες επισκέψεις στον Ιστό και το Instagram δημοσιεύει πάνω από 80 εκατομμύρια φωτογραφίες κάθε μέρα.

Οι αναρτήσεις και τα άρθρα ιστολογίου είναι 80% πιο πιθανό να καταναλωθούν εάν έχουν έγχρωμες εικόνες, τίτλους ή μικρογραφίες και οι χρήστες δεν θα περάσουν περισσότερα από 15 δευτερόλεπτα σε έναν ιστότοπο εάν δεν τραβήξει αμέσως την προσοχή τους.

Τα γραφήματα είναι αγαπημένα μεταξύ του κοινού και των εμπόρων λιανικής και είναι 800% πιο ενδιαφέροντα για τους ανθρώπους σήμερα από ό,τι το 2012.

Επιπλέον, το περιεχόμενο δημιουργείται με ανησυχητικό ρυθμό - το 60% των επαγγελματιών μάρκετινγκ δημιουργεί τουλάχιστον ένα μικρό ποσό νέου περιεχομένου κάθε μέρα! Μπορείτε να μάθετε περισσότερα από το άρθρο κριτικής.

Καθώς όλο και περισσότεροι άνθρωποι αρχίζουν να δημιουργούν περιεχόμενο, ένα πράγμα γίνεται σαφές: για να σας δουν, πρέπει να ξεχωρίζετε.

Όπως είναι φυσικό, οι έμποροι περιεχομένου σκέφτονται ήδη το μέλλον του οπτικού περιεχομένου, εξετάζοντας τι μπορούν να κάνουν τώρα, τι μπορούν να εφαρμόσουν και ποιες νέες τεχνολογίες βρίσκονται στον ορίζοντα. Αυτή η μελλοντική σκέψη είναι που μπορεί να κάνει ή να χαλάσει τις προσπάθειες μάρκετινγκ περιεχομένου σας. πρέπει να προσαρμοστείς αλλιώς θα πνιγείς.

Με οπτικό περιεχόμενο όπως τα γραφήματα, οι έμποροι έχουν μια μοναδική ευκαιρία να δουν το μέλλον καθώς πλησιάζει. Οι εταιρείες, οι γραφίστες και οι έμποροι αρχίζουν όλοι να χρησιμοποιούν τα γραφήματα και να τα ενημερώνουν για να τα κάνουν ακόμα πιο ελκυστικά στο κοινό τους. Ακόμα κι αν «απλώς δημοσιεύετε» τακτικά γραφήματα, δεν είναι ποτέ πολύ νωρίς για να μάθετε για τάσεις που μόλις αρχίζουν να αναπτύσσονται, όπως δεν είναι ποτέ πολύ νωρίς για να μάθετε πώς να τις εφαρμόζετε στις στρατηγικές μάρκετινγκ περιεχομένου σας.

Αν θέλετε να κοιτάξετε στο μέλλον και ίσως να μάθετε μερικά κόλπα πριν από όλους, τώρα είναι η ώρα!

Εδώ είναι οι τρεις τύποι γραφημάτων που θα είναι πιο συνηθισμένοι στο (εγγύς) μέλλον.

Αν ψάχνετε για ένα δροσερό εργαλείο δημιουργίας infographic, σας προτείνω να ελέγξετε το Visme. Για αρχή, προσφέρουν δωρεάν λογαριασμό και εξαιρετικές φιλικές προς το χρήστη λειτουργίες για μη σχεδιαστές. Μπορείτε να αποκτήσετε δωρεάν λογαριασμό τώρα.

1. Διαδραστικά infographics

Ενώ έχουμε δει την ομορφιά των διαδραστικών ιστότοπων και των εύχρηστων παιχνιδιών, τα διαδραστικά infographics εξακολουθούν να είναι αρκετά νέα στον τομέα τους. Όπως και τα γραφήματα, περιέχουν προφανώς κάποιες πληροφορίες και συνήθως είναι δυναμικά. Αλλά η χρήση διαδραστικών στοιχείων δίνει στους χρήστες την ευκαιρία να συνδεθούν με πληροφορίες και να δημιουργήσουν τις δικές τους.

Ανεξάρτητα από την επιχείρησή σας, το προϊόν, την υπηρεσία ή το μήνυμά σας, μπορείτε να δημιουργήσετε ένα διαδραστικό infographic που επιτρέπει στους ανθρώπους να αξιολογούν τον εαυτό τους (για παράδειγμα, "υπολογίστε εδώ τον ΔΜΣ σας"). Οι χρήστες μπορούν επίσης να κάνουν κλικ σε σχετικές πληροφορίες, οι οποίες θα τους στείλουν σε έναν πιο εμπεριστατωμένο πόρο ή θα επιστρέψουν σε μια σελίδα προορισμού, δημιουργώντας έτσι επισκεψιμότητα. Είναι ένας πολύ προσαρμόσιμος και διασκεδαστικός τρόπος να προσελκύσετε το κοινό σας.

Πολλοί έμποροι έχουν ήδη προσαρμοστεί σε αυτόν τον τύπο infographic και μεταφέρεται γρήγορα. Αλλά την ίδια στιγμή, πολλοί εξακολουθούν να παίρνουν ως βάση απλά γραφήματα:

….απλώς φανταστείτε τι άλλο μπορείτε να κάνετε με τα διαδραστικά infographics.

Μπορείτε να δοκιμάσετε:

• Χρησιμοποιώντας τεχνικές κύλισης που κάνουν τις εικόνες ή τα σχήματα να ξεχωρίζουν από το φόντο
• Κατασκευή "αναδυόμενων παραθύρων" που επεκτείνουν τις περιοχές κειμένου
• Εικόνες ή στατιστικά εμφανίζονται όταν κάνετε κλικ σε αυτά
• Μετατρέψτε τα γραφήματα σας σε πολλές σελίδες που μπορούν να δουν οι χρήστες

Για ένα πιο λεπτομερές παράδειγμα ενός διαδραστικού infographic, ρίξτε μια ματιά σε αυτό:

Για να κάνετε ένα infographic εξαιρετικά διαδραστικό (με κύλιση, αναδυόμενα παράθυρα κ.λπ.) θα χρειαστεί να μάθετε λίγα πράγματα για το HTML5 ή το CSS ή να προσλάβετε κάποιον άλλο για να το καταλάβει για εσάς.

Παρά την επιπλέον προσπάθεια, θα ανταμειφθείτε με ένα μοναδικό, συναρπαστικό και αποτελεσματικό κομμάτι περιεχομένου.

Γιατί θα πρέπει να προσπαθήσετε να εφαρμόσετε γραφήματα στο εγγύς μέλλον;

• Αυτό ενθαρρύνει το κοινό σας να αλληλεπιδράσει και να μοιραστεί το περιεχόμενό σας.
• Αυτό δημιουργεί επισκεψιμότητα (μέσω συνδέσμων)
• Αυτό αποδεικνύει στο κοινό σας ότι είστε καινοτόμοι, ευρηματικοί και σκοπεύετε να παρέχετε έγκαιρο και ενδιαφέρον περιεχόμενο.
• Υπάρχουν στρώματα διαδραστικών infographics που κάνουν την ανάπτυξή του διαχειρίσιμη

2. Ενσωματωμένο βίντεο και GIF

Αυτό είναι ένα διαφορετικό είδος γραφήματος που βλέπουμε όλο και περισσότερο σήμερα. Τα γραφήματα που προσφέρουν σύντομα βίντεο ή ακόμα και GIF (μορφή ανταλλαγής γραφικών) είναι ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή και να κάνετε το γραφικό σας να ξεχωρίζει από το πλήθος. Αν και αυτό περιορίζεται από πλατφόρμες, μπορείτε να μοιραστείτε τα γραφήματα σας σε ενεστώτα.

Πολλά απλά εργαλεία δημιουργίας infographic, όπως το Easel.ly, προσφέρουν μια επιλογή "Ενσωματωμένο βίντεο YouTube" ή μπορείτε να προσθέσετε βίντεο σε ένα infographic που δημιουργείτε στο Photoshop χρησιμοποιώντας ένα επίπεδο βίντεο. Μπορείτε ακόμη και να προσθέσετε ένα βίντεο σε μια διαφάνεια Powerpoint, την οποία μπορείτε επίσης να μετατρέψετε σε infographic.

Επιπλέον, μπορείτε να βρείτε εκατομμύρια GIF στο διαδίκτυο και να τα εισάγετε με τον ίδιο τρόπο. Το πρόβλημα εδώ είναι ότι θα πρέπει να διανείμετε το infographic σας ως URL για να διασφαλίσετε ότι είναι σωστά ενσωματωμένο στον ιστότοπό σας. Δεν μπορείτε να διανείμετε ή να αποθηκεύσετε τέτοια γραφήματα σε μορφή .jpeg ή PDF. Χωρίς αμφιβολία, καθώς αυτό γίνεται πιο δημοφιλές, θα υπάρχουν και άλλα εργαλεία εισαγωγής βίντεο και GIF που θα κάνουν τη διαδικασία ακόμα πιο εύκολη.

Αλλά αν θέλετε να χρησιμοποιήσετε αυτόν τον τύπο infographic πριν μάθουν όλοι οι γύρω σας, ακόμα και οι σκύλοι τους, ξεκινήστε τώρα με τα εργαλεία που βρίσκετε στο διαδίκτυο.

Αν θέλετε να το πάτε στο επόμενο επίπεδο, μπορείτε να κάνετε ένα βίντεο από ένα infographic που έχετε ήδη. Αυτή είναι μια εξαιρετική ευκαιρία να εμφανιστείτε στο YouTube, στο Instagram, ακόμη και σε πλατφόρμες βίντεο όπως το Vimeo, το Snapchat και άλλες. Το παρακάτω βίντεο είναι ένα εξαιρετικό παράδειγμα για το πώς να μετατρέψετε ένα infographic σε βίντεο.

Γιατί να ενσωματώσετε ένα βίντεο ή ένα GIF σε ένα γράφημα;

• Αυτό σας δίνει ένα στοιχείο έκπληξης - οι άνθρωποι δεν περιμένουν ότι η εικόνα θα μετακινηθεί!
• Είναι πολύ διασκεδαστικό και πρωτότυπο, γεγονός που αυξάνει την πιθανότητα οι άνθρωποι να αλληλεπιδράσουν και να μοιραστούν το infographic σας.
• Αυτός είναι ένας καλός τρόπος για να δείξετε σε όλους τη μοναδικότητα της επωνυμίας σας.

3. Κινούμενα infographics

Τα κινούμενα infographics έχουν τεράστιο αριθμό οπτικών μοτίβων και απαιτούν πολλή προσοχή. Όταν ένας χρήστης βλέπει μια σελίδα, συνήθως δεν περιμένει τίποτα να μετακινηθεί, επομένως είναι καλή ιδέα να μάθετε όλες αυτές τις τεχνικές πριν από όλους.

Επειδή πολλά κινούμενα infographics είναι αρκετά περίπλοκα και μπορεί να απαιτούν κάποιο είδος γραφιστικής, κωδικοποίησης ή/και γνώσης λογισμικού, εκτιμώνται ιδιαίτερα.

Εδώ είναι ένα παράδειγμα αυτού για το οποίο μιλάω:

Εάν θέλετε να μάθετε περισσότερα σχετικά με το πώς να δημιουργείτε κινούμενα infographics, ρίξτε μια ματιά σε αυτό το γράφημα από το Tabletop Whale. Μπορείτε επίσης να βρείτε διάφορες υπηρεσίες που σας βοηθούν να δημιουργήσετε τέτοια γραφήματα. Σε κάθε περίπτωση, αυτή είναι μια από τις πιο δύσκολες διαδικασίες στην εξέλιξη των infographics.

Γιατί πρέπει να επενδύσετε τον χρόνο, την ενέργεια ή/και τα χρήματά σας στη δημιουργία κινούμενων γραφημάτων;

• Αυτό θα σας κάνει πραγματικά να ξεχωρίζετε από το πλήθος, επειδή δεν έχουν όλοι πρόσβαση σε αυτό το είδος λογισμικού ή περιεχομένου
• Σε λίγα μόλις χρόνια αυτό θα είναι συνηθισμένο - θα είστε από τους πρώτους που θα το κάνουν!
• Η κινούμενη εικόνα θα κάνει τις πληροφορίες μέσα στο infographic πιο αξέχαστες
• Αυτό θα εμπνεύσει τους χρήστες σας να συνεργαστούν μαζί σας.

Αυτό δεν είναι επιστημονική φαντασία.

Αυτό μπορεί να ακούγεται πολύ τεχνικό και πέρα ​​από τις δυνατότητές σας αυτή τη στιγμή, αλλά είναι πιθανό ότι αυτού του είδους τα γραφήματα θα γίνουν πολύ συνηθισμένα σε 2-3 χρόνια. Μπορούμε ήδη να δούμε μια σημαντική ανακάλυψη στα κινούμενα infographics και τα GIF, ειδικά καθώς τα GIF συνεχίζουν να αυξάνονται σε δημοτικότητα. Τα γραφήματα γίνονται ένας από τους πιο καταναλωμένους και πιο συχνά δημιουργούμενους τύπους περιεχομένου στο Διαδίκτυο. Γιατί; Ναι, γιατί ο εγκέφαλος χρειάζεται μόνο 250 χιλιοστά του δευτερολέπτου για να αποδεχτεί και να επεξεργαστεί την έννοια ενός συμβόλου.

Εάν ο μέσος άνθρωπος αφιερώνει περίπου 15 δευτερόλεπτα σε έναν ιστότοπο και μετά αρχίζει να βαριέται, τότε φυσικά θέλετε να τραβήξετε οτιδήποτε στην οθόνη μπορεί να τον κρατήσει πίσω - ή τουλάχιστον να λάβετε ένα μήνυμα σε 15 δευτερόλεπτα ή λιγότερο. Μερικές μελέτες έχουν ακόμη αποδείξει ότι οι άνθρωποι μπορούν να συγκεντρωθούν σε κάτι για όχι περισσότερο από 8 δευτερόλεπτα, και αυτό το ποσοστό μειώνεται κάθε χρόνο.

Αυτός είναι ο λόγος και ίσως ένα υποπροϊόν της διαρκούς ανάγκης μας να λαμβάνουμε πληροφορίες. Ζούμε στην εποχή της πληροφορίας και όλες οι πληροφορίες είναι διαθέσιμες σε εμάς. Αλλά αυτό σημαίνει επίσης ότι όσο περισσότεροι άνθρωποι προσπαθούν να μοιραστούν μηνύματα και να απαντήσουν σε κάθε πιθανή ερώτηση, τόσο περισσότερο το περιεχόμενο που παράγεται γίνεται θόρυβος παρασκηνίου.

Εάν η διαθεσιμότητα των γραφημάτων σήμερα είναι κάποια ένδειξη, σύντομα θα είναι παντού. Αυτό σημαίνει νέες αλλαγές στη δουλειά σας. Καμία εκστρατεία μάρκετινγκ στην ιστορία δεν έχει επιτύχει κάνοντας το ίδιο πράγμα συνέχεια.

Η ιδέα εδώ είναι να δείτε το infographic ως κάτι περισσότερο από μια απλή εικόνα jpeg. Τα γραφήματα μπορούν να προσαρμοστούν σε διαφορετικά μέσα και να χρησιμοποιηθούν σε μια τεράστια ποικιλία πλατφορμών. Οι επιχειρηματίες και οι έμποροι έχουν ήδη δει τις δυνατότητες σε αυτό. Τι γίνεται με εσάς;

Τα τελευταία χρόνια, τα infographics έχουν εξελιχθεί από στατικές εικόνες σε πλούσιες, διαδραστικές εμπειρίες με κινούμενα σχέδια και στοιχεία βίντεο προσαρμοσμένα σε μοναδικό περιεχόμενο. Δεν περιορίζεται πλέον σε προκατασκευασμένα πρότυπα που ταιριάζουν σε όλα. Και η σημερινή επιλογή περιέχει τα καλύτερα παραδείγματα infographics που δείχνουν πώς μοιάζει μια ενδιαφέρουσα και ενημερωτική εμπειρία.

Τα περισσότερα από τα γραφήματα σε αυτήν τη λίστα επιλέχθηκαν για να δείξουν τους διαφορετικούς τρόπους με τους οποίους οι σχεδιαστές προσεγγίζουν την οπτικοποίηση δεδομένων. Ωστόσο, υπάρχουν επίσης μερικά «υβρίδια» εδώ που απεικονίζουν τη θόλωση των γραμμών μεταξύ των γραφημάτων και των εμπειριών εμπλουτισμένων μέσων κατά τη δημιουργία ελκυστικού περιεχομένου και συναρπαστικών ιστοριών σε σελίδες προορισμού. Η απόκλιση από τις παραδοσιακές φόρμες σημαίνει ότι εισερχόμαστε σε πιο σύνθετο έδαφος μέσων ενημέρωσης και είναι αυτό το είδος πειραματισμού με την τεχνολογία και την αφήγηση που θα είναι κρίσιμο για τη διαμόρφωση του μέλλοντος της γραφιστικής.

1. Ανεμικός χάρτης

Ο Wind Map είναι ένα εντυπωσιακό σχέδιο που δείχνει την κατεύθυνση και την ταχύτητα του ανέμου πάνω από τις Ηνωμένες Πολιτείες. Αυτό το σχέδιο έχει έναν καλλιτεχνικό και όχι χρηστικό σκοπό και αυτό είναι υπέροχο: είναι πολύ ευχάριστο να κάθεσαι και να παρακολουθείς πώς οι λεπτές, λεπτές κλωστές τυλίγονται στον χάρτη. Ένα απλό αλλά καλά μελετημένο παράδειγμα του τρόπου με τον οποίο τα infographics που δείχνουν τροχιές σχήματος επωφελούνται από κινούμενα σχέδια και κινούμενες εικόνες.

2. Κατά την πτήση

Το 2014, ο Guardian κυκλοφόρησε ένα infographic με το όνομα In Flight, το οποίο έδειχνε δεδομένα σε πραγματικό χρόνο για εμπορικές πτήσεις (δεν φαίνεται να ενημερώνεται πλέον, κάτι που είναι κρίμα) και περιλάμβανε επίσης ένα μάθημα για την ιστορία της αεροπορίας. Οι σιωπηλές συνομιλίες μεταξύ των αεροπορικών πληρωμάτων κατά την έναρξη της διαδραστικής εκπομπής δημιουργούν μια ιδιαίτερη ατμόσφαιρα. Φαίνεται ότι τα infographics μετατρέπονται σιγά σιγά σε κινηματογραφικές εμπειρίες αυτές τις μέρες. Τουλάχιστον το "In Flight" δείχνει προς αυτή την κατεύθυνση...

3. Dial Moon

Δεν συμβαίνουν πολλά στο infographic Dial A Moon, αλλά εξυπηρετεί πολύ καλά τον σκοπό του. Το 2015, χάρη στη NASA, τα γραφήματα των σεληνιακών φάσεων ενημερώνονταν κάθε ώρα και δεν χρειαζόταν να πηγαίνετε στο Google για να αναζητήσετε αυτές τις μυστηριώδεις πληροφορίες. Τώρα μπορείτε να προβάλετε φωτογραφίες εισάγοντας χειροκίνητα τον μήνα, την ημέρα και την ώρα.

4. Ημέρα με τον Πλούτωνα

Το περιοδικό Nature δημοσιεύει πολλά ενδιαφέροντα infographics για το κοινό του που ενδιαφέρεται για την επιστήμη. Μεταξύ αυτών ήταν και ένα για το διάσημο πέρασμα ενός διαστημικού σκάφους κοντά στον Πλούτωνα (24 Hours Of Pluto). Το infographic περιελάμβανε πολλές πληροφορίες κειμένου, αλλά τα γραφικά διευκόλυναν την κατανόηση των σημαντικότερων σημείων, από τη δομή ενός πλανήτη νάνου έως τη διαδικασία με την οποία σχηματίστηκαν τα φεγγάρια του. Το τμήμα κειμένου είναι πλέον διαθέσιμο στο Διαδίκτυο, καθώς και δύο κινούμενα βίντεο από το infographic.

5. Πώς έχουν αλλάξει τα αμερικανικά σπίτια

Κάντε ένα ταξίδι στο μεγάλο αμερικανικό όνειρο όπως αντικατοπτρίζεται μέσα από την εξέλιξη των οικιακών στυλ. Αυτό το καλά εικονογραφημένο infographic σάς επιτρέπει να μπείτε πίσω από το τιμόνι ενός αυτοκινήτου (το οποίο αλλάζει επίσης την εμφάνισή του καθώς μετακινείστε για να συμβαδίσετε με την εποχή) και να περιηγηθείτε από τη δεκαετία του 1900 έως τη δεκαετία του 2000, προσπερνώντας κτίρια που ήταν δημοφιλή κατά τη διάρκεια μεμονωμένων δεκαετιών. Στην πορεία, θα συναντήσετε ένα πλήθος χρήσιμου υλικού (συμπεριλαμβανομένων των κοινωνικοπολιτικών συνθηκών της εποχής, καθώς και των τάσεων της μόδας) και όλα τελειώνουν με μια ερώτηση που σας προκαλεί να φανταστείτε το μέλλον του αμερικανικού σπιτιού. Το Infographic Decades Of American Homes είναι ένα εξαιρετικό παράδειγμα οριζόντιας κύλισης και είναι χρήσιμο εδώ.

6. Η εξέλιξη του marketing analytics

Στο infographic Evolution of Insight, η εταιρεία πληροφοριών χρηστών Vision Critical παρακολουθεί την ανάπτυξη της αγοράς τεχνολογίας μάρκετινγκ σε όλο τον κόσμο από τη δεκαετία του 1890 έως σήμερα. Λειτουργεί παρόμοια με το infographic How American Homes Have Changed, και έτσι σας επιτρέπει να συγκρίνετε την αποτελεσματικότητα της χρήσης ενός διαδραστικού χρονοδιαγράμματος για δύο πολύ διαφορετικές ιστορίες. Το infographic Decades Of American Homes έχει το πλεονέκτημα να βλέπεις σπίτια καθώς οδηγείς, κάτι που είναι πολύ πιο διαισθητικό από το να ταξιδεύεις μέσω του Great American Analytics. Τα καλά infographics δημιουργούνται γύρω από το περιεχόμενο, όχι γύρω από αυτό.

7. Δικαιώματα LGBT σε όλο τον κόσμο

Ο Guardian κατακτά άλλη μια θέση στη λίστα μας με αυτό το εξαιρετικό infographic που εξηγεί το νομικό τοπίο των δικαιωμάτων LGBT σε μια σειρά ζητημάτων (γάμος, διακρίσεις στο χώρο εργασίας, εγκλήματα μίσους κ.λπ.) σε κάθε πολιτεία του κόσμου. Η ημικυκλική κίνηση παρέχει έναν γρήγορο και εύκολο τρόπο σύγκρισης στατιστικών στοιχείων μεταξύ διαφορετικών χωρών και η σύνθεση του infographic διατηρεί την παγκόσμια κατάσταση μπροστά και στο επίκεντρο. Υπάρχει επίσης ένα ισχυρό κάλεσμα για δράση εδώ, με στόχο να γεφυρώσει το χάσμα μεταξύ ευαισθητοποίησης και ακτιβισμού.

8. Η ανισότητα διορθώνεται.

Ένα άλλο εξαιρετικό παράδειγμα ενός διαδραστικού infographic, το Inequality Is Fixable, προσκαλεί το κοινό να βουτήξει σε ένα θέμα, ενώ το κάνει βαθιά προσωπικό. Ο θεατής είναι εγγυημένο ότι θα συνεχίσει να ενδιαφέρεται για υλικό που του/της λέει πόσα χρήματα πληρώνει το αφεντικό του/της και γιατί. Κάνοντας τον χρήστη μέρος της ιστορίας, οι προγραμματιστές κεντρίζουν την περιέργεια και καθοδηγούν τον χρήστη σε όλα τα απαραίτητα βήματα μέχρι το Call-To-Action στο τέλος.

«Το αφήνουμε να συμβεί - πώς μπορούμε να το διορθώσουμε τώρα;»

9. Ζωγραφίστε μόνοι σας: Πώς το οικογενειακό εισόδημα προβλέπει τις πιθανότητες ενός παιδιού να πάει στο κολέγιο

Πολλά από τα γραφήματα αυτής της λίστας χρησιμοποιούν κινούμενα σχέδια και διαδραστικότητα για να προσφέρουν μια πλούσια εμπειρία. Οπτικά, αυτό το infographic από τους New York Times (You Draw It: How Family Income Predicts Children's College Chances) ακολουθεί την κλασική μορφή γραφήματος, αλλά χρησιμοποιεί επίσης την κατανόηση της συμπεριφοράς των χρηστών για να επεκτείνει το εύρος της σχεδίασης infographic, δηλαδή την τεχνική της προληπτικής και διαδραστική οπτικοποίηση. Ζητώντας από τους αναγνώστες να σχεδιάσουν τη δική τους καμπύλη, εισάγουν ένα στοιχείο ατομικού ενδιαφέροντος και έτσι παρέχουν στους ανθρώπους πραγματικά πολύτιμες πληροφορίες.

Όχι το χειρότερο αποτέλεσμα! Ο κατακόρυφος άξονας είναι το ποσοστό των παιδιών που πήγαν στο κολέγιο. Οριζόντιος άξονας: εκατοστημόριο γονικού εισοδήματος

10. Πώς πεθαίνουν οι Αμερικανοί

Με εξαίρεση την εικόνα τίτλου, αυτό το παράδειγμα χρησιμοποιεί κυρίως απλά παλιά γραφήματα για την οπτικοποίηση του περιεχομένου. Αλλά αυτό δεν είναι καθόλου βαρετό, καθώς οι χρήστες μπορούν να πλοηγηθούν ανεξάρτητα στα δεδομένα μετακινώντας τον κέρσορα κατά μήκος των γραφημάτων. Αυτό καθιστά πολύ πιο εύκολη τη σύγκριση, για παράδειγμα, του αριθμού των θανάτων που σχετίζονται με αυτοκτονίες τη δεκαετία του '70 σε σύγκριση με τώρα (υπόδειξη: είναι σε άνοδο τώρα), κάτι που ένα στατικό γράφημα δεν θα έκανε τόσο τακτοποιημένα.

11.

Από τότε που το Snowfall έκανε το ντεμπούτο του με μεγάλη προσοχή και επαίνους, οι New York Times διατήρησαν τη φήμη τους για αριστεία στη δημοσιογραφία πολυμέσων. Η ομάδα δημοσίευσης χρησιμοποιεί έναν συνδυασμό σχεδίασης infographic και εις βάθος αφήγησης για να δημιουργήσει μια εντυπωσιακά συναρπαστική εμπειρία. Έχουν πιο εντυπωσιακά παραδείγματα, αλλά το The Russia Left Behind είναι ένα έργο που έχει προκαλέσει κάποια απήχηση. Το infographic λειτουργεί ως μια διαδραστική περιήγηση στη Ρωσία (περιηγείστε στον χάρτη σας).

12. Τα αυτοκίνητα του Μποντ

Εάν θέλετε ποτέ να ζήσετε την ιστορία του James Bond κοιτάζοντας τα αυτοκίνητά του, τότε ευχαριστήστε τον Βρετανό έμπορο αυτοκινήτων Evans Halshaw που σας έδωσε την ευκαιρία. Το διαδραστικό του Infographic Bond Cars σάς επιτρέπει να εξερευνήσετε τη μάρκα και το σχέδιο καθενός από τα αυτοκίνητα του Bond, καθώς και μερικά πρόσθετα διασκεδαστικά στοιχεία. Χρησιμοποιώντας την πανταχού παρούσα τακτική του slider, μπορείτε επίσης να «αποκαλύψετε» το αυτοκίνητο σε όλο του το μεταλλικό μεγαλείο (μόνο ένα μονόχρωμο σχέδιο δίνεται από προεπιλογή). Έτσι οι συγγραφείς έλυσαν δημιουργικά το πρόβλημα της ανάγκης να συμπεριληφθούν φωτογραφίες που δεν ταιριάζουν απόλυτα στην αισθητική του infographic.

13. Χρώματα κίνησης

Το Colors Of Motion είναι μια σειρά infographic που αναλύει ταινίες βασισμένες αποκλειστικά στη χρωματική τους παλέτα, που προέρχεται από το συνδυασμό όλων των καρέ. Αν αναρωτηθήκατε ποτέ, τώρα έχετε την απάντηση. Δεν μπορείτε να βρείτε έναν τίτλο στη βάση δεδομένων; Απλώς στείλτε ένα μήνυμα στους προγραμματιστές - δέχονται αιτήματα.

14. Βασιλικός τάφος στο Περού

Το National Geographic διαθέτει μια αρκετά εντυπωσιακή συλλογή από αυτό που αποκαλούν "διαδραστικά γραφικά" (τα περισσότερα από τα οποία συνοδεύονται από λεπτομερείς περιγραφές κειμένου, όπως η Στήλη του Τραϊανού), αλλά επιλέξαμε αυτό το σχετικά απλό παράδειγμα για να επισημάνουμε τις χρήσεις που οι τεχνικές είναι πραγματικά αποτελεσματικές σε διαδραστικά γραφήματα. Το «Peru’s Royal Wari Tomb» αποκαλύπτει τις ιδιαιτερότητες της ταφής μιας ευγενούς εκείνης της εποχής. Η εστίαση μετακινείται από τα περιτυλίγματα της μούμιας στις διακοσμήσεις και τη θέση της. Διαιρώντας τις πληροφορίες σε μικρά κομμάτια και επιτρέποντας στον χρήστη να πλοηγηθεί μεταξύ τους, τα διαδραστικά γραφικά αποφεύγουν τις πιο ύπουλες παγίδες: υπερφόρτωση δεδομένων και οπτικά εφέ. Επιπλέον, κάθε επόμενη αλληλεπίδραση ενισχύει την εμπειρία, καθιστώντας την πολύ πιο ανταποδοτική από ό,τι αν τα πάντα παρουσιάζονταν ταυτόχρονα. Ο εγκέφαλός μας έχει έναν μηχανισμό που απορρίπτει τα συντριπτικά ερεθίσματα και αυτό το είδος αλληλεπίδρασης γίνεται μια εξαιρετική λύση για τον χρήστη, επιτρέποντας την εύκολη απορρόφηση πληροφοριών.

15. Τι είναι το «Σκοτσέζικο Δημοψήφισμα»; Εξήγηση για μη Βρετανούς

Ο Guardian, όπως και οι New York Times, είναι αφοσιωμένος στη δημοσιογραφία πολυμέσων και το βίντεό τους κάνει εξαιρετική δουλειά σε μία από τις κύριες λειτουργίες των infographics: βάζει τις περίπλοκες πληροφορίες σε διαχειρίσιμη μορφή. Για πολλούς από εμάς που ζούμε εκτός του Ηνωμένου Βασιλείου, το δημοψήφισμα είναι ένα πολύ συγκεχυμένο θέμα. Ευτυχώς, αυτό το βίντεο (Scottish Referendum Explained For Non-Brits) θα σας βοηθήσει να μάθετε γρήγορα για τις σημαντικές πτυχές χωρίς να σας απαιτεί να βουτήξετε βαθιά στην ιστορία.

16. Δημόσια υγεία

Η αποστολή του Atlantic ήταν να αναπτύξει ένα όραμα για τη βελτίωση της δημόσιας υγείας. Ανέθεσε στην Truth Labs να αναπτύξει μια σειρά 3 μερών για την «Υγεία του πληθυσμού» σε ψηφιακή αφήγηση. Ο κύριος στόχος του καλλιτέχνη ήταν να διατηρήσει τη φυσική κύλιση του εγγράφου και την κανονική εμπειρία ανάγνωσης του χρήστη, δημιουργώντας παράλληλα μια εμπειρία που διαφέρει από οπτική άποψη. Για να ζωντανέψουν το όραμα, δανείστηκαν εργαλεία και στρατηγικές από την ταινία, αλλά βασίστηκαν επίσης σε ένα σύνολο αρχών σχεδιασμού για να υποστηρίξουν την αναγνωσιμότητα ως βασικό κανόνα.

17. Οι κόκκοι του Joho

Ο αυστριακός παραγωγός καφέ Joho's δημιούργησε μια καθηλωτική εμπειρία πολυμέσων, το Joho's Bean, για να πει την ιστορία της προέλευσης του κόκκου του καφέ μια φυτεία καφέ, ακούτε, τον ήχο των πουλιών που κελαηδούν, τον ήχο των καβουρδισμένων κόκκων καφέ που συσκευάζονται σε σακούλες και ο ήχος των πολυσύχναστων δρόμων και της κίνησης στην πόλη.

Το Joho's σας ταξιδεύει εξηγώντας την προέλευση των κόκκων καφέ τους

18. Παρθένος δρόμος

Το Wild Path είναι μια διαδραστική εμπειρία ταξιδιού που δημιουργήθηκε χρησιμοποιώντας το Canvas. Το κύριο στοιχείο είναι ο χάρτης, ο οποίος ενεργοποιεί τη διαδρομή στον χάρτη καθώς κάνετε κύλιση στη σελίδα. Το έργο ενδέχεται να μην λειτουργεί σε όλα τα προγράμματα περιήγησης. Έρχεται όμως με ένα συνοδευτικό άρθρο που εξηγεί όλες τις παρασκηνιακές τεχνολογίες για τη δημιουργία γραφημάτων.

19.

Η κάλυψη του Guardian για τις προεδρικές εκλογές των ΗΠΑ του 2016 (Ζωντανά Αποτελέσματα Εκλογών) έφερε ένα διασκεδαστικό στοιχείο στη σοβαρή υπόθεση των αριθμών εκλογών και των εκλογικών τμημάτων. Ένα διαδραστικό infographic παρακολουθούσε ψήφους σε τέσσερις πολιτείες. Από προεπιλογή, το γράφημα έδειχνε αποτελέσματα για ολόκληρη τη χώρα και αν ο χρήστης τοποθετούσε το δείκτη του ποντικιού πάνω από μια περιοχή στον χάρτη, έδειχνε ποιους αριθμούς σημείωσαν εκεί οι υποψήφιοι. Οι προεδρικοί υποψήφιοι παρουσιάστηκαν ως αστεία pixelated avatar. Καθώς το infographic ενημερωνόταν σε πραγματικό χρόνο, οι άνθρωποι χρωματίστηκαν στις πολιτείες που κέρδισαν. Από καιρό σε καιρό, ένα απόσπασμα εμφανιζόταν σε μια φυσαλίδα δίπλα στον υποψήφιο.

Αντανάκλαση των εκλογικών αποτελεσμάτων σε πραγματικό χρόνο

Η Testix δημοσιεύει μια μετάφραση του άρθρουΡόμπι Ρίτσαρντς . Πρωτότυπο:Πώς να φτιάξετε ένα διαδραστικό Infographic (Οδηγός 6 σημείων)

Μία από τις μεγαλύτερες προκλήσεις που αντιμετωπίζουν οι έμποροι σήμερα είναι ο αγώνας για τη δημιουργία ελκυστικού περιεχομένου.

Οι αλγόριθμοι αναζήτησης αλλάζουν συνεχώς σε μια προσπάθεια να φιλτράρουν περιεχόμενο χαμηλής ποιότητας. Τούτου λεχθέντος, αυτό οδηγεί σε τεράστιες αλλαγές στις στρατηγικές δημιουργίας περιεχομένου.

Ορισμένες μάρκες έχουν αλλάξει σε μακροχρόνιες...

...ή το είδος του περιεχομένου που προωθεί ο Μπράιαν Ντιν με την «Τεχνική του Ουρανοξύστη».

Το αποτέλεσμα είναι μια έκρηξη περιεχομένου που πλημμυρίζει το Διαδίκτυο. Σήμερα, περισσότερα από 2 εκατομμύρια άρθρα δημοσιεύονται καθημερινά μόνο σε ιστολόγια.

Αυτό το επίπεδο κορεσμού περιεχομένου έχει προκαλέσει μια δραματική αλλαγή στις στρατηγικές των εταιρειών.

Τα τελευταία χρόνια, πολλοί έχουν εργαστεί για να διαφοροποιήσουν το περιεχόμενό τους προσθέτοντας άλλες μορφές — όπως τα γραφήματα. Γεγονός: Τα γραφήματα σημείωσαν εκρηκτική ανάπτυξη καθ' όλη τη διάρκεια του 2016, με το 58% των επαγγελματιών μάρκετινγκ να τα κατατάσσουν μεταξύ των κορυφαίων τακτικών που χρησιμοποιούν για να προσελκύσουν κοινό.

Για παράδειγμα, ορισμένοι έμποροι πιστεύουν ότι η δημιουργία γραφημάτων απαιτεί ορισμένες επαγγελματικές δεξιότητες ή έναν ακριβό γραφίστα. Αλλά αυτό δεν είναι αλήθεια.

Δεν χρειάζεστε μια αποκλειστική ομάδα ανάπτυξης όταν έχετε πλατφόρμες* που προσφέρουν ένα σύνολο εργαλείων που κάνουν τη δημιουργία διαδραστικού περιεχομένου ταχύτερη και ευκολότερη.

Σε αυτό το άρθρο, θα δείτε ότι τα διαδραστικά infographics δεν είναι μόνο εύκολο να δημιουργηθούν — είναι ακόμη πιο αποτελεσματικά στο να προσελκύσουν το κοινό σας από τα στατικά γραφήματα και να μετατρέψουν τους αναγνώστες σας σε πιθανούς πελάτες.

Γιατί τα διαδραστικά infographics ξεπερνούν τα στατικά αντίστοιχά τους.

Η ιδέα ενός infographic είναι απλή: συσκευάστε όσο το δυνατόν περισσότερη αξία σε ένα κομμάτι περιεχομένου για τους αναγνώστες και οπτικοποιήστε το για να τους προσελκύσετε καλύτερα.

Για αυτό ακριβώς δημιουργήθηκε αυτό το διαδραστικό infographic.

Ο γραφικός σχεδιασμός ταιριάζει απόλυτα τόσο με την πλοκή της ιστορίας όσο και με το σύνολο δεδομένων. Βρίσκεσαι να ταξιδεύεις με 3.000 χιλιόμετρα την ώρα, περνώντας δίπλα από τον Διεθνή Διαστημικό Σταθμό μέχρι την κορυφή της ροής που αποτελείται από 21,9 δισεκατομμύρια φωτογραφίες που δημοσιεύτηκαν στο Instagram μέσα σε ένα χρόνο.

Δείτε τι πρέπει να έχετε κατά νου όταν επιλέγετε ένα οπτικό θέμα για το διαδραστικό σας infographic:

• Βοηθούν οι εικόνες και τα διαδραστικά στοιχεία να ζωντανέψουν τα δεδομένα;
• Πόσο καλά αντικατοπτρίζουν οι εικόνες, τα κινούμενα σχέδια και τα στοιχεία σχεδίασης την επωνυμία σας, καθώς και οποιεσδήποτε άλλες επωνυμίες που συνεργάστηκαν μαζί σας για τη δημιουργία του περιεχομένου;
• Πού θα ζουν τα διαδραστικά γραφικά; Εάν πρόκειται να εμφανιστεί στον ιστότοπό σας, μπορεί να θέλετε το σχέδιο να ταιριάζει με το θέμα ή τα πρότυπα του ιστότοπού σας.
• Βεβαιωθείτε ότι η ιδέα της οπτικοποίησης είναι σχετική με το κοινό, τη βιομηχανία και την ιστορία σας. Ένα infographic διακοπών σε θέρετρο θα έχει ένα εντελώς διαφορετικό οπτικό στυλ από μια εκδήλωση προώθησης στελεχών.

Ένα άλλο εξαιρετικό παράδειγμα είναι αυτό το infographic από τον Joho Bean:

Οδηγεί τον χρήστη σε μια ασυνήθιστη περιπέτεια πολυμέσων, χρησιμοποιώντας ζουμερά πλάνα, και αφηγείται την ιστορία του ταξιδιού των κόκκων καφέ από τον τόπο ωρίμανσης στον καταναλωτή.

Οι ενέργειες του χρήστη θα πρέπει να δημιουργούν μια απάντηση

Τα διαδραστικά infographics θα πρέπει να είναι διαδραστικά, αλλά αυτό δεν σημαίνει ότι θα πρέπει να περιορίζονται σε μεμονωμένα στοιχεία με δυνατότητα κλικ.

Κάθε ενέργεια χρήστη θα πρέπει να δημιουργεί κάποιου είδους απόκριση εντός του περιεχομένου, έτσι ώστε το όλο θέμα να δημιουργεί μια πραγματικά προσωπική εμπειρία — ακόμη κι αν είναι απλώς μια απλή κύλιση σελίδας.

Όχι μόνο κρυφό περιεχόμενο αναγκάζει τον αναγνώστη να συμμετέχει ενεργά στην εκμάθηση του περιεχομένου, ενθαρρύνει την περιέργεια και επιτρέπει επίσης στους αναγνώστες να παραλείψουν ενότητες που δεν τους ενδιαφέρουν λίγο.

Εξατομικεύστε το περιεχόμενο με τη συμβολή του χρήστη

Μπορείτε να εγγυηθείτε πολύ μεγαλύτερη αφοσίωση εάν προσφέρετε δεδομένα στους χρήστες με βάση τις πληροφορίες που εισάγουν. Αυτό ταιριάζει με αυτό που θέλουν οι χρήστες: θέλουν περισσότερο διαδραστικό περιεχόμενο και περισσότερη εξατομίκευση.

Ένα εκπληκτικό παράδειγμα αυτού είναι ένα εξατομικευμένο infographic που δίνει πληροφορίες για το εάν η εργασία σας μπορεί να κινδυνεύει να αυτοματοποιηθεί από ρομπότ:

Οι χρήστες πρέπει να επιλέξουν ένα επάγγελμα που τους ενδιαφέρει για να λαμβάνουν σχετικές πληροφορίες.

Συμπεριλάβετε γραφικές φόρμες για τη συλλογή πληροφοριών

Σε αυτό το σεμινάριο θα μάθουμε πώς να χτίζουμε διαδραστικά infographics χρησιμοποιώντας SVG, CSS και JavaScript. Ένα από τα λιγότερο συζητημένα θέματα είναι η τάση των νέων προγραμμάτων περιήγησης να αυξάνουν την υποστήριξη για αρχεία SVG. Σε αντίθεση με τις εικόνες ράστερ όπως PNG, JPG ή GIF, τα διανυσματικά γραφικά σε αρχεία SVG είναι πλήρως επεκτάσιμα σε οποιοδήποτε μέγεθος και εμφανίζονται σε οποιαδήποτε ανάλυση ή πυκνότητα οθόνης χωρίς απώλεια ποιότητας. Σε πολλές περιπτώσεις, τα αρχεία SVG είναι πολύ μικρότερα σε μέγεθος και φορτώνονται πιο γρήγορα. Αλλά το ενδιαφέρον πράγμα που ορισμένοι προγραμματιστές δεν συνειδητοποιούν είναι ότι το SVG βασίζεται στην προδιαγραφή XML και μπορεί να εφαρμοστεί με παρόμοιο τρόπο με την HTML.

Αυτό σημαίνει επίσης ότι μπορούμε να έχουμε πρόσβαση και να χειριστούμε τα γραφικά και τα στοιχεία σε ένα αρχείο SVG χρησιμοποιώντας τεχνολογίες CSS και JavaScript με τις οποίες είναι ήδη εξοικειωμένοι οι προγραμματιστές ιστού. Οι προγραμματιστές μπορούν τώρα να δημιουργήσουν μερικά αρκετά εντυπωσιακά κινούμενα σχέδια και εφέ χρησιμοποιώντας SVG. Σήμερα θα εξερευνήσουμε τη δύναμη του SVG δημιουργώντας διαδραστικά διανυσματικά infographics για τον Ιστό. Μπορείτε να δείτε το demo ή να κατεβάσετε τον πηγαίο κώδικα κάνοντας κλικ στους συνδέσμους κάτω από την παρακάτω εικόνα. Ας ξεκινήσουμε.

Προετοιμασία του αρχείου SVG

Υπάρχουν πολλοί τρόποι για να δημιουργήσετε γραφικά SVG. Ενώ είναι δυνατό να δημιουργήσουμε SVG με χειροκίνητη κωδικοποίηση, θα θέλουμε για πιο σύνθετα γραφικά να έχουμε κάποιο είδος διανυσματικού λογισμικού που μπορεί να εξάγει σε μορφή SVG. Μια δημοφιλής επιλογή μεταξύ των περισσότερων σχεδιαστών μπορεί να είναι η γνωστή Adobe Illustrator, αλλά υπάρχουν και άλλες δημόσια διαθέσιμες εφαρμογές, για παράδειγμα, Inkscape,που μπορεί να είναι πιο κατάλληλο για τους σκοπούς μας.

Ανεξάρτητα από το λογισμικό που επιλέγετε, η δυνατότητα ομαδοποίησης αντικειμένων μαζί και η δυνατότητα ονομασίας αυτών των ομάδων ( γράφοντας χαρακτηριστικά αναγνωριστικού) παραμένει απαραίτητη. Αυτό μας επιτρέπει να οργανώσουμε το SVG μας σε μια σωστή ιεραρχία, στην οποία μπορούμε αργότερα να έχουμε πρόσβαση χρησιμοποιώντας CSS ή/και JavaScript. Το Illustrator και το Inkscape έχουν τη δυνατότητα να το κάνουν επιλέγοντας πολλά στοιχεία γραφικών μεταβαίνοντας στο Αντικείμενο > Ομάδα (ή Κατάργηση ομαδοποίησης - κατάργηση ομαδοποίησης)από το κεντρικό μενού.

Σε οποιοδήποτε αντικείμενο ή ομάδα μπορεί στη συνέχεια να εκχωρηθεί ένα όνομα, το οποίο γίνεται το χαρακτηριστικό id της ομάδας ή του αντικειμένου κατά την εξαγωγή, επομένως αποφύγετε κενά, ειδικούς χαρακτήρες και διπλότυπα.

Στο Illustrator αυτό μπορεί να γίνει στον πίνακα Layers ( στρώματα).Απλώς βρείτε το αντικείμενο που θέλετε να ονομάσετε στον πίνακα, κάντε διπλό κλικ στο πεδίο του επιπέδου και εισαγάγετε το αναγνωριστικό που θέλετε. Σε χρήση Inkscape Αντικείμενο > Ιδιότητες αντικειμένουπίνακα για την εκχώρηση αναγνωριστικού σε ένα αντικείμενο ή ομάδα. Αυτό μπορεί επίσης να γίνει με Επεξεργασία > Επεξεργασία XMLπίνακα όπου μπορείτε να καταχωρήσετε όχι μόνο id, αλλά και τάξεις.

Στο παράδειγμά μας, όταν αποθηκεύουμε το αρχείο SVG και το ανοίγουμε σε ένα πρόγραμμα επεξεργασίας κειμένου, θα έχει την ακόλουθη δομή:

id="background" > id="bg-lines-left" > < /g> id="bg-lines-right" > < /g> < /g> id = "λογότυπο" > < /g> id="quote" > id="quote-left-brace" > < /g> id="quote-right-brace" > < /g> id="quote-text" > < /g> < /g> id = "χρονοδιάγραμμα" > id="καφές" > id="coffee-bar" /> id="coffee-arrow" /> id="coffee-time" > < /g> id="coffee-badge" > id="coffee-circle" /> id="coffee-title" > < /g> id="coffee-details" > < /g> < /g> < /g> id="σχεδιασμός" > id="design-bar" /> id="design-arrow" /> id="design-time" > < /g> id="design-badge" > id="design-circle" /> id="design-title" > < /g> id="design-details" > < /g> < /g> < /g> id = "κατασκευή" > id="build-bar" /> id="build-arrow" /> id = "χρόνος κατασκευής" > < /g> id = "build-badge" > id="build-circle" /> id = "build-title" > < /g> id = "build-details" > < /g> < /g> < /g> id = "παράπονο" > id="complain-bar" /> id="complain-arrow" /> id="complain-time" > < /g> id="complain-badge" > id="complain-circle" /> id = "complain-title" > < /g> id="complain-details" > < /g> < /g> < /g> id = "μπύρα" > id="beer-bar" /> id="beer-arrow" /> id="beer-time" > < /g> id="beer-badge" > id="beer-circle" /> id="beer-title" > < /g> id="beer-details" > < /g> < /g> < /g> < /g>

Η σήμανση παραπάνω μας δείχνει τη δομή στην οποία επιδιώκουμε.

Όπως μπορούμε να δούμε στη σήμανση SVG, κάθε ετικέτα υποδεικνύει μια νέα ομάδα αντικειμένων που μπορούν να βρίσκονται μέσα σε άλλες ομάδες. Φυσικά, κατά τη δημιουργία SVG, δεν είναι απαραίτητο να ορίσετε ένα αναγνωριστικό για κάθε αντικείμενο/ομάδα, αλλά αυτό θα είναι πιο βολικό για μετέπειτα πρόσβαση μέσω CSS ή JavaScript και θα είναι πιο εύκολο να αναγνωριστεί στη σήμανση.

Φόρτωση SVG σε HTML χρησιμοποιώντας JAVASCRIPT

HTML

Υπάρχουν τρόποι συμπερίληψης ή τοποθέτησης SVG σε HTML. Αυτό είναι δυνατό μέσω της χρήσης μιας ετικέτας , ετικέτα , ή χρησιμοποιώντας την ιδιότητα background-image του CSS. Για τους σκοπούς μας, χρειαζόμαστε πρόσβαση στο DOM μέσα στο SVG. Θα χρησιμοποιήσουμε HTML5. Το SVG θα φορτωθεί απευθείας στη σελίδα χρησιμοποιώντας jQuery.

Αρχικά, ας δημιουργήσουμε ένα μπλοκ div στο έγγραφο HTML:

JavaScript

Τώρα, χρησιμοποιώντας τη φόρτωση jQuery, θα φορτώσουμε το αρχείο SVG στο μπλοκ #stage και θα του εκχωρήσουμε την κλάση svgLoaded, την οποία θα χρησιμοποιήσουμε για να ενεργοποιήσουμε την κινούμενη εικόνα:

$(function () ( $("#stage" ) .load ("interactive.svg" ,function (response) ( $(this ) .addClass ("svgLoaded" ) ; εάν // Βεβαιωθείτε ότι το εκτελείτε σε διακομιστή web ή τοπικό κεντρικό υπολογιστή! } } ) ; } ) ;

Σπουδαίος: Φορτώνουμε το SVG χρησιμοποιώντας JavaScript για να αποκτήσουμε πρόσβαση στο DOM του. Το Chrome (και πιθανώς άλλα προγράμματα περιήγησης) δεν σας επιτρέπουν να το κάνετε αυτό τοπικά. αυτό θα λειτουργήσει μόνο όταν εκτελείται με πρωτόκολλο HTTP για λόγους ασφαλείας.

CSS

Λάβετε υπόψη ότι το CSS σε αυτό το σεμινάριο δεν θα περιέχει προδιαγραφές προγράμματος περιήγησης, αλλά τα αρχεία θα περιέχουν.

Πρώτα απ 'όλα, καθορίζουμε μερικά στυλ για το μπλοκ div. Κατά τη φόρτωση ενός SVG, το αρχείο πρέπει να ταιριάζει στο μέγεθος του μπλοκ, επομένως είναι σημαντικό να ορίσετε το μέγεθος του μπλοκ ώστε να ταιριάζει με το μέγεθος του καμβά SVG.

#stage (πλάτος : 1024 px ; ύψος : 1386 px ; )

Styling SVG Elements: Ρύθμιση "transform-origins"

Το κλειδί για να ζωντανέψετε στοιχεία μέσα στον καμβά βρίσκεται στην ιδιότητα transform-origin. Από προεπιλογή, όλοι οι μετασχηματισμοί σε οποιοδήποτε στοιχείο σε ένα SVG προέρχονται από τον καμβά SVG (0px, 0px). Για οποιοδήποτε στοιχείο επιθυμούμε να μετασχηματίσουμε (π.χ. κλίμακα, περιστροφή), πρέπει να ορίσουμε μια κατάλληλη προέλευση μετασχηματισμού σε σχέση με την αριστερή και την επάνω πλευρά του καμβά SVG. Η πηγή θα είναι διαφορετική για κάθε στοιχείο ανάλογα με το επιθυμητό εφέ/κινούμενη εικόνα, αλλά στις περισσότερες περιπτώσεις θα είναι ίση με το κεντρικό σημείο όπου το στοιχείο είναι ήδη τοποθετημένο. Αυτό μπορεί να είναι αρκετά κουραστικό, αλλά είναι πιο εύκολο να αντιγράψετε απλώς τις πληροφορίες συντεταγμένων που παρέχονται στο διανυσματικό μας πρόγραμμα επεξεργασίας.

#coffee (transform-origin: 517px 484px ; ) #coffee-badge (transform-origin: 445px 488px; ) #coffee-title (transform-origin: 310px 396px ; ) #coffee-origin: 1px4 #design ( transform-origin: 514px 603px ; ) #design-badge (transform-origin: 580px 606px ; ) #design-title (transform-origin: 712px 513px ; ) #design-details (transform-origin: 0px6) #build (transform-origin: 511px 769px; ) #build-badge (transform-origin: 445px 775px; ) #build-title (transform-origin: 312px 680px; ) #build-details (transform-origin: 310px;7) #complain ( transform-origin: 512px 1002px ; ) #complain-badge (transform-origin: 586px 1000px ; ) #complain-title (transform-origin: 718px 921px ; ) #complain:transforms.17px #beer (transform-origin: 513px 1199px; ) #beer-badge (transform-origin: 444px 1193px; ) #beer-title (transform-origin: 313px 1097px; ) ) #beer-details (transform-origin: 316px 1202px ; )

Εφαρμογή κάποιων αρχικών μετασχηματισμών

Πρέπει να ορίσουμε αρχικά στυλ για να αλλάξουμε τη θέση ορισμένων αντικειμένων. Πρέπει επίσης να κρύψουμε ορισμένα αντικείμενα που δεν θέλουμε να δείξουμε μέχρι να τοποθετήσουμε το δείκτη του ποντικιού πάνω τους.

Για να το κάνουμε αυτό θα χρησιμοποιήσουμε επιλογείς CSS. Επιλέγουμε κυρίως αντικείμενα με id “επιθήματα”.

[ id$=σήμα] ( /* Οποιοδήποτε στοιχείο με αναγνωριστικό που τελειώνει σε "κονκάρδα" */ transform: scale(0 . 5 , 0 .5 ) ; ) [ id$=title] (transform: scale(1 . 8 ) translate(0px, 48px) ; ) [ id$=details] (transform: scale(0 , 0 ) ;)

Προσθήκη στυλ για :hover και εφαρμογή μεταβάσεων

Επιλέγουμε τα στοιχεία μέσα στην αιωρούμενη ομάδα και τα επαναφέρουμε στην αρχική τους θέση. Στη συνέχεια ορίζουμε τη μετάβαση 0,25 δευτ για ένα δροσερό εφέ κινουμένων σχεδίων.

#timeline > g:hover [ id$=badge] , #timeline > g:hover [ id$=details] ( transform: scale(1 , 1 ) ; ) #timeline > g:hover [ id$=title] (transform : scale(1) translate(0px, 0px) ) [id$=badge], [id$=title], [id$=details] (transition: transform 0.25s ease-in-out;)

Εισαγωγή στο Animation

Χρησιμοποιούμε κινούμενα σχέδια CSS. Αρχικά, θα χρειαστεί να δημιουργήσουμε μερικά βασικά καρέ για να κάνουμε κίνηση σε ορισμένες διαφορετικές ιδιότητες CSS:

@keyframes left-brace-intro ( 0 % (μετασχηματισμός: translateX(220px) ; αδιαφάνεια: 0 ;) 50 % ( αδιαφάνεια: 1 ; μετασχηματισμός: translateX(220 px ) ;) 100 % (μετασχηματισμός: translateX(0px) ;) ) @keyframes right-brace-intro ( 0 % (μετασχηματισμός: translateX(-220px) ; αδιαφάνεια: 0 ;) 50 % ( αδιαφάνεια: 1 ; μετασχηματισμός: translateX(-220px ) ;) 100 % ( μετασχηματισμός: translateX(0px ) ; ) ) @keyframes fade-in ( 0 % (αδιαφάνεια: 0; ) 100 % ( αδιαφάνεια: 1 ; ) ) @keyframes grow-y ( 0 % (μετασχηματισμός: κλίμακαY(0) ;) 100 % ( μετασχηματισμός: scaleY(1 ) ; ) ) @keyframes grow-x ( 0 % (μετασχηματισμός: κλίμακαX(0) ;) 100 % ( transformation: scaleX(1 ) ; ) ) @keyframes grow ( 0 % (μετασχηματισμός: κλίμακα(0, 0) ;) 100 % (μετασχηματισμός: κλίμακα (1 , 1 ) ; ) )

Δημιουργία μιας ακολουθίας κινούμενων σχεδίων

Μπορούμε να χρησιμοποιήσουμε επιλογείς με βάση την κλάση svgLoaded που χρησιμοποιήσαμε νωρίτερα.

Για να ορίσουμε την ακολουθία κινούμενων εικόνων, θα ορίσουμε την ιδιότητα animation-delay και θα ορίσουμε animation-fill-mode: προς τα πίσω, έτσι ώστε το animation να έχει παύσεις.

SvgLoaded #logo ( animation: fade-in 0 .5s ease-in-out; ) .svgLoaded #quote-text ( animation: fade-in 0 .5s ease-in-out 0 .75s ; animation-fill-mode: backwards ; ) .svgLoaded #quote-left-brace ( animation: left-brace-intro 1s ease-in-out 0 .25s ; animation-fill-mode: backwards; ) .svgLoaded #quote-right-brace (κινούμενη εικόνα: δεξιά- brace-intro 1s ease-in-out 0 .25s ; animation-fill-mode: backwards ) .svgLoaded #background ( animation: grow-y 0 .5s ease-in-out 1 .25s ; transform-origin: 512px 300x ; animation-fill-mode: backwards; -of-type ( transform-origin: 458px 877px ; ) .svgLoaded #background > g:first-of-type ( transform-origin: 563px 877px ; ) .svgLoaded #coffee , .svgLoaded #design, .svgLoaded #design,Loaded. svgLoaded #complain , .svgLoaded #beer ( animation: grow 0,25s ease-in-out;

animation-fill-mode: προς τα πίσω. ) .svgLoaded #coffee ( animation-delay: 2s; ) .svgLoaded #design ( animation-delay: 2 .25s ; ) .svgLoaded #build ( animation-delay: 2 .5s ; ) .svglainlay: animationcom 2 .75s ) .svgLoaded #beer (animation-delay: 3s; )

γραμματοσειρές WEB

Εφόσον χρησιμοποιήσαμε προσαρμοσμένες γραμματοσειρές στο αρχείο SVG, πρέπει να τις συμπεριλάβουμε και στην ιστοσελίδα μας. Είναι σημαντικό να προσδιορίσετε σωστά το όνομα της γραμματοσειράς που χρησιμοποιήθηκε κατά την εξαγωγή του SVG. Ανοίγουμε το αρχείο SVG σε ένα πρόγραμμα επεξεργασίας κειμένου και απλώς βρίσκουμε το κείμενο όπου χρησιμοποιήθηκε η γραμματοσειρά και κοιτάμε την ιδιότητα font-family:

12μμ Όπως μπορούμε να δούμε, το αρχείο SVG εξήχθη χρησιμοποιώντας μια γραμματοσειρά οικογένειας γραμματοσειρών με το όνομα'LeagueGothic'

. Επομένως, πρέπει απλώς να ορίσουμε τη γραμματοσειρά web στο CSS χρησιμοποιώντας το ίδιο ακριβώς όνομα. @font-face ( font-family : "LeagueGothic" ; url ("../fonts/league-gothic/league-gothic.eot.woff"

) format("woff" );

)