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

Ένας καλύτερος τρόπος για να κάνετε κουμπιά στο σκίτσο

Κουμπιά όπως ποτέ δεν έχετε δει ποτέ πριν! Πιθανώς.

Αυτό το άρθρο έχει ενημερωθεί για το 2019! Δείτε τη νέα τεχνική και τον οδηγό εδώ.

Σημείωση: Μπορείτε ακόμα να ακολουθήσετε το σεμινάριο παρακάτω, αλλά απλά γνωρίζετε ότι δεν είναι πλέον ο βέλτιστος τρόπος για να δημιουργήσετε κουμπιά στο Sketch.

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

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

Ο Παλαιός δρόμος

Ακολουθούν τα σύμβολα των κουμπιών μου που έμοιαζαν περίπου πριν από τρεις μήνες:

Ανυψώστε το χέρι σας αν η σελίδα συμβόλων σας μοιάζει με αυτό ...

Ωραία και καθαρά! Χρησιμοποίησα αυτή την προσέγγιση για περίπου 12 μήνες και δεν είχα ποτέ προβλήματα. Είναι ένας πολύ καλός τρόπος να διαχειριστείτε τα σύμβολα των κουμπιών και καλύπτουν όλες τις πολιτείες που θα χρειαστώ στα σχέδια μου:

Χρώματα κουμπιών
Πρωτοβάθμια, Δευτεροβάθμια, Λευκή
Κουμπιά κράτη
Προεπιλογή, Μετακίνηση, Πίεση, Απενεργοποίηση

Αυτά δεν είναι κακό. Αλλά αυτό θα είναι λίγο από πονοκέφαλο κάτω από το δρόμο:

  • Αν θέλω να προσθέσω ένα πράσινο κουμπί, θα χρειαστώ τρία νέα σύμβολα ... ένα για να καλύψει κάθε κατάσταση κουμπιού.
  • Αν θέλω ένα λευκό κουμπί με μπλε κείμενο, θα χρειαστώ τρία νέα σύμβολα.
  • Αν θέλω να απαλλαγώ από τα σύνορα σε όλα τα κουμπιά μου, θα πρέπει να το ενημερώσω σε κάθε σύμβολο κουμπιού που έχω δημιουργήσει.
  • Δέκα σύμβολα για ένα μόνο συστατικό; ... πραγματικά; ... είναι αυτό απαραίτητο;

Ένας νέος τρόπος

Θα σώσω τις θεατρικές και θα σας δείξω πρώτα τι δημιουργούμε πρώτα. Το πακέτο UI μου δεν έχει πλέον 10 σύμβολα κουμπιών.

Τώρα ... μόνο ένα.

Πόσο μόνος! Αυτό μου θυμίζει αυτή τη θλιβερή σκηνή από το Cast Away όπου ο Tom Hanks είναι μόνος του στη σχεδία του. RIP Wilson.

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

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

Δομή κουμπιού

Στο σύμβολο του κουμπιού υπάρχουν τρία ένθετα σύμβολα:

  • Το κουμπί Κουμπιού (σημαντικό): Χρησιμοποιούμε αυτό για να αλλάξουμε αυτό που λέει το κουμπί.
  • Το εικονίδιο κουμπιού (όχι τόσο σημαντικό): Μπορούμε να το ενεργοποιήσουμε αν το κουμπί βρίσκεται σε κατάσταση "φόρτωσης".
  • Το Container Button (το πιο σημαντικό): Αυτό μας δίνει το σχήμα, το χρώμα και την κατάσταση.
Αυτά τα τρία σύμβολα είναι έτοιμοι να εκραγούν το μυαλό σας

Το κείμενο κουμπιού

Έχω γράψει για αυτό λίγο πριν στο άρθρο παρακάτω, αλλά θα ξανασυμπιέσω τα πράγματα και πάλι για τα γενέθλια:

"Γιατί είναι το κείμενο ένα σύμβολο;" ρώτησε με έμφαση.

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

Ως γρήγορη υπενθύμιση, το Σκίτσο σάς επιτρέπει να εναλλάσσετε τα ένθετα σύμβολα μέσα και έξω για να σας προστατεύσουμε από την επίφοβη δράση Detach from Symbol. Η πιο απλή (και συνηθέστερη) περίπτωση χρήσης είναι για τα εικονίδια: Αντικαταστήστε ένα σύμβολο κενής γραμματοσειράς για ένα που είναι επιλεγμένο. Πανεύκολο.

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

Αυτά τα στυλ κειμένου και τα χρώματα στην πραγματικότητα χαρτογραφούν όμορφα πίσω στο κεντρικό φύλλο στυλ μου.
Ο Χρυσός Κανόνας της Σύμβολο Ανταλλαγής
Το Σκίτσο σας επιτρέπει μόνο να ανταλλάσσετε σύμβολα με άλλα σύμβολα που έχουν το ίδιο μέγεθος. Δηλαδή, εάν οι πίνακες συμβόλων σας είναι ακόμα 1px μεγαλύτεροι ή μικρότεροι από τους άλλους, δεν θα εμφανίζονται στην αναπτυσσόμενη λίστα με την παράκαμψη συμβόλων (δείτε παρακάτω). Έτσι, έπρεπε να εξασφαλίσω ότι όλοι οι πίνακες τέχνης των συμβόλων μου πάνω ήταν ακριβώς το ίδιο ύψος και πλάτος.

Επειδή το κείμενο του κουμπιού μου είναι ένα ένθετο σύμβολο, απλά επιλέγω ένα από τα άλλα σύμβολα κειμένου μου από το αναπτυσσόμενο μενού της συμβολής μου, αν θέλω ποτέ το κείμενο μου να είναι διαφορετικό χρώμα. ΠΩΣ ΕΙΝΑΙ ΕΥΚΟΛΗ;

Τόσο εύκολη μια καλά εκπαιδευμένη κατσίκα θα μπορούσε να το κάνει.

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

Το εικονίδιο κουμπιού

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

Το σύστημα σκέφτεται! Πιθανώς σκέφτομαι ότι έσκαψα, αλλά εξακολουθεί να σκέφτεται!

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

Το στρώμα συμβόλου εικονιδίου στο κύριο σύμβολο του κουμπιού μας είναι το "σύμβολο κράτησης θέσης" που αντιπροσωπεύει την κατάσταση φόρτωσης κουμπιών μας (βλ.

Ειλικρινά, δεν υπάρχει τίποτα σε αυτό το στρώμα. Απλώς έχω ένα σύμβολο εικονιδίου με αυτό το μικρό σχήμα φόρτωσης, έπειτα το έβαλα στο κέντρο του κουμπιού. Δεν είστε σίγουροι τι σημαίνει "floating"; Διαβάστε αυτό το λαμπρό άρθρο του Peter Nowell. Δεν το ξέρει αυτό, αλλά μου διδάσκει όλα όσα γνωρίζω:

Παρακολουθήστε πόσο εύκολο είναι:

Με όλο τον επανασχεδιασμένο χρόνο σχεδιασμού, σας συνιστούμε να ξεκινήσετε μια πλαϊνή κίνηση όπως τα UX Power Tools.

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

Έλαβα άσκοπα την τεχνική από τα δάχτυλά της. Ευχαριστώ φίλε!

Το δοχείο με κουμπιά

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

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

Ακόμα περιμένουν τα κουμπιά ρομβοειδούς να πιάσουν το

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

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

  • Σκληρή ακτίνα: 0px για αιχμηρές γωνίες
  • Μαλακό στρογγυλεμένο: Συνήθως ακτίνα ακτίνας 2px-10px για μαλακές γωνίες
  • Στρογγυλεμένο: 100% ακτίνα ακρών για ένα ωραίο στρογγυλεμένο σχήμα ορθογωνίου. Αυτά είναι ωραία για μάρκες και ετικέτες.
  • Αριστερά στρογγυλεμένα: Αυτό είναι έτσι ώστε να μπορώ να βάλω τα κουμπιά μαζί σε μια ομάδα κουμπιών. Αυτό χρησιμεύει ως το στρογγυλεμένο κουμπί στην αριστερή πλευρά της ομάδας.
  • Δεξιά στρογγυλεμένο: αυτό είναι ακριβώς το ίδιο όπως παραπάνω, αλλά μόνο για τη δεξιά πλευρά.

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

Δημιουργία ενός δοχείου

Κάθε δοχείο κατασκευάζεται με δύο ένθετα σύμβολα και μια μάσκα:

  • Σύμβολο κράτους: Είναι αυτό το εμπορευματοκιβώτιο κρατείται; Πατημένο; Εστιασμένη;
  • Σύμβολο χρώματος: Ποιο χρώμα είναι αυτό το δοχείο;
  • Μάσκα: Τι σχήμα είναι αυτό το δοχείο;

Κράτη μέλη

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

Για κάτι σαν το

Δείτε πώς φαίνονται όταν είναι ενεργοποιημένα στο σύμβολο του κουμπιού μας:

ΑΓΓΙΞΕ ΤΟ!

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

Μιλώντας για το υπέρτατο σύμβολο ...
ProTip ™
Ορίστε τα σύνολα συμβόλων (όλες οι καταστάσεις, όλα τα χρώματα, όλο το κείμενο) ελαφρώς διαφορετικά πλάτη μεταξύ τους. Αυτό θα διασφαλίσει ότι δεν εμφανίζονται στο σύμβολο σας παρακάμπτει το dropdown μαζί. Δεν θέλετε να επιλέγετε κατά λάθος "Χρώμα / Κόκκινο" για την κατάσταση του κουμπιού, όταν προτίθεστε να επιλέξετε "Κράτος / Πετάξτε".

Χρωματιστά

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

Μου αρέσει να κάνω μια δέσμη αυτών των συμβόλων σε διαφορετικά χρώματα:

Αυτά είναι τα χρώματα που δίνουν στο κουμπί το υπέροχο χρώμα του. Δεν έχει πολλά να πει!

Περίληψη

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

Αυτό το πλήρες πακέτο UI είναι διαθέσιμο στο UX Power Tools

Περισσότερα ανάγνωση:

Όταν δεν γράφω, δουλεύω σε εργαλεία σχεδίασης Sketch όπως τα UX Power Tools για να σας κάνει έναν καλύτερο, πιο αποδοτικό σχεδιαστή. Όλοι οι σχεδιαστές και ομάδες Sketch το χρησιμοποιούν και νομίζω ότι μπορεί να σας αρέσει και αυτό. Ελέγξτε το στο Marvel!

Ακολουθήστε το UX Power Tools στο Twitter
Ακολούθησέ με στο τουίτερ