Περιεχόμενο
- ΜΗΝ διατηρείτε τα πράγματα σύμφωνα με τα συστήματα σχεδιασμού
- ΜΗΝ συμπεριλάβετε κινούμενα σχέδια για χάρη του
- Σκεφτείτε διαφορετικές συσκευές
- ΜΗΝ επιβάλλετε κινούμενες εικόνες στους χρήστες
- Δώστε προσοχή στα υπάρχοντα διανοητικά μοντέλα
- ΜΗΝ ξεχνάτε το κοινό σας
- ΜΗΝ κολλήσετε στο Transform και την αδιαφάνεια
- ΜΗΝ κάνετε πολύ κινούμενες εικόνες
Τελικά φτάνουμε σε ένα στάδιο όπου οι επωνυμίες αναγνωρίζουν τη δύναμη του web animation. Έχουμε ήδη συγκεντρώσει τα καλύτερα παραδείγματα κινουμένων σχεδίων CSS και σας δείξουμε πώς να τα κωδικοποιήσετε, αλλά σε αυτό το άρθρο θα μοιραστούμε μερικές κορυφαίες συμβουλές για να αξιοποιήσετε περισσότερο τα έργα σχεδίασης διεπαφής χρήστη.
Η Lisi Linhart είναι ένας δημιουργικός προγραμματιστής που ειδικεύεται στη δημιουργία διαδραστικών, κινούμενων πραγμάτων στον ιστό (δείτε τη φάλαινα που αλλάζει χρώμα παραπάνω στη δράση). Στο Pixel Pioneers, ανέβηκε στη σκηνή για να εξηγήσει στο κοινό πώς να διατηρήσει την απόδοση των κινούμενων σχεδίων σε προγράμματα περιήγησης και να παρουσιάσει τις διάφορες επιλογές κινούμενης εικόνας που έχουμε σήμερα στον Ιστό. Στη συνέχεια, επικοινωνήσαμε μαζί της για να ακούσουμε μερικές ακόμη κορυφαίες συμβουλές.
ΜΗΝ διατηρείτε τα πράγματα σύμφωνα με τα συστήματα σχεδιασμού
Η Linhart παρατήρησε μια αύξηση στη χρήση συστημάτων σχεδιασμού για να βοηθήσει στον έλεγχο της χρήσης κινούμενων σχεδίων σε ένα έργο. Αυτά τα συστήματα περιγράφουν και ορίζουν τα είδη κινούμενων σχεδίων που εμφανίζονται σε διαφορετικούς τύπους σελίδων σε έναν ιστότοπο - για παράδειγμα, στις σελίδες προϊόντων.
"Η συνεκτικότητα γίνεται πιο σημαντική και η συνολική προβολή όλων των κινούμενων σχεδίων σας είναι επίσης σημαντική", συνοψίζει ο Linhart.
ΜΗΝ συμπεριλάβετε κινούμενα σχέδια για χάρη του
"Πολλοί άνθρωποι ενσωματώνουν κινούμενα σχέδια, αλλά δεν σκέφτονται τη χρησιμότητα των κινούμενων σχεδίων", λέει ο Linhart. "Η διαπίστωση του στόχου που έχει ένα κινούμενο σχέδιο και αν είναι πραγματικά χρήσιμο είναι πολύ σημαντικό, αντί να δημιουργείτε ένα κινούμενο σχέδιο για να έχετε κινούμενα σχέδια."
Τα συστήματα σχεδιασμού μπορούν επίσης να είναι επωφελώς. Όταν αποφασίζετε τους διαφορετικούς τύπους κίνησης, συνδέονται με τους διαφορετικούς σκοπούς εντός της διεπαφής.
Σκεφτείτε διαφορετικές συσκευές
Ανάλογα με το ρόλο που θα παίξει η κινούμενη εικόνα στο προϊόν σας, μπορείτε να εισαγάγετε διαφορετικές προσεγγίσεις με βάση τη συσκευή που χρησιμοποιείται. Για εμπειρίες επιτραπέζιου υπολογιστή, μπορείτε να προσθέσετε εφέ που αντιδρούν σε συμβάντα ποντικιού, για παράδειγμα, ενώ μια εμπειρία κινητής τηλεφωνίας μπορεί να έχει κινούμενες εικόνες από την κίνηση της συσκευής.
Εναλλακτικά, μπορεί να θέλετε να διατηρήσετε τα πράγματα απλά, λέει ο Linhart και να δημιουργήσετε παγκόσμια κινούμενα σχέδια που συνδέονται με τη ροή εργασίας και είναι κατάλληλα ανεξάρτητα από τη συσκευή που χρησιμοποιείται.
ΜΗΝ επιβάλλετε κινούμενες εικόνες στους χρήστες
Υπάρχουν διάφοροι λόγοι για τους οποίους ένας χρήστης μπορεί να θέλει να απενεργοποιήσει την κίνηση - για παράδειγμα, η κύλιση παράλλαξης μπορεί να προκαλέσει αδιαθεσία στην κίνηση. Οι χρήστες που δεν θέλουν κινούμενες εικόνες UI μπορούν να επιλέξουν μια μειωμένη εμπειρία κίνησης στο πρόγραμμα περιήγησής τους. Χάρη στο Web Animations API, είναι πλέον εύκολο να παρέχετε μια εναλλακτική εμπειρία χρησιμοποιώντας JavaScript. μπορείτε να σταματήσετε κινούμενα σχέδια στο σχέδιό σας ή να παραλείψετε όλα τα κινούμενα σχέδια στην τελική τους κατάσταση. Τα κινούμενα σχέδια είναι υπέροχα, αλλά μην τα επιβάλλετε σε άτομα που δεν τα θέλουν!
Δώστε προσοχή στα υπάρχοντα διανοητικά μοντέλα
Υπάρχουν ορισμένα διανοητικά μοντέλα, βασισμένα στη φυσική του πραγματικού κόσμου, που υπαγορεύουν πώς περιμένουμε να συμπεριφέρονται τα αντικείμενα και πώς αντιδρούμε σε συγκεκριμένες κινήσεις. Για παράδειγμα, μια κουνιστή κίνηση θα προκαλέσει την προσοχή του χρήστη, ενώ μια αργή εξασθένιση συχνά δεν γίνεται αντιληπτή.
"Το κινούμενο σχέδιο μπορεί να χρησιμοποιηθεί σε συνδυασμό με νοητικά μοντέλα και μπορείτε να τα χρησιμοποιήσετε για να κάνετε την κινούμενη εικόνα σας καλύτερη ή για να εξηγήσετε κάτι", λέει ο Linhart. Ένα καλό μέρος για να ξεκινήσετε είναι με τις κλασικές 12 αρχές του animation.
ΜΗΝ ξεχνάτε το κοινό σας
Ο αριθμός των κινούμενων σχεδίων που συμπεριλαμβάνετε στη διεπαφή σας θα πρέπει να επηρεάζεται έντονα από το κοινό που στοχεύετε, λέει ο Linhart. Παρόλο που πολλές κινήσεις αναπήδησης θα μπορούσαν να βοηθήσουν να διατηρήσετε το νεαρό κοινό σας αφοσιωμένο και ενθουσιασμένο από το προϊόν σας, ένα ηλικιωμένο κοινό μπορεί να το αποσπά την προσοχή και να απογοητεύει καθώς προσπαθούν να απορροφήσουν το περιεχόμενο με τον δικό τους ρυθμό.
ΜΗΝ κολλήσετε στο Transform και την αδιαφάνεια
Ο Linhart εξηγεί ότι υπάρχουν τέσσερις τύποι κινούμενων σχεδίων που μπορούν να επεξεργαστούν φθηνά χρησιμοποιώντας CSS: αλλαγή της θέσης ενός αντικειμένου, κλιμάκωση του πάνω ή κάτω, περιστροφή του και αλλαγή της μεταβαλλόμενης αδιαφάνειάς του (εξασθένιση εισόδου και εξόδου). Από αυτά, το CSS Transform και το Opacity είναι τα πιο αποδοτικά. Λάβετε υπόψη αυτές τις γνώσεις κατά το σχεδιασμό των κινούμενων σχεδίων UI, για ομαλές και φιλικές προς τον χρήστη εμπειρίες.
ΜΗΝ κάνετε πολύ κινούμενες εικόνες
Η σωστή χρονική στιγμή των κινούμενων εικόνων είναι πολύ σημαντική. "Δεν πρέπει να χρονίζετε πολύ κινούμενες εικόνες, επειδή ο χρήστης σας προσπαθεί να κάνει κάτι, και αν έχετε πολύ μεγάλους χρονισμούς κινούμενων σχεδίων, αυτό θα τους εμποδίσει", επισημαίνει ο Linhart. "Επομένως, η διατήρηση σύντομων κινούμενων σχεδίων σε διεπαφές είναι σημαντική."
Υπάρχει όμως μια προειδοποίηση: αν δημιουργείτε μια μετάβαση, μπορείτε να ακολουθήσετε μια πιο αργή κίνηση, ώστε να μην προσελκύσετε περιττή προσοχή.
