20 Best Freebies για υποψήφιους σχεδιαστές κίνησης UX
Οι σχεδιαστές διασύνδεσης ενδιαφέρονται περισσότερο για το σχεδιασμό του UX με κινούμενα mockups που μιμούνται τις ενέργειες των χρηστών. Αυτές οι mockups του UX βασίζονται στην κίνηση με κινούμενα εφέ για τον καθορισμό πώς μια διεπαφή θα πρέπει να ανταποκρίνεται στις εισόδους του χρήστη.
Οι περισσότεροι σχεδιαστές του UX μαθαίνουν να χρησιμοποιούν λογισμικό για να δημιουργήσουν αυτά τα κινούμενα σχέδια. Οι δύο πιο δημοφιλείς επιλογές είναι το Adobe After Effects and Principle (μόνο OS X). Μπορείς σχεδιαγράμματα διεπαφής σχεδιασμού σε ένα πρόγραμμα όπως το Photoshop και μετακινήστε τους χρήστες σε αυτά τα προγράμματα για κινούμενα σχέδια.
Αν ενδιαφέρεστε να μάθετε animation UX, τότε freebies θα είναι ένα τεράστιο περιουσιακό στοιχείο. Μπορείτε να μελετήσετε το έργο των άλλων και να παίξετε με τα σχέδιά τους για να δείτε πώς όλα λειτουργούν.
Παρακάτω θα βρείτε τα καλύτερα freebies για τους χρήστες της αρχής και των AE μόνο να πάρει το σχέδιο κίνησης UX. Σίγουρα θα σας βοηθήσουν να καταλάβετε πώς λειτουργεί η κινούμενη εικόνα UX, και πώς να κατασκευάσετε το δικό σας.
1. Διαγραφή ενέργειας
Διεισδύοντας είναι μια πολύ κοινή δράση σε κινητές εφαρμογές για διάφορους σκοπούς. Χρησιμοποιείται η προεπιλεγμένη ενέργεια σάρωσης iOS εμφάνιση εναλλακτικών επιλογών για επεξεργασία / διαγραφή στοιχείων, και αυτό ακριβώς παίρνετε σε αυτό το freebie που δημιουργήθηκε από τον Ramil Derogongun.
Μπορείτε να κατεβάσετε το δωρεάν αρχείο AEP για τα After Effects και να το δοκιμάσετε μόνοι σας. Η διεπαφή χρήστη ακολουθεί ένα πολύ βασικό σχέδιο πλαισίου σύρματος με την είσοδο χρήστη να εμφανίζεται ως μπλε κουκίδα. Αυτοί οι τύποι συμπεριφορών χρηστών είναι οι καλύτεροι που πρέπει να εμφανίζονται μέσω κινούμενων σχεδίων γιατί δίνει στους προγραμματιστές την ευκαιρία να δουν πώς πρέπει να λειτουργήσει η διασύνδεση.
2. Widget Swipe
Εδώ είναι ένα άλλο κτυπήστε animated mockup που εστιάζει σε αντικείμενα καλαθιού σε παρουσίαση διαφανειών. Σχεδιασμένο από τον Leon Wu, αυτή η κινούμενη απεικόνιση ελεύθερου στυλό έρχεται με ένα αρχείο PRD που δημιουργείται για την αρχή.
Η κινούμενη εικόνα είναι εξαιρετικά απλή και δείχνει πώς πρέπει να μετακινούνται τα στοιχεία στην οθόνη όταν εφαρμόζεται πίεση. Παίρνετε επίσης μια αίσθηση για το εφέ χαλάρωσης κάθε φορά που απελευθερώνεται η κίνηση.
3. Dualshock UI
Εδώ είναι ένα απίστευτα δυναμικό εφέ κίνησης UX που μοιράζεται ο Alexander Boychenko. Αυτό το mockup βασίζεται στο PlayStation Controller για ένα περιβάλλον χρήστη εφαρμογών για κινητά. Περιλαμβάνει ένα αρχείο σκίτσου και αρχής που μπορείτε να κατεβάσετε δωρεάν.
Αυτό το freebie δείχνει πώς να δημιουργήσετε μεταβάσεις μετακινήστε τα μεταξύ των οθονών. Αλλά μπορείτε επίσης να δείτε πώς τα στοιχεία της σελίδας κινούνται γύρω από την οθόνη σε διάφορες κατευθύνσεις.
4. Animation μενού για το χάμπουργκερ
Τα εικονίδια του Hamburger εξακολουθούν να είναι οργή σε κινητές διεπαφές. Αυτό το εικονίδιο μενού freebie δείχνει πώς να ζωντανέψτε το εικονίδιο τριών ράβδων σε ένα εικονίδιο "X".
Είναι ένα επαναλαμβάνοντας την κινούμενη εικόνα, οπότε το "X" ζωντανεύει και πάλι σε ένα εικονίδιο μενού χάμπουργκερ. Αυτό είναι ένα μεγάλο freebie για να μάθετε χειρισμός διάνυσμα για στοιχεία UI.
5. Snapster
Αυτό το ελεύθερο mockup είναι για μια εφαρμογή για κινητά που ονομάζεται Snapster. Εστιάζει στην οθόνη καλωσορίσματος / επικόλλησης όπου οι χρήστες μπορούν να δουν τα demos της εφαρμογής και να μάθουν πώς λειτουργεί.
Είναι ένα αρχείο PRD και, δυστυχώς, αυτό δεν παίζει ωραίο με τα After Effects, οπότε μόνο οι χρήστες της αρχής μπορούν να επωφεληθούν από αυτό.
6. Φόρτωση Spinners
Εδώ είναι ένα AEP After Effects freebie για φορητές συσκευές περιστροφής φόρτωσης. Αυτοί οι τύποι κινούμενων GIF έγιναν πολύ δημοφιλείς όταν ο Ajax έφτασε στο mainstream web development.
Τώρα αυτοί οι φορητοί φορτωτές είναι μια δεκάρα δώδεκα, και μπορούν ακόμη και να είναι σε μεγάλο βαθμό προσαρμοσμένο για να ταιριάζει σε ορισμένες διεπαφές. Αυτό το freebie έρχεται με ένα αρχείο AEP και ένα αρχείο σκίτσων για την επεξεργασία των διανυσμάτων αν θέλετε να τα τροποποιήσετε.
7. Αναπαραγωγή / Παύση μετάβασης
Εφέ μετάβασης συχνά φαίνονται πολύ απλά αλλά στην πραγματικότητα απαιτούν πολύ καλή δουλειά. Αυτή η κινούμενη εικόνα αναπαραγωγής / παύσης που δημιουργήθηκε από τον Alex Pronsky είναι ένα καλό παράδειγμα.
Με αυτό το freebie μπορείτε να εξετάσετε πώς να ζωντανέψετε διάφορα εικονίδια λεπτής γραμμής σε μορφές και σύμβολα. Μόλις μάθετε το πρόγραμμα, γίνεται πολύ πιο εύκολο να κάνετε αυτού του είδους τα πράγματα, γι 'αυτό βοηθά να έχετε freebies στη διάθεσή σας για την έρευνα.
8. Mockup iPhone
Ενώ αυτό το freebie δεν περιέχει άμεσα κινούμενα σχέδια, πρόκειται να χρησιμοποιηθεί για παραγωγικές εργασίες σε εφαρμογές iPhone. Είναι ένα δωρεάν iPhone 5S AEP αρχείο για χρήση σε After Effects ως πρότυπο iPhone.
Απλά εισάγετε το mockup της διεπαφής σας και δημιουργήστε τα κινούμενα σχέδια στο After Effects. Στη συνέχεια, μπορείτε να το συνδέσετε σε αυτό το mockup του iPhone για να μοιραστείτε με την ομάδα σας.
9. Πρότυπο iPhone
Αυτό είναι άλλο προσαρμοσμένο πρότυπο After Effects με πιο μοντέρνο σχεδιασμό iPhone. Το freebie είναι διαθέσιμο από αυτή τη σελίδα στο UX in Motion.
Τα πάντα στο πρότυπο είναι super εύκολο να προσαρμόσετε. Στη σελίδα λήψης θα βρείτε επίσης μια ενότητα με τίτλο "Οδηγίες βίντεο", όπου μπορείτε να μάθετε πώς να ζωντανέψετε την εφαρμογή.
10. Micro Animation
Ακόμη και τα μικρότερα εφέ κίνησης μπορούν να επηρεάσουν σημαντικά την εμπειρία των χρηστών. Αυτό το freebie εμφανίζει ένα "Όπως και" το μικρό animation κάθε φορά που ένας χρήστης "αρέσει" μια θέση.
Το εικονίδιο της καρδιάς έχει το δικό του κινούμενο σχέδιο με τη φωτογραφία προφίλ του χρήστη να προστεθεί στη στοίβα των συμπαθειών. Αυτό το freebie είναι μόνο για την αρχή και έχετε επίσης ένα .mov αρχείο για λήψη, αν θέλετε.
11. Εφαρμογή πορτοφολιού
Τα ψηφιακά πορτοφόλια γίνονται όλο και πιο δημοφιλή, και αυτό το freebie διευκολύνει το σχεδιασμό ενός. Παίρνετε ένα αρχείο σκίτσων με όλα τα ακατέργαστα στοιχεία φορέα, συν ένα ελεύθερο αρχείο PRD για animation Principle.
Αυτό το freebie σχεδιάστηκε από τον Sergey Bykov ως ένα μικρό πλάνο διασκέδασης. Αλλά μπορεί να είναι πολύ εκπαιδευτικό αν το ξεχωρίζεις και να δουλεύεις με το animation βήμα-βήμα.
12. Διακόπτης iOS
Με το iOS 7 της Apple, ο κόσμος πήρε ένα φρέσκο σχεδιασμένο διακόπτη για ετικέτες on / off. Αυτό οδήγησε σε πολλά διαφορετικά εφέ, συμπεριλαμβανομένου ενός ελεύθερου animation το οποίο μιμείται τον αυτόματο διακόπτη on / off.
Σε αυτό το αρχείο, έχετε ένα πολύ απλό εφέ κίνησης με μια βασική χαλάρωση. Ο διακόπτης μετακινείται και το φόντο γίνεται πράσινο και μετά επιστρέφει όταν ο διακόπτης είναι απενεργοποιημένος.
13. Ritter App
Εδώ είναι ένα άλλο μεγάλο freebie που κυκλοφόρησε ο Sergey Bykov για αυτό που ονομάζει το Ritter App. Αυτό περιλαμβάνει ένα δωρεάν αρχείο σκίτσων για τη διανυσματική διασύνδεση, μαζί με ένα ελεύθερο αρχείο PRD για την κινούμενη αρχή.
Θα πάρεις πολλά διαφορετικά κινούμενα σχέδια σε αυτό το freebie, έτσι νομίζω ότι θα ήταν πιο χρήσιμο για έναν ενδιάμεσο σε προηγμένο σχεδιαστή. Οι αρχάριοι μπορούν να μάθουν πολλά από αυτό επίσης, αλλά μπορεί να έχουν μια απότομη καμπύλη μάθησης.
14. Προσκαλέστε φίλους
Όλοι γνωρίζουμε και αγαπάμε το μενού fly plus του Google. Λοιπόν, ο Jardson Almeida δημιούργησε ένα μενού φίλων Invite βασισμένο σε μια απλή ιδέα σχεδιασμού υλικού.
Όλα σχεδιάστηκαν στο Sketch και εισήχθησαν στην αρχή για animation. Μπορείτε να πάρετε και τα δύο αρχεία ως freebies για να κατεβάσετε και να παίξετε γύρω με.
15. Κάρτα σάρωσης
Εδώ είναι ένα άλλο γενικό swiping freebie μόνο για τους χρήστες της αρχής. Αυτό είναι ένα κάρτα διασύνδεσης που έχουν δημιουργηθεί για προβολές διαφανειών γενικού σκοπού ή για περιβάλλοντες χρήστες εφαρμογών.
Νομίζω ότι αυτό είναι το τέλειο freebie για έναν αρχάριο που μόλις μπαίνει στην Αρχή. Δεν είναι τόσο περίπλοκο που θα νιώσετε χαμένος, αλλά δεν είναι τόσο απλό που θα αισθανθείτε ασήμαντο.
16. Συνομιλία στον Χάρτη
Πολλοί σχεδιαστές εξακολουθούν να χρησιμοποιούν το Photoshop για διασυνδέσεις, και είναι επίσης αλήθεια για αυτό το chat chat freebie. Μπορείτε να κατεβάσετε ένα αρχείο PSD για τη διασύνδεση και ένα αρχείο PRD για την κινούμενη αρχή.
Είναι ένα εκπληκτικά ζωντανό κινούμενο σχέδιο για το στυλ, αλλά εξακολουθεί να φαίνεται υπέροχο και λειτουργεί ακριβώς όπως θα περίμενε κανείς σε μια απλή εφαρμογή χαρτών / γεωγραφικής κατανομής.
17. Φόρτωση εφαρμογής
Οι εφαρμογές για κινητά χρησιμοποιούν συχνά οθόνες φόρτωσης για να πει στους επισκέπτες ότι κάτι συμβαίνει στο backend. Ένα από τα αγαπημένα μου freebies σε αυτή τη συλλογή είναι αυτό το animation φόρτωσης που δημιουργήθηκε από τον Roman Wagner.
Φορτώνει μεμονωμένα στοιχεία το ένα μετά το άλλο μόλις τελειώσει η οθόνη φόρτωσης. Αυτή η κινούμενη εικόνα είναι πολύ ομαλή και απολύτως αξιόπιστη στον τομέα της σχεδίασης εφαρμογών για κινητά.
18. Κάρτες Onboarding
Χρήστης επί του σκάφους είναι ένα κρίσιμο βήμα για κάθε νέα εφαρμογή για κινητά. Είναι πάντα ωραίο να συμπεριλάβετε κάποια κινούμενα σχέδια σε αυτό το στάδιο, γι 'αυτό και αυτά τα animations καρτών onboarding μπορούν να είναι πολύ χρήσιμα για τους σχεδιαστές εφαρμογών.
Αυτό δημιουργήθηκε από τον Austin Baird και κυκλοφόρησε δωρεάν για χρήση σε οποιοδήποτε έργο UI / UX.
19. Δημοσιεύσεις αρχής
Καθώς περνάτε περισσότερο στην αρχή, θα μάθετε πολλές προηγμένες τεχνικές ροής εργασίας. Ένα από τα καλύτερα freebies για να προχωρήσουμε περισσότερο είναι αυτό που δημιουργήθηκε για τη δημιουργική ομάδα του Yalantis.
Αυτός είναι ένας εντελώς δωρεάν πόρος για τους χρήστες της αρχής να κατεβάζουν και να παίζουν με. Καλύπτει μερικά κόλπα που δείχνουν πώς να γίνετε επαγγελματίας στο animation Principle.
20. Μενού διαγραφής
Τα αναπτυσσόμενα μενού χρησιμοποιούν συχνά τρελό animations για να τραβήξουν την προσοχή μας. Αυτό το δωρεάν λογισμικό After Effects χρησιμοποιεί a κλιμακωτά σκάλες κινούμενα σχέδια στο μενού για μεμονωμένα στοιχεία για να τα κάνουν να πέφτουν σαν σκάλες.
Αυτό μπορεί να μην είναι χρήσιμο για όλους, αλλά σίγουρα είναι ένας πολύ καλός τρόπος για να μάθετε για το animation interface After Effects.
Τελικές λέξεις
Όλοι αυτοί οι πόροι είναι εντελώς δωρεάν για λήψη και παιχνίδι στα δικά σας έργα. Εάν είστε ολοκαίνουργιος σε animation UX εγγυώμαι ότι θα μάθετε πολλά μελετώντας αυτά τα freebies. Αν γνωρίζετε άλλους μεγάλους πόρους, μπορείτε να αφήσετε συνδέσμους στα σχόλια.
