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

Η προδιαγραφή υλικών σχεδίασης από την Google είχε αρχικά ως στόχο την πλατφόρμα Android ως έναν τρόπο να προτείνει τη συνοχή του σχεδιασμού στην πλατφόρμα.

01 του 06

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

Ευγενική προσφορά του Tom Green

Από τη στιγμή που οι σχεδιαστές άρχισαν να το σπρώχνουν και να κατανοήσουν τη σκέψη πίσω από αυτό, το Material Design έγινε ήσυχα μία από τις πιο σημαντικές οπτικές φιλοσοφίες στον web και το κινητό . Το μόνο που χρειάζεται να κάνετε για να δείτε τι παίρνουμε είναι να κάνουμε μια αναζήτηση υλικού σχεδιασμού στο Pinterest και θα δείτε εκατοντάδες παραδείγματα και πειράματα σε συσκευές, δισκία, ακόμη και ιστοσελίδες.

Η συναρπαστική πτυχή της Σχεδίασης Υλικών είναι η σκέψη της Google σχετικά με τον τρόπο εμφάνισης και λειτουργίας των εφαρμογών σε κινητές συσκευές, αλλά οι έννοιες εφαρμόζονται σε οποιαδήποτε οθόνη οποιασδήποτε μορφής σε οποιαδήποτε πλατφόρμα. Όπως αναφέρει η Google στην αρχική παράγραφο των προδιαγραφών, "Προκάλεσε τον εαυτό μας να δημιουργήσει μια οπτική γλώσσα για τους χρήστες μας, η οποία συνθέτει τις κλασικές αρχές καλής σχεδίασης με την καινοτομία και τη δυνατότητα της τεχνολογίας και της επιστήμης. Αυτό είναι υλικό σχεδιασμό. Αυτό το spec είναι ένα ζωντανό έγγραφο που θα ενημερωθεί καθώς συνεχίζουμε να αναπτύσσουμε τις αρχές και τις λεπτομέρειες του σχεδιασμού υλικών. "

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

Σε αυτό το "Πώς να" πρόκειται να δημιουργήσουμε μια κάρτα με βάση το spec. Αντί να δημιουργήσουμε την κάρτα με μια ποικιλία εργαλείων απεικόνισης και σχεδίασης, θα το βρούμε από μια διαφορετική κατεύθυνση. Πρόκειται να χρησιμοποιήσουμε τα εργαλεία του σχεδιασμού εμπειρίας της Adobe, το οποίο βρίσκεται σήμερα σε δημόσια προεπισκόπηση μόνο για Macintosh και είναι δωρεάν. Μπορείτε να το κατεβάσετε εδώ.

Ας αρχίσουμε.

02 του 06

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

Χρησιμοποιήστε το εργαλείο artboard και ένα πρότυπο artboard για να ξεκινήσετε. Ευγενική προσφορά του Tom Green

Δεν υπάρχει εμφανής τρόπος για να δημιουργήσετε μια οθόνη Android από την οθόνη έναρξης στο Experience Design CC (XD). Αυτό που κάναμε όταν ανοίξαμε το XD είναι να επιλέξετε την επιλογή iPhone 6 και, όταν ανοίξει η διεπαφή, επιλέγουμε το εργαλείο Artboard στο κάτω μέρος της γραμμής εργαλείων και επιλέγουμε Android Mobile από τις επιλογές στον πίνακα Ιδιότητες στα δεξιά. Στη συνέχεια, μεταβείτε στο εργαλείο επιλογής, κάντε κλικ μία φορά στο όνομα του πίνακα του iPhone και διαγράψτε τον πίνακα γραφικών. ΟΧΙ πια.

Στην τρέχουσα έκδοση του XD, υπάρχει ένα μικρό βέλος δίπλα στο iPhone 6 το οποίο, όταν πατηθεί, ανοίγει ένα αναπτυσσόμενο μενού. Από εκεί επιλέγετε την έκδοση Android Mobile και τον επιλεγμένο πίνακα σχεδίασης Android Mobile που ανοίγει στη διεπαφή.

Για να βεβαιωθείτε ότι διαθέτουμε τον κατάλληλο χώρο οθόνης για την κάρτα, πηγαίνουμε συνήθως στο Sketch 3 και αντιγράφετε και επικολλήστε μια γραμμή κατάστασης, μια γραμμή επάνω και μια γραμμή εφαρμογής από το πρότυπο σχεδίασης υλικού στον πίνακα γραφικών. Το Sketch 3.2 περιέχει ένα πρότυπο σχεδίασης υλικού ( File> New From Template> Design του Υλικού ) και ένα άλλο πολύ καλό ελεύθερο από τον Kyle Ledbetter που μπορείτε να αποκτήσετε εδώ. Εάν δεν έχετε Sketch, μπορείτε να τα αντιγράψετε και να τα επικολλήσετε από τα αυτοκόλλητα XD που βρίσκονται στο File> Open UI Kit> Google Material . Μπορείτε επίσης να τα κατεβάσετε από τη Google για χρήση σε Photoshop, Illustrator, After Effects και Sketch.

03 του 06

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

Τα κιτ UI είναι εξαιρετικά χρήσιμα, δεδομένου ότι συμμορφώνονται με την προδιαγραφή Υλικού Σχεδιασμού. Κουαρτέτο του Tom Green

Ένα από τα πιο χρήσιμα χαρακτηριστικά του XD είναι η συμπερίληψη των UI Kits για Apple iOS, Google Material και Microsoft Windows. Από πολλές απόψεις, προσθέτουν τη λέξη "Rapid" στον όρο "Rapid Prototyping" και κάνουν ευκολότερη τη δουλειά του σχεδιαστή, δεδομένου ότι τα κοινά στοιχεία του UI δεν πρέπει να αναπαράγονται συνεχώς σε μια εφαρμογή σχεδίασης όπως το Photoshop, Illustrator ή Σκίτσο.

Το στοιχείο UI που χρειαζόμασταν ήταν μια κάρτα. Για να φτάσουμε σε αυτό, επιλέξαμε το File> Open UI Kit> Google Material και το κιτ άνοιξε ως νέο έγγραφο. Το στοιχείο που χρειαζόμασταν βρέθηκε στην κατηγορία Κάρτες.

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

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

04 του 06

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

Κάθε στοιχείο UI που προστίθεται σε ένα έργο XD ομαδοποιείται. Βεβαιωθείτε ότι έχετε αποκρυπτογραφήσει το αντικείμενο πριν από την επεξεργασία. Ευγενική προσφορά του Tom Green

Όταν η κάρτα στο XD φτάνει από το πρόχειρο, μην αρχίσετε να εργάζεστε με αυτό. Το πρώτο πράγμα που πρέπει να κάνετε είναι να ακυρώσετε την κάρτα επειδή χρειάζεστε πρόσβαση στα κομμάτια και τα κομμάτια που συνθέτουν την κάρτα. Για να το κάνετε αυτό, επιλέξτε την κάρτα και επιλέξτε Αντικείμενο> Ομαδοποίηση ή πατήστε το πλήκτρο Shift-Command-G.

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

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

Το πλαίσιο με το κείμενο είναι στην πραγματικότητα ένα σκούρο γκρι με 50% αδιαφάνεια. Αυτό το πλαίσιο μπορεί να χρησιμοποιηθεί ως φόντο κειμένου και μπορείτε να αλλάξετε το χρώμα και την αδιαφάνεια του κουτιού.

Αν και δεν είναι άμεσα εμφανές, το ανοιχτό γκρι κουτί ακολουθεί το spec Material Design, καθώς οι κορυφαίες γωνίες του είναι στρογγυλεμένες από 2 εικονοστοιχεία. Έχετε αυτό κατά νου αν προσθέτετε μια εικόνα. Θα χρειαστούν επίσης τις στρογγυλεμένες γωνίες που μπορούν να προστεθούν σε μια εφαρμογή απεικόνισης ή στο XD.

Βλέποντας πως αυτή είναι η κατάσταση ηρεμίας της κάρτας χρειάζεται και μια σκιά. Το spec καθιστά σαφές ότι υπάρχει ένα ηρεμιστικό υψόμετρο της κάρτας των 2 εικονοστοιχείων. Για να προσθέσετε αυτό, επιλέξτε το σχήμα του μαύρου φόντου και ορίστε τις τιμές Y και B (Blur) στο 2 στον πίνακα ιδιοτήτων.

05 του 06

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

Ένας τρόπος εργασίας με τις εικόνες είναι να χρησιμοποιήσετε το σύμβολο κράτησης θέσης για να αποκρύψετε την εισαγόμενη εικόνα. Ευγενική προσφορά του Tom Green

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

Τραβήξαμε τότε το ανοιχτό γκρι πλαίσιο πάνω από την εικόνα στο χαρτόνι και το επιλεγμένο Αντικείμενο> Μάσκα με Σχήμα . Το αποτέλεσμα ήταν η εικόνα να πάρει τις στρογγυλεμένες γωνίες του σχήματος. Στη συνέχεια μετακινήσαμε την εικόνα στην τελική της θέση.

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

06 του 06

Χρησιμοποιώντας το χαρακτηριστικό πλέγματος Adobe XD CC

Χρησιμοποιήστε τη λειτουργία πλέγματος του Adobe Experience Design CC για ακριβή τοποθέτηση των στοιχείων. Ευγενική προσφορά του Tom Green

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

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

Με το οριζόντιο πλέγμα, κάντε κλικ στην κάρτα και μετακινήστε την στην τελική της θέση.

Για να τελειώσουμε, επιλέξαμε την κάρτα, κάναμε κλικ στο κουμπί Repeat Grid και άλλαξαμε την απόσταση μεταξύ των καρτών στα 8 εικονοστοιχεία.