Ευφυέστεροι πίνακες με σκίτσο + Paddy

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

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

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

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

1. Δημιουργώντας το σύμβολο κυττάρων σας

Συμπλήρωση συμβόλου κυττάρου + δομή στρώματος.

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

1 - πρώτα βήματα
Δημιουργήστε ένα ορθογώνιο σχήμα με ύψος ίσο με το ύψος σειράς που θέλετε και ένα πλάτος περίπου 120px και ονομάστε το cellBackground. Τώρα προσθέστε ένα νέο σχήμα κειμένου μέσα στο ορθογώνιο και μετονομάστε αυτό το επίπεδο στο cellText.

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

Αλλάξτε το μέγεθος της στρώσης cellText σε 12px (ή το padding της επιλογής σας) από την αριστερή και τη δεξιά πλευρά του cellBackground. Επιπλέον, ρυθμίστε τις επιλογές αλλαγής μεγέθους του στρώματος cellText για να τις συνδέσετε αριστερά, δεξιά και πάνω. Αυτό υποχρεώνει το κελί σας να διατηρεί ένα σταθερό πλάτος στήλης μέσα στον πίνακα σας και επιτρέπει στο κείμενο να τυλίγεται σε μια δεύτερη γραμμή.

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

2 - Ρύθμιση των τιμών Padding Padding
Το σχήμα φόντου κυψέλης θα χρησιμοποιήσει τον Paddy για να διατηρήσει συγκεκριμένα περιθώρια γύρω από το κείμενο. Επιλέξτε το επίπεδο cellText και περιηγηθείτε στο Plugins> Paddy> Imply Padding for Selection Θα παρατηρήσετε ότι μια σειρά τιμών θα προστεθεί στο cellBackground σας. Ανάλογα με την επένδυση κυψελώνText από κάθε πλευρά, μπορεί να καταλήξετε με 2-4 τιμές ανάμεσα σε αγκύλες ([]). Αυτά ακολουθούν την παραδοσιακή σειρά CSS padding [άνω δεξιά αριστερά κάτω]. Ανατρέξτε στην τεκμηρίωση του Paddy για περισσότερες πληροφορίες σχετικά με αυτά τα χαρακτηριστικά.

Αγνοήστε την επίστρωση αριστερά & δεξιά

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

Ελάχιστο Ύψος κυψελών

Θα προσθέσουμε επίσης μια ελάχιστη τιμή ύψους στο επίπεδο cellBackground που είναι ίσο με το ύψος του κυττάρου σας. Θα το κάνουμε αυτό προσθέτοντας το appending, h> = YOURCELLHEIGHT μετά τις τιμές padding στο όνομα του layer layer.

3 - Δοκιμή του συμβόλου
Τώρα που έχετε δημιουργήσει το σύμβολο κυττάρων, τοποθετήστε το σε έναν από τους πίνακες τέχνης σας και δοκιμάστε το "Override Symbols" για να βεβαιωθείτε ότι ο Paddy λειτουργεί σωστά. Ίσως χρειαστεί να ενεργοποιήσετε την αυτόματη ενημέρωση στις προτιμήσεις του plugin του Paddy.

Ενεργοποιήστε την αυτόματη ενημέρωση!

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

Δοκιμάζοντας το νεοδημιουργημένο κύτταρο μας

2. Συγχώνευση κυττάρων σε μια σειρά πίνακα

Δομή επιπέδου πίνακα επιπέδων

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

1 -Ρύθμιση των δεδομένων σας

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

2 - Προσθήκη παραμέτρων Paddy

Μόλις τοποθετήσετε τα κελιά σας σε μια σειρά, δημιουργήστε μια ομάδα από αυτά και ονομάστε το tableRow [0h t]. Το [0h] στο όνομα της ομάδας αναφέρεται στην οριζόντια ιδιότητα κατανομής του Paddy. Το 0 σημαίνει ότι κάθε κελί θα έχει 0px από το καθένα και το h θα αναφέρεται στην κατεύθυνση για τη διανομή των παιδιών (κυττάρων). Παίξτε γύρω με αυτήν την αξία και δείτε τι αναπαράγεται. Το t απλά αναφέρεται στην ευθυγράμμιση των κυττάρων. Αυτό λέει σε κάθε κυψέλη να ευθυγραμμιστεί με την κορυφή της ομάδας.

Παράμετροι πίνακα Paddy

Μπορεί να μην παρατηρήσετε αμέσως ένα τεράστιο όφελος από αυτήν την ιδιότητα του Paddy, αλλά προσπαθήστε να αφαιρέσετε το κελί τίτλου εργασίας από το tableRow. Τι συμβαίνει; Μπορείτε να κάνετε το ίδιο πράγμα κατά την προσθήκη νέων κελιών. Δοκιμάστε να αντιγράψετε το πεδίο ηλεκτρονικού ταχυδρομείου; Το κελί πρέπει να γεμίσει με τα υπόλοιπα κελιά και να προσαρμόσει την απόσταση μεταξύ των κυψελών που το περιβάλλουν. Εάν προσπαθήσετε να σύρετε ένα κελί εκτός χώρου, τι συμβαίνει; Πολύ ωραίο. Μπορείτε να ανατρέξετε στην τεκμηρίωση Paddy για όλους τους σύντομους κωδικούς και άλλες ιδιότητες απόστασης, διανομής και ευθυγράμμισης.

Επιπλέον, προκειμένου να υποστηρίξουμε τη δυναμική αλλαγή μεγέθους του ύψους της γραμμής, θα πρέπει να δημιουργήσουμε ένα ορθογώνιο που να ταιριάζει με το χρώμα του φόντου του κελιού σας και να ορίσετε το όνομα του επιπέδου του στο tableRowBackground [0]. Βεβαιωθείτε ότι το τοποθετήσατε μέσα στην πρόσφατα δημιουργημένη ομάδα TableRow. Προτείνω επίσης να κλειδώσετε το νέο σχήμα, έτσι ώστε να μην τον επιλέξετε ακούσια. Ανατρέξτε στην παραπάνω εικόνα της δομής.

3. Δημιουργία επικεφαλίδων πίνακα

Παρόμοια διάταξη με το σύμβολο κυττάρων

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

1 - Δημιουργήστε ένα νέο σύμβολο κλάσης

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

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

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

Τώρα θα επιστρέψουμε στον κεντρικό πίνακα γραφικών όπου θα δημιουργήσουμε τη σειρά του πίνακα.

Διαδικασία προσθήκης επικεφαλίδων πίνακα

2- Προσθήκη γραμμής τίτλων πίνακα

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

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

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

4. Κατασκευάστε τον τελικό μας πίνακα

Πίνακας με πολλές σειρές που διατηρούνται με Paddy

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

Ξεκινήστε επιλέγοντας το tableRow με τις επικεφαλίδες καθώς και με το ενιαίο τραπέζι σας και ομαδοποιώντας τις. Ονομάστε αυτόν τον πίνακα ομάδων [0v l]. Αυτό ενημερώνει τον Paddy να ευθυγραμμίσει όλα τα παιδιά της ομάδας κάθετα (v) με 0px padding μεταξύ κάθε παιδιού, διατηρώντας ταυτόχρονα κάθε παιδί ευθυγραμμισμένο στην αριστερή πλευρά.

Τώρα, απλά επιλέξτε το TableRow και χτυπήστε το Cmd + D οποιουδήποτε αριθμού φορές για να το αντιγράψετε. Μπορεί να χρειαστεί να πατήσετε το Esc ή το Enter για να βεβαιωθείτε ότι έχετε αποεπιλέξει τη σειρά σας και ο Paddy ενημερώνει αυτόματα τη διάταξη σας.

Voila! Θα πρέπει να δείτε ότι κάθε μία από αυτές τις νεοδημιουργηθείσες σειρές απλώνεται ακριβώς κάτω από το πρωτότυπο και διατηρεί την αυστηρή αριστερή ευθυγράμμιση και απόσταση.

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

Ανταπόκριση Ύψος Κυψέλης + Περιτύλιξη ΚειμένουΕυέλικτο πλάτος στήληςΕπαναλαμβανόμενη αλληλεπικάλυψη γραμμώνΕντολή διαγραφής γραμμώνΕναλλαγή γραμμής εντός γραμμήςΔυναμική κατακόρυφη τοποθέτηση σε σειρές πίνακα

Ελπίζω ότι αυτό το σεμινάριο ήταν χρήσιμο για να μάθετε περισσότερα για τον Paddy και τους τρόπους με τους οποίους μπορεί να βελτιώσει τη ροή εργασίας σας στο σχεδιασμό προϊόντων. Συμπεριλάβετε τις σκέψεις, τις ιδέες και τις βελτιώσεις σας στα σχόλια. Τεράστια στηρίγματα στο @davidwilliames για τη δημιουργία του Paddy (μεταξύ άλλων μεγάλων plugins). Μοιραστείτε την υποστήριξη του έργου σας με τη μορφή ή μέσω του PayPal.