UI Animation Principles: Η Disney είναι νεκρή

Η φωτογραφία προβλεπόταν να είναι ο θάνατος της ζωγραφικής (νωρίς του Daguerreotype)

(Εάν θέλετε να λάβετε τα άρθρα μου σχετικά με την κινούμενη εικόνα του UI μέσω ηλεκτρονικού ταχυδρομείου και να τα προσθέσετε στο ενημερωτικό μου δελτίο, κάντε κλικ εδώ.)

Ένα νέο μέσο

Όταν ο Paul Delaroche αντιμετώπισε ένα Daguerreotype γύρω στο 1839, δήλωσε φημισμένα: "Από σήμερα, η ζωγραφική είναι νεκρή!"

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

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

Χρειάστηκαν σχεδόν εκατό χρόνια πριν φωτογράφοι όπως ο Ansel Adams, ο Imogen Cunningham, ο Edward Weston και άλλοι στο 'Group f / 64', πραγματοποίησαν σημαντικές διαδρομές στην οπτική γλώσσα που θέτει τη φωτογραφία εκτός από τη ζωγραφική ως ένα μοναδικό μέσο - τη γλώσσα και τις αρχές, και με αυτόν τον τρόπο, έφεραν την επανάσταση στον τομέα της φωτογραφίας.

Edward Weston, Imogen Cunningham, Ansel Adams

Η Disney λύνεται ένα διαφορετικό πρόβλημα

Ευτυχώς, βρισκόμαστε σε μια τέτοια επανάσταση στο animation UI.

Το 1981, ο Ollie Johnston και ο Frank Thomas κυκλοφόρησαν το Disney Animation: The Illusion of Life και εισήγαγαν τις γνωστές ως 12 βασικές αρχές animation. Οι αρχές αυτές λύνουν το πρόβλημα της δημιουργίας «ρεαλιστικής κίνησης», κινούνται και αντιδρούν στο φυσικό χώρο (οι αρχές καλύπτουν επίσης θέματα όπως συναισθηματικό χρονοδιάγραμμα και ελκυστικότητα χαρακτήρα).

UI animation, ως μέρος της εμπειρίας των χρηστών είναι μόλις 20 ετών και ακόμα σε νηπιακή ηλικία. Καθώς προέκυψε ο τομέας της κινούμενης UI, τα μόνα διαθέσιμα εργαλεία για να περιγράψουν τον τρόπο με τον οποίο συμπεριφέρεται η διεπαφή χρήστη εγκαίρως ήταν οι 12 αρχές animation. Όπως οι πρώτοι φωτογράφοι προσπάθησαν να κατανοήσουν τη φωτογραφία μέσω των κανόνων της ζωγραφικής, οι σχεδιαστές προσπάθησαν να κατανοήσουν το animation UI μέσω των κανόνων της κίνησης της Disney.

Στην επιφάνεια, αυτό είναι κατανοητό καθώς υπάρχει κάποιος βαθμός αλληλεπικάλυψης. Η ευκολία κίνησης, μία από τις 12 αρχές της κινούμενης εικόνας, ενισχύει την αίσθηση της «ορθότητας» μέσα από την κίνηση, κάτι που είναι κρίσιμο για την εμπειρία του χρήστη. Χωρίς χαλάρωση, η κινούμενη εικόνα UI αισθάνεται παχουλός και παράξενος.

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

Το Squash και το Stretch δίνουν βάρος και ευελιξία στα αντικείμενα, κάτι που είναι η εξαίρεση παρά ο κανόνας στις διεπαφές χρηστών.

Η πρόβλεψη δημιουργεί την αίσθηση ότι κάτι πρόκειται να συμβεί και είναι σχεδόν άχρηστο όταν πρόκειται για εμπειρίες χρηστών. Λειτουργεί με περιορισμένο μόνο τρόπο για επιλεγμένες μικροδραστικές αλληλεπιδράσεις και καταστάσεις κουμπιών.

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

Η εφαρμογή Straight Ahead Action και Pose to Pose είναι λιγότερες αρχές από τις προσεγγίσεις της πραγματικής διαδικασίας σχεδίασης / κινούμενης εικόνας: μπορείτε να δημιουργήσετε ένα πιο ρευστό κινούμενο σχέδιο εάν σχεδιάσετε συνεχείς καρέ ή χρησιμοποιήσετε την πόζα για να δημιουργήσετε μερικά πλήκτρα και συμπληρώστε τα κενά . Στις εμπειρίες των χρηστών, αυτή η διαδικασία σχεδόν δεν μεταφράζεται, εκτός αν υπάρχει πραγματική ανάγνωση πλαισίου ανά πλαίσιο. Από προεπιλογή, ανεξάρτητα από το εργαλείο που χρησιμοποιείτε, σχεδόν όλα τα κινούμενα σχέδια UI δημιουργούνται χρησιμοποιώντας καρέ-κλειδιά.

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

Τα Slow In και Slow Out λένε ότι τα αντικείμενα χρειάζονται χρόνο για να επιταχύνουν και να επιβραδύνουν. Αυτό είναι εξαιρετικά σημαντικό, δεδομένου ότι το 100% του animation UI θα πρέπει να χρησιμοποιεί αυτή την αρχή. Είναι κοινώς αναφερόμενο ως «χαλάρωση» και είναι εξαιρετικά σημαντικό.

Το Arc (που απαιτείται για την αναπαραγωγή της φυσικής κίνησης) είναι σχεδόν άχρηστο για animation UI, και είναι επίσης η εξαίρεση παρά ο κανόνας.

Η Δευτερεύουσα Δράση είναι χρήσιμη και είναι ιδανική για μεταβάσεις οθόνης και ρύθμιση οπτικής ιεραρχίας.

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

Η υπερβολή σχετίζεται με το βαθμό ρεαλισμού ή καρικατούρας, και πάλι, ελάχιστα σχετική με το animation UI, καθώς ο σχεδιασμός είναι προκαθορισμένος.

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

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

Συμπερασματικά

Επομένως, παραμένει το ερώτημα: γιατί οι 12 βασικές αρχές της κινούμενης εικόνας δεν περιγράφουν με ακρίβεια την κινούμενη εικόνα του UI;

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

Με απλά λόγια, οι 12 βασικές αρχές της κινούμενης εικόνας δεν ισχύουν για το animation UI επειδή επιλύουν ένα διαφορετικό πρόβλημα.

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