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

Αυτό είναι χωρίς αμφιβολία η πιο cool τεχνική Sketch που θα δείτε όλη την ημέρα.

Προειδοποίηση: Περισσότερα GIF από το διάδρομο βουτύρου φυστικιών.

Ναι, το προφέρω "Jiff". Φύγε.

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

Όταν το Sketch ξεκίνησε κανόνες αλλαγής μεγέθους στο Sketch 39, ήταν ένας τέτοιος παίκτης που ήθελα να ψήσω ένα κέικ με το λογότυπο του Sketch για να μπορέσω να το παρουσιάσω στον εαυτό μου.

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

Μετά από πολλές δοκιμές-και-λάθη, έχω δημιουργήσει μερικά από τα πιο ευέλικτα, προσαρμόσιμα και συντηρητικά συστατικά που χρησιμοποιούν πάντα ένθετα σύμβολα, παρακάμπτουν και αυτό που αντιγράφω τα Στυλ Στύλων Cascading ... γνωστός και ως CSS.

Ακολουθεί το τι μπορούμε να κάνουμε με τα διαδοχικά στυλ συμβόλων στο Sketch. Μπορώ να πάρω μια amen?

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

Ας δούμε το σύμβολο αυτό:

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

Τα επίπεδα:

φωτογραφία

Αυτή είναι μια μετονομασμένη αναφορά του συμβόλου "Εικόνα Avatar". Γιατί μετονομάζεται; Επειδή αυτό εμφανίζεται στον πίνακα Επιθεώρησης όταν χρησιμοποιώ αυτό το σύμβολο αλλού. Θα προτιμούσα πολύ αυτό το όνομα να είναι ωραίο και καθαρό αντί για κάτι όπως το "Avatar / Image" που μόλις καταλήγει να πάρει περικοπεί ούτως ή άλλως. Δεν bueno.

Δεύτερον, για να καλύψω τη χρήση όπου ένας χρήστης δεν έχει ορίσει μια φωτογραφία προφίλ, δημιούργησα ένα προεπιλεγμένο avatar που θέλω να δείξω αντ 'αυτού.

Τώρα δώστε προσοχή γιατί αυτό το επόμενο σημείο είναι σημαντικό: Επειδή τα μεγέθη των συμβόλων Avatar / Εικόνα και Avatar / Default είναι ακριβώς τα ίδια (βλ. Παραπάνω), θα μπορέσω να επιλέξω ποιο σύμβολο θέλω να δείξω στην αναπτυσσόμενη λίστα Επιθεώρηση:

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

Ονομα

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

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

Δεδομένου ότι το σύμβολο κειμένου είναι ... καλά ... κείμενο ... γι 'αυτό μου δίνει την επιλογή να επεξεργαστώ το περιεχόμενο. Μόλις πήρα φαντασία και ονόμασα το πραγματικό στρώμα κειμένου σε αυτό το σύμβολο στο "↳🖊Content", έτσι ώστε να ξέρω ότι αλλάζει αυτό το περιεχόμενο.

Και πάλι, αυτό είναι ένα μόνο σύμβολο, οπότε αν επεξεργαστώ το σύμβολο βάσης, όλες αυτές οι περιπτώσεις θα εξακολουθούν να ενημερώνονται:

Ένα σύμβολο. Τρεις αποδόσεις!

Απλά μαγικό.

Σήμα

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

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

Το στρώμα "Container" στο σύμβολο "σήμα" είναι απλώς μια μετονομασμένη αναφορά στο σύμβολο "Στρογγυλεμένο δοχείο" παραπάνω. Κάθε ένα από αυτά τα δοχεία έχει ένα σύμβολο κράτους (έτσι μπορώ να παρακάμψω την κατάσταση του σήματος) ...

... ένα σύμβολο χρώματος (ώστε να μπορώ να αντικαταστήσω το χρώμα) ...

... και μια μάσκα που καθορίζει το σχήμα της.

Πλευρική σημείωση για το Σκίτσο: Θα ήταν λάθος αν μπορούσαμε να χρησιμοποιήσουμε σύμβολα ως μάσκες.

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

Απλά χρώματα! Τίποτα άλλο!Απλά δηλώνει! Τίποτα άλλο!

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

Πληκτρολόγηση

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

ProTip ™: Ορίστε όλα τα εικονίδια ως μάσκες και χρησιμοποιήστε ένα σύμβολο χρώματος πάνω από αυτό. Με αυτόν τον τρόπο μπορείτε απλά να αντικαταστήσετε το σύμβολο χρώματος εάν θέλετε να αλλάξετε το χρώμα. Ένα σύμβολο εικονιδίου ... οποιοδήποτε χρώμα θέλετε

Αυτή η τεχνική παρουσιάστηκε για πρώτη φορά από την Free & Willing:

Δοχείο

Τελευταίο στρώμα! Αυτή είναι μια μετονομασμένη παρουσία ενός συμβόλου χρώματος "Mixin / Fill". Έχω προσθέσει αυτό, ώστε να μπορώ εύκολα να εναλλάξ μια επιλεγμένη κατάσταση:

Στην άκρα δεξιά, θα εμφανιστεί το σύμβολο

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

Αρκετά δροσερό, ε; Το έχω κάνει και με δεκάδες άλλα σύμβολα:

Κοιτάξτε όλα αυτά τα επικαλυπτικά σύμβολα στον πίνακα επιθεωρητών!

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

Πήγα μπροστά και έκανα όλα αυτά βρώμικα για σένα, και το έκαναν να φαίνεται ωραίο:

Εάν ενδιαφέρεστε, μπορείτε να τα πάρετε μόνοι σας στο νέο site UX Power Tools. Μπορείτε επίσης να δείτε ολόκληρο τον οδηγό στυλ για InVision ή Marvel.

Νομίζω ότι θα τους αρέσει

Όταν δεν βγάζω το Medium, δουλεύω σε εργαλεία Σκίτσο σε UX Power Tools για να σας κάνει έναν καλύτερο, γρηγορότερο και ισχυρότερο σχεδιαστή. Ακολουθήστε μας στο Twitter @uxpowertools. Ακολουθήστε με και εγώ αν σας διασκεδάσει!