Πώς να χρησιμοποιήσετε τα ui kits στο Adobe

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

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

Επίσης στην

Πώς να μετατρέψετε παρτίδες σε φωτογραφίες με το Adobe Bridge

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

Πρώτον, ας ρίξουμε μια ματιά στο πώς μπορείτε να κατεβάσετε κιτ UI στο Adobe XD, απευθείας μέσα από το λογισμικό. Ακολουθήστε τα παρακάτω βήματα για να ξεκινήσετε:

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

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

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

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

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

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

Εάν επιθυμείτε να κάνετε λήψη των Wireframes, μπορείτε να κάνετε κλικ στην επιλογή Wireframes στο μενού Get UI Kits.

Μπορείτε επίσης να αναζητήσετε πρόσθετα πακέτα UI στην ιστοσελίδα της Adobe κάνοντας κλικ στην επιλογή More UI Kits στο μενού Get UI Kits.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Επίσης στην

#γραφικό σχέδιο

Κάντε κλικ εδώ για να δείτε τη σελίδα των άρθρων σχεδίασης γραφικών

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

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

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