Πώς να χρησιμοποιήσετε τα κιτ διεπαφής χρήστη στο Adobe XD

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

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

Πώς να κατεβάσετε κιτ UI στο Adobe XD

Αρχικά, ας ρίξουμε μια ματιά στο πώς μπορείτε να κατεβάσετε κιτ διεπαφής χρήστη στο Adobe XD, απευθείας από το λογισμικό. Απλώς ακολουθήστε αυτά τα βήματα για να ξεκινήσετε:

Βήμα 1: Κάντε κλικ στο κουμπί μενού χάμπουργκερ στην επάνω αριστερή γωνία του λογισμικού.

Βήμα 2: Στο μενού, κάντε κύλιση προς τα κάτω στην επιλογή Λήψη κιτ διεπαφής και, στη συνέχεια, κάντε κλικ σε μία από τις τρεις από τις διαθέσιμες επιλογές.

Για αυτό το άρθρο, θα επιλέξω το κιτ διεπαφής χρήστη Google Material. Ωστόσο, ανάλογα με το έργο σας, μπορείτε να επιλέξετε είτε τα κιτ Apple iOS είτε τα Microsoft Windows. Αυτό θα ανοίξει μια επίσημη ιστοσελίδα από την οποία μπορείτε να κάνετε λήψη των κιτ διεπαφής χρήστη δωρεάν.

Βήμα 3: Εντοπίστε το κιτ διεπαφής χρήστη Adobe XD στην ακόλουθη ιστοσελίδα και πραγματοποιήστε λήψη του στο σύστημά σας.

Βήμα 4: Τώρα ανοίξτε το ληφθέν αρχείο στο Adobe XD και θα σας καλωσορίσουν με ένα σωρό πίνακες τέχνης που περιέχουν πόρους διεπαφής χρήστη για την αντίστοιχη πλατφόρμα.

Μπορείτε να κρατήσετε πατημένο το κουμπί Ctrl και να μετακινήσετε τον τροχό κύλισης για μεγέθυνση/σμίκρυνση για να δείτε όλους τους μεμονωμένους πίνακες τέχνης.

Αν θέλετε να κάνετε λήψη Wireframes, μπορείτε να κάνετε κλικ στην επιλογή Wireframes στο μενού Λήψη κιτ διεπαφής χρήστη.

Μπορείτε επίσης να αναζητήσετε πρόσθετα κιτ διεπαφής χρήστη στον ιστότοπο της Adobe κάνοντας κλικ στην επιλογή Περισσότερα κιτ διεπαφής χρήστη στο μενού Λήψη κιτ διεπαφής χρήστη.

Ο ιστότοπος έχει μερικές εξαιρετικές επιλογές για να διαλέξετε, συμπεριλαμβανομένου αυτού του πραγματικά υπέροχου κιτ διεπαφής χρήστη Movie Magic που μοιάζει με heads-up οθόνη.

Τώρα που ξέρετε πώς να κατεβάζετε κιτ διεπαφής χρήστη, ας ρίξουμε μια ματιά στο πώς μπορείτε να τα χρησιμοποιήσετε στα έργα σας.

Πώς να χρησιμοποιήσετε τα κιτ διεπαφής χρήστη στο Adobe XD

Για να χρησιμοποιήσετε κιτ διεπαφής χρήστη στο έργο σας, απλώς ακολουθήστε αυτά τα απλά βήματα:

Βήμα 1: Κάντε μεγέθυνση στο στοιχείο διεπαφής χρήστη που θέλετε να χρησιμοποιήσετε στο έργο σας και κάντε κλικ στον τίτλο του για να το επιλέξετε.

Βήμα 2: Τώρα αντιγράψτε το στοιχείο χρησιμοποιώντας τη συντόμευση Ctrl+C.

Βήμα 3: Στη συνέχεια, ανοίξτε ένα νέο έργο Adobe XD από το μενού.

Βήμα 4: Εδώ, επικολλήστε το στοιχείο διεπαφής χρήστη χρησιμοποιώντας τη συντόμευση Ctrl+V.

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

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

Βήμα 6: Τώρα επιστρέψτε στο κιτ διεπαφής χρήστη για να επιλέξετε άλλο στοιχείο για προσθήκη σε αυτήν τη σελίδα. Για άλλη μια φορά, κάντε κλικ στον τίτλο του στοιχείου και αντιγράψτε το χρησιμοποιώντας τη συντόμευση Ctrl+C.

Θα δημιουργήσω ένα βασικό τοστ για αυτό το άρθρο για το οποίο θα χρησιμοποιήσω έναν από τους διαλόγους.

Βήμα 7: Επικολλήστε το νέο στοιχείο στο προηγούμενο στοιχείο και, στη συνέχεια, ευθυγραμμίστε το σύμφωνα με τους οδηγούς.

Βήμα 8: Τώρα για να επεξεργαστείτε κάθε στοιχείο στο τοστ, κάντε διπλό κλικ στο πλαίσιο κειμένου και, στη συνέχεια, εισαγάγετε το κείμενο που θέλετε να χρησιμοποιήσετε. Αρχικά, ας αλλάξουμε τον τίτλο του τοστ.

Στη συνέχεια, αλλάξτε το περιεχόμενο του σώματος κάνοντας διπλό κλικ στο πλαίσιο κειμένου και πληκτρολογώντας ό, τι θέλετε να προσθέσετε.

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

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

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

Μόλις είστε ικανοποιημένοι με το αποτέλεσμα, απλώς προχωρήστε και αποθηκεύστε το αρχείο σας κάνοντας κλικ στην επιλογή Αποθήκευση ως στο μενού ή χρησιμοποιώντας τη συντόμευση Shift+Ctrl+S.

Τελειοποιήστε το σχέδιό σας χρησιμοποιώντας κιτ διεπαφής χρήστη

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

Επόμενο: Ολοκληρώσατε ένα έργο στο Adobe XD και δεν ξέρετε πώς να το εξαγάγετε σε HTML; Ρίξτε μια ματιά στο επόμενο άρθρο για έναν απλό οδηγό βήμα προς βήμα.