12 δωρεάν μαθήματα AE για επαγγελματίες UX
Ο σύγχρονος σχεδιασμός ιστοσελίδων περιλαμβάνει πολλά κινούμενα μέρη όπως το σχεδιασμό περιεχομένου, το έργο με εικονίδια και Στρατηγικές σχεδιασμού UX . Μια νεότερη τάση είναι η χρήση μικροσυστοιχιών σε διαδικτυακά και κινητά έργα.
Αυτά φαίνονται υπέροχα στο τελικό έργο, αλλά δεν είναι τόσο εύκολο να γίνουν με ένα στατικό mockup. Έτσι, οι σχεδιαστές έχουν πάρει προγράμματα κινούμενων σχεδίων, όπως το After Effects, για να δημιουργήσουν μακέτες με κίνηση.
Αν προσπαθείτε να μάθετε αυτό το σύνολο δεξιοτήτων προτείνω ανεπιφύλακτα αυτά τα δωρεάν βίντεο στο YouTube. Δεν θα σας διδάξουν τα πάντα, αλλά θα καλύψουν τα βασικά στοιχεία και θα σας δώσουν ένα στέρεο υπόβαθρο για να προωθήσετε την ικανότητά σας.
1. Κουμπί UI Animated
Αυτό είναι πολύ σύντομη κινούμενη UI το σεμινάριο είναι ιδανικό για αρχάριους με ελάχιστη εμπειρία AE. Απαιτεί κάποια υπομονή για να εργαστεί μέσω της διασύνδεσης, αλλά οι οδηγίες είναι πεντακάθαρες.
Θα μάθετε να δημιουργείτε ένα εφέ κίνησης μικρού κουμπιού που μπορεί να λειτουργήσει εξαιρετικά για ιστότοπους ή εφαρμογές για κινητά.
Αυτό δεν είναι κάτι θεαματικό, αλλά μέχρι το τέλος θα έχετε μια πολύ πιο ισχυρή αντίληψη για αυτή την έννοια.
2. Πρωτότυπο Motion
Ένα άλλο απλό animation που μπορείτε να κάνετε είναι ένα συρόμενο μενού όπως σέ αυτό τό βίντεο . Σας διδάσκει πώς να ζωντανέψετε ένα μενού στο After Effects και πώς να εργαστείτε με μεμονωμένα επίπεδα στο λογισμικό.
Είναι ένα αρκετά μακρύ φροντιστήριο με πάνω από 40 λεπτά καθοδήγησης. Αλλά αξίζει τον κόπο να το δείτε μέχρι το τέλος.
3. AE Animation Icon
Τα εικονίδια μικρού εικονιδίου δεν προστίθενται απευθείας στη διασύνδεση, αλλά μπορούν να βελτιώσουν την εμπειρία του χρήστη. Αυτές οι κινήσεις εικονιδίων σχετίζονται με εκείνες τις μικρές μικροενέργειες που αναφέρθηκαν προηγουμένως.
Και αυτό το εικονίδιο animation tut μιλάει για μικροσυστοιχίες με εύκολο να ακολουθήσει τις οδηγίες. Θα μπορούσατε ακόμη και να κατεβάσετε δωρεάν εικονίδια στη μορφή PSD / AI και χρησιμοποιήστε αυτά για το κινούμενο σχέδιο.
Αλλά αυτό είναι επίσης βολικό για τους σχεδιαστές εικονιδίων που δημιουργούν τα δικά τους εικονίδια από το μηδέν και θέλουν να τα ζωντανεύσουν για παραγωγή.
4. Κινούμενοι δρομείς UI / UX
Πολλοί σχεδιαστές δημιουργούν κινούμενα σχέδια UX για να παρουσιάσουν πώς πρέπει να λειτουργεί μια διεπαφή. Αυτό φυσικά θα περιλαμβάνει κλικ / σμίκρυνση του ποντικιού επειδή θέλετε να δείτε πώς μετακινείται το περιεχόμενο σε όλη τη σελίδα.
Αν θέλεις προσθέστε κινήσεις του δρομέα για τα mockups σας, τότε αυτό το σεμινάριο είναι για σας. Είναι ένας πολύ σύντομος οδηγός, μόνο 15 λεπτά, αλλά οι πληροφορίες είναι εξαιρετικά πολύτιμες και συναφείς τόσο για τους σχεδιαστές κινητών και web.
5. UI του iPhone App
Ένα άλλο καλό παράδειγμα μιας κινούμενης εικόνας που εστιάζεται στο χρήστη είναι αυτό ακολουθώντας μια τυπική εισαγωγή εφαρμογών iPhone. Δημιουργείτε τη διαδρομή ενός χρήστη μέσω μιας εφαρμογής iPhone που συμπληρώνει χωριστά πεδία φόρμας.
Από μόνη της αυτό δεν φαίνεται να μοιάζει πολύ, αφού οι άνθρωποι ξέρουν τι μοιάζει με αυτή τη διαδικασία.
Αλλά αν σχεδιάζετε μια ιστοσελίδα ή μια εφαρμογή που έχει μια μοναδική ροή τότε βοηθά να δείξει ολόκληρη τη συμπεριφορά των χρηστών από την εισαγωγή πληροφοριών για να συνδεθεί και ίσως περισσότερο.
6. Εμβέλεια σελίδας εφαρμογής
Οι σχεδιαστές εφαρμογών για κινητά μπορούν να χρησιμοποιούν σελίδες για πολλαπλές σελίδες. Αυτά τα έργα είναι ιδανικά για γκαλερί και για σελίδες.
Σε αυτό το σύντομο φροντιστήριο θα μάθετε πώς μπορείτε να δημιουργήσετε κινούμενα σχέδια με το After Effects χρησιμοποιώντας μερικές υπάρχουσες mockups. Αυτό το βίντεο είναι δωρεάν UX σε κίνηση όπου έχουν έναν τόνο παρόμοιων σεμιναρίων και ιδιωτικών εργαστηρίων.
Το θέμα της κίνησης UX δεν καλύπτεται πολύ στο διαδίκτυο, αλλά αυτοί οι τύποι είναι ένας από τους λίγους καλοί που πραγματικά βυθίζονται στις λεπτομέρειες. Ανατρέξτε σε ολόκληρο το κανάλι σας YouTube αν θέλετε να μάθετε περισσότερα.
7. Jelly UI Animations
Ίσως έχετε δει περίεργα μενού υγρών ζελέ σε εφαρμογές Android ή ακόμα και σε όλο τον ιστό. Αυτά δεν είναι εξαιρετικά κοινά, επειδή είναι δύσκολο να αναδημιουργηθούν στον κώδικα, αλλά με αυτό το σεμινάριο Jelly UI μπορείτε τουλάχιστον να δημιουργήσετε τα κινούμενα σχέδια από το μηδέν.
Είναι ένα άλλο freebie από το UX in Motion και μόνο συνολικά περίπου 5 λεπτά.
Αλλά θα μάθετε πολλά για τα After Effects και τη συνολική διαδικασία animation UX. Συγκεκριμένα, πώς να εισαγάγετε διανύσματα και να εργαστείτε με αυτά τα αρχεία σε ένα χρονικό πλαίσιο - πραγματικά μόνο τα βασικά της εργασίας animation interface.
8. Ξεδιπλώστε την κίνηση
Ενώ δεν μπορώ να πω ότι αυτό το κινούμενο σχέδιο επηρεάζει άμεσα τη διεπαφή, είναι κάτι δροσερό που μπορείτε να προσθέσετε στο λογότυπο του ιστοτόπου σας. Ξεδιπλώνει κινούμενα σχέδια χρησιμοποιούνται ως επί το πλείστον σε intros βίντεο για να δημιουργήσουν ένα brandable οπτικό.
Ωστόσο, οι ιστότοποι μπορούν επίσης να χρησιμοποιούν παρόμοια κινούμενα σχέδια SVG γραφικά και βασικές κινήσεις JS.
Ακόμα κι αν δεν θέλετε να δημιουργήσετε κινούμενα σχέδια λογότυπων, αυτό το σεμινάριο μπορεί ακόμα να σας καθοδηγήσει σε μια απλή ροή εργασιών στο περιβάλλον AE. Ιδανικό για την εκμάθηση των σχοινιών χωρίς πολύ στρες.
9. Βασικές κινήσεις πρωτότυπου UI
Τα μενού εφαρμογών για κινητά έρχονται σε πολλά διαφορετικά στυλ με διαφορετικές τεχνικές κινούμενης εικόνας. Αυτό το φροντιστήριο UI σας διδάσκει πώς να ζωντανέψετε το μενού εικονιδίων φυσαλίδας flyout.
Αυτό αρχικά πιστώθηκε στην εφαρμογή Path αλλά από τότε έχει εξελιχθεί σε μια κοινή τάση για συσκευές Android και iOS.
Πάνω από αυτό το βίντεο 20 λεπτών θα πάρετε ιδέες για animation εικονιδίων και σχεδιασμό μενού. Είναι πολύ απλό να εργαστείτε και μπορείτε να χρησιμοποιήσετε τα προκαθορισμένα εικονίδια για τη ροή εργασίας για να εξοικονομήσετε χρόνο.
10. Διαχωρίσεις 3D Layer
Τα κινούμενα σχέδια παρουσίασης είναι πολύτιμα για την εργασία των πελατών ή για την ανταλλαγή ιδεών σας μπροστά σε μια ομάδα. Αυτό είναι όπου αυτό το 3D animation στρώμα tutorial μπορεί να βοηθήσει.
Σας διδάσκει πώς να διασπάσετε διαφορετικά στοιχεία στρώματος και να τα διαχωρίσετε από την πλήρη διεπαφή. Μπορείτε να προβάλετε ακόμη και διαφορετικά στοιχεία σελίδας για να εμφανίσετε τον τρόπο λειτουργίας της εφαρμογής / ιστότοπου.
Δεν μπορώ να φανταστώ ότι αυτό θα ήταν πολύτιμο για την προσωπική δουλειά, αλλά είναι δροσερό αποτέλεσμα να μαθαίνει ειδικά για εμπορικές συναυλίες.
11. Διακόπτες iOS 8
Οι ενεργοποιημένοι διακόπτες ενεργοποίησης / απενεργοποίησης εμφανίστηκαν για πρώτη φορά στις πρώτες εκδόσεις του iOS και από τότε έχουν εξαπλωθεί σε Android και σε γενικές ιστοσελίδες.
Οι καλύτεροι διακόπτες UI διαθέτουν προσαρμοσμένες κινούμενες εικόνες και μπορείτε να δημιουργήσετε τη δική σας ακολουθώντας αυτό το 25λεπτο σεμινάριο . Υποθέτει ότι έχετε ήδη το γραφικό διακόπτη, αλλά μπορείτε επίσης να κατεβάσετε ένα ελεύθερο PSD και να το χρησιμοποιήσετε αντ 'αυτού.
Επιπλέον, μπορείτε να επαναπροσδιορίσετε αυτήν την κινούμενη εικόνα για οποιοδήποτε τύπο διακόπτη σχεδιάσατε στο μέλλον. Ένα μεγάλο σεμινάριο για κάποιον που μόλις μπαίνει σε After Effects για UI / UX.
12. Ομαλές εικόνες εικονιδίων
Τελευταίο στη λίστα μου είναι αυτό το λεπτομερές εικονίδιο motion tut χρησιμοποιώντας μερικά διαφορετικά σχήματα διανυσμάτων. Είναι ένας πολύ λεπτομερής οδηγός που ξεπερνά τα 30 λεπτά και καλύπτει μερικές διαφορετικές τεχνικές.
Μόλις γνωρίσετε το δρόμο σας γύρω από τα After Effects, μπορείτε να εφαρμόσετε αυτές τις ιδέες σε άλλα στυλ εικονιδίων. Αυτός είναι ο λόγος για τον οποίο αυτό το σεμινάριο είναι τόσο καλό για αρχάριους. σας διδάσκει πώς να εργαστείτε στη διεπαφή AE με συγκεκριμένες τεχνικές για τους σχεδιαστές UI / UX.
Αλλά οποιαδήποτε από αυτά τα μαθήματα θα βελτιώσετε τις δεξιότητές σας animation UX, οπότε βεβαιωθείτε ότι έχετε σελιδοδείκτη για κάθε που τραβάει το μάτι σας.
