Φέρνοντας το Σκίτσο και τα Εφέ Συνέχισε πιο Μαζί

Παρουσιάζοντας δύο νέα εργαλεία ροής εργασίας animation από την UX Motion Design στο Google

Παρουσιάζοντας τον επιθεωρητή Spacetime και Sketch2AE

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

Ως σχεδιαστής κίνησης UX στο Google, έχω παρακολουθήσει την πιστότητα των πλατφορμών και των εφαρμογών μας, ώστε να γεφυρωθεί μερικώς το χάσμα μεταξύ σχεδιασμού αλληλεπίδρασης και κινούμενης εικόνας. Η Google κατανοεί τη βασική διαφορά ανάμεσα στην αφήγηση μιας ιστορίας και στην κάνοντας κλικ σε οθόνες. Αυτή η ενδυνάμωση, σε συνδυασμό με την απογοήτευση στα εναπομένοντα κενά στη δουλειά μας, ενέπνευσε τον Adam Plouff¹ να μας δώσει περισσότερο χρόνο για αφήγηση.

Τα εργαλεία σχεδίασης μπορεί να είναι πόνος ¯ \ _ (ツ) _ / ¯

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

Οι σχεδιαστές του UX Adam και εγώ δουλεύουμε με το Sketch ενώ δουλεύουμε κυρίως στα After Effects (AE). Παρόλο που αυτά τα εργαλεία γίνονται βιομηχανικά πρότυπα, δεν παίζουν καλά - εν πάση περιπτώσει. Οι λιγότερο αγαπημένες μέρες μας ξοδεύονται για την αναδημιουργία περιουσιακών στοιχείων στο Illustrator ή στο After Effects, αφήνοντας συχνά λίγες μόνο ώρες για να δημιουργήσουν κάτι σημαντικό. Και όταν τελικά δημιουργήσουμε κάτι, υπάρχει ένα άλλο βιβλίο για κουραστική δουλειά - να βρούμε πώς να εξηγήσουμε τις προδιαγραφές κινήσεων στη μηχανική (╯ ° ° °) ╯ (┻┻┻┻). Κουρασμένος από το σπατάλη χρόνου, ο Adam έριξε μερικά χρυσά εργαλεία για το SUMux² Motion Σχεδιαστική ομάδα που δεν μπορούσαμε να φανταστούμε να τηρούμε τον εαυτό μας με τον εαυτό μας, γι '

Sketch2AE: Το φυστικοβούτυρο και το ζελέ μεταξύ Sketch και AE
Spacetime επιθεωρητής: Μετάφραση Google για μηχανικούς

Sketch2AE: Σκίτσο σε After Effects μείον την ασπιρίνη

Το Sketch2AE είναι ένα πρόσθετο Sketch και μια δέσμη ενεργειών AE που μεταδίδει πίνακες τέχνης από το Sketch σε After Effects ως στρώματα σχήματος και επεξεργάσιμο κείμενο χωρίς την ανάγκη για εξωτερικά αρχεία. Οι ομάδες και τα σύμβολα διατηρούνται ενώ τα απλά σχήματα εισάγονται ως παραμετρικά σχήματα για εύκολη κίνηση. Είναι σαν να ξαναδημιουργήσατε και να οργανώσετε όλα τα περιουσιακά στοιχεία Σκίτσο για εσάς στο After Effects μέσα σε λίγα δευτερόλεπτα. Ευχαριστώ, Αδάμ!

Για την ομάδα μου, αυτή η διαδικασία είναι ακόμη ένα βήμα προς τα εμπρός από την πολυπόθητη ροή εργασίας του Adobe Illustrator => AE. Όταν έχω ένα αρχείο Illustrator από έναν σχεδιαστή, εξακολουθώ να έχω έναν τόνο προετοιμασίας προτού αρχίσω να animation στην AE, εμπλέκοντας πολλές παρεμβάσεις μεταξύ των εφαρμογών. Πηγαίνουν οι ημέρες της απόσπασης της αφήγησης.

Επικόλληση στοιχείων ενεργητικού από το Sketch σε After Effects

Μια ροή εργασίας που πραγματικά ρέει

Το Sketch2AE αφαιρεί μια δέσμη ενδιάμεσων βημάτων και δημιουργεί μια σύνθεση σε AE που είναι ανάλογη με το σχέδιο Sketch. Το Sketch2AE μετατρέπει τα εξής:

  • Σχηματοποιήστε τα σύμβολα σε προκατασκευές σε επίπεδο έργου στο After Effects. Ενημέρωση μόλις ενημερωθούν παντού.
  • Sketch Groups σε στρώματα με γονέα για κλιμάκωση και επανατοποθέτηση. Αυτό επιτυγχάνει κάτι σαν την τυπική λειτουργία ομαδοποίησης.
  • Sketch Masks σε ομάδες με ματ εφέ. Δεν υπάρχουν πλέον μάσκες αναδημιουργίας από το μηδέν.
  • Το σκίτσο Σχήματα σε φυσικά στρώματα σχήματος AE. Τα ορθογώνια παραμένουν ορθογώνια και οι οβάλ παραμένουν ελλείψεις. Animate αποτελεσματικά (τελικά).

Μάθετε περισσότερα ή κατεβάστε το Sketch2AE

Επιθεωρητής Spacetime: Πάρτε τις προδιαγραφές σας στον κώδικα

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

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

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

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

Δημιουργία τεχνικών προδιαγραφών από τα βασικά καρέ After Effects

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

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

Μάθετε περισσότερα ή κατεβάστε το Spacetime επιθεωρητή

Αυτοματοποιήστε το τύμπανο για να μπορείτε να περάσετε περισσότερο χρόνο στη διασκέδαση

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

Δοκιμάστε τα εργαλεία και μας βοηθήστε να τα βελτιώσουμε ακόμα περισσότερο

  • Sketch2AE
  • Επιθεωρητής Διάστημα

Ενδιαφέρεστε να συνεργαστείτε μαζί μας; Στείλτε το χαρτοφυλάκιό σας ή το ρολό επίδειξης στη διεύθυνση motiondesign@google.com

- - - -

1. Ο Adam Plouff εγκατέλειψε το Google για να επιδιώξει άλλες προσπάθειες. Η πρώην οικογένεια της Google διατηρεί ένα ζεστό μέρος στις καρδιές τους. Μάθετε περισσότερα για τα ατομικά έργα του Adam στο battleaxe.co

2. Η Ομάδα Αναζήτηση, Χρήστης και Χάρτες UX (SUMux) σχεδιάζει προϊόντα όπως τον Βοηθό Google, την εφαρμογή αναζήτησης Google και τους Χάρτες Google.