Χρησιμοποιήστε το Adobe Experience Design CC για να δημιουργήσετε μια κάρτα σχεδίασης υλικού

Σε αυτό το άρθρο

Η προδιαγραφή υλικών σχεδίασης από την Google είχε αρχικά ως στόχο την πλατφόρμα Android ως έναν τρόπο για να υποδηλώσει τη συνοχή του σχεδιασμού στην πλατφόρμα. Μόλις οι σχεδιαστές άρχισαν να το σπρώχνουν και να καταλαβαίνουν τη σκέψη πίσω από αυτό, το Material Design έχει γίνει ήσυχα μια από τις πιο σημαντικές οπτικές φιλοσοφίες στον σχεδιασμό ιστοσελίδων και κινητών. Το μόνο που πρέπει να κάνετε για να δείτε τι φτάνουμε είναι να κάνετε μια αναζήτηση Σχεδιασμού Υλικού στο Pinterest και θα δείτε εκατοντάδες παραδείγματα και πειράματα σε συσκευές, tablet, ακόμη και σε ιστότοπους. Η συναρπαστική πτυχή του Material Design είναι ότι η Google σκέφτεται πώς πρέπει να εμφανίζονται οι εφαρμογές και να λειτουργούν σε κινητές συσκευές, αλλά οι έννοιες εφαρμόζονται σε οποιαδήποτε οθόνη οποιουδήποτε μεγέθους σε οποιαδήποτε πλατφόρμα. Όπως αναφέρει η Google στην πρώτη παράγραφο της προδιαγραφής, «Προκάλεσα τον εαυτό μας να δημιουργήσουμε μια οπτική γλώσσα για τους χρήστες μας που συνθέτει τις κλασικές αρχές του καλού σχεδιασμού με την καινοτομία και τη δυνατότητα της τεχνολογίας και της επιστήμης. Αυτός είναι σχεδιασμός υλικού. Αυτή η προδιαγραφή είναι ένα ζωντανό έγγραφο που θα ενημερωθεί καθώς συνεχίζουμε να αναπτύσσουμε τις αρχές και τις λεπτομέρειες του σχεδιασμού υλικού. » Το υλικό για το οποίο γίνεται λόγος, σε πολύ γενικούς όρους, είναι χαρτί και ένα χαρακτηριστικό γνώρισμα του Material Design είναι η κάρτα. Σκεφτείτε μια κάρτα ευρετηρίου σε μια επιφάνεια και είστε στο σωστό δρόμο. Η κάρτα είναι ένα στοιχείο που περιέχει φωτογραφίες, βίντεο, συνδέσμους κειμένου και ούτω καθεξής, αλλά όπου διαφέρουν από τα περισσότερα διαδραστικά σχέδια, πρέπει να εστιάζουν σε ένα μόνο θέμα. Οι κάρτες έχουν στρογγυλεμένες γωνίες, περιέχουν αχνές σκιές που υποδηλώνουν ότι βρίσκονται πάνω από μια επιφάνεια και αν βρίσκονται στο ίδιο επίπεδο αναφέρονται ως «συλλογή». Σε αυτό το «Πώς να» πρόκειται να δημιουργήσουμε μια κάρτα με βάση τις προδιαγραφές. Αντί να δημιουργήσουμε την κάρτα με μια ποικιλία εργαλείων απεικόνισης και σχεδίασης, θα την προσεγγίσουμε από διαφορετική κατεύθυνση. Θα χρησιμοποιήσουμε τα εργαλεία στο Adobe Experience Design, το οποίο βρίσκεται επί του παρόντος σε δημόσια προεπισκόπηση μόνο για Macintosh και είναι δωρεάν. Μπορείτε να το κατεβάσετε εδώ. Ας αρχίσουμε.

Δημιουργία του πρωτοτύπου Artboard στο Adobe Experience Design CC

Δεν υπάρχει προφανής τρόπος για να δημιουργήσετε μια οθόνη Android από την οθόνη έναρξης στο Experience Design CC (XD). Αυτό που κάναμε όταν ανοίξαμε το XD, είναι να επιλέξουμε την επιλογή iPhone 6 και, όταν ανοίξει η διεπαφή, επιλέγουμε το Εργαλείο artboard στο κάτω μέρος του Γραμμή εργαλείων και επιλέξτε Android για κινητά από τις επιλογές στον πίνακα Ιδιότητες προς τα δεξιά. Στη συνέχεια μεταβαίνουμε στο εργαλείο επιλογής, κάντε κλικ μία φορά στο Όνομα artboard iPhone και διαγράψτε τον πίνακα γραφικών. Στην τρέχουσα έκδοση του XD, υπάρχει ένα μικρό βέλος δίπλα στο iPhone 6 το οποίο, όταν πατηθεί, ανοίγει ένα αναπτυσσόμενο μενού. Από εκεί επιλέγετε το Έκδοση Android για κινητά και ο επιλεγμένος πίνακας γραφικών Android Mobile ανοίγει στη διεπαφή. Για να διασφαλίσουμε ότι έχουμε τον κατάλληλο χώρο οθόνης για την κάρτα, συνήθως κατευθυνόμαστε στο Σκίτσο 3 και αντιγράφουμε και επικολλάμε μια Γραμμή κατάστασης, Γραμμή Nav και Γραμμή εφαρμογών από το Πρότυπο σχεδίασης υλικών στον πίνακα γραφικών. Το Σκίτσο 3.2 περιέχει ένα πρότυπο Σχεδιασμού Υλικού (Αρχείο > Νέο από πρότυπο > Σχεδιασμός υλικών) και ένα άλλο πολύ καλό δωρεάν είναι από τον Kyle Ledbetter που μπορείτε να αποκτήσετε εδώ. Εάν δεν έχετε Sketch, μπορείτε να τα αντιγράψετε και να τα επικολλήσετε από τα αυτοκόλλητα XD που βρίσκονται στο Αρχείο > Ανοίξτε το κιτ UI > Υλικό Google. Μπορείτε επίσης να τα κατεβάσετε από το Google για χρήση στο Photoshop, Illustrator, After Effects και Sketch.

Προσθήκη κάρτας σχεδιασμού υλικών σε ένα Adobe XD CC Artboard

Ένα από τα πιο χρήσιμα χαρακτηριστικά του XD είναι η συμπερίληψη UI Kits για Apple iOS, Google Material και Microsoft Windows. Από πολλές απόψεις, προσθέτουν τη λέξη «Rapid» στον όρο «Rapid Prototyping». Επίσης, διευκολύνουν τη δουλειά του σχεδιαστή, καθώς τα κοινά στοιχεία διεπαφής χρήστη δεν πρέπει να δημιουργούνται συνεχώς σε μια εφαρμογή σχεδίασης όπως το Photoshop, Illustrator ή Σκίτσο. Το στοιχείο διεπαφής χρήστη που χρειαζόμασταν ήταν μια κάρτα. Για να φτάσουμε σε αυτό επιλέξαμε Αρχείο > Ανοίξτε το κιτ UI > Υλικό Google και το κιτ άνοιξε ως νέο έγγραφο. Το στοιχείο που χρειαζόμαστε βρέθηκε στο Κατηγορία καρτών. Αυτό που μας αρέσει είναι ότι συμμορφώνονται με τις προδιαγραφές Σχεδιασμού Υλικού όπως ορίζονται στις προδιαγραφές Content Blocks, καθώς και τις προδιαγραφές μορφοποίησης και διαστήματος κειμένου που ορίζονται στις προδιαγραφές τυπογραφίας. Το στυλ της κάρτας που θέλαμε ήταν το κάτω αριστερά. Απλώς το μαρκάρουμε με το ποντίκι μας και το αντιγράψαμε στο πρόχειρο. Δυστυχώς, το XD δεν περιέχει διεπαφή με καρτέλες για ανοιχτά έγγραφα. Αυτό που κάνουμε είναι να μετακινήσουμε το ανοιχτό παράθυρο εγγράφου προς τα κάτω για να αποκαλύψουμε αυτό που επεξεργαζόμαστε, επιλέξτε το και επικολλήστε το. Ένας άλλος τρόπος γρήγορης εναλλαγής μεταξύ ανοιχτών εγγράφων XD είναι να πατήσετε Εντολή+«.

Πώς να επεξεργαστείτε ένα στοιχείο σχεδιασμού υλικού στο Adobe Experience Design CC

Όταν η κάρτα στο XD φτάσει από το πρόχειρο, μην αρχίσετε χαρούμενα να δουλεύετε μαζί της. Το πρώτο πράγμα που πρέπει να κάνετε είναι να αποσυνδέσετε την κάρτα επειδή χρειάζεστε πρόσβαση στα κομμάτια που συνθέτουν την κάρτα. Για να το κάνετε αυτό, επιλέξτε την κάρτα και επιλέξτε Αντικείμενο > Κατάργηση ομάδας ή τύπος Βάρδια+Εντολή+ΣΟΛ.

Η κάρτα σας αποτελείται τώρα από τρία κομμάτια:

• Ανοιχτό γκρι κουτί για την εικόνα.
• Μεσαίο γκρι πλαίσιο για το κείμενο.
• Το πίσω κουτί χρησιμοποιείται ως φόντο.

Το πρώτο βήμα είναι να διαγράψετε το ανοιχτό γκρι πλαίσιο. Ο μόνος σκοπός του είναι να λειτουργεί ως σύμβολο κράτησης θέσης για την εικόνα που την καθιστά, αν το επιλέξετε, προαιρετικό. Το πλαίσιο με το κείμενο είναι στην πραγματικότητα ένα σκούρο γκρι με αδιαφάνεια 50%. Αυτό το πλαίσιο μπορεί να χρησιμοποιηθεί ως φόντο του κειμένου και μπορείτε να αλλάξετε το χρώμα και την αδιαφάνεια του κουτιού. Αν και δεν είναι άμεσα εμφανές, το ανοιχτό γκρι κουτί ακολουθεί τις προδιαγραφές του Σχεδιασμού Υλικού, καθώς οι κορυφαίες γωνίες του είναι στρογγυλεμένες κατά 2 pixel. Λάβετε υπόψη αυτό εάν προσθέτετε μια εικόνα. Θα χρειαστεί επίσης τις στρογγυλεμένες γωνίες που μπορούν να προστεθούν σε μια εφαρμογή απεικόνισης ή σε XD. Βλέποντας πώς είναι αυτή η κατάσταση ανάπαυσης της κάρτας, χρειάζεται επίσης μια σκιά. Η προδιαγραφή καθιστά σαφές ότι υπάρχει ένα ανάγλυφο ύψος της κάρτας των 2 pixel. Για να το προσθέσετε, επιλέξτε το μαύρο φόντο σχήμα και ορίστε τις τιμές Y και B (Blur) σε 2 στον πίνακα ιδιοτήτων.

Πώς να προσθέσετε μια εικόνα στην κάρτα σχεδιασμού υλικού στο Adobe XD CC

Η γνώση της κάρτας έχει πλάτος 344 εικονοστοιχεία και η περιοχή της εικόνας έχει ύψος 150 εικονοστοιχεία (το μισό ύψος του ανοιχτού γκρι κουτιού) Ανοίξαμε την εικόνα στο Photoshop, την περικόψαμε στο μέγεθος και την αποθηκεύσαμε χρησιμοποιώντας την επιλογή @ 2x στο πλαίσιο διαλόγου «Εξαγωγή ως» του Photoshop. Η εικόνα εισήχθη στο Adobe XD. Στη συνέχεια σύραμε το ανοιχτό γκρι πλαίσιο πάνω από την εικόνα στον πίνακα και επιλέξαμε Αντικείμενο > Μάσκα με σχήμα. Το αποτέλεσμα ήταν η εικόνα να πάρει τις στρογγυλεμένες γωνίες του σχήματος. Στη συνέχεια μετακινήσαμε την εικόνα στην τελική της θέση. Με την εικόνα στη θέση της, αλλάξαμε στη συνέχεια το χρώμα φόντου του Μεσαίου γκρι κουτιού, αλλάξαμε το κείμενο και το χρώμα του κειμένου του συνδέσμου.

Χρήση της δυνατότητας πλέγματος Adobe XD CC Grid

Με την κάρτα ολοκληρωμένη, τώρα πρέπει να τοποθετηθεί σωστά σύμφωνα με τις προδιαγραφές Material Design. Αυτό σημαίνει ότι υπάρχουν 8 εικονοστοιχεία και στις δύο πλευρές της κάρτας και η κάρτα πρέπει να είναι 8 εικονοστοιχεία κάτω από τη γραμμή εφαρμογών. Για να το κάνετε αυτό, κάντε κλικ μία φορά στο όνομα artboard και, στο Πίνακας ιδιοτήτων, επιλέξτε Πλέγμα. Το πλέγμα εμφανίζεται πάνω από το artboard. Το προεπιλεγμένο μέγεθος πλέγματος είναι 8 pixel που τυχαίνει να είναι το ίδιο μέγεθος πλέγματος για το Material Design. Εάν χρειάζεστε διαφορετικό μέγεθος, αλλάξτε την τιμή στην περιοχή πλέγματος. Εάν θέλετε να αλλάξετε το χρώμα του πλέγματος, κάντε κλικ στο τσιπ χρώματος και επιλέξτε ένα χρώμα από το αποτέλεσμα Επιλογέας χρώματος. Με το πλέγμα ορατό, κάντε κλικ στο κάρτα και μετακινήστε το στην τελική του θέση. Για να ολοκληρώσουμε, επιλέξαμε την κάρτα, κάναμε κλικ στο Επαναλάβετε το πλέγμα κουμπί και άλλαξε επίσης το διάστημα μεταξύ των καρτών σε 8 pixel.