Χρησιμοποιήστε το Adobe XD για τη δημιουργία μικρο-αλληλεπιδράσεις

Το Adobe XD μπορεί να βοηθήσει με πρωτότυπα - μία από τις σημαντικότερες διαδικασίες του κύκλου ζωής του σχεδιασμού, ο οποίος διαδραματίζει ζωτικό ρόλο στην ανάπτυξη βοηθώντας τους σχεδιαστές και τις ομάδες DEV με συντήρηση ροής εργασίας. Υπήρξαν κάποιες σημαντικές αλλαγές στο πρωτότυπο τοπίο πρόσφατα: οι σχεδιαστές είναι χαλασμένοι για επιλογή.

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

Τώρα με την αυξανόμενη ποσότητα αλληλεπιδράσεων σε σχέδια - όπως κινούμενα σχέδια, χειρονομίες και φωνητικό έλεγχο - είναι δύσκολο να βρείτε ένα εργαλείο που μπορεί να επιτύχει όλες αυτές τις δυνατότητες πρωτοτύπων και να κρατήσει ακόμα τα πράγματα απλά. Η κωδικοποίηση είναι ένας τρόπος δημιουργίας αυτών των αλληλεπιδράσεων, αλλά είναι χρονοβόρα. Ευτυχώς, η Adobe XD έχει έρθει στη διάσωση απελευθερώνοντας μια ενημέρωση στο εργαλείο πρωτοτύπων που περιλαμβάνει ένα εύχρηστο χαρακτηριστικό που ονομάζεται "Auto animate". Είναι μακράν η μεγαλύτερη προσθήκη στο ισχυρό εργαλείο.

• Πάρτε το Adobe Creative Cloud

Η ιδέα εδώ είναι απλή: Το Auto Animate επιτρέπει στους σχεδιαστές να χτίσουν διαδραστικά πρωτότυπα με εντυπωσιακά κινούμενα σχέδια με απλά αντιγραφή ενός σχεδίου ή την τροποποίηση των ιδιοτήτων ενός αντικειμένου. Αυτές οι ιδιότητες θα μπορούσαν να είναι οτιδήποτε, όπως οι διαστάσεις, η θέση των x και y, η αδιαφάνεια, η περιστροφή. Προηγουμένως Adobe XD προσφέρθηκε βασικές αλληλεπιδράσεις όπως ολίσθηση, ώθηση και διάλυση.

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

Σε αυτό το άρθρο, θα εξηγήσω πώς να δημιουργήσουμε απλά μικροσκοπικά κινούμενα σχέδια χρησιμοποιώντας αυτό το νέο χαρακτηριστικό Auto animate του Adobe XD. Πριν ξεκινήσουμε, υπάρχουν μερικά πράγματα που πρέπει να εξετάσουμε για το πώς πρέπει να αντιμετωπιστούν τα αντικείμενα για αυτόματη κίνηση:

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

Κάντε μια κατάσταση κατάστασης χρησιμοποιώντας το Auto Animate

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

Στην αρχική σχεδίαση, σχεδιάστε ένα σχήμα - στο παράδειγμά μας, είναι ένα πράσινο ορθογώνιο 500px x 200px. Διπλασιάστε αυτό το Artboard και επιλέξτε το ορθογώνιο στη δεύτερη γραφίδα. Πρέπει να τροποποιήσουμε τις ιδιότητες του ορθογωνίου αυξάνοντας το πλάτος σε 1000 και το ύψος έως 500. Μπορείτε επίσης να εκτελέσετε περαιτέρω τροποποιήσεις όπως αλλαγή της αδιαφάνειας στο 50% ή κάνοντας το χρώμα ροζ.

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

Ορίστε την προεπιλογή της καρτέλας δράσης για να κινηθεί αυτόματα και επειδή υπάρχουν μόνο δύο τέχνη στο παράδειγμά μας, ρυθμίστε την καρτέλα προορισμού στο Artboard 2. Υπάρχουν επίσης πολλαπλές ομαλές μεταβάσεις που μπορούν να επιλεγούν και να χρονολογηθούν. Κάντε κλικ στο εικονίδιο Play στην επάνω δεξιά πλευρά για να δείτε το Auto Animate Do Magic και ζωντανά το ορθογώνιο. Όταν υπάρχουν περισσότερα από δύο στοιχεία που πρέπει να αλλάξουν ταυτόχρονα, βεβαιωθείτε ότι τα ονόματα αυτών των στοιχείων είναι τα ίδια και στα δύο τέχνη. Αυτό θα ενημερώσει την προσφυγή ότι τα δύο αυτά στοιχεία πρέπει να κινούνται.

Επεκτείνετε κάρτες

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

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

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

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

Κάνετε κινούμενα σχέδια

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

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

Δημιουργήστε infinite animation animations

Ένα από τα καλύτερα χαρακτηριστικά του Adobe XD είναι ότι το Auto Animate μπορεί να εφαρμοστεί μεταξύ πολλαπλών τεχνών. Για να κάνετε μια τέτοια κίνηση, απλά πρέπει να κάνετε απλές αλλαγές σε μία από τις ιδιότητες.

Ας δημιουργήσουμε ένα animation φόρτωσης στην οποία μια μπαταρία γεμίζεται. Το κλειδί για να πάρει αυτό το τέλειο είναι να δημιουργήσετε σωστά την πρώτη γραφίδα. Το πρώτο Artboard διαθέτει ένα σύμβολο κράτησης της μπαταρίας όπως φαίνεται στην εικόνα. Μπορεί να δημιουργηθεί χρησιμοποιώντας ορθογώνια σχήματα. Για την πραγματική μπαταρία μέσα στο σύμβολο κράτησης θέσης, η πρώτη γραφίδα πρέπει να είναι κενή (η οποία αντιπροσωπεύει 0%). Διπλασιάστε αυτό το Artboard και δημιουργήστε ένα πράσινο ορθογώνιο με ύψος 50px που ταιριάζει απόλυτα μέσα στο σύμβολο κράτησης θέσης. Δημιουργήστε παρόμοια αντιγραφικά έτσι ώστε το ύψος της μπαταρίας στην τρίτη γραφική αρχή να αυξηθεί κατά 50px και ούτω καθεξής. Συνεχίστε μέχρι να γεμίσετε πλήρως το γκαρνταρόμπα.

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

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

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

Διαβάστε περισσότερα:

• 40 λαμπερά μαθήματα wordpress
• 11 εκπληκτικά πλαίσια JavaScript
• Είναι ο νεοφορφισμός πραγματικά 2020 η πιο καυτή τάση;