Συμβουλές βέλτιστων πρακτικών συμβόλων (τώρα που οι ένθετες παρακάμψεις είναι κάτι)

Στο Tradeshift, αρχίζουμε να διατηρούμε ένα κεντρικό έγγραφο Sketch με όλα τα σύμβολά μας. Για να προστεθεί σε αυτό το έγγραφο, ένα σύμβολο πρέπει να είναι μιας ορισμένης ποιότητας. Όλοι όσοι σχεδιάζουν για εμάς (και ενδεχομένως τους συνεργάτες μας) θα κάνουν χρήση αυτού του εγγράφου, οπότε δεν θέλουμε να διανέμουμε τίποτα παρά τα πιο συμπαγή σύμβολα.

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

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

Δημιουργήστε το πιο βασικό στοιχείο που μπορείτε

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

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

Να είστε έξυπνοι για το διαχωρισμό των συμβόλων και το συνδυασμό τους για εύκολο χειρισμό

Ονομάζοντας τα σύμβολά σας

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

Το Σκίτσο οργανώνει αυτόματα τα Σύμβολα σε φακέλους όταν τοποθετείτε ένα / στο όνομα:

Οι εξαρτήσεις πεδίου εισαγωγής διαγράφονται στο φάκελο / in /

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

κουμπί / κύριο ποντίκι
κουμπί / κύρια-απενεργοποιημένη
in / input / field / active

Ορίστε τις εξαρτήσεις των ένθετων συμβόλων

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

Τα οργανωμένα σύμβολα διευκολύνουν τη ζωή σας

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

Ονομάζοντας τα στρώματα σας

Δώστε στα ίδια τα στρώματα τα κατάλληλα και συνεπή ονόματα. Τα υπόβαθρα πρέπει πάντα να ονομάζονται φόντο και να μην μπερδεύονται με το bg για παράδειγμα. Εάν αποσυνδέσετε το Σύμβολο, θα πρέπει να παραμείνει ένα καθαρό και αυτόνομο αντικείμενο.

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

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

Ιεραρχία επιπέδων

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

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

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

Χρησιμοποιώντας ένθετα σύμβολα στον πίνακα παράκαμψης

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

όλα αυτά τα εικονίδια μοιράζονται τις ίδιες διαστάσεις

Είναι επίσης πολύ ισχυρό για την αλλαγή των κρατών:

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

Αυτά είναι όλα τα ίδια σύμβολα:

Το ίδιο σύμβολο με διάφορες επιθέσεις επιβάλλεται

Αλλαγή μεγέθους αλεξίσφαιρων

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

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

Ελέγξτε το φύλλο εξαπατήσεως του Peter Nowell

Διάφορες συμβουλές

Το κείμενο πρέπει να διορθωθεί

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

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

Για παράδειγμα, το περιεχόμενο κειμένου που περιέχει το σύμβολο κράτησης θέσης (όχι το όνομα του επιπέδου) είναι "ACTION INTENT" ως παθητική υπενθύμιση του τρόπου με τον οποίο πρέπει να διατυπωθεί η μικροσκοπία ενός κουμπιού.

Σχεδιάστε τη μικρότερη έκδοση ενός συμβόλου

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

Αντικατάσταση συμβόλων

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

Χρησιμοποιήστε το alt + enter για να εισαγάγετε ένα σπάσιμο γραμμής στα ένθετα αντικείμενα κειμένου

Υποστήριξη πολλαπλών γραμμών για κείμενο, boom!

Κλείστε τα ένθετα σύμβολα για να αποτρέψετε την εμφάνισή τους στον πίνακα αντικατάστασης

Με το κλείδωμα των ένθετων συμβόλων στα σύμβολα του αρχικού πίνακα τέχνης, δεν εμφανίζονται πλέον ως αντικατάσταση στον επιθεωρητή. Χάρη στον Matt Healy!

Τα σύμβολα πρέπει να είναι αυτονόητα για χρήση

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

Παράδειγμα αρχείων

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

Αφήστε ένα σχόλιο ή @Lloyd στο Twitter με οποιαδήποτε σχόλια ή ιδέες για v3.

Επίσης, προσλαμβάνουμε στο Tradeshift!