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

Αυτοματοποίηση σχεδίασης χαρτών

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

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

Κάθε φορά που λέτε "μεγάλα δεδομένα" στο κοινό - κάπου, γεννήθηκε ένα γράφημα.

Στην τελευταία ενημέρωση του Frames for Sketch v.1.6, προσθέσαμε τα στοιχεία Charts στο κύριο αρχείο, οπότε φροντίστε να τα ελέγξετε. Και σε αυτό το επεισόδιο, θα ρίξουμε μια ματιά στις λειτουργίες οπτικοποίησης δεδομένων και στις επεκτάσεις που μπορούν να σας βοηθήσουν στην καθημερινή σας εργασία με αυτά τα γραφικά.

Δημιουργία

Το εργαλείο διάνυσμα (V) έχει μερικά κόλπα για ορισμένες περιπτώσεις σχεδίασης χαρτών. Ορίστε μερικά παραδείγματα:

  • Μπορείτε να κατανείλετε γρήγορα τα σημεία διανυσμάτων και δεδομένων ομοιόμορφα επιλέγοντας ορισμένα στοιχεία και κατανέμοντάς τα οριζόντια [^^ H] ή κατακόρυφα [^ V] σύμφωνα με τις συντεταγμένες X ή Y.
  • Για να δημιουργήσετε ομαλά διαγράμματα στυλ τύπου κύματος, ορίστε τα σημεία τύπου "καθρέφτη" και κρατήστε και τα δύο χειριστήρια με το πλήκτρο Shift [^] κατά τη ρύθμιση της απόστασης.
  • Κλείστε τα μονοπάτια διανυσμάτων σας και χρησιμοποιήστε τις μάσκες για να μεταβείτε γρήγορα ανάμεσα σε γραφήματα γραμμικής και περιοχής.
  • Τοποθετήστε ένα νέο σημείο στη μέση μεταξύ δύο υφιστάμενων σημείων με κλικ Shift.

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

Έτσι, εδώ μερικές επεκτάσεις που μπορεί να έρθουν χρήσιμες:

  • Προσέγγιση τμημάτων κύκλων - Εύχρηστο για τη δημιουργία ακτινικών διαγραμμάτων όπως Pie, Donut και Gauge.
  • Στούντιο δεδομένων σκίτσου - Μπορεί να δημιουργήσει διαγράμματα και πίνακες βάσει αριθμητικών δεδομένων, αλλά δεν υποστηρίζει καμία αλλαγή μεγέθους καθόλου.
  • Craft ή Generator περιεχομένου - Δημοφιλή εργαλεία χάρη στη δυνατότητα γρήγορης δημιουργίας ενός διαφορετικού τύπου εικονικών δεδομένων.
  • Αριθμοί και Excel - Και οι δύο μπορούν να εξάγουν καλά αναζητούμενα αρχεία PDF που μπορείτε να ρίξετε στο σκίτσο και να έχετε διαθέσιμα στρώματα για διαγράμματα και κελιά πίνακα.

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

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

Προσαρμογή

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

Για να επιτύχουμε πιο αυτοματοποιημένη προσαρμογή, χρησιμοποιούμε ξεχωριστό πίνακα γραφικών για να δημιουργήσετε έναν πίνακα ελέγχου για την αποθήκευση κοινών μορφών που μπορούν εύκολα να αντικατασταθούν με μόνο [⌘ + LM], που είναι πιθανώς ένας από τους πιο βασικούς / δημοφιλείς συνδυασμούς πλήκτρων.

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

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

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

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

Πατήστε την εικόνα για λήψη

Ο φάκελος του γραφήματος γραμμής χωρίζεται σε τρεις ομάδες: Διάγραμμα (γραμμές και σημεία δεδομένων), Αριθμοί (τιμές Υ) και Γραμμή γραμμής (X τιμές), για να λειτουργούν καλά και να τεντώνονται,

  • Συνδέστε τις αξίες των αξόνων X και Y στην κάτω και στην αριστερή / δεξιά πλευρά της ομάδας στρώσεων και ρυθμίστε τις σε σταθερό μέγεθος, ώστε οι γραμμές κύλισης να είναι ανεξάρτητες.
  • Τοποθετήστε τα σημεία δεδομένων σε ξεχωριστές ομάδες και ευθυγραμμίστε τα με τις τιμές συντεταγμένων Χ / Υ.
  • Χρησιμοποιήστε μια μάσκα ταυτόχρονα για τις συντεταγμένες γραμμής για να τεντώσετε όλα τα διαγράμματα ταυτόχρονα.

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

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

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

Πριν φύγεις

  • Κάντε λήψη του αρχείου επίδειξης εδώ.
  • Περισσότεροι ελεύθεροι σχετικοί πόροι εδώ → sketchappsources.com/charts
  • Βρείτε έναν λόγο και ακολουθήστε με στο Twitter και το Dribbble