Οδηγός για την κίνηση του υλικού στα αποτελέσματα μετά το τέλος

Βασικό φύλλο αυτοκόλλητων ετικετών και ροή εργασίας για την κίνηση των διεπαφών χρήστη

Έχω ήδη μοιραστεί γιατί το Motion Design δεν χρειάζεται να είναι δύσκολο, αλλά ήθελα να διευκολύνω ακόμα περισσότερο τους σχεδιαστές να χρησιμοποιούν τις αρχές της υλικής κίνησης που γνωρίζω και αγαπώ. Το After Effects είναι το κύριο εργαλείο που χρησιμοποιεί η ομάδα μας για να δημιουργήσει παραδείγματα κίνησης για τις οδηγίες του υλικού. Αφού το χρησιμοποίησα για να ζωντανέψω το δίκαιο μερίδιο των UI, ήθελα να μοιραστώ τις συμβουλές μου για τη ροή εργασίας και ...

Το φύλλο αυτοκόλλητων ετικετών "After Effects"

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

Κατεβάστε το εδώ

Διατίθεται στο Apache 2.0. Με τη λήψη αυτού του αρχείου, συμφωνείτε με τους Όρους Παροχής Υπηρεσιών της Google. Η πολιτική απορρήτου της Google περιγράφει τον τρόπο χειρισμού των δεδομένων σε αυτήν την υπηρεσία.

Εισαγωγή στοιχείων ενεργητικού σε AE

Πρώτα πράγματα πρώτα, χρειαζόμαστε περιουσιακά στοιχεία για να ζωντανέψουν. Οι περισσότεροι οπτικοί σχεδιαστές της ομάδας μας χρησιμοποιούν το Σκίτσο, το οποίο από προεπιλογή δεν έχει διεπαφή με το AE. Ευτυχώς, ο Adam Plouff έχει δημιουργήσει αυτό το πρόσθετο που προσθέτει αυτή τη λειτουργία. Το χρησιμοποίησα για να εισάγει τη βιβλιοθήκη των εξαρτημάτων υλικών βάσης από το Sketch σε AE. Αυτά τα στοιχεία βρίσκονται στον φάκελο Components του φύλλου αυτοκόλλητων ετικετών.

Δημιουργία διεπαφών χρήστη

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

Ένα παράδειγμα εισαγόμενων συνιστωσών Sketch που μεταφέρονται σε μια AE comp

Προσαρμογή στοιχείων

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

Ένα παράδειγμα γρήγορης τροποποίησης ενός στοιχείου που χρησιμοποιεί ιδιότητες Master

Με την προσθήκη ιδιοτήτων Master σε κάθε στοιχείο, θα μπορούσα γρήγορα να δημιουργήσω μια συλλογή UI που θα ζωντανεύουν. Μπορείτε να τα βρείτε στο φάκελο UI του Baseline στη λήψη.

Μια συλλογή UI που δημιουργήθηκε χρησιμοποιώντας εξαρτήματα προσαρμοσμένα με ιδιότητες Master

Μετακίνηση μεταβάσεων

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

Παραδείγματα μεταβάσεων στο Nav χρησιμοποιώντας πρότυπα κίνησης υλικού

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

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

Το After Effects είναι ένα τέτοιο ευέλικτο εργαλείο, είναι δύσκολο να ισχυριστεί κανείς ότι μια συγκεκριμένη ροή εργασίας είναι σωστή. Κάθε σχεδιαστής θα έχει μοναδικές και έγκυρες προσεγγίσεις στις προκλήσεις του animation. Ελπίζω ότι αυτές οι συμβουλές θα προκαλέσουν μερικές ιδέες και θα σας βοηθήσουν να είστε πιο αποτελεσματικός σχεδιαστής κινουμένων σχεδίων.