Εκπαιδευτικά Σκετς

Ένας οδηγός γρήγορης εκκίνησης για τα ηλεκτρικά εργαλεία UX

Είναι τόσο εύκολο να αναρωτιέστε γιατί σχεδιάσατε ποτέ άλλο τρόπο.

Το UX Power Tools είναι το πιο προηγμένο σύστημα σχεδίασης Sketch που έγινε ποτέ. Είναι σαν Bootstrap για τους σχεδιαστές. Όλη η σκληρή δουλειά έχει ήδη γίνει για εσάς, έτσι ώστε να εστιάσετε στο κομμάτι διασκέδασης: στην πραγματικότητα σχεδιάζοντας.

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

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

Περιεχόμενα του Οδηγού γρήγορης εκκίνησης

1. Εισαγωγή: Απλά μια εισαγωγή!
2. Ρύθμιση: Πριν ανοίξετε το αρχείο (τα αρχεία)
3. Χρώματα: Προσαρμογή και προσθήκη χρωμάτων
4. Τυπογραφία: Αλλαγή των γραμματοσειρών και των γραμματοσειρών
5. Σύμβολα: Εισαγωγή στα Σύμβολα
6. Εικονίδια: Ανταλλαγή εικονιδίων και προσθήκη νέων
7. Πεδία: Προσαρμογή πεδίων εισαγωγής
8. Κουμπιά: Προσαρμογή κουμπιών
9. Άλλες προσαρμογές: Σκιές, Scrims, και άλλα!
10. Περίληψη: Αναπνεύστε λίγο!
11. Βοήθεια: Περισσότερα βοήθεια + Προσαρμοσμένες υπηρεσίες

1. Εισαγωγή

Είμαι σχεδιαστής προϊόντων πλήρους απασχόλησης για μια ψηφιακή αντιπροσωπεία και βοηθάω να γυρίσω οπουδήποτε από 12-20 συστήματα σχεδιασμού και πλαίσια το χρόνο για νέα προγράμματα πελατών. Δημιούργησα UX Power Tools από αναγκαιότητα, ώστε να είμαι πιο αποτελεσματικός και έχει αυξήσει την παραγωγικότητά μου σχεδόν 10 φορές.

Μόλις μάθετε τα βασικά του συστήματος και τα πράγματα κάτω από τα δάχτυλά σας, θα σχεδιάζετε με μεγαλύτερη ακρίβεια, συνέπεια και αποτελεσματικότητα. Χιλιάδες ερασιτέχνες και επαγγελματίες σχεδιαστές σε όλο τον κόσμο σε μεγάλες και μικρές εταιρείες χρησιμοποιούν το UX Power Tools για να επιταχύνουν τις ροές εργασίας τους.

Αυτός ο Οδηγός γρήγορης εκκίνησης λειτουργεί τόσο για το σύστημα ιστού όσο και για το κινητό σύστημα, οπότε πρέπει να το μάθετε μόνο μία φορά!

Ας το κάνουμε!

11:28 EST - Εδώ σχεδιάζουμε τα ηλεκτρικά εργαλεία UX. Αριστερά, Χριστιανός. Δεξιά, ο Jon (εγώ). Λίγο λίγο ύπνο, λίγη μπίρα o 'μπύρα, και άφθονο δείκτες whiteboard. Μην αφήνετε το πουκάμισο της Νέας Υόρκης να σας ξεγελάσει. Ζούμε στην Ινδιανάπολη της Ινδιάνας.

2. Ρύθμιση

Εγκαταστήστε τη γραμματοσειρά Open Sans

Διατίθεται δωρεάν από την Google και έρχεται μαζί με το ίδιο το πακέτο. Σημειώνεται στο readme και το Sketch θα σας ειδοποιήσει επίσης. Σε αυτό το σημείο είμαστε μόνο γκρίνια! Τέλος πάντων, μπορείτε να αλλάξετε αυτό αργότερα, αλλά είναι καλό να βεβαιωθείτε ότι έχει εγκατασταθεί για να ξεκινήσει, ώστε να μην πετάξετε τα σύμβολά σας.

Αλλαγή ρυθμίσεών σας Nudging

Το σύστημα βασίζεται σε ένα πλέγμα 8-pixel, ώστε να μπορείτε να εξοικονομήσετε πολλούς πονοκέφαλο αλλάζοντας τις ρυθμίσεις σας από 10px σε 8px.

...

Όλα εγκαθίστανται; Εκπληκτικός!

3. Χρώματα

Αυτός είναι ο καλύτερος τρόπος για να ξεκινήσετε, οπότε εύχονα ονομάσαμε τη σελίδα "Ξεκινήστε εδώ". Είναι πολύ δύσκολο να το βάλεις μπροστά, οι άνθρωποι :)

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

Style Stacks ™

Το UX Power Tools χρησιμοποιεί ένα μικρό τέχνασμα αποτελεσματικότητας που ονομάζεται Style Stacks ™ (δίπλωμα ευρεσιτεχνίας σε εκκρεμότητα), για να είναι εξαιρετικά εύκολο να ενημερώνετε μαζικά πολλά στυλ επιπέδων ταυτόχρονα. Αυτά τα μπλοκ χρώματος που βλέπετε στον πίνακα γραφικών "Σετ χρωμάτων και γραμματοσειρών εδώ" είναι στην πραγματικότητα στοίβες ορθογωνίων, το καθένα με διαφορετικό στυλ στρώματος που εφαρμόζεται σε αυτό. Αυτό μας επιτρέπει να ενημερώνουμε γρήγορα όλα τα στυλ επιπέδων ταυτόχρονα. Βολικός!

Πώς να προσαρμόσετε τα χρώματα

Βήμα 1
Κάντε κλικ και σύρετε για να επιλέξετε το μπλοκ χρώματος. Μου αρέσει να ξεκινώ με το κύριο χρώμα της μάρκας μου, οπότε θα επιλέξω "Πρωτογενής". Μην απλά κάντε κλικ στο μπλοκ. Υπάρχουν πολλά ορθογώνια σε αυτήν τη στοίβα και πρέπει να τα επιλέξετε όλα.

Έχω κλειδώσει όλες τις ετικέτες, έτσι δεν χρειάζεται να ανησυχείτε για τυχαία επιλογή του κειμένου!

Βήμα 2
Δείτε πώς ο Επιθεωρητής εμφανίζει τα Fills, Borders, and Inner Shadows; Αυτό συμβαίνει επειδή υπάρχουν ορθογώνια σε αυτή τη Στήλη Στυλ που έχουν ένα ή περισσότερα από αυτά τα χαρακτηριστικά. Επιλέξτε ένα χρώμα και ενημερώστε κάθε μία από αυτές τις τιμές χρώματος. Μου αρέσει να πηγαίνω από κάτω προς τα πάνω επειδή ο επιλογέας χρωμάτων μπορεί να πάρει με τον τρόπο:

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

Βήμα 3
Συγχρονίστε τις αλλαγές σας. Το σκίτσο είναι εξαιρετικά φανταστικό και παρά τα χαρακτηριστικά αυτά που ισχύουν σε πολλαπλά στυλ επιπέδων, συγχρονίζει αυτές τις αλλαγές σε κάθε αντίστοιχο στυλ στρώματος (πλήρωση, περίγραμμα, αριστερά περιγράμματος, κατώτατο όριο, κλπ):

SKETCH UPDATE (8/31/2018):
Η ενημέρωση και ο συγχρονισμός στυλ έχουν μεταφερθεί στο αναπτυσσόμενο μενού στυλ. Απλά κάντε κλικ στο "Update Layer Style" για να αποθηκεύσετε τις αλλαγές χρωμάτων σας :)

Ένας γρήγορος τρόπος για να διαπιστώσετε αν όλα δούλευαν είναι να ελέγξετε τη σελίδα Components (εάν χρησιμοποιείτε το σύστημα ιστού) ή τη σελίδα Style Guide (εάν χρησιμοποιείτε το κινητό σύστημα). Θα πρέπει να δείτε το όμορφο νέο χρώμα σας:

Γεια σου, το χρώμα μας! Τα στυλ επιπέδων διαφανειών Palette / UI / Fill χρησιμοποιούνται συχνότερα σε όλο το σύστημα, αλλά θα δείτε επίσης ότι τα στυλ περιγράμματος έχουν ενημερωθεί αν ανοίξετε το αναπτυσσόμενο μενού στυλ επιπέδων στον Επιθεωρητή. Αυτά τα στυλ είναι χρήσιμα στη σελίδα των συμβόλων. Θα φτάσουμε σε αυτά αργότερα.

Συνεχίστε να κάνετε αυτό για τις άλλες στοίβες στυλ στο artboard για να συμπληρώσετε τα χρώματα της επωνυμίας σας. Ακολουθεί μια γρήγορη ανασκόπηση του τρόπου με τον οποίο το UXPT χρησιμοποιεί χρώμα:

  • Πρωτογενές: Το κύριο χρώμα της επωνυμίας σας
  • Δευτεροβάθμια: Το δευτερεύον χρώμα της επωνυμίας σας (αν έχετε ένα)
  • Ενεργός: Αυτό είναι αυτό που χρησιμοποιώ για checkboxes, ραδιόφωνα και άλλες ενεργές καταστάσεις. Έχω την τάση να χρησιμοποιούν το κύριο χρώμα της μάρκας γι 'αυτό, αλλά δεν χρειάζεται να.
  • Έμφαση 1: Το χρώμα "επιτυχίας" σας
  • Έμφαση 2: Το προειδοποιητικό σας χρώμα
  • Έμφαση 3: Το χρώμα "λάθους" σας
  • Μαύρο: Η βάση σας είναι μαύρη. Σας προτείνω να χρησιμοποιήσετε ένα έγχρωμο μαύρο (βλ. FAQ)
  • Λευκό: Η βάση σας είναι λευκή. Συνήθως χρησιμοποιώ μόνο #FFFFFF, αλλά και το μπεζ είναι δροσερό.

Συχνές ερωτήσεις

Γιατί δεν ενημερώθηκαν τα χρώματα των κειμένων μου όταν συγχρονίστησα την αλλαγή χρώματος (ες) μου;
Οι μορφές κειμένου και οι στυλ επιπέδων είναι διαφορετικές. Ενημερώνουμε μόνο τα Στυλ Στρώσεων σε αυτό το βήμα. Μην ανησυχείτε, θα φτάσουμε στα Στυλ Κειμένου στην επόμενη ενότητα.

Δεν βλέπω την αλλαγή χρώματος σε άλλες σελίδες!
Βεβαιωθείτε ότι σύρετε για να επιλέξετε ολόκληρη τη Στήλη Στυλ και όχι μόνο κάντε κλικ στο ορθογώνιο στην κορυφή. Και μην ξεχάσετε να συγχρονίσετε!

Τι σημαίνει η "Χρωματική πτώση για το μαύρο";
Σπάνια χρησιμοποιώ καθαρό μαύρο (# 000000) όταν σχεδιάζω. Αντ 'αυτού, μου αρέσει να χρησιμοποιώ το μαύρο που τείνει προς το κύριο χρώμα της μάρκας μου. Αυτό το ορθογώνιο πτώσης χρώματος είναι το κύριο χρώμα σας με 80% καθαρό μαύρο ορθογώνιο στην κορυφή του. Είναι ένα καλό σημείο εκκίνησης για την πτώση χρώματος για ένα έγχρωμο μαύρο χρώμα.

Γιατί μόνο 8 χρώματα;
Κρατήστε το απλό. Υποστηρίζω τη χρήση του χρώματος πολύ σκόπιμα σε UI, έτσι βρίσκω ότι σπάνια υπάρχει ανάγκη για περισσότερα χρώματα από αυτό. Αυτός δεν είναι ένας σκληρός κανόνας, αλλά λειτουργεί για μένα! Μπορείτε να προσθέσετε περισσότερα. Αυτό μας φέρνει βολικά για να ...

Πώς να προσθέσετε περισσότερα χρώματα

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

  1. Σύρετε για να επιλέξετε μια υπάρχουσα στοίβα χρωμάτων όπως προηγουμένως.
  2. Αντιγράψτε τα περιεχόμενα της στοίβας με την εντολή Command + C.
  3. Επικολλήστε αυτό το αντίγραφο της στοίβας κάπου στον έγχρωμο πίνακα γραφικών.
  4. Ενημερώστε τα χρώματα όπως πριν, αλλά μην συγχρονίζετε ακόμα.
  5. Ομαδοποιήστε αυτήν τη στοίβα στυλ (αυτό θα σας διευκολύνει να περάσετε από όλα τα στοιχεία της στοίβας). Τώρα πηγαίνετε στην ομάδα στοίβες στυλ και επιλέξτε το πάνω ορθογώνιο. Μεταβείτε στο αναπτυσσόμενο μενού στυλ επιπέδων στον Επιθεωρητή και μεταβείτε στο κάτω μέρος. Επιλέξτε "Δημιουργία νέου κοινόχρηστου στυλ". Δώστε το νέο όνομα.
  6. Επαναλάβετε το βήμα 5 έως ότου δημιουργήσετε νέα στυλ επιπέδων για κάθε ορθογώνιο στην νέα στοίβα ομάδας στυλ. Όταν τελειώσετε, μπορείτε να την αποκρυπτογραφήσετε έτσι ώστε να είναι εύκολο να το σύρετε - επιλέξτε αργότερα.
  7. Εγινε! Θα δημιουργήσουμε σύμβολα χρώματος για αυτά αργότερα στην Ενότητα 5: Σύμβολα.
Κοιτάξτε το υπέροχο μπλε που μόλις πρόσθεσα. Μην ξεχάσετε να αντιγράψετε και να επικολλήσετε ολόκληρη τη στοίβα στυλ.

4. Τυπογραφία

Η τυπογραφία δίνει στην εφαρμογή σας φωνή, έτσι σε αυτή την ενότητα θα μάθετε πώς να προσαρμόζετε τη γραμματοσειρά.

Βολικά, μπορούμε να κάνουμε τα πάντα από την ίδια σελίδα ("Ξεκινήστε εδώ") όπου προσαρμόσαμε τα χρώματα μας:

Καταρχάς. Αυτό δεν είναι ένα σφάλμα:

Όπως και με τα χρώματα μας, χρησιμοποιούμε στοίβα στυλ για να μας βοηθήσετε να αλλάζουμε γρήγορα πολλά στυλ κειμένου ταυτόχρονα. Έτσι, παρόλο που φαίνεται ότι αλλάζετε μόνο 18 μαύρους στυλ κειμένου, σε ορισμένες περιπτώσεις αλλάζετε 72 μορφές κειμένου διαφόρων διαφανειών και ευθυγραμμίσεων:

Οι δύο τελευταίες γραμμές μοιάζουν με διπλότυπα, αλλά ένα από αυτά έχει 18 κεντρικά γραμμωμένα στυλ, και το ένα έχει 18 στυλ αριστερά ευθυγραμμισμένα.

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

Πώς να προσαρμόσετε τη γραμματοσειρά

Βήμα 1
Σύρετε για να επιλέξετε όλο το κείμενο στον πίνακα "Έναρξη εδώ":

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

Βήμα 2
Επιλέξτε ένα νέο τυπογραφικό στοιχείο στον πίνακα Επιθεώρηση. Προσέξτε προσεκτικά τις γραμματοσειρές στο αναπτυσσόμενο μενού. Εάν συναντήσετε μια γραμματοσειρά που δεν έχει έντονη παραλλαγή, τότε θα ξεφορτωθεί το βάρος γραμματοσειράς "Bold" για τα στυλ κειμένου που τελειώνουν στο "... 2" και δεν θα δείτε έντονο κείμενο σε όλο το κείμενο του artboard στυλ καθώς συνεχίζετε το βέλος μέσα από τις γραμματοσειρές.

Τα στυλ κειμένου ενδέχεται να φαίνονται εσφαλμένα, αλλά το μόνο που έχετε να κάνετε είναι να σύρετε για να επιλέξετε μια στήλη κειμένου και στη συνέχεια να πατήσετε το κουμπί Align Left.

Βήμα 3
Συγχρονίστε τις αλλαγές σας και τελειώσατε! Εάν το κάνατε σωστά, θα δείτε την ενημερωμένη έκδοση της γραμματοσειράς σας σε ολόκληρο το αρχείο:

SKETCH UPDATE (8/31/2018):
Η ενημέρωση και ο συγχρονισμός στυλ έχουν μεταφερθεί στο αναπτυσσόμενο μενού στυλ. Απλά κάντε κλικ στο "Update Layer Style" για να αποθηκεύσετε τις αλλαγές χρωμάτων σας :)

Συχνές ερωτήσεις

Ποια είναι τα στυλ κειμένου "... 2";
Είναι η τολμηρή έκδοση των ομολόγων τους. Χρησιμοποιούμε έναν αριθμό έτσι ώστε να είναι ανοιχτό σε ό, τι θέλετε. Μερικές φορές ημι-τολμηρή, μεσαία ή μαύρη θα χρησιμοποιηθεί για αυτό το ύφος.
Πώς μπορώ να αλλάξω γρήγορα τα έντονα στυλ κειμένου για να είμαι περισσότερο / λιγότερο τολμηρός;
Στη λίστα των επιπέδων, αναζητήστε "2" (τοποθετήστε ένα κενό διάστημα πριν από το 2), επιλέξτε όλα τα επίπεδα κειμένου και, στη συνέχεια, αλλάξτε το βάρος της γραμματοσειράς στον πίνακα "Επιθεώρηση". Συγχρονισμός!
Τι συμβαίνει με αυτή τη σύμβαση ονομασίας "Μικρή, Λεζάντα, Σώμα ...";
Αυτά τα ονόματα είναι καθαρά για ανάκληση. Αυτό σημαίνει ότι δεν χρειάζεται να χρησιμοποιείτε το "Body" για το σώμα. Όταν δημιουργήσαμε το σύστημα, τα παραδοσιακά ονόματα μεγέθους "XS, S, M, L, XL, XXL" ήταν δύσκολο να θυμηθούν, οπότε επιλέξαμε να τους δώσουμε ονόματα. Μη διστάσετε να τις αλλάξετε αν θέλετε!
Τι σημαίνουν τα κανονικά, δευτερεύοντα και απενεργοποιημένα στα στυλ κειμένου;
Αυτές είναι διαφορετικές αποχρώσεις αυτού του χρώματος στυλ κειμένου. Το κανονικό είναι 100% αδιαφανές, το δευτερεύον είναι αδιαφανές 50%, και το Disabled είναι 25% αδιαφανές. Οι διαφάνειες προτιμώνται επειδή, αν τις χρησιμοποιείτε πάνω από ένα χρώμα, θα τείνουν προς αυτό το χρώμα. Παράδειγμα: 50% διαφανές λευκό κείμενο σε κόκκινο φόντο θα φαίνεται ελαφρώς ροζ. Πάνω από το μπλε, θα είναι γαλάζιο.
Ενημέρωσα τη γραμματοσειρά μου και τώρα τα στοιχεία είναι τυλιγμένα με γραμμές!
Μην ανησυχείτε! Η πλειοψηφία των στοιχείων στο σύστημα έχουν αριστερά ευθυγραμμισμένα σύμβολα κειμένου, οπότε το μόνο που έχετε να κάνετε είναι να κάνετε το συστατικό σας λίγο μεγαλύτερο. Μόλις το κείμενο δεν αναδιπλώνεται πλέον σε μια νέα γραμμή, το εξάρτημα σας θα έχει ακόμη παραπετάσματα και στις δύο πλευρές.
Έχω ενημερώσει τη γραμματοσειρά μου και τώρα τα ΣΥΜΒΟΛΑ ΚΕΙΜΕΝΟΥ είναι τυλιγμένα με γραμματοσειρά!
Αυτό στην πραγματικότητα δεν σπάει τίποτα! Είναι απλώς μια καλλυντική παρενέργεια ορισμένων γραμματοσειρών που έχουν ευρύτερη οπή. Μην κάνετε τα σύμβολα κειμένου ευρύτερα. Αν πραγματικά σας ενοχλεί, απλά αλλάξτε την αξία μέσα στο σύμβολο κειμένου σε κάτι μικρότερο όπως "..." ή "abc".
Έχω ενημερώσει τη γραμματοσειρά μου και τώρα το κείμενο δεν είναι κάθετα στο κέντρο στο σύμβολο (ες)!
Έπρεπε να πάρουμε λίγο έξυπνο τρόπο με τον τρόπο που τα σύμβολα κειμένου (επόμενο τμήμα) δημιουργήθηκαν έτσι ώστε η ενημέρωση της γραμματοσειράς να ήταν τόσο εύκολη όσο και ανώδυνη όσο το δυνατόν. Μερικές φορές, όταν ενημερώνετε τη γραμματοσειρά, τα στρώματα κειμένου στα συνοδευτικά σύμβολα κειμένου μετατοπίζονται προς τα επάνω ή προς τα κάτω μέσα στο συμβούλιο τέχνης συμβόλων, απορρίπτοντας την κάθετη ευθυγράμμιση. Απλά ευθυγραμμίστε το κείμενο στο κέντρο του συμβουλίου artboard και τα πάντα θα πρέπει να επανέλθουν στο φυσιολογικό.

Αλλαγή χρωμάτων κειμένου

Βήμα 1
Σύρετε για να επιλέξετε μια στήλη στυλ κειμένου, επιλέξτε το νέο σας χρώμα:

Βήμα 2
Συγχρονίστε τις αλλαγές σας!

Βήμα 3
Συνεχίστε να το κάνετε αυτό για όλες τις άλλες στήλες στυλ κειμένου. Συνήθως απλώς πέφτω χρώμα από ορθογώνια πάνω από κάθε στήλη.

Βήμα 4
Εγινε!

Σύμβολα

Κάθε στρώμα σε UX Power Tools συνδέεται είτε με στυλ στρώματος, είτε με στυλ κειμένου είτε με σύμβολο. Όπως ακριβώς και στο CSS, τα πάντα είναι συγκεντρωμένα, οπότε αν χρειαστεί ποτέ να κάνουμε ενημερώσεις στο σύστημά μας, είναι εύκολο να τα συγχρονίσετε σε όλο το σχεδιασμό μας.

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

Το όλο σύστημα κατασκευάζεται χρησιμοποιώντας τέσσερις κατηγορίες συμβόλων:

1. Σύμβολα κειμένου
Το Σκίτσο σας επιτρέπει να αντικαταστήσετε την τιμή κειμένου ενός συμβόλου, αλλά δεν θα σας επιτρέψει να αντικαταστήσετε τα στυλ κειμένου που χρησιμοποιούνται σε αυτό το σύμβολο. Έτσι, τα σύμβολα κειμένου είναι μια έξυπνη λύση για αυτόν τον περιορισμό. Εφόσον μπορούμε να αντικαταστήσουμε και να ανταλλάξουμε ένθετα σύμβολα, δημιουργήσαμε σύμβολα από κάθε στυλ κειμένου, ώστε να μπορούμε να αλλάξουμε το στυλ του κειμένου μας. Παράδειγμα: Θέλω να χρησιμοποιήσω σκοτεινό κείμενο σε ένα κουμπί με ανοιχτό φόντο και ελαφρύ κείμενο σε ένα κουμπί με σκούρο φόντο. Τα ενσωματωμένα σύμβολα κειμένου μας επιτρέπουν να το κάνουμε αυτό! Δείτε τις παρακάτω ενέργειες:
2. Σύμβολα χρώματος πλήρωσης & συμβόλων (γνωστός και ως "Mixins")
Η αντικατάσταση των συμβόλων θα είναι ο καλύτερος φίλος σας στα UX Power Tools και τα σύμβολα Fill / Border θα αλλάξουν τη ζωή σας. Ακριβώς όπως τα σύμβολα κειμένου μας επιτρέπουν να αντικαταστήσουμε το στυλ κειμένου ενός συμβόλου, τα σύμβολα χρωμάτων μας επιτρέπουν να παρακάμψουμε τα γεμίσματα και τα σύνορα. Κάθε φορά που νομίζετε ότι χρησιμοποιείτε ή δημιουργείτε ένα σύμβολο που μπορεί να αλλάξει χρώμα, είναι καλύτερο να χρησιμοποιήσετε ένα έγχρωμο σύμβολο χρώματος. Δείτε τις παρακάτω ενέργειες:
3. Σύμβολα κοντέινερ
Τα κοντέινερ δίνουν στοιχεία όπως κουμπιά, εμβλήματα και μάρκες στο σχήμα τους. Είναι χτισμένα χρησιμοποιώντας σύμβολα χρώματος, σύμβολα του κράτους και μάσκες. Αλλάξτε το σχήμα ενός στοιχείου ή την κατάσταση ενός πεδίου κειμένου, παρακάμπτοντας το κοντέινερ του. Δείτε τις παρακάτω ενέργειες:
Αλλάξτε το σχήμα ενός κουμπιού, αλλάζοντας την παράκαμψη του κοντέινερ.Προσθέστε μια κατάσταση αιωρήματος σε ένα πεδίο αλλάζοντας το κοντέινερ σε Εμφάνιση άλλων καταστάσεων πεδίων κειμένου, επιλέγοντας τον τύπο κοντέινερ
4. Σύμβολα κράτη
Τα σύμβολα κράτους σας βοηθούν να προσθέσετε μια αίσθηση αλληλεπίδρασης σε στοιχεία όπως κουμπιά, μάρκες και κονκάρδες. Είναι πάντα ένθετα μέσα σε ένα άλλο σύμβολο επάνω σε ένα πλήρες χρώμα, επειδή χρησιμοποιούν λειτουργίες ανάμειξης για να φωτίσουν, να σκουρδίσουν ή να αποκορεσουν το χρώμα του εξαρτήματος. Οποιοδήποτε στοιχείο που χρησιμοποιεί ένα σύμβολο δοχείου θα καταστεί αυτόματα "κληρονομικό", αφού είναι ενσωματωμένο μέσα στο σύμβολο του δοχείου. Σημείωση: Τα κράτη είναι καθαρά καλλυντικά για να δείχνουν στους προγραμματιστές πώς πρέπει να φαίνεται μια κατάσταση αιωρήματος / πίεσης / εστίασης. Εφόσον χρησιμοποιούμε λειτουργίες ανάμειξης, οι προγραμματιστές δεν θα μπορούν να χρησιμοποιήσουν το Zeplin ή το InVision Inspect για αυτές τις καταστάσεις. Αντ 'αυτού, συνιστούμε να χρησιμοποιούν τις λειτουργίες φωτισμού () και darken () σε LESS ή Sass για να επιτύχουν αυτά τα αποτελέσματα στον κώδικα.

Συχνές ερωτήσεις

Πώς μπορώ να προσθέσω νέα συμπληρώματα, ώστε να είναι διαθέσιμα στην αναπτυσσόμενη λίστα;
Διπλασιάστε έναν από τους πίνακες συμβόλων Mixin / Fill στη σελίδα Σύμβολα, επιλέξτε ένα νέο χρώμα για το ορθογώνιο και, στη συνέχεια, προσθέστε ένα στυλ στρώματος για το νέο σας χρώμα. Η προσθήκη του στυλ στρώματος είναι προαιρετική, αλλά συνιστούμε πάντα να χρησιμοποιείτε στυλ επιπέδων, επομένως είναι γρήγορη η ενημέρωση αργότερα αν καταλήγετε στη χρήση σε πολλά σημεία. Προσοχή: Μην αλλάζετε το μέγεθος αυτού του πίνακα. Πρέπει να είναι ακριβώς το ίδιο μέγεθος με όλους τους άλλους πίνακες ζωγραφικής Mixin / Fill, για να εμφανιστεί στην αναπτυσσόμενη λίστα του πίνακα ελέγχου.

Εικόνες

Τα εικονίδια είναι ίσως το πιο κουραστικό κομμάτι του κιτ, αλλά θα σας εξοικονομήσουν τόνο χρόνου μακροπρόθεσμα. Χρησιμοποιώντας αυτή την τεχνική, κάνουμε τις μάσκες των εικονιδίων μας, έπειτα βάζουμε ένα σύμβολο Mixin / Fill πάνω σε αυτό.

Επειδή το Sketch μας επιτρέπει να αντικαταστήσουμε τα σύμβολα, μπορούμε να αλλάξουμε το χρώμα αυτού του εικονιδίου σε οποιοδήποτε χρώμα προσθέσαμε ως σύμβολο!

Πώς να αλλάξετε ένα εικονίδιο

Η εναλλαγή των εικονιδίων είναι εξαιρετικά εύκολη, χρησιμοποιώντας τον πίνακα επιτήρησης στον Επιθεωρητή:

Μπορείτε να αλλάξετε το χρώμα του χρησιμοποιώντας το αναπτυσσόμενο μενού κάτω από το εικονίδιο.

Πώς να προσθέσετε ένα εικονίδιο

  1. Αντιγράψτε ένα υπάρχον εικονίδιο και στη συνέχεια διαγράψτε το επίπεδο μάσκας.
  2. Επικολλήστε το νέο σας εικονίδιο και βεβαιωθείτε ότι έχετε δημιουργήσει μια ενιαία διαδρομή. Μπορείτε να το κάνετε αυτό με το Layer → Combine → Union ή Layer → Combine → Difference.
  3. Καταργήστε όλα τα γεμίσματα στη διαδρομή εικονιδίων. Δεν γεμίζει!
  4. Βάλτε τη διαδρομή του εικονιδίου σας κάτω από το στρώμα "↳ Color".
  5. Κάντε το εικονίδιο μια μάσκα (πατήστε Control + Command + M).
  6. Εγινε!

Συχνές ερωτήσεις

Αυτό παίρνει για πάντα.
Δεν είναι βελτιστοποιημένη στην αρχή, αλλά θα κερδίσετε όλη αυτή τη φορά πίσω σε μακροπρόθεσμη βάση. Υπόσχεση.
Υπάρχει πιο γρήγορος τρόπος;
Όχι ότι ξέρω. Αν κάποιος θέλει να δημιουργήσει ένα σύνολο εικονιδίων μάσκες, αυτό θα κάνει σίγουρα αυτή τη διαδικασία ένα πολύ πιο γρήγορο, αν και!
Αυτή η μέθοδος εικονιδίου υποστηρίζεται από Zeplin, InVision, [dev handoff tool];
Συνήθως στέλνω την ομάδα του (των) dev την πραγματική γραμματοσειρά εικονιδίων και / ή το SVG sprite, οπότε δεν ανησυχώ πολύ για αυτό. Τούτου λεχθέντος, η Zeplin κάνει μια σπουδαία δουλειά στην ανάγνωση χρωμάτων και συνήθως σας επιτρέπει να εξάγετε SVGs καλά.
Το εικονίδιο μου δεν εμφανίζεται στο αναπτυσσόμενο μενού "Αντικατάσταση εικονιδίων"!
Βεβαιωθείτε ότι ο πίνακας artboard είναι ακριβώς το ίδιο μέγεθος με όλους τους πίνακες τέχνης του άλλου εικονιδίου. Αν δεν είναι, τότε δεν θα εμφανιστεί.

Πεδία

Τα πεδία (ή οι είσοδοι ... όποιο και αν φαντάζεστε) αποτελούνται από δύο πρωταρχικά κομμάτια: ένα δοχείο και κάποιο κείμενο. Τόσο το δοχείο όσο και το κείμενο είναι σύμβολα έτσι ώστε να μπορούμε εύκολα να τα παρακάμψουμε ώστε να ταιριάζουν σε διάφορες καταστάσεις.

Όπως όλα τα σύμβολα στο σύστημα, τα πεδία κειμένου είναι πλήρως αναδιπλούμενα. Εάν το κείμενο δεν ταιριάζει, απλώς το κάνετε ευρύτερο ή ψηλότερο.

Προσαρμογή πεδίων

Αν θέλετε να αλλάξετε το σχήμα ή το στυλ ενός πεδίου κειμένου, το μεγαλύτερο μέρος των εργασιών θα πρέπει να γίνει στα σύμβολα Mixin / Container / Field:

  • Πεδία χωρίς περιθώρια: Αφαιρέστε το επίπεδο "Border".
  • Πεδία με σκιά: Προσθέστε μια σκιά στο στρώμα "Μάσκα".
  • Πεδία σκληρής γωνίας: Ρυθμίστε την ακτίνα του πλαισίου των συμβόλων Mixin / Border και τη μάσκα δοχείου / πεδίου στο μηδέν.
  • Πεδία σχεδίασης υλικών: Κατασκευάστε πεδία σκληρής γωνίας και, στη συνέχεια, αλλάξτε το στρώμα "Border" στο Mixin / Border / Bottom-Active. Θα χρειαστεί να δημιουργήσετε ένα άλλο σύμβολο συνδυασμού κάτω συμβόλων για την προεπιλεγμένη κατάσταση.

Συχνές ερωτήσεις

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

Κουμπιά

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

Το καλύτερο τέχνασμα για να εξασφαλιστεί η τέλεια συμπλήρωση είναι το 1px Nudge ™. Απλά αλλάξτε το μέγεθος του κουμπιού σας μέχρι το κείμενο να αρχίσει να τυλίγεται και στη συνέχεια να το κάνετε 1px ευρύτερο:

Τέλεια padding!

Το UX Power Tools έχει επίσης ένα κεντρικό κουμπί για την περίπτωση που θέλετε να το χρησιμοποιήσετε στο κάτω μέρος ενός modal (ή κάτι παρόμοιο):

Προσαρμογή κουμπιών

Αν θέλετε να αλλάξετε το σχήμα ή το στυλ ενός κουμπιού, το μεγαλύτερο μέρος της εργασίας θα πρέπει να γίνεται στα σύμβολα Mixin / Button:

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

Συχνές ερωτήσεις

Πώς μπορώ να προσθέσω μια σκιά στο κουμπί μου;
Επιλέξτε το στρώμα Μάσκα σε ένα δοχείο Mixin / Button στη σελίδα Σύμβολα και προσθέστε μια σκιά. Μην ξεχάσετε να κάνετε όλα τα κουμπιά κουμπιών.

Άλλες προσαρμογές

Στη σελίδα " Ξεκινήστε εδώ", υπάρχει μια πλακέτα για να "Ρυθμίστε τα άλλα πράγματα εδώ!". Αυτός είναι ο τόπος όπου μπορείτε να ρυθμίσετε τα πράγματα όπως σκιές και σφήνες.

Προσαρμογή στερεών κηλίδων

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

Προσαρμογή της βαθμίδας Scrim

Θα χρειαστεί να ενημερώσετε το χέρι με κλίση κλίσης. Αυτό είναι σωστό, ένα χειροποίητο χαλί. Μου αρέσει να κάνω ένα scrim scrim πάει από το 50% της βάσης μου μαύρο, στο 0% της βάσης μου μαύρο.

Προσαρμογή σκιών

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

Πάντα προτείνω να χρησιμοποιείτε το βασικό σας μαύρο χρώμα για τις σκιές σας αντί για το καθαρό μαύρο: # 000000 (Ένιωσα εμπνευσμένο από το άρθρο του Ian Storm Taylor από το 2012. Αυτό θα δώσει στην εφαρμογή σας μια πιο απαλή αίσθηση και οι σκιές δεν θα φαίνονται τόσο σκληρές. όλα ταυτόχρονα είναι γρήγορα:

  1. Επιλέξτε το βασικό μαύρο χρώμα και αντιγράψτε την τιμή hex.
  2. Επισημάνετε και τα 6 μπλοκ σκίασης.
  3. Ανοίξτε τον επιλογέα χρώματος σκιάς και επικολλήστε την hex τιμή σας.
  4. Πατήστε enter.
  5. Συγχρονίστε και ολοκληρώστε!
Δεν έπρεπε να συγχρονίσω εδώ επειδή χρησιμοποιούσα ήδη το βασικό μου μαύρο χρώμα.

Περίληψη

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

Ποιος πρέπει να το χρησιμοποιήσει;

  • Σχεδιαστές UX
  • Σχεδιαστές UI
  • Διευθυντές Προϊόντων (για ακριβέστερη καλωδίωση)
  • Οι προγραμματιστές (που δεν θέλουν να χάσουν με το σχεδιασμό)
  • Επιχειρηματικοί διευθύνοντες σύμβουλοι (γιατί γιατί όχι;)

Ακόμα δεν διαθέτετε το σύστημα;

Επισκεφτείτε τον ιστότοπό μας για να διαβάσετε περισσότερα σχετικά με τα δύο συστήματα σχεδιασμού (web και κινητά), να κατεβάσετε μια επίδειξη ή να πάρετε και τα δύο παρακάτω. Κάθε σύστημα έρχεται με ένα freebie 70+ μοναδικών τύπων διαγραμμάτων (σε σκούρα και ελαφρά θέματα) έτσι ώστε η επόμενη φορά που ο bossman ζητά ένα "σέξι ταμπλό όπως αυτά που βλέπω στο Dribbble", δεν θα ρίξετε τα μάτια σας εντελώς έξω από το κεφαλή

Ακόμη χρειάζεστε βοήθεια;

  • Πείτε hi στο email: hello@uxpower.tools
  • ... ή Twitter
  • ... ή το Facebook
  • ... ή LinkedIn

Θέλετε ένα προσαρμοσμένο σύστημα σχεδιασμού;

Εάν όλα αυτά φαίνονται πολύ περίπλοκα ή μεταφέρετε από άλλη εφαρμογή (Illustrator, Photoshop, Axure, Adobe XD, κλπ.), Ας σας βοηθήσουμε! Στείλτε μας ένα μήνυμα ηλεκτρονικού ταχυδρομείου και θα βοηθήσουμε την ομάδα σας να λειτουργήσει χωρίς καθυστέρηση.