Η δημιουργία πρωτοτύπων στο Adobe XD είναι μια συναρπαστική και δημιουργική διαδικασία. Σήμερα θα δούμε τη λειτουργία Overlay, ένα ισχυρό εργαλείο που σου επιτρέπει να ενσωματώνεις διαδραστικά στοιχεία στο πρωτότυπό σου. Η δυνατότητα να εμφανίζεις και να αποκρύπτεις πληροφορίες δυναμικά αναβαθμίζει το σχέδιό σου στο επόμενο επίπεδο. Ας ανακαλύψουμε μαζί πώς μπορείς να χρησιμοποιήσεις αυτή τη λειτουργία αποτελεσματικά για να εμπλουτίσεις το πρωτότυπό σου.
Σημαντικότερα σημεία
- Η λειτουργία Overlay σου επιτρέπει να παρουσιάζεις περιεχόμενο διαδραστικά.
- Με αυτή τη λειτουργία μπορείς να ενσωματώσεις μηχανισμούς ανατροφοδότησης στα σχέδιά σου.
- Η εκμάθηση των Overlays βελτιώνει την εμπειρία χρήστη και δίνει στον χρήστη μια αίσθηση ελέγχου.
Οδηγίες βήμα προς βήμα για την υλοποίηση της λειτουργίας Overlay
Αρχικά χρειάζεσαι ένα νέο Artboard για να επιδείξεις τη λειτουργία Overlay. Δημιούργησε ένα Artboard για το Bookmark Overlay σου – αυτό θα δώσει ανατροφοδότηση στον χρήστη όταν κάνει κλικ στο εικονίδιο της καρδιάς.
Χρησιμοποίησε το εργαλείο ορθογωνίου για να σχεδιάσεις ένα έντονα χρωματιστό ορθογώνιο για το Overlay σου. Τράβηξε ένα ορθογώνιο προς τα κάτω, που θα αναπαριστά το φωτεινό νεον κίτρινο. Άφησε τις γωνίες να φαίνονται λοξές, κρατώντας πατημένο το πλήκτρο Alt και ορίζοντας την τιμή σε 20.
Τώρα είναι καιρός να δοκιμάσεις τη λειτουργία Overlay. Μετάβαλλε στο πρωτότυπο και τράβηξε το εικονίδιο της καρδιάς στο νέο Artboard. Ορίστε τον Trigger σε "Tap" και την ενέργεια σε "Overlay".
Παρατήρησε ότι στο πρωτότυπο εμφανίζεται ένα πράσινο πλαίσιο γύρω από το Artboard Overlay. Αυτό σου δίνει μια ιδέα για το πώς θα εμφανίζεται το Overlay σε συγχρονισμό με το αρχικό Artboard. Το Overlay θα τοποθετείται έτσι ώστε να φαίνεται ημι-διάφανο, πράγμα που θα σε βοηθήσει να τοποθετήσεις καλύτερα το σχέδιο.
Για να κάνεις περισσότερες προσαρμογές, μετάβαλλε στο Design mode και πρόσθεσε ένα κείμενο που περιγράφει το Overlay. Όταν αλλάζεις το μέγεθος του πεδίου κειμένου, βεβαιώσου ότι είναι ευανάγνωστο και οι χρωματισμοί φαίνονται αρμονικοί.
Μετάφερε το Overlay προς τα κάτω, ώστε να εμφανίζεται στο τέλος του Viewport. Πρόσεξε τη σύγκριση ανάμεσα στο Overlay και το φόντο, για να εξασφαλίσεις ότι όλα είναι ευανάγνωστα. Αν χρειαστεί, άλλαξε το μέγεθος του Overlay για να διασφαλίσεις καλύτερη αναγνωσιμότητα.
Για να δώσεις μια σκιά στο Overlay και να δημιουργήσεις μια πιο ρεαλιστική εντύπωση, επέλεξε το αντικείμενο στο Design mode, πρόσθεσε μια σκιά και προσαρμόσυ τις τιμές ώστε η σκιά να φαίνεται ελκυστική. Μια σκιά που πιέζεται ελαφρώς προς τα πάνω μπορεί να δώσει ένα ελκυστικό αποτέλεσμα στο Overlay.
Αφού έχεις προσαρμόσει δημιουργικά το Overlay, πήγαινε πίσω στο πρωτότυπο και δοκίμασε την αλληλεπίδραση. Το Overlay σου θα πρέπει τώρα να εμφανίζεται στη σωστή θέση όταν κάνεις κλικ στην καρδιά.
Τώρα θέλεις να βεβαιωθείς ότι το Overlay θα εξαφανιστεί μετά από μια συγκεκριμένη χρονική περίοδο. Στο πρωτότυπο, επέλεξε το Overlay και δημιούργησε μια χρονομετρημένη σύνδεση πίσω στο αρχικό Artboard. Ορίστε τον Trigger σε "Timed" και καθόρισε μια καθυστέρηση περίπου δύο δευτερολέπτων πριν το Overlay εξαφανιστεί.
Δοκίμασε τώρα το Overlay σου. Θα πρέπει να εμφανίζεται όταν κάνεις κλικ στην καρδιά και να εξαφανίζεται μετά από δύο δευτερόλεπτα. Αυτή η απλή αλληλεπίδραση βελτιώνει σε μεγάλο βαθμό την εμπειρία χρήστη παρέχοντας άμεση ανατροφοδότηση.
Με αυτή την οδηγία βήμα προς βήμα, ξέρεις τώρα πώς να υλοποιήσεις αποτελεσματικά τα Overlays στο Adobe XD. Χρησιμοποίησε αυτή την ικανότητα για να ενσωματώσεις διαδραστικά στοιχεία στα πρωτότυπά σου και να αναβαθμίσεις τα σχέδιά σου στο επόμενο επίπεδο.
Σύνοψη
Μέσω της εφαρμογής της λειτουργίας Overlay, μπορείς να αυξήσεις σημαντικά την εμπειρία του χρήστη στα πρωτότυπά σου. Σου επιτρέπει να ενσωματώνεις δυναμικά και διαδραστικά στοιχεία στο σχέδιο σου, εδραιώνοντας μια σαφή επικοινωνία με τον χρήστη.
Συχνές Ερωτήσεις
Τι είναι η λειτουργία Overlay στο Adobe XD;Η λειτουργία Overlay επιτρέπει να εμφανίζονται δυναμικά περιεχόμενα, ώστε να ενσωματωθούν διαδραστικά στοιχεία στα πρωτότυπα.
Πώς προσθέτω ένα Overlay;Δημιούργησε ένα νέο Artboard για το Overlay σου, επέλεξε τον Trigger "Tap" και ορίστε την ενέργεια σε "Overlay".
Μπορώ να προσαρμόσω το μέγεθος του Overlay;Ναι, μπορείς να αλλάξεις το μέγεθος του Overlay οποιαδήποτε στιγμή στο Design mode.
Πώς μπορώ να προσθέσω μια σκιά στο Overlay μου;Επίλεξε το αντικείμενο Overlay στο Design mode και πρόσθεσε μια σκιά για να αποκτήσεις ένα πιο ρεαλιστικό αποτέλεσμα.
Πόσο καιρό παραμένει ορατό το Overlay;Μπορείς να προσαρμόσεις την ορατότητα του Overlay δημιουργώντας μια χρονομετρημένη σύνδεση προς το αρχικό Artboard σου.
