Ο πλήρης οδηγός σχεδιασμού κινούμενων σχεδίων Ιστού

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

Στην ουσία, χρειάζεται μόνο 0.05 δευτερόλεπτα μετά τη φόρτωση της σελίδας σας για τους επισκέπτες να σχηματίσουν μια γνώμη. Πιο συγκεκριμένα, αυτό μεταφράζεται σε 50 χιλιοστά του δευτερολέπτου. Παραδόξως σύντομο, σωστά;

Εντάξει, μερικά από αυτά θα φύγουν. Αλλά άλλοι μπορεί να επιλέξουν να μείνουν.

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

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

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

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

Αποδεικνύεται ότι όλα ξεκινούν με τον web designer. Στην πραγματικότητα, μια μελέτη που εξέτασε εκτενώς ένα ευρύ φάσμα σχολίων από τους καταναλωτές το απέδειξε 94% των αρνητικών σχετίζονται με το σχεδιασμό.

Τι σημαίνει αυτό;

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

Μιλώ για πράγματα όπως web animations.

Και γιατί το προτείνουμε συγκεκριμένα;

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

Τα βασικά των Web Animations

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

Λοιπόν, είναι και τα δύο βασικά παραδείγματα κινούμενων σχεδίων.

Η ζωτικότητα εμφανίζεται ουσιαστικά όταν ένα ακίνητο στοιχείο «ζωντανεύει». Στη συνέχεια αρχίζει να παρουσιάζει κάποια μορφή κίνησης.

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

Ωστόσο, ένα πράγμα παρέμεινε σταθερό - οι αρχές του animation. Στην πραγματικότητα, οι Disney's Ollie Johnston και Frank Thomas έγραψαν αργότερα για αυτά στο βιβλίο τους,Η ψευδαίσθηση της ζωής: Disney Animation". Εδώ είναι η πλήρης λίστα:

  • Έφεση
  • Στερεό σχέδιο
  • Υπερβολή
  • Συγχρονισμός
  • Δευτερεύουσα δράση
  • Τόξο
  • Αργή και αργή
  • Παρακολούθηση και επικάλυψη δράσης
  • Ευθεία δράση και πόζα για πόζα
  • Σκαλωσιά
  • Πρόβλεψη
  • Σκουός και τέντωμα

Οι δώδεκα εξακολουθούν να παρέχουν το πλαίσιο για το σχεδιασμό κινούμενων σχεδίων σήμερα, συμπεριλαμβανομένων εκείνων που δημοσιεύονται στον Ιστό ως βίντεο, WebGL, SVG, CSS και GIF.

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

Και αυτό θέτει το ερώτημα - πότε υποτίθεται ότι πρέπει να χρησιμοποιείτε κινούμενα σχέδια;

Πότε πρέπει να χρησιμοποιείτε κινούμενα σχέδια Ιστού;

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

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

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

Λοιπόν, πότε πρέπει να τα αξιοποιήσετε;

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

Πώς;

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

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

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

Εργαλεία Animation Ιστού

Είστε έτοιμοι να ξεκινήσετε τη δημιουργία κινούμενων σχεδίων Ιστού; Τέλειος! Αλλά, από πού πρέπει να ξεκινήσετε;

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

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

  • js
  • 3D Lines Animation με Three.js
  • js
  • Flubber
  • Έγχρωμο κινούμενο σχέδιο
  • jqClouds
  • Scrollissimo
  • Cel-animation
  • js
  • js
  • Κινούμενα σχέδια CSS3
  • Μετασχηματισμός-πότε
  • js
  • Ρέλαξ
  • AOS
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Στυλί
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • Είδος αεριωθούμενης μηχανής
  • Δυνατό χτύπημα
  • Ανακάτεψέ το
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Saffron
  • CSShake
  • css
  • js
  • Ρόκα
  • Διαμετακόμιση
  • css
  • js
  • Popmotion
  • GSAP από την GreenSock
  • js
  • js
  • CSS Animate
  • Είναι Τρίτη
  • Εύστροφος
  • js
  • js
  • js
  • js
  • js
  • Περίμενε! Εμψυχος
  • Κίνηση UI
  • js
  • Lazy Line Ζωγράφος
  • js
  • js
  • js
  • AnijS
  • js
  • Μαγικές κινούμενες εικόνες
  • css

Σχεδιασμός Web Animations

Δείχνουν τα εφέ

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

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

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

Ιστορικό κινούμενα σχέδια

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

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

Κινούμενες εικόνες σε στυλ GIF

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

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

Μεταβατικά κινούμενα σχέδια

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

Πιστώσεις εικόνας: Shutterstock

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

Φόρτωση κινούμενων σχεδίων

Το γεγονός είναι- 47% των καταναλωτών στο διαδίκτυο αναμένεται να φορτώσουν οι ιστοσελίδες σας σε τουλάχιστον 2 δευτερόλεπτα. Εάν δεν το πετύχετε αυτό, κάθε επιπλέον δευτερόλεπτο μεταφράζεται σε 7% λιγότερες μετατροπές.

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

Εστιάστε στη δημιουργία απλών που είναι αρκετά ελαφριά ώστε να φορτώνουν σχεδόν αμέσως η επισκεψιμότητα μεταφέρεται στον ιστότοπό σας. Πρέπει να έχουν σχεδιαστεί έτσι ώστε να εισάγουν συστηματικά τους επισκέπτες στη μάρκα και στο γενικό θέμα του ιστότοπου.

Κινούμενες εικόνες που ενεργοποιούνται με κύλιση

Μελέτες παρακολούθησης ματιών απέδειξαν ότι οι χρήστες του ιστότοπου ξοδεύουν περίπου 57% του χρόνου τους στο πάνω μέρος. Όμως, αποδεικνύεται ότι πολλοί από αυτούς είναι πρόθυμοι να μετακινηθούν προς τα κάτω - αρκεί να παρέχετε μια ευνοϊκή δομή και μηχανισμό σχεδίασης.

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

Κινούμενα σχέδια πλοήγησης και μενού

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

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

Γκαλερί και παρουσιάσεις

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

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

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

Συμπέρασμα

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

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

Η εικόνα της κεφαλίδας είναι ευγενική προσφορά του Alfrey Davilla | βανελτία

Μπογκντάν Ράνσα

Ο Bogdan είναι ιδρυτικό μέλος του Inspired Mag, έχοντας συγκεντρώσει σχεδόν 6 χρόνια εμπειρίας κατά τη διάρκεια αυτής της περιόδου. Στον ελεύθερο χρόνο του αρέσει να μελετά την κλασική μουσική και να εξερευνά εικαστικές τέχνες. Είναι επίσης πολύ παθιασμένος με τους fixies. Έχει ήδη 5.