info@spyros.website +30 6909762792
Greek
Blog Details

February 06, 2020 - ΜΕ Admin

Τα καλύτερα εργαλεία του UI Animation μέσα 2020

1. Adobe After Effects

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

Τιμή: δωρεάν δοκιμή για 30 ημέρες, Pro - 31,49 δολάρια / μήνα

Σύστημα: Windows, Mac

Πλεονεκτήματα:

- 100GB αποθήκευσης cloud.

- Συνεργάζεται άψογα με άλλα εργαλεία της Adobe όπως το Adobe Portfolio, το Adobe Fonts και το Adobe Spark.

- Κίνηση δεδομένων με κίνηση δεδομένων.

- Πλούσιες κινούμενες εικόνες και μεταβάσεις διαθέσιμες.

Μειονεκτήματα:

- Πάρα πολλά χαρακτηριστικά οδηγούν σε μια απότομη καμπύλη μάθησης.

- Μόνο φιλικό προς έμπειρους σχεδιαστές.

- Είναι ένα βαρύ λογισμικό κομποστοποίησης και χρησιμοποιεί πάρα πολύ μνήμη RAM που μπορεί να οδηγήσει σε μεγάλο χρονικό διάστημα για την απόδοση και την προεπισκόπηση ενός μεγάλου αρχείου.

Αναθεώρηση χρήστη:

"Αν θέλετε να μάθετε να είστε συντάκτης, θα πρέπει να χρησιμοποιήσετε αυτό το εργαλείο!"

"Ιδανικό εργαλείο για κινούμενα γραφικά και κινούμενα σχέδια".

Φροντιστήριο:

Με αυτό το εκπαιδευτικό βίντεο, θα μάθετε πώς μπορείτε να δημιουργήσετε κινούμενη εικόνα υγρού κειμένου στα After Effects.

https://www.youtube.com/watch?v=k4Ie-hauYXw

2. Origami


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

Τιμή: Δωρεάν

Σύστημα: Mac

Πλεονεκτήματα:

- Ισχυρά κινούμενα σχέδια και αλληλεπιδράσεις.

- Εντελώς δωρεάν.

- Open source: κώδικας που φιλοξενείται στο GitHub.

Μειονεκτήματα:

- Μόνο Mac.

- αλληλεπιδράσεις με το ποντίκι. Οι χρήστες δεν μπορούν να ελέγξουν άμεσα την απτική διεπαφή.

- Απότομη καμπύλη εκμάθησης.

- Απαιτείται κωδικοποίηση των γνώσεων.

Αναθεώρηση χρήστη:

"Ισχυρές κινούμενες εικόνες και αλληλεπιδράσεις".

Φροντιστήριο:

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

https://www.youtube.com/watch?v=5CiEPblNaqo

3. Flinto


Το Flinto είναι ένα ελαφρύ και ολοκληρωμένο εργαλείο δημιουργίας πρωτοτύπων και UI. Επιτρέπει στους σχεδιαστές να δημιουργούν διαδραστικά και κινούμενα πρωτότυπα για τις εφαρμογές και τον ιστό. Παρέχονται εργαλεία κινούμενων εικόνων για τους σχεδιαστές για να δημιουργούν γρήγορα κινούμενα σχέδια με βάση τη μετάβαση. Η προεπισκόπηση στις κινητές συσκευές και στους υπολογιστές είναι ομαλή και γρήγορη.

Τιμή: Δωρεάν δοκιμή, Pro - $ 99 / χρήστη / έτος

Σύστημα: Mac

Πλεονεκτήματα:

- Ενσωματωμένο με Sketch και Figma.

- Τρισδιάστατοι μετασχηματισμοί.

- Ενσωματωμένες χειρονομίες: Πατήστε, διπλό κτύπημα, μακρά βρύση, σύρετε, πιέστε προς τα κάτω.

Μειονεκτήματα:

- Μόνο Mac.

- Δεν υπάρχει υποστήριξη για εισαγωγή από το Photoshop.

- Απαιτείται εφαρμογή Flinto για να ανοίξετε έγγραφα Flinto.

- Δεν είναι δυνατή η κοινή χρήση των προδιαγραφών με τους προγραμματιστές. Επειδή δεν υπάρχει επιλογή για εξαγωγή αξίας κινούμενων εικόνων.

Φροντιστήριο:

Ένα εξαιρετικό χαρακτηριστικό του Flinto είναι ότι οι δημιουργίες που δημιουργούνται σε αυτό μπορούν να ξαναχρησιμοποιηθούν για εξοικονόμηση χρόνου. Αυτό το βίντεο καταδεικνύει την ετικέτα κινούμενης εικόνας του Flinto και τις επαναχρησιμοποιούμενες λειτουργίες μετάβασης.

https://www.youtube.com/watch?v=oy6WLOSIGq8

4. Framer


Το Framer είναι ένα λογισμικό ανοιχτού κώδικα βασισμένο σε JavaScript σχεδιασμένο για διαδραστικό animation. Μπορεί να εισαγάγει γρήγορα εικόνες σε Photoshop και Sketch. Οι κινούμενες εικόνες και τα συμβάντα υποστηρίζονται για αποτελεσματικά διαδραστικά πρωτότυπα.

Τιμή: Ατομική - $ 15 / μήνα, Μικρές Ομάδες - $ 99 / μήνα

Σύστημα: Mac

Πλεονεκτήματα:

- Ολοκληρωμένη ροή εργασιών με Sketch και Photoshop.

- Μαζικοί πόροι σχεδιασμού που παρέχονται στο κατάστημα Framer X.

- Δωρεάν για να δημιουργήσετε δημιουργικά σχέδια με τις γνώσεις κωδικοποίησης.

Μειονεκτήματα:

- Μόνο Mac.

- Απαιτείται κωδικοποίηση των γνώσεων.

- Δεν υπάρχουν εργαλεία spec για την παράδοση.

- Τα αρχεία εισαγωγής σκίτσων δεν ταιριάζουν με τα επίπεδα bitmap.

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

Αναθεώρηση χρήστη:

"Εξαιρετικό προϊόν για λεπτομέρειες και animations!"

Φροντιστήριο:

Το εργαλείο σύνδεσης του Framer επιτρέπει στους χρήστες να προσαρμόζουν τις μεταβάσεις που πραγματοποιούνται μεταξύ των πλαισίων. Εδώ μπορείτε να μάθετε πώς μπορείτε να προσθέσετε μια μετάβαση modal στη ροή του χρήστη.

https://www.youtube.com/watch?v=JiUvTn490XU

5. iDoc


Το Mockplus iDoc είναι ένα εργαλείο ηλεκτρονικής συνεργασίας για σχεδιαστές και προγραμματιστές. Εκτός από την παροχή ενός κινούμενου εργαλείου για το σχεδιασμό διαδραστικών πρωτοτύπων, επιτρέπει στους σχεδιαστές να μεταβιβάζουν αυτόματα σχέδια με ακριβείς προδιαγραφές, περιουσιακά στοιχεία, αποσπάσματα κώδικα και διαδραστικά πρωτότυπα. Σας επιτρέπει να ανεβάσετε τα καλώδια και τα οπτικά σχέδια σας από το PS, το Adobe XD και το Sketch και να τα προσθέσετε στο φάκελο του έργου σας στο iDoc.

Τιμή: Δωρεάν δοκιμή για 5 μέλη, Ομάδα - $ 39 / μήνα, Team Pro - $ 129 / μήνα

Σύστημα: Ιστός

Πλεονεκτήματα:

- Ενσωμάτωση των υποστηριζόμενων Adobe XD, Σκίτσο και Photoshop.

- Πολλαπλές προ-δημιουργημένες εφέ κίνησης UI.

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

- Εύχρηστος.

Μειονεκτήματα:

- Οι κινούμενες εικόνες που έχουν οριστεί στα Adobe XD, το Σκίτσο και το Photoshop δεν μπορούν να εισαχθούν άψογα στο iDoc.

- Η προεπισκόπηση των επιδράσεων στο iPhone X απαιτεί βελτίωση.

Αναθεώρηση χρήστη:

« Αισθάνομαι καλύτερα .. όχι άσχημα .. Αλλά έπρεπε να είναι πιο φιλική προς το χρήστη και ευκολότερη και νομίζω ότι μπορείτε να εφαρμόσετε καλό εμφάνιση, απλό και καθαρό σχεδιασμό UI."

Φροντιστήριο:

Αυτό το βασικό βίντεο εισαγωγής του Mockplus iDoc μπορεί να σας βοηθήσει να μάθετε τι μπορεί να κάνει το iDoc για εσάς και την ομάδα σας.

https://www.youtube.com/watch?v=gajgLhuXe6o

6. Motion UI



Το Motion UI είναι μια βιβλιοθήκη Sass για τη δημιουργία μεταβάσεων CSS και animations. Είναι ένα αρκετά ισχυρό εργαλείο κίνησης UI που έχει ένα αρχείο CSS με περισσότερα από 20 μαθήματα μετάβασης και animation. Τα αρχεία Sass πηγής σας επιτρέπουν να δημιουργήσετε τα δικά σας εφέ κίνησης.

Τιμή : Δωρεάν

Σύστημα : Ιστός στο Chrome, Firefox, Safari, IE 10+, iOS 8+, Android 4+

Πλεονεκτήματα:

- Υποστηριζόμενα εφέ κίνησης σειράς.

- Οι χρήστες μπορούν να προσαρμόσουν κινούμενα σχέδια με 7 παραμέτρους.

- Open source: διαθέσιμος κώδικας για αναφορά χρηστών.

- Εκπαιδευτικό κώδικα που παρέχεται.

Μειονεκτήματα:

- Δεν υποστηρίζει πρόγραμμα περιήγησης IE.

- Απαιτείται κωδικοποίηση των γνώσεων.

Φροντιστήριο:

Ένα βίντεο εισαγωγής του Motion UI από το ZURB για το WordPress Plugin.

https://www.youtube.com/watch?v=8QMMndMZOCE

Κατηγορίες

Αρχεία