Σύστημα σχεδίασης: τι είναι, γιατί και πώς να το δημιουργήσετε

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

• Τι είναι ένα σύστημα σχεδιασμού;
• Τι είναι;

Τι είναι ένα σύστημα σχεδιασμού;

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

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

Το σύστημα σχεδιασμού αποτελείται από τρία επίπεδα:

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

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

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

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

Τύποι συστημάτων σχεδιασμού

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

Σε συστήματα ανοιχτού κώδικα, κάθε εταιρεία μπορεί να χρησιμοποιήσει υλικά και να τα προσαρμόσει για τα έργα της – αλλάξτε χρώματα κουμπιών, γραμματοσειρές και εικονίδια. Για παράδειγμα, στα συστήματα Ant Design, Human Interface Guidelines και Material Design.

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

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

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

Δομή συστήματος σχεδιασμού:

• Άτομα είναι τα μικρότερα στοιχεία: κουμπιά, εικονίδια, πεδία εισαγωγής και γραμματοσειρές.
• μόρια είναι ένας συνδυασμός πολλών απλών στοιχείων: δύο κουμπιά, ένας τίτλος και μια γραμμή εισαγωγής, μια γραμμή ειδοποιήσεων, ένα πλαίσιο ελέγχου και κείμενο.
• Οργανισμοί είναι πλήρη στοιχεία: κεφαλίδα ιστότοπου, φόρμα εξουσιοδότησης, κάρτες προϊόντων και banner ειδοποιήσεων.
• πρότυπα – διάταξη σελίδων χωρίς περιεχόμενο: μενού, εμφάνιση ιστότοπου.
• Σελίδες είναι σελίδες γεμάτες με περιεχόμενο.

Ο γενικός αλγόριθμος μοιάζει με αυτό:

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

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

Γιατί χρειάζεστε ένα σύστημα σχεδιασμού;

Όπως συμβαίνει με κάθε προϊόν πληροφορικής, είναι κρίσιμο να απαντήσετε στην ερώτηση, "Τι εξυπηρετεί ένα σύστημα σχεδιασμού;" Ή, όπως παρατηρούν κάποιοι συνάδελφοι στο κατάστημα, «και τι»;

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

Αυτοματοποίηση

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

Επαναληπτικότητα

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

Συνοχή

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

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

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