Adobe XD: Πώς να χρησιμοποιήσετε τη λειτουργία Auto-Animate

Sep 10, 2025

πως να

(Credit Image: Adobe)

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

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

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

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

Εάν δεν έχετε ακόμα Adobe XD, δείτε πώς να Κατεβάστε το Adobe XD post, και στη συνέχεια να ελέγξετε το αγαπημένο μας Adobe XD Plugins .

01. Σύρετε τις χειρονομίες για να προσθέσετε στο FAV ή να διαγράψετε

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

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

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

02. Δημιουργήστε τη δεύτερη κάρτα

Για τη δεύτερη κάρτα - C2 - πρόκειται να προσθέσουμε μια προσθήκη στη Queue Right-Swipe δράση με παρόμοιο τρόπο. Δημιουργήστε μια ομάδα A2 με εικονίδιο, κείμενο και πράσινο φόντο. Προσθέστε το στα αριστερά της ομάδας C2 και δημιουργήστε ένα συνδυασμένο στρώμα που ονομάζεται L2. Τώρα, η πρώτη γραφίδα (S1) είναι πλήρης. Ας διπλασιάσουμε το σύνολο της γραφίδας δύο φορές, σε δύο κράτη - S2 και S3. Θα χρησιμοποιήσουμε S2 για τη διαγραφή Swipe και S3 για να προσθέσετε στο Swipe Queue. Για να γίνει αυτό που πρέπει να κάνουμε κάποιες αλλαγές για κάθε ένα από αυτά τα τέχνη. Εδώ είναι οι ρυθμίσεις και στις δύο πέσεις:

● S1 - Αλλάξτε την αδιαφάνεια A1 και A2 έως 0% και κανονίστε το L1, L2, ώστε να ευθυγραμμίζονται κεντρικά.

● S2 - Τοποθετήστε την κάρτα L1 έτσι ώστε η δεξιά άκρη του L1 να ευθυγραμμίζεται με τις άλλες κάρτες. Αλλάξτε την αδιαφάνεια του A2 σε 0%.

● S3 - Ρυθμίστε την κάρτα L2 έτσι ώστε η αριστερή άκρη του L2 να ευθυγραμμίζεται με τις άλλες κάρτες. Αλλάξτε την αδιαφάνεια του A1 σε 0%.

03. Εισάγετε τα τέχνη

Τώρα που τα τέχνη είναι εντελώς ρυθμίζονται, το επόμενο βήμα είναι να τους ζωντανέψετε. Μπορείτε να το κάνετε αυτό πηγαίνοντας στη λειτουργία πρωτοτύπου στην επάνω αριστερή πλευρά του εργαλείου. Τώρα στο ArtBoard S1, κάντε κλικ στο στρώμα L1 και προσθέστε μια αλληλεπίδραση στη δεξιά πλευρά του εργαλείου με τη ρύθμιση της σκανδάλης για να σύρετε, δράση σε αυτόματο animate και προορισμό στο Artboard S2. Μπορείτε επίσης να προσθέσετε χαλαρά με βάση τις προτιμήσεις σας. Δοκιμάστε αυτήν την αλληλεπίδραση κάνοντας κλικ στο κουμπί αναπαραγωγής στην επάνω δεξιά πλευρά του εργαλείου. Στο ArtBoard S1, κάντε κλικ στο στρώμα L2 και προσθέστε μια παρόμοια αλληλεπίδραση χρησιμοποιώντας τις ίδιες ρυθμίσεις, αλλά σε αυτή την περίπτωση, ρυθμίστε τον προορισμό στο S3. Αυτή η αλληλεπίδραση θα δημιουργήσει το αριστερό σύνοψη.

04. Αναπτύξτε τις κάρτες σας

Η δεύτερη αλληλεπίδραση που θα κοιτάμε συνήθως παρατηρείται στις περισσότερες εφαρμογές και ιστοσελίδες όπου περνάτε από μια λίστα ή έναν κατάλογο προϊόντων και όταν κάνετε κλικ σε ένα από αυτά, λαμβάνετε σε μια νέα σελίδα με περισσότερες λεπτομέρειες σχετικά με το προϊόν . Το Auto-Animate κάνει εξαιρετικά απλό να ζωντανέψει αυτό το είδος αλληλεπίδρασης. Για αυτό το παράδειγμα, ας ξεκινήσουμε δημιουργώντας μια σελίδα καταλόγου προϊόντων. Μπορείτε να επιλέξετε οποιοδήποτε προϊόν όπως, για παράδειγμα ένα κινητό τηλέφωνο (το οποίο πρόκειται να είναι το παράδειγμά μας), η ένδυση κλπ. Για το πρώτο γραφομηχανή (S1), δημιουργήστε μια γραμμή κεφαλίδας με ένα μενού χάμπουργκερ και ένα εικονίδιο προφίλ.

05. Εργαστείτε σε εικόνες και λεπτομέρειες

Τώρα, δημιουργήστε ένα στοιχείο κειμένου κεφαλίδας με τον αριθμό των στοιχείων καταλόγου. Για κάθε μία από τις κάρτες προϊόντων, θα έχουμε μια εικόνα, το όνομα του τηλεφώνου, της τιμής και των αξιολογήσεων. Μπορούμε να καλέσουμε αυτές τις κάρτες C1 έως C6. Ο καλύτερος τρόπος για να το κάνετε αυτό είναι να δημιουργήσετε την πρώτη κάρτα (C1) και στη συνέχεια να χρησιμοποιήσετε ένα εκπληκτικό χαρακτηριστικό του XD που ονομάζεται Repear Grid, το οποίο βρίσκεται στην επάνω δεξιά γωνία του πίνακα εργαλείων. Αυτό σας δίνει τη δυνατότητα να διπλασιάσετε τα αντικείμενα με ευκολία, διατηρώντας την ευθυγράμμιση και την απόσταση άθικτη. Η ρύθμιση αυτού του πίνακα είναι πλήρης. Πρόκειται να ζωντανήσουμε τη δεύτερη κάρτα, οπότε είναι σημαντικό να αφαιρέσετε τα στοιχεία αυτής της κάρτας έτσι xD μπορεί να εκτελέσει αυτόματη κίνηση.

06. Σχεδιάστε το δεύτερο artboard

Τώρα για να δουλέψετε στη δεύτερη γραφίδα. Διπλασιάστε τις πρώτες κάρτες Artboard και διαγράψτε κάρτες C1, C3-C6. Θα χρησιμοποιήσουμε την υπάρχουσα κάρτα C2 για την κατασκευή αυτής της σελίδας, οπότε τα ονόματα των στρωμάτων είναι τα ίδια. Πρώτον, επεκτείνετε το φόντο της κάρτας, έτσι ώστε να καλύπτει ολόκληρη τη σελίδα κάτω από τη γραμμή κεφαλίδας. Μπορούμε τώρα να κανονίσουμε τα άλλα αντικείμενα με οποιονδήποτε τρόπο που θέλουμε - η βασική ιδέα είναι ότι θα πρέπει να είναι διαφορετική από το πώς η κάρτα ήταν στο Artboard S1, επειδή αυτό μπορεί να δει τη μετάβαση. Για το λόγο αυτό, ας χτυπήσουμε το όνομα του κινητού στο 25px και να το κάνετε τολμηρό. Ομοίως, αυξήστε το μέγεθος της τιμής και τοποθετήστε το κάτω από το όνομα του κινητού τηλεφώνου. Το επόμενο είναι το σημαντικό μέρος - η εικόνα του κινητού τηλεφώνου. Πρέπει να αυξήσετε το μέγεθος του σημαντικά και να το ευθυγραμμίσετε στο κέντρο.

07. Εφαρμόστε τις τελικές πινελιές

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

08. Δημιουργήστε τη μικρο-αλληλεπίδραση

Ας πάμε στη λειτουργία πρωτοτύπου τώρα για να δημιουργήσετε τη μικρο-αλληλεπίδραση. Για να το κάνετε αυτό, επιλέξτε την κάρτα C2 στο Artboard S1 και σύρετε το μπλε βέλος στο Artboard S2. Στον πίνακα αλληλεπίδρασης στη δεξιά πλευρά, ρυθμίστε τη σκανδάλη ως βρύση, δράση ως auto-animate και προορισμό ως S2. Για ομαλότερες αλληλεπιδράσεις, είναι καλό να πάτε με ευκολία για χαλάρωση και ένα χρόνο 0,4 ή 0,6 δευτερόλεπτα. Κάντε κλικ στο εικονίδιο πίσω βέλους στο Artboard S2 και σύρετε το βέλος στο S1. Μπορείτε να χρησιμοποιήσετε τις ίδιες ρυθμίσεις για να το κάνετε συνεπές. Τώρα κάντε κλικ στο S1 και παίξτε το πρωτότυπο για να δείτε τη μαγεία. Θα παρατηρήσετε μια ομαλή κινούμενη εικόνα όταν η κάρτα C2 θα χτυπηθεί. Ρυθμίστε τις ρυθμίσεις χαλάρωσης για να κάνετε το animation πιο ομαλό.

09. Πέρα από τα βασικά

Τώρα έχετε μια βασική ιδέα για το πώς να δημιουργήσετε απλές αλληλεπιδράσεις. Μπορείτε επίσης να δοκιμάσετε το Auto animating αλλάζοντας τα χρώματα των στοιχείων, μεγεθών και σχημάτων για να δείτε ομαλές μεταβάσεις μεταξύ πολλαπλών τεχνών. Εκτός από τη βρύση και σύρετε τις ενεργοποιητές, υπάρχουν και άλλοι ενεργοποιητές που οι σχεδιαστές μπορούν να πειραματιστούν, όπως χρησιμοποιώντας τα πλήκτρα πληκτρολογίου και τα πλήκτρα gamepad για να ενεργοποιήσετε πρωτότυπα σε μια συγκεκριμένη βρύση πλήκτρων. Υπάρχει επίσης μια λειτουργία στην οποία μπορείτε να δημιουργήσετε και να σχεδιάσετε πρωτότυπα φωνής για την Alexa, Siri και ούτω καθεξής, όπου μπορείτε να αναθέσετε προτάσεις και να τους μιλήσετε για να αποκτήσετε συγκεκριμένες απαντήσεις.

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

ο Οι καλύτεροι οικοδόμοι ιστοτόπων
Οι συντομεύσεις Adobe XD που πρέπει να γνωρίζετε (αλλά πιθανότατα όχι)
Κατασκευάστε πρωτότυπα με το Adobe XD

Adobe XD: Πώς να χρησιμοποιήσετε τη λειτουργία Auto-Animate

01. Σύρετε τις χειρονομίες για να προσθέσετε στο FAV ή να διαγράψετε

02. Δημιουργήστε τη δεύτερη κάρτα

03. Εισάγετε τα τέχνη

04. Αναπτύξτε τις κάρτες σας

05. Εργαστείτε σε εικόνες και λεπτομέρειες

06. Σχεδιάστε το δεύτερο artboard

07. Εφαρμόστε τις τελικές πινελιές

08. Δημιουργήστε τη μικρο-αλληλεπίδραση

09. Πέρα από τα βασικά

πως να - Τα πιο δημοφιλή άρθρα

Πώς να κάνετε ένα meme στο Photoshop

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

Πώς να δημιουργήσετε έναν χαρακτήρα παιχνιδιού βίντεο στο ZBrush

10 Κανόνες για την παραγωγή φιλικών προς το χρήστη μορφές ιστού

Πώς να δημιουργήσετε μια αυθεντική ταινία Manga Comic

Βάλτε μια ρύθμιση παιχνιδιού Sci-Fi στο Photoshop

Πώς να κάνετε τη δική σας Αγία Γραφή

γαμπρός ένα ακαταμάχητα γούνινο πλάσμα

Κατηγορίες