Δημιουργία διαστήματος συστήματος σχεδιασμού

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

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

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

Όσον αφορά τους στόχους, το σύστημα απόστασης πρέπει να είναι ...
1. Εύκολα οριστεί και εφαρμόζεται σε σχέδια
2. Κατανοητές από τους σχεδιαστές και τους προγραμματιστές
3. Δυνατότητα αλλαγής χωρίς σπάσιμο

Για να ορίσουμε ένα σύστημα διαχωρισμού που επιτυγχάνει αυτά, ξεκινήσαμε με μια βασική ερώτηση, "Τι θα πρέπει να βασιστεί πραγματικά;"

Όλη η βάση σας ανήκει σε εμάς

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

Βάση-10

Παλιά πιστοί. Η βάση-10 επικρατεί για δύο κύριους λόγους. Ένα, είναι ο αριθμός των δακτύλων και των ποδιών που οι περισσότεροι άνθρωποι έχουν. Δύο, είναι εύκολο στη χρήση. Εκτός από αυτό, δεν υπάρχει λόγος να χρησιμοποιήσουμε απόσταση βάσης-10 εκτός από την αίσθηση νοσταλγίας μας (και το γεγονός ότι στο Sketch η προεπιλογή big-nudge είναι 10px).

Ετυμηγορία: Αρνητική στην καλύτερη περίπτωση, αλλά τα μαθηματικά είναι εύκολα!

Ems

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

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

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

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

Ετυμηγορία: Μεγάλη ιδέα, αλλά οι σχεδιαστές θα κάνουν ένα πραξικόπημα.

Βάση-8

Κουρασμένος από τη βάση-10; Δοκιμάστε 8! Είναι σαν 10, αλλά πιο διαίρεσης. Η βάση-8 είναι στην πραγματικότητα πολύ πιο χρήσιμη από τη βάση-10 όσον αφορά τα συστήματα. Παρέχει εξαιρετικές επιλογές για κλιμάκωση που είναι σε μεγάλο βαθμό διαιρέσιμες από 2, 3 και 4 και ταιριάζει με βασικά μεγέθη γραμματοσειρών. Είναι επίσης μια πολύ χρησιμοποιούμενη κλίμακα όταν πρόκειται για βασικά στοιχεία UI όπως η εικονογραφία.

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

Ετυμολογία: Καλύτερα από οτιδήποτε άλλο μέχρι στιγμής.

Απλά δεν είναι ο τύπος μας

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

Εισάγετε, την ex μονάδα.

Η πρώην μονάδα είναι μια δύσκολα χρησιμοποιούμενη μονάδα CSS που συνδέεται με το ίδιο πράγμα που θέλουμε οι αποστάσεις να σχετίζονται με: την τυπογραφία. Και όχι μόνο πληκτρολογήστε, το ύψος x του τύπου, το οποίο ποικίλλει άγρια ​​από τη γραμματοσειρά στην γραμματοσειρά, ακόμα και όταν το βασικό μέγεθος γραμματοσειράς παραμένει το ίδιο. Με τη χρήση αυτής της μονάδας, είμαστε σε θέση να εξειδικεύσουμε εξαρτήματα αποστασιοποίησης που σχετίζονται άμεσα με τις γραμματοσειρές του UI μας, δημιουργώντας ένα αρμονικό σχέδιο που χρησιμοποιεί τη θεωρία κλασσικού σχεδιασμού - όχι έναν αυθαίρετο αριθμό.

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

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

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

Δημιουργία μεγεθών διαχωρισμού

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

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

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

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

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

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

Δείτε το παράδειγμα κώδικα

Αυτό το σύστημα είναι φανταστικό για τους ίδιους τρεις λόγους που δηλώσαμε στην αρχή:

1. Είναι εύκολο να οριστεί και να εφαρμοστεί στα σχέδια (ευχαριστίες, σύμβολα Fibonacci και Sketch)
2. Μπορεί να γίνει κατανοητή τόσο από τους σχεδιαστές όσο και από τους προγραμματιστές (χάρη, απόλυτα μεγέθη)
3. Μπορεί να αλλάξει χωρίς σπάσιμο (χάρη, ex μονάδα)

Ονομασία των μεγεθών σας

Δεδομένου ότι η ακριβής τιμή των εικονοστοιχείων του διαχωριστικού μπορεί να αλλάξει, χρησιμοποιούμε τις αφαίρεσεις για τα ονόματα αποστασιοποιήσεων μας. Αυτά θα μπορούσαν είτε να είναι μια αριθμητική κλίμακα (sp-1, sp-2, sp-3, κ.λπ.) ή μεγέθη t-shirt (xs, s, m, l, xl, κ.λπ.). Αυτό επιτρέπει στο σύστημα απόστασης να κάμπτεται σε συγκεκριμένο μέγεθος κάθε βήματος, διατηρώντας ταυτόχρονα την ακεραιότητα του κώδικα βάσης.

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

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

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

- Είμαστε το τοπίο