Πρωτότυπο Ένα πλωτό κουμπί δράσης στο pixate

Sep 13, 2025

πως να

Το Pixate σάς επιτρέπει να ρυθμίζετε γρήγορα διαδραστικά κινητά mockups που μπορούν να προεπισκόπηση σε συσκευές Android και IOS. Σε αυτό το σεμινάριο, θα το χρησιμοποιήσουμε για να οικοδομήσουμε ένα πλωτό κουμπί δράσης (FAB), συμπεριλαμβανομένων των επιμέρους επιλογών. Θα διερευνήσουμε διαφορετικές τεχνικές και ρυθμίσεις σε pixate, όπως μεταβάσεις και συνθήκες.

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

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

Θα χρειαστείτε επίσης την εφαρμογή Pixate Mobile για το Android ή το iOS. Δεν έχει σημασία ποια συσκευή προεπισκόπηση, καθώς η εφαρμογή θα κλιμακωθεί αυτόματα το πρωτότυπο για να ταιριάζει στην οθόνη της συσκευής σας.

Βρείτε όλα τα αρχεία που χρειάζεστε για αυτό το σεμινάριο εδώ .

01. Ξεκινήστε

Ανοίξτε το pixate και από την οθόνη υποδοχής κάντε κλικ στο 'Δημιουργία νέου πρωτοτύπου'. Επιλέξτε την επιθυμητή θέση Αποθήκευση όταν σας ζητηθεί και ονομάστε το αρχείο σας.

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

02. Εισαγάγετε τις εικόνες σας

Import all the necessary assets for your prototype — Εισαγάγετε όλα τα απαραίτητα περιουσιακά στοιχεία για το πρωτότυπο σας

Για να ξεκινήσετε, θέλουμε να εισαγάγαμε τις εικόνες για αυτό το σεμινάριο. Θα βρείτε όλα τα περιουσιακά στοιχεία που έχω χρησιμοποιήσει εδώ (Αυτά είναι όλα για ένα πρωτότυπο 3x). Στην επάνω αριστερή γωνία της οθόνης, κάντε κλικ στη μεσαία καρτέλα και, στη συνέχεια, κάντε κλικ στο κουμπί '+'. Πλοηγηθείτε στο φάκελο όπου τα περιουσιακά σας στοιχεία είναι, επιλέξτε όλα αυτά και κάντε κλικ στο Άνοιγμα.

03. Προσθήκη και θέση

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

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

04. Προσθέστε τις περιπτώσεις FAB

Add four instances of the FAB to your blank canvas — Προσθέστε τέσσερις περιπτώσεις του Fab στο κενό καμβά σας

Τώρα προσθέστε τέσσερις περιπτώσεις του 'Fab_option' στον καμβά. Σύρετε το πρώτο, έτσι ώστε το κάτω όριο να συσσωρεύεται στην κορυφή του 'fab_normal' και είναι κατακόρυφα ευθυγραμμισμένο κεντρικό.

Ευθυγραμμίστε τα υπόλοιπα στρώματα τριών «Fab_option έτσι ώστε να είναι κατακόρυφα ευθυγραμμισμένοι και κάθονται πάνω από το ένα το άλλο. Έτσι θα εμφανιστεί το μενού FAB όταν επεκταθεί.

05. Προσθέστε τα εικονίδια επιλογής

Προσθέστε όλα τα εικονίδια επιλογής ('icon_school', 'icon_flight', 'icon_cake' και 'icon_basket') στον καμβά και ευθυγραμμίζονται κάθε ένα από αυτά με μια εμφάνιση του κουμπιού 'fab_option'. Και πάλι, επειδή η σκιά περιλαμβάνεται στο αρχείο εικόνας, το κέντρο του κύκλου δεν είναι το κέντρο του στρώματος. Θα χρειαστεί να χτυπήσετε κάθε μία από τις εικόνες περίπου τρία σημεία, ώστε να εμφανίζονται κεντραρισμένα.

06. Προσθέστε το πιεσμένο Fab

Place the 'FAB_pressed' icon on top of the unpressed version — Τοποθετήστε το εικονίδιο "Fab_Pressed" στην κορυφή της μη συμπιεσμένης έκδοσης

Τέλος, προσθέστε 'fab_pressed' στον καμβά και τοποθετήστε το πάνω από το 'fab_normal'. Nudge 'fab_pressed' έτσι ώστε οι άκρες του κύκλου ταιριάζουν "fab_normal". Αυτό είναι περίπου τρία σημεία κάτω από την ευθυγράμμιση του κέντρου.

07. Στρώματα φωλιών

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

08. Στρώματα εικονιδίων επιλογής Nest

Nest the option icon layers into their respective button layers — Φωλιά των στρωμάτων εικονιδίων επιλογής στα αντίστοιχα στρώματα κουμπιών τους

Φωλιά των στρωμάτων εικονιδίων επιλογής στα αντίστοιχα στρώματα κουμπιών τους. Για παράδειγμα, φωλιά 'icon_school' στην αντίστοιχη 'fab_option', σύροντας το στρώμα 'ICON_SCHOOL' που καταγράφει στην λίστα στρώσεων της επιλογής.

09. Ξεπλύνετε και επαναφέρετε

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

10. Ρυθμίστε τις ιδιότητες

Αναδιατάξτε το 'Fab_pressed' έτσι κάθεται κάτω από το 'icon_add' αλλά πάνω από το 'fab_normal'. Τώρα επιλέξτε 'icon_add' και κάντε κλικ στο '+' στην κορυφή της λίστας επιπέδου. Στον πίνακα Ιδιότητες στρώματος (στην επάνω δεξιά γωνία της οθόνης) αλλάξτε τις τιμές πλάτους και ύψους για να ταιριάζει με το 'Fab_pressed' (80 x 92). Αυτό θα διασφαλίσει ότι η διαδραστική περιοχή περιλαμβάνει ολόκληρο το Fab.

11. Προσθέστε μια αλληλεπίδραση βρύσης

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction — Ρυθμίστε το δείγμα χρώματος στον πίνακα Ιδιότητες σε διαφανές και προσθέστε μια αλληλεπίδραση της βρύσης

Ενώ βρίσκεστε στον πίνακα Ιδιότητες, ρυθμίστε το δείγμα χρώματος σε διαφανές και τοποθετήστε το στρώμα έτσι ώστε να είναι κεντρικό ευθυγραμμισμένο με 'fab_pressed'. Στη συνέχεια, σύρετε μια αλληλεπίδραση βρύσης στο στρώμα στη λίστα. Κρατώ προς τα κάτω cmd και επιλέξτε όλα τα στρώματα 'fab_option' καθώς και "fab_pressed", τότε ορίστε την αδιαφάνεια στο 0 . Μην αλλάζετε την αδιαφάνεια των στρωμάτων εικονιδίων! Δεδομένου ότι προσαρμόζετε τα γονικά στρώματα, η αδιαφάνεια των στρωμάτων εικονιδίων κληρονομείται από αυτά.

12. Περιστρέψτε το εικονίδιο

Ας κάνουμε το εικονίδιο Fab να περιστρέφεται στη βρύση. Στο pixate, τα κινούμενα σχέδια μπορούν να αναφέρονται στην κατάσταση άλλου στρώματος. Αυτό σας επιτρέπει να ορίσετε μια κινούμενη εικόνα για να παίξετε μόλις τηρηθεί μια κατάσταση. Θέλουμε να περιστρέψουμε το icon_add, ώστε να μπορούμε να βασιζόμαστε τις συνθήκες άλλων κινούμενων εικόνων σε αυτό. Σύρετε ένα περιστρεφόμενο κινούμενο σχέδιο στο 'icon_add' και ορίστε τις ακόλουθες επιλογές. Βασισμένο στο: Πατήστε το στρώμα και Παρακέντηση , ΑΝ: icon_addpng.Rotation == 0 , Περιστρέψτε: -225 , Χαλαρή καμπύλη: ευκολία και κυβικός , Διάρκεια: 0,3 .

13. Αντίστροφη κατάσταση

Add a reverse condition to rotate the icon back to its original position — Προσθέστε μια αντίστροφη κατάσταση για να περιστρέψετε το εικονίδιο πίσω στην αρχική του θέση

Κάντε κλικ στο σύνδεσμο '+ Κατάσταση' στο κάτω μέρος της κινούμενης εικόνας και ορίστε τα εξής: αλλιώς εάν: icon_addpng.Rotation! = 0 , Περιστρέψτε: 0 , Χαλαρή καμπύλη: ευκολία και κυβικός , Διάρκεια: 0,3 .

14. Προσθέστε ένα fade-in

Adjust the settings so the FAB fades in on tap — Ρυθμίστε τις ρυθμίσεις, έτσι ώστε το fab να εξασθενείται στη βρύση

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

Βασισμένο στο: Πατήστε το στρώμα και Παρακέντηση , ΑΝ: icon_addpng.Rotation == 0 , Ξεθωριάζει: 100 , Διάρκεια: 0 . Τότε '+ κατάσταση' και αλλιώς εάν: icon_addpng.Rotation! = 0 , Ξεθωριάζει: 0 , Χαλαρή καμπύλη: ευκολία και κυβικός . Κάνετε αυτό για κάθε κουμπί επιλογής.

15. Κλίμακα πράγματα κάτω

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

Σύρετε μια κινούμενη κλίμακα σε ένα κουμπί επιλογής και ορίστε τις ακόλουθες επιλογές. Βασισμένο στο: *ΟΘΟΝΗ* και Φορτωμένος , Κλίμακα x και κλίμακα y: 0 και διάρκεια: 0. Επιλέξτε την κατώτατη μεσαία άγκυρα στο πλέγμα αγκυροβόλησης. Κάνετε αυτό για κάθε κουμπί επιλογής.

16. Επιλογές κινούμενων εικόνων

These settings will apply our animation to the FAB — Αυτές οι ρυθμίσεις θα εφαρμόσουν το κινούμενο σχέδιο μας στο Fab

Τώρα ας ρυθμίσουμε τις επιλογές για να επεκταθεί όταν το Fab κυκλοφόρησε. Σύρετε μια κινούμενη εικόνα κλίμακας πάνω στο ανώτατο κουμπί και ρυθμίστε τις επιλογές όπως φαίνεται στο screenshot παραπάνω.

17. καθυστερήσει τις κλίμακες

Κατά την προσθήκη αυτής της κινούμενης εικόνας στα υπόλοιπα κουμπιά επιλογής, αφαιρέστε 0,02 από την ιδιότητα καθυστέρησης της ανόδου. Η δεύτερη επιλογή από την κορυφή θα πρέπει να έχει καθυστέρηση 0,04 , το τρίτο θα έχει καθυστέρηση 0,02 , και το τελευταίο 0,0 . Τώρα οι επιλογές θα κλιμακώσουν το ένα μετά το άλλο.

18. Περισσότερες επιλογές κινούμενων εικόνων

Add these settings to emulate the FAB being pressed — Προσθέστε αυτές τις ρυθμίσεις για να μιμηθείτε το πιεσμένο FAB

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

Σύρετε μια κινούμενα σχέδια Fade στο 'Fab_Normal' και 'Fab_pressed' και εφαρμόστε τις ρυθμίσεις που εμφανίζονται στο στιγμιότυπο οθόνης.

19. Έτοιμος να χρησιμοποιηθεί

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

20. Προσαρμόστε!

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

Κρατήστε ένα μάτι για περισσότερα συστατικά σχεδιασμού υλικών από το Google και το σχεδιασμό μακριά!

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 281; Αγοράστε το εδώ .

Πρωτότυπο Ένα πλωτό κουμπί δράσης στο pixate

01. Ξεκινήστε

02. Εισαγάγετε τις εικόνες σας

03. Προσθήκη και θέση

04. Προσθέστε τις περιπτώσεις FAB

05. Προσθέστε τα εικονίδια επιλογής

06. Προσθέστε το πιεσμένο Fab

07. Στρώματα φωλιών

08. Στρώματα εικονιδίων επιλογής Nest

09. Ξεπλύνετε και επαναφέρετε

10. Ρυθμίστε τις ιδιότητες

11. Προσθέστε μια αλληλεπίδραση βρύσης

12. Περιστρέψτε το εικονίδιο

13. Αντίστροφη κατάσταση

14. Προσθέστε ένα fade-in

15. Κλίμακα πράγματα κάτω

16. Επιλογές κινούμενων εικόνων

17. καθυστερήσει τις κλίμακες

18. Περισσότερες επιλογές κινούμενων εικόνων

19. Έτοιμος να χρησιμοποιηθεί

20. Προσαρμόστε!

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

Πώς να επεξεργαστείτε ένα βίντεο στο Tiktok

Δημιουργήστε υφές με το εργαλείο σφραγίδας μοτίβου

Σχεδιαστής συγγένειας: Πώς να χρησιμοποιήσετε το Persona εξαγωγής

Ξεκινήστε με διάχυτη

ακονίστε τη μοντελοποίηση σκληρού επιφανειακού σας σε 3DS Max

Βάλτε μια εκφραστική νεκρή φύση σε ακρυλικά

Δημιουργήστε εκπληκτικά τοπία στο Houdini

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

Κατηγορίες