Φέρνοντας τη μικρο-αλληλεπίδραση και το UI Animation στη ζωή μέσω συνεργασιών σχεδιαστή-προγραμματιστή

Μπορούμε να δημιουργήσουμε μια ευχάριστη εμπειρία για τους χρήστες μέσω του animation μικρο-αλληλεπίδρασης και UI!

Γεια σας, το όνομά μου είναι Kyo Kim και δουλεύω ως σχεδιαστής προϊόντων στο Capital One για περίπου δύο χρόνια. Έχω χρησιμοποιήσει μικρο-αλληλεπιδράσεις και κινούμενα σχέδια καθ 'όλη τη δουλειά μου εδώ, συμπεριλαμβανομένων και σε ορισμένα κινητά έργα που μπορεί να χρησιμοποιήσατε. Πριν ξεκινήσω να δουλεύω στην τεχνολογία, το υπόβαθρό μου ήταν στο φιλμ. Στην ταινία, η εστίαση είναι μόνο για την αφήγηση και την επεξεργασία για να δημιουργηθεί μια ιστορία που εμπλέκει το κοινό. και πολλά από αυτά επιτυγχάνονται μέσω της χρήσης μεταβάσεων. Θεωρώ ότι αυτές οι δεξιότητες είναι χρήσιμες σήμερα καθώς δημιουργώ εμπειρίες και ιστορίες για ψηφιακά εργαλεία.

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

Προκειμένου ένα προϊόν να προσφέρει στους χρήστες του μια ευχάριστη εμπειρία, πρέπει να προσφέρει περισσότερο από αισθητικά ευχάριστο σχεδιασμό και εντυπωσιακά εφέ κίνησης.

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

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

Τι είναι? Γιατί είναι καλό για την εμπειρία του χρήστη; Γιατί πρέπει οι σχεδιαστές και οι προγραμματιστές να τις ενσωματώσουν στη δουλειά τους; Πώς μπορούν οι ομάδες σχεδιασμού προϊόντων να συνεργαστούν για τη βελτίωσή τους;

Τι είναι οι μικρο-αλληλεπιδράσεις και γιατί πρέπει να τους ενδιαφέρουμε;

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

Σε αντίθεση με άλλες μορφές κινουμένων σχεδίων που υπάρχουν αποκλειστικά για να δημιουργήσουν την ψευδαίσθηση της κίνησης, οι μικρο-αλληλεπιδράσεις εμπλέκουν άμεσα τον χρήστη, επιτρέποντάς του / της να πραγματοποιήσει μια ποικιλία εργασιών και να αλληλεπιδράσει με το προϊόν με έναν διαισθητικό και αποτελεσματικό τρόπο.

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

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

Αν και αυτές οι "ενέργειες" λαμβάνουν διάφορες μορφές, μερικά κοινά παραδείγματα περιλαμβάνουν:

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

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

Αρχές μικρο-αλληλεπιδράσεων

Υπάρχουν τρεις αρχές που εξετάζω πάντα κατά το σχεδιασμό των μικρο-αλληλεπιδράσεων.

  1. Συνέχεια (και λεπτότητα)

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

2. Προβλεψιμότητα

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

3. Μετασχηματισμό

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

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

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

-Πώς οι προγραμματιστές και οι σχεδιαστές μπορούν να εργαστούν μαζί για να φέρουν μικρο-αλληλεπιδράσεις στη ζωή

Όπως μπορείτε να δείτε, οι μικρο-αλληλεπιδράσεις έχουν κρίσιμο ρόλο στη διαμόρφωση της εμπειρίας των χρηστών. Εξαιτίας αυτού, έχουν γίνει όλο και πιο σημαντικό μέρος της δουλειάς μου ως σχεδιαστής προϊόντων. Έχοντας εργαστεί σε διάφορα έργα σε πολλαπλές πλατφόρμες και χρήσεις, έχω παρατηρήσει ότι δεν αναγνωρίζουν όλοι την αξία αυτών των στοιχείων ή πώς να τα δημιουργήσουν αποτελεσματικά. Το πιο σημαντικό είναι ότι συχνά τα μέλη της ομάδας δεν ξέρουν πώς να εκφράζουν τις ιδέες μεταξύ τους όσον αφορά το σχεδιασμό των μεταβάσεων και των μικρο-αλληλεπιδράσεων.

Συνειδητοποίησα ότι όλα βράστηκαν στην επικοινωνία - κάτι χάθηκε στη μετάφραση όταν εξήγησα τις ιδέες μου για σχεδιασμό στους προγραμματιστές μου. Μπορεί να έχετε ακούσει αυτό το απόσπασμα από τον Κομφούκι πριν, "Πες μου, και θα ξεχάσω. Δείξε μου, και ίσως θυμάμαι. Συμμετάσχετε, και θα καταλάβω. "Και είναι μέσω της συμμετοχής, όπου εμείς, ως ομάδα σχεδιαστών και προγραμματιστών, δημιουργούμε μεγάλες εμπειρίες.

Πρώτον, ας δούμε μια γρήγορη περιγραφή της διαδικασίας σχεδιασμού ...

Σε μια ιδανική περίπτωση, όταν ένας σχεδιαστής έρχεται με μια ιδέα για μια μικρο-αλληλεπίδραση, η παραδοσιακή ροή εργασίας συνεχίζεται με την ακόλουθη σειρά:

  1. Ο σχεδιαστής αναπτύσσει τα οπτικά στοιχεία και τα εφέ κίνησης που απαιτούνται για την πραγματοποίηση της ιδέας του / της.
  2. Ο σχεδιαστής παρουσιάζει το τελικό μοντέλο και τις υποκείμενες έννοιες στα άλλα μέλη της ομάδας.

Αλλά τι γίνεται αν η διαδικασία σχεδιασμού δεν παίζει στην πράξη όπως συμβαίνει στη θεωρία; Τι γίνεται αν παρουσιάζουμε ένα storyboard ή ένα ελλιπές μοντέλο; Ή κάποιος άλλος στην ομάδα σχεδιάζει το μοντέλο;

Όταν συμβεί αυτό, είναι πιθανό να προκύψουν προβλήματα κατά την παρουσίαση ή την ανάπτυξη. Αυτά τα προβλήματα συνήθως εμπίπτουν σε μία από τις τρεις κατηγορίες:

  1. Η ιδέα της κινούμενης εικόνας δεν μεταδίδεται με αρκετή σαφήνεια.

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

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

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

3. Ο σχεδιαστής και ο προγραμματιστής δεν βρίσκονται στην ίδια σελίδα

Όταν σχεδιαστές κάνουν UI animations ή μικρο-αλληλεπιδράσεις προσπαθούν να συμπεριλάβουν περίπλοκες λεπτομέρειες σχεδίου όπως προσαρμοσμένες ευκολίες, σενάρια, εκφράσεις και άλλα εφέ. Όταν παρουσιάζουμε αυτές τις ιδέες στους προγραμματιστές, μπορεί να ακούσουν, "Δεν είναι δυνατόν να το κάνουμε αυτό στο χρονοδιάγραμμά μας" ή "Δεν μπορούμε να το καταφέρουμε ακριβώς, αλλά θα προσπαθήσουμε". Σε αυτό το σημείο, ίσως επιχειρήσουν να χτίσουν τις διάφορες λεπτομέρειες και τα τεχνικά θέματα με τους προγραμματιστές. Ωστόσο, αυτές οι συζητήσεις μπορεί να καταλήξουν να είναι άχρηστες αν ο σχεδιαστής δεν έχει μια πρακτική γνώση των εργαλείων ή των γλωσσών που χρησιμοποιούν οι προγραμματιστές. Αυτοί οι παράγοντες θα πρέπει να λαμβάνονται υπόψη κατά τη διαμόρφωση και τη συζήτηση ιδεών, ώστε οι μικροδρασμοί να είναι συμβατοί με τις προεπιλεγμένες ρυθμίσεις των προγραμματιστών, αυξάνοντας την πιθανότητα το τελικό προϊόν να πληροί τα πρότυπα του σχεδιαστή (και όλων των άλλων).

Ποιες είναι οι λύσεις σε αυτά τα ζητήματα;

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

Τώρα, δεν υποστηρίζουμε πλέον για το αν θα συμπεριληφθούν ή όχι μικρο-αλληλεπιδράσεις, διερευνούμε τρόπους να τους κάνουμε ακόμα καλύτερους!

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

"Η ιδέα της αλληλεπίδρασης σκελετού και ο οδηγός αλληλεπίδρασης δεν αφήνουν περιθώρια ερμηνείας που μου επιτρέπουν να ξεκινήσω αμέσως την εργασία και να είμαι σίγουρος για την ταύτιση του οράματος του σχεδιαστή." -Jesse M Majcher / Lead IOS engineer

Η τυπική διαδικασία που χρησιμοποιούμε για να επικοινωνούμε σχετικά με τα σχέδια UX δεν μεταφράζεται καλά για κινούμενα σχέδια UI. Πρώτα απ 'όλα, τα σχέδια και οι ροές UX εξακολουθούν να σχεδιάζονται με οθόνη και είναι στατικές. Οι κινούμενες εικόνες UI είναι ροές από μόνες τους, είναι υγρές και βασίζονται στο χρονοδιάγραμμα. Όταν δημιουργούμε ένα στατικό σχεδιασμό, δημιουργούμε ένα τραχύ σύρμα για να κατανοήσουμε την ιδέα και να συζητήσουμε τη ροή. Αυτό μας επιτρέπει να αναθεωρήσουμε και να τελειοποιήσουμε εύκολα τη σχεδίαση προτού δημιουργήσουμε την τελική έκδοση. Μόλις κάθε μέλος της ομάδας συμφωνήσει ότι το σχέδιο είναι έτοιμο να παραδοθεί στους προγραμματιστές, ο σχεδιαστής παρέχει στον προγραμματιστή έναν οδηγό στυλ και μια κόκκινη γραμμή που περιέχει λεπτομέρειες, προδιαγραφές και άλλες σημαντικές πληροφορίες σχετικά με το σχέδιο.

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

  1. Έννοια αλληλεπίδρασης σκελετού (μελέτη κίνησης)

Μια ιδέα αλληλεπίδρασης σκελετού είναι παρόμοια με το wireframe που θα δημιουργούσατε κατά το σχεδιασμό της ροής, η κύρια διαφορά είναι ότι πρόκειται για ένα δοκιμαστικό / clickable demo του πρωτοτύπου. Εάν φέρουμε αυτό σε μια συνάντηση, τα μέλη της ομάδας μας δεν θα πρέπει να χρησιμοποιούν τις φαντασιώσεις τους για να κατανοήσουν την έννοια. Ο σχεδιαστής μπορεί να χρησιμοποιήσει το playable / clickable demo ή static story board για να αναφερθεί απευθείας στα οπτικά και animation στοιχεία του σχεδίου. Αυτό θα δώσει σε όλους μια σαφή και ακριβή αίσθηση της ιδέας του / της. Με τη σειρά τους, οι συνεργάτες μπορούν να προσφέρουν ανατροφοδότηση που είναι ιδιαίτερα συγκεκριμένη και, συνεπώς, εξαιρετικά πολύτιμη για τον σχεδιαστή. Ταυτόχρονα, οι ομάδες διαχείρισης και ανάπτυξης προϊόντων θα αποκτήσουν πληροφορίες που θα τους επιτρέψουν να βελτιώσουν τις εσωτερικές τους επικοινωνίες και τις εκτιμήσεις του χρόνου για το έργο.

2. Οδηγός αλληλεπίδρασης

Μόλις η ομάδα συμφωνεί με την έννοια, ο σχεδιαστής δημιουργεί τον οδηγό αλληλεπίδρασης. Αυτό είναι παρόμοιο με έναν οδηγό στυλ στο ότι περιγράφει τη θέση, την περιστροφή, την κλίμακα και το χρονισμό των στοιχείων. Μπορούμε να προσθέσουμε κάθε λεπτομέρεια για τα κινούμενα σχέδια, τα οποία θα βοηθήσουν τους συνεργάτες μας να το καταλάβουν καθαρά. Όταν ο σχεδιαστής παρουσιάζει τον οδηγό αλληλεπίδρασης στους συνεργάτες του, αυτός ή αυτή μπορεί να είναι ακόμη σαφέστερος σχετικά με την κίνηση και τη μέτρηση της έννοιας του animation. Αυτό είναι πολύ χρήσιμο για την ολοκλήρωση του έργου μέσω της συνεργασίας. Βοηθά επίσης τους σχεδιαστές να είναι πιο προσεκτικοί στο σχεδιασμό τους animation / micro-interaction.

3. Δεξιότητες πρωτοτύπων για σχεδιαστές

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

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

Εάν γνωρίζετε την κωδικοποίηση:

  • Κινητό: Xcode, στούντιο Android
  • Κινητό ή Ιστός: Framer
  • Web: CSS animation

Αν θέλετε να σχεδιάσετε μια αλληλεπίδραση μεταξύ μιας ώθησης τύπου οθόνης και μιας ενότητας:

  • Invision και Marbel

Εάν θέλετε να δημιουργήσετε πιο λεπτομερείς αλληλεπιδράσεις:

  • Αρχή, Adobe CC, στούντιο origami και pixate

Αν θέλετε να δημιουργήσετε λεπτομερείς αλληλεπιδράσεις + κινούμενα σχέδια:

  • Συνέπειες

Επί του παρόντος, είμαι οπαδός της χρήσης του After Effect για τα πρωτότυπά μου. Ακόμη και αν δεν είναι διαδραστικό (δηλαδή με δυνατότητα κλικ), είναι ο ιδανικός τρόπος για να παρουσιάσετε μια έννοια animation. Επίσης, δεν υπάρχει περιορισμός του αποτελέσματος και είστε σε θέση να ελέγξετε την κίνηση των λεπτομερειών. Είναι ακόμη δυνατό να το χρησιμοποιήσετε για να κάνετε αλληλεπίδραση σε τρισδιάστατο χώρο, όπως για AR και VR.

Απολαυστικές αλληλεπιδράσεις με την ομάδα κάνουν τα ευχάριστα προϊόντα

Οι μικρο-αλληλεπιδράσεις έχουν γίνει όλο και πιο σημαντικό - αν όχι κρίσιμο - στοιχείο του διαδικτύου, του κινητού σχεδιασμού και πολλά άλλα. Ακόμη και αν και οι σχεδιαστές και οι προγραμματιστές αναγνωρίζουν την αξία των animations UI και έχουν κίνητρο να τα δημιουργήσουν, συχνά αγωνίζονται να συνεργαστούν αποτελεσματικά και αποτελεσματικά. Παίρνει μια ισχυρή ομάδα για την αποστολή μεγάλων μικρο-αλληλεπιδράσεων εγκαίρως. οι ομάδες αυτές απαιτούν σαφή οριοθέτηση των ρόλων, αποτελεσματικές δεξιότητες επικοινωνίας και τα κατάλληλα εργαλεία δημιουργίας πρωτοτύπων για τα συγκεκριμένα καθήκοντα.

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

ΔΗΛΩΣΗ ΔΗΜΟΣΙΕΥΣΗΣ: Αυτές οι γνώμες είναι αυτές του συγγραφέα. Εκτός αν αναφέρεται διαφορετικά σε αυτή τη θέση, το Capital One δεν είναι συνδεδεμένο με, ούτε υποστηρίζεται από καμία από τις προαναφερθείσες εταιρείες. Όλα τα εμπορικά σήματα και άλλη πνευματική ιδιοκτησία που χρησιμοποιούνται ή εμφανίζονται είναι ιδιοκτησία των αντίστοιχων κατόχων τους. Αυτό το άρθρο είναι © 2017 Capital One.

Για περισσότερα σχετικά με τα API, τις εκδηλώσεις ανοιχτού κώδικα, τις εκδηλώσεις της κοινότητας και την κουλτούρα προγραμματιστών στο Capital One, επισκεφθείτε το DevExchange, την μοναδική μας πύλη ανάπτυξης: developer.capitalone.com.