5 βήματα για τη δημιουργία ενός συστήματος σχεδιασμού

Παρατηρήσεις σχετικά με το πώς κατασκευάσαμε το σχεδιαστικό μας σύστημα στο Sketch

Conestoga College Doon Campus Σχεδιασμός Θεμέλια Στούντιο

Τα συστήματα σχεδιασμού έχουν γίνει ένα βασικό πλεονέκτημα σε κάθε ομάδα σχεδιασμού και ανάπτυξης. Πρωτοποριακά από εταιρείες τεχνολογίας όπως το Google (Material), το AirBnB, το Uber και το Facebook, εξυπηρετούν έναν σημαντικό σκοπό: την παροχή ενός ενιαίου χώρου αναφοράς για ψηφιακό σχεδιασμό, συμπεριλαμβανομένων κατευθυντήριων γραμμών, συστατικών στοιχείων και αποσπασμάτων κώδικα. Δεν είναι μόνο για εταιρείες τεχνολογίας και εφαρμογές -επιπλέον, εξυπηρετούν οποιαδήποτε οργάνωση με ψηφιακή παρουσία. Σε αυτή την ανάρτηση, θα σας δείξουμε βήμα προς βήμα πώς δημιουργήσαμε το σύστημα σχεδιασμού μας και τις επιλογές που κάναμε κατά μήκος του δρόμου. Θα αναφέρουμε το κύκλωμα προϊόντων μας ως παράδειγμα για την οικοδόμηση του συστήματος σχεδιασμού μας και επιλέξαμε το Sketch ως το εργαλείο σχεδιασμού για την κατασκευή και τον κατάλογο εξαρτημάτων.

Κύριο μενού κυκλώματος

Σχετικά με το Circuit και τα προβλήματα σχεδιασμού, τις προκλήσεις και τους στόχους μας

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

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

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

Τι είναι ένα σύστημα σχεδιασμού και πώς βοηθά;

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

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

Πίνακας πλεονεκτημάτων και μειονεκτημάτων ενός συστήματος σχεδιασμού (διάγραμμα που γίνεται με το σύστημα σχεδιασμού!)

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

Πώς να δημιουργήσετε και να οργανώσετε ένα σύστημα σχεδιασμού

Ακολουθούν τα βήματα που ακολουθήσαμε για να δημιουργήσουμε το σύστημα σχεδιασμού μας. Επιλέξαμε το Sketch για να δημιουργήσουμε τη βιβλιοθήκη μας και ορισμένες από τις συστάσεις θα είναι ειδικές για τη λειτουργικότητά της, αλλά οι έννοιες που καλύπτουμε είναι καθολικές. Άλλα εργαλεία που μπορείτε να χρησιμοποιήσετε περιλαμβάνουν το Figma, το Adobe Xd και το Adobe Illustrator.

Το τελικό αποτέλεσμα μπορεί να φανεί κάτι τέτοιο.

Βήμα 1 - Ελέγξτε τον ιστότοπο ή την εφαρμογή σας και δημιουργήστε μια λίστα

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

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

Βήμα 2 - Οργάνωση σελίδων

Η μέθοδος ατομικής σχεδίασης (αριστερά) και η μέθοδος σελίδας μοτίβου (δεξιά)

Ανεξάρτητα από το λογισμικό που έχετε επιλέξει, πιθανόν να χρησιμοποιήσετε σελίδες για να οργανώσετε τα περιεχόμενα της βιβλιοθήκης σας. Υπάρχουν δύο τρόποι να το κάνετε αυτό. Η πρώτη είναι η Μεθοδολογία Ατομικής Μελέτης από τον Brad Frost, όπου τα στοιχεία διαμορφώνονται σύμφωνα με 5 ιεραρχικές ομαδοποιήσεις: Ατομικά, Μόρια, Οργανισμοί, Πρότυπα, Σελίδες. Η δεύτερη μέθοδος, την οποία αναφέρουμε ως σελίδες μοτίβου, παρουσιάζει τα σχετικά συστατικά στοιχεία στις δικές της σελίδες όπως τα χρώματα, τον τύπο, τα εικονίδια, τα Avatars, τα κουμπιά κλπ. Συγκριτικά, πρόκειται για μια επίπεδη δομή χωρίς μεγάλη εραρχία που μπορεί να κάνει πιο απλή εισερχόμενους σχεδιαστές για να εντοπίσουν συγκεκριμένα κομμάτια, αλλά δεν διαθέτει τη δομημένη δομική ροή της ατομικής μεθοδολογίας.

Πώς οργανώνουμε το σύστημα σχεδιασμού μας

Διαμορφώσαμε το σύστημά μας ακολουθώντας τις αρχές του ατομικού συστήματος, αν και το απλοποίησα σημαντικά. Καταλήξαμε με 5 κύριες σελίδες:

Μια σελίδα οδηγιών για γραπτή τεκμηρίωση που εξηγεί τα πρότυπα και τους στόχους του συστήματος σχεδιασμού.

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

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

Η τελική σελίδα συμβόλων

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

Μία από τις σελίδες οδηγού στυλ

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

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

Βήμα 3 - Δημιουργήστε στυλ επιπέδων και στυλ κειμένου (παραλείψτε αυτό το βήμα αν δεν έχετε Σκίτσο)

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

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

Στυλ στρώματος κυκλώματος

Προσθέτοντας ένα στυλ στρώματος: επιλέξτε το αντικείμενο σας και στον πίνακα ιδιοτήτων κάτω από την εμφάνιση, κάντε κλικ στο "No Style Style" και "Create new Layer Style" για να αποθηκεύσετε τις ιδιότητες του αντικειμένου.

Ονομασία στυλ επιπέδου: πώς ονομάζετε τα στυλ σας θα καθορίσει πώς εμφανίζονται στο μενού (παραπάνω). Εάν διαπιστώσετε ότι η λήψη του στυλ σας διαρκεί πάρα πολύ ή είναι δύσκολο να εντοπιστεί μπορείτε πάντα να το αλλάξετε στο παράθυρο στυλ. Layer> Οργάνωση στυλ επιπέδου. Ακολουθεί ο τρόπος με τον οποίο ονομάσαμε τα στυλ επιπέδων:

Κύκλωμα / Χρώμα / Πρωτεύον / Μπλε / Μεσαίο

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

Στυλ κειμένου κυκλώματος

Προσθήκη στυλ κειμένου: επιλέξτε το κείμενό σας και στον πίνακα ιδιοτήτων κάτω από την εμφάνιση, κάντε κλικ στο "No Style Style" και, στη συνέχεια, στο "Create new Style Style".

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

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

Βήμα 4 - Δημιουργία συμβόλων / στοιχείων

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

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

Ονομάστε το σύμβολο: Αυτό θα καθορίσει τον τρόπο με τον οποίο θα εμφανιστούν στο μενού εισαγωγής. Για ένα κουμπί, τα ονομάσαμε ως τέτοια:

Κουμπί / Προεπιλογή / Αναμονή
Κουμπί / Προεπιλογή / Ποντικιού
Κουμπί / Προεπιλογή / Απενεργοποιημένο

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

Αντικατάσταση πίνακα του εξαρτήματος της κάρτας

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

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

Πάντα κλιμακώστε ένα νέο σύμβολο για δοκιμή!

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

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

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

Mockup μιας οθόνης κινητής τηλεφωνίας που δείχνει πώς εφαρμόζονται οι παρακάμψεις

Βήμα 5 - Τρέχουσες ενημερώσεις στο σύστημα σχεδιασμού

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

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

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

  • Δημιουργήστε φακέλους δεδομένων για να προσθέσετε τη δική σας βιβλιοθήκη εικόνων σε αντικαταστάσεις. Λάβετε υπόψη ότι αν μετακινήσετε το φάκελο θα πρέπει να το επανασυνδέσετε. Σκίτσο> Προτιμήσεις> Δεδομένα / Βιβλιοθήκη.
  • Ενημέρωση της βιβλιοθήκης σας σε άλλα έγγραφα - επάνω δεξιά ειδοποιήσεις → Ενημέρωση βιβλιοθήκης (πρέπει πρώτα να αποθηκεύσετε και να κλείσετε τη βιβλιοθήκη)
  • Το Sketch API είναι μια επίσημη, ενημερωμένη πηγή για να ελέγχει διπλά τα γεγονότα, καθώς οι ιστοτόποι τρίτων μερών έχουν μερικές φορές ξεπερασμένες πληροφορίες.
  • Οι πηγές SketchApp είναι ένα χρήσιμο μέρος για να αποκτήσετε δωρεάν στοιχεία ενεργητικού για το σκίτσο

Οι προσθήκες κάνουν πολύ πιο εύκολη τη χρήση και οργάνωση του συστήματος σχεδιασμού. Λίγα που αγαπάμε αυτή τη στιγμή:

  1. Sketch Runner - χρησιμοποιήστε το πληκτρολόγιο για να εισάγετε σύμβολα γρήγορα!
  2. Σύμβολο Διοργανωτής - κάντε τα συμβόλαιά σας ωραία και οργανωμένα όπως θέλετε.
  3. Unsplash It - προσθέστε φωτογραφίες από το Unsplash.

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