12 Βασικές τάσεις κίνησης κύλισης προς προβολή
Τα στοιχεία κινούμενων σελίδων είναι πολύ κοινά σε σελίδες προορισμού και σε ιστοσελίδες εκκίνησης. Αλλά δεν συζητούνται πάντοτε σε κύκλους σχεδιασμού επειδή η ιδέα του "animate on view" δεν καλύπτεται πολύ.
Χρησιμοποιώ τη φράση κύλισης προς προβολή επειδή φαίνεται σαν μια ακριβής περιγραφή. Βασικά, καθώς μετακινείτε τη σελίδα, εμφανίζονται νέα κινούμενα στοιχεία.
Δεν είναι μια τεχνική που λειτουργεί για κάθε ιστοσελίδα, αλλά προσθέτει μια ωραία πινελιά σε ορισμένες διατάξεις. Και έχω επιμεληθεί μερικά από τα αγαπημένα μου εδώ για να παρουσιάσω πώς λειτουργούν αυτά τα κινούμενα σχέδια και γιατί μπορεί να δοκιμάσετε να τα χρησιμοποιήσετε μόνοι σας.
1. Αύριο νάρκη
Στο Αύριο νάρκη στην ιστοσελίδα θα παρατηρήσετε μερικά σχετικά καλοήθη κινούμενα εφέ. Αυτά ξεθωριάζουν διάφορα κομμάτια κειμένου και CTAs σε προβολή γύρω από τη διάταξη.
Αυτό που είναι ενδιαφέρον είναι το πώς οι περισσότερες εικόνες και οι περιοχές φόντου είναι πλήρως ορατές ακόμη και κατά την πρώτη κύλιση. Πολλοί ιστότοποι χρησιμοποιούν ασπρόμαυρη κινούμενη εικόνα για την εμφάνιση εικόνων και στιγμιότυπων οθόνης ενώ διατηρούν το κείμενο ορατό.
Αυτή η μικρή διαφορά βοηθά να επιστήσουμε την προσοχή στο κείμενο καθώς ξεθωριάζει. Ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή από τους επισκέπτες που περιηγούνται.
2. Περιστρέψτε
Μια άλλη τεχνική που βλέπω συχνά είναι ότι στοχεύει το μεγαλύτερο μέρος του περιεχομένου της σελίδας για κινούμενα σχέδια σε κύλιση.
Για παράδειγμα, το Twist αρχική σελίδα εφαρμογής περιλαμβάνει ποικίλα τμήματα σελίδων και μπλοκ κειμένου που ζωντανεύουν σε & εκτός προβολής κατά τη μετακίνηση. Αυτά έχουν πολύ μαλακό φαινόμενο εξασθένησης, ώστε να είναι αισθητά αλλά όχι πολύ σκληρά.
Μερικοί επισκέπτες μπορεί να ενοχλούνται από την καθυστέρηση, αλλά δεν νομίζω ότι είναι πολύ μεγάλο. Επιπλέον, ζωντανεύει μόνο μία φορά, οπότε αν πατήσετε στο κάτω μέρος της σελίδας όλες οι κινούμενες εικόνες γίνονται.
3. Εφαρμογή νήματος
Για πολύ πιο περίπλοκα κινούμενα σχέδια δείτε το App νήματα επιβατών. Αυτός έχει κινούμενα σχέδια πολλαπλών τμημάτων και ακόμη και στοιχεία που εμφανίζονται από διαφορετικές γωνίες.
Ορισμένες από τις εικόνες επίδειξης οθόνης animate προς τα πάνω, ενώ τα συνοδευτικά πρότυπα κειμένου / BG ζωντανεύουν προς τα κάτω. Αυτό το εναλλασσόμενο στυλ είναι αρκετά μοναδικό και δεν είναι κάτι που βλέπω συχνά.
Ωστόσο, η σελίδα προορισμού είναι επίσης απίστευτα απλή και δεν υπάρχει τίποτα άλλο εδώ για να τραβήξει την προσοχή. Σε αυτή την περίπτωση τα διάφορα κινούμενα σχέδια λειτουργούν ωραία.
4. DashFlow
Από όλα αυτά τα παραδείγματα νομίζω DashFlow χρησιμοποιεί τις πιο κοινές τεχνικές κινούμενης εικόνας.
Αυτός ο προσγειωτής ζωντανεύει τις εικόνες και το κείμενο για να το δουν όλα σε μια συνεδρίαση. Είναι πραγματικά απλό και χρησιμοποιεί μια μονή στήλη διάταξη έτσι ώστε όλο το περιεχόμενο ροές κατ 'ευθείαν κάτω σε μια γραμμική διαδρομή.
Τίποτα δεν είναι ιδιαιτέρως ιδιαίτερο για αυτό το σχέδιο πέρα από την πολύ ξεκάθαρη μέθοδο κινούμενων αντικειμένων σε κύλιση. Ένα τέλειο στυλ αν έχετε έναν παρόμοιο ιστότοπο και θέλετε να κρατήσετε απλά τα κινούμενα σχέδια.
5. Quuu Promote
Quuu Προώθηση διατηρεί τα κινούμενα σχέδια στο ελάχιστο και τα χρησιμοποιεί μόνο στις περιοχές CTA.
Δεν μπορώ να πω αν αυτό αυξάνει τις μετατροπές αλλά αυτό φαίνεται να είναι ο στόχος. Όταν φορτώνετε για πρώτη φορά τη σελίδα, η επικεφαλίδα της κορυφής κινείται προς τα πάνω με μια επικλινή κινούμενη εικόνα στο CTA.
Κατά την κύλιση προς τα κάτω θα παρατηρήσετε ότι η υπόλοιπη σελίδα είναι αρκετά στατική. Αλλά στο κάτω μέρος υπάρχει ένα τελευταίο CTA πάνω από το υποσέλιδο που κινείται και τρέχει το ίδιο κινούμενο κινούμενο σχέδιο.
Παρουσιάζει ότι μπορείτε να έχετε εφέ κίνησης σε κύλιση που δεν εκτείνονται σε ολόκληρη τη σελίδα.
6. Qonto
Η αρχική σελίδα για Qonto έχει μια ενδιαφέρουσα λήψη του animation κύλισης προς προβολή. Χρησιμοποιεί τον ίδιο τύπο κινούμενης εικόνας σε ολόκληρο τον ιστότοπο και ζωντανεύει μεμονωμένα στοιχεία από την πλευρά.
Για την πλειοψηφία της σελίδας αυτό περιλαμβάνει τμήματα εικονιδίων που έχουν ένα μικρό γραφικό πάνω από κάποιο περιεχόμενο που εξηγεί τις λειτουργίες της εφαρμογής. Δεν είναι πολύ λεπτή αλλά δεν είναι υπερβολικά προφανής.
Επιπλέον, μπορείτε να βρείτε μερικά άλλα στυλ κινουμένων σχεδίων στην κεφαλίδα μαζί με ορισμένες εικόνες BG που ξεθωριάζουν. Αυτή η σελίδα είναι απλώς ένα υπέροχο παράδειγμα αυτού web animation μπορώ.
7. Πεζοπορία
Για παράδειγμα λεπτών κινούμενων εικόνων, ελέγξτε Πεζοπορώ .
Η σελίδα τους εναλλάσσεται μεταξύ κινούμενων στοιχείων και σταθερών στοιχείων. Αλλά τα εφέ κίνησης είναι γρήγορα, ώστε να μην αισθάνεστε ενοχλημένοι να περιμένετε για προβολές περιεχομένου.
Αυτή είναι η προτίμησή μου για οποιοδήποτε εφέ κίνησης σε κινούμενα σχέδια. Είναι πάντα μια όμορφη τεχνική, αλλά το χρονοδιάγραμμα πρέπει να είναι γρήγορο και στο σημείο. Κανείς δεν θέλει να περιμένει για να φτάσει στο περιεχόμενο και η Hike καταλαβαίνει σαφώς αυτό.
8. Project Fi
Αν υπάρχει κάποιος που γνωρίζει μεγάλη UX είναι το Google. Και σε όλα τα προϊόντα τους έχουν έναν τόνο σελίδων προορισμού, Project Fi είναι ένα παράδειγμα με μερικές φανταστικές κινήσεις.
Αυτά ισχύουν μόνο για εικονίδια και δεν ξεθωριάζουν, αλλά εμφανίζονται μάλλον από τα χαμηλότερα στη σελίδα. Καθώς μετακινηθείτε, θα βρείτε εικονίδια που γλιστρούν προς τα επάνω για κάθε μικρό τμήμα.
Είναι ένα αρκετά λεπτό αποτέλεσμα, αλλά προσθέτει κάποια ζωή στο σχέδιο. Και βασίζεται αποκλειστικά στη θέση του θεατή στη σελίδα, οπότε αν μεταβείτε στην κορυφή και μετακινηθείτε προς τα κάτω, θα σας υποδεχτούν τα ίδια εφέ κίνησης.
9. Βάση
ο Αρχική σελίδα CRM είναι ένα εξαιρετικό παράδειγμα απλής κινούμενης εικόνας στην εργασία. Αυτός ο ιστότοπος χρησιμοποιεί προσαρμοσμένα εφέ κίνησης για να μετακινήσετε τις εικόνες προς τα επάνω και προς τη γραμμή των ματιών του θεατή.
Με βάση τον αριθμό των σελίδων προορισμού που βλέπω καθημερινά, αυτό είναι πολύ τυπικό για αυτό που περιμένω. Δεν είναι πραγματικά μια περίπλοκη κίνηση για να αναδημιουργηθεί και δεν επηρεάζει την εμπειρία πάρα πολύ.
Ένα πράγμα που εύχομαι είναι ότι τα κινούμενα σχέδια θα φορτωθούν λίγο πιο γρήγορα. Αλλά πέρα από αυτό νομίζω ότι αυτό είναι ένα πρωταρχικό παράδειγμα της κίνησης εικόνων σε κύλιση με πολύ καθαρή διάταξη για εκκίνηση.
10. AnyList
Όλες οι καλύτερες εφαρμογές κινητής τηλεφωνίας διαθέτουν δικές τους ιστοσελίδες για προβολή. Και οι καλύτεροι αυτοί έχουν συνήθως αρκετά στυλάτες κινουμένων σχεδίων.
AnyList αναμιγνύει μερικές διαφορετικές τεχνικές μαζί σε μία σελίδα. Η εικόνα κεφαλίδας τους ζωντανεύει από κάτω από την περιοχή αποκοπής, αλλά είναι η μόνη κινούμενη κινούμενη εικόνα στη σελίδα.
Όλα τα άλλα απλά ξεθωριάζουν και όλα χρησιμοποιούν ένα αρκετά γρήγορο χρόνο φόρτωσης για το κινούμενο σχέδιο. Αυτές οι τεχνικές χρησιμοποιούνται αλλού στην περιοχή, γεγονός που της δίνει μια πιο συνεκτική αίσθηση.
11. Ernest
Το στυλ σελίδας για Ernest είναι λίγο διαφορετικό από τις άλλες σελίδες προορισμού που καλύπτω.
Χρησιμοποιεί κινούμενα σχέδια παράλλαξης για να δημιουργήσετε κίνηση σε μία διάταξη σελίδας με διαφορετικές ενότητες.
Αυτά ποικίλλουν ανάλογα με την κατεύθυνση στην οποία κινείστε αν ανεβαίνετε ή κατεβαίνετε και με ποια ταχύτητα. Επίσης, ποικίλλουν ανάλογα με την ένταση βάσει των διαφόρων τμημάτων της σελίδας.
Μπορείτε να πλοηγηθείτε χρησιμοποιώντας το μενού πλοήγησης των πλευρικών κουκίδων και αυτό γρήγορα μετακινείται γύρω από τη σελίδα σε διαφορετικές περιοχές. Είναι μια από τις λίγες τεχνικές που θα δείτε συχνά στις σελίδες parallax και σίγουρα βοηθά τον Ernest να ξεχωρίσει από το πλήθος.
12. TaxiNet
Για να δείτε τις κινούμενες εικόνες πλήρους σελίδας στη δράση, ρίξτε μια ματιά στο TaxiNet δικτυακός τόπος.
Είναι ένα smorgasbord εφέ κίνησης βασισμένο σε κύλιση που συνδέεται με εικονίδια, κείμενο, εικόνες και ακόμη και στυλ φόντου. Τα μεμονωμένα χρώματα φόντου σελίδας ζωντανεύουν προς το χρήστη με τον χρήστη, σίγουρα όχι μια τυπική τεχνική αλλά σίγουρα μια ενδιαφέρουσα.
Εάν σας αρέσει αυτό το στυλ θα μπορούσατε να εφαρμόσετε απολύτως μια παρόμοια προσέγγιση με τη δική σας σελίδα προορισμού. Απλά βεβαιωθείτε ότι έχετε κρατήσει τα κινούμενα σχέδια snappy και γρήγορα επειδή κανείς δεν θέλει να περιμένει γύρω για τακτοποιημένα κινούμενα σχέδια σας για να φορτώσει.
Αλλά αν τα κάνετε σωστά αυτά τα στοιχεία κύλισης-προς-όψη προσθέτουν ένα ωραίο αποτέλεσμα σε οποιαδήποτε σελίδα προορισμού.
