Αλλαγή οπτικών θραύσεων στα συστήματα σχεδιασμού

Σεβόμαστε τα API κώδικα. Αλλά τι γίνεται με το χρώμα, το είδος και το διάστημα;

# 4 από 6 της σειράς Releasing Design Systems:
Εξαγωγές | Cadence | Εκδόσεις | Σπάζοντας | Εξαρτήσεις | Επεξεργάζομαι, διαδικασία

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

Έτσι, ρωτήστε τον εαυτό σας ...

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

Η Σημασιολογική Έκδοση (SemVer) προσφέρει σαφή κριτήρια για την επικοινωνία της αλλαγής σε όλες τις κυκλοφορίες χρησιμοποιώντας σημαντικές, δευτερεύουσες και ενημερωμένες ονομασίες. Κάθε σύστημα σχεδιασμού που αντιμετωπίζω χρησιμοποιεί το SemVer και παρακολουθεί την αλλαγή στο περιβάλλον προγραμματισμού εφαρμογών του πακέτου ή API. Αυτό είναι γνωστό έδαφος για τους προγραμματιστές που κωδικοποιούν JavaScript και HTML markup. Σπάστε το API και η επόμενη έκδοση σας πρέπει να αυξήσει την έκδοση σε μια επόμενη μεγάλη έκδοση, όπως από 1.4.0 έως 2.0.0.

Ο προσδιορισμός μιας διεπαφής για το σύνθετο οπτικό στυλ μας ξεφεύγει. Είναι τόσο δύσκολο να ορίσετε σαφείς, απλούς κανόνες για την παρακολούθηση αλλαγών στυλ. Οι κατασκευαστές συστημάτων δυσκολεύονται να διατυπώσουν το ερώτημα γιατί "αλλάζοντας αυτό το στυλ σπάει το UI του υιοθετητή" σε σχέση με το "αλλάζοντας αυτό το στυλ". Ρωτώ «Τι ειδικοί τύποι οπτικών αλλαγών ενεργοποιούν μια μεγάλη έκδοση για σας;» Η απάντησή τους: ¯ \ _ (ツ) _ / ¯.

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

Σπάζοντας χρώμα

Οι περισσότερες ομάδες του συστήματος αισθάνονται ασφαλείς στη ρύθμιση του χρώματος φόντου του κύριου κουμπιού. Ίσως το κίνητρό τους είναι να βελτιωθεί η αντίθεση με μια ετικέτα συνήθως λευκού κειμένου. "Ας σκουρίνουμε λίγο το τσίλι", λένε. "Θα βελτιώσουμε την προσπελάσιμη χρωματική αντίθεση του κουμπιού από μια βαθμολογία AA σε AAA".

Ρύθμιση του χρώματος φόντου ενός κύριου κουμπιού

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

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

Παράδειγμα: Κείμενο συστήματος σε προσαρμοσμένα φόντα

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

Έλεγχος αντίθεσης χρώματος μέσω του contrast-grid.eightshapes.com

Έτσι, για v1.5.0, η ομάδα ρύθμισε το διαδραστικό μπλε σε έναν ελαφρύτερο, πιο κορεσμένο τόνο που δούλευε τόσο σε λευκό όσο και σε κάρβουνο.

Ρύθμιση του χρώματος κειμένου μιας ετικέτας κουμπιού φάντασμα σε απρόβλεπτα υπόβαθρα

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

Παράδειγμα: Φόντα συστήματος με προσαρμοσμένο κείμενο Overlaid

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

Ρύθμιση του χρώματος φόντου μιας κάρτας που επιτρέπει το περιεχόμενο που περιέχει

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

Φανταστείτε ότι η μικρή απελευθέρωση του συστήματός σας περιλάμβανε αυτές τις ρυθμίσεις. Συμβατό προς τα πίσω, είπατε; Κανένας κίνδυνος στην αναβάθμιση, εμπιστεύτηκαν; Οχι! Το σύστημά σας έσπασε το προϊόν τους!

Επομένως, αξιολογήστε τις ιδιότητες αλλαγής χρωμάτων για να προσδιορίσετε εάν άλλαξε ένα σύστημα, όπως:

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

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

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

Τυπογραφία με θραύση (με περιτύλιξη)

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

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

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

Παράδειγμα: Οι καρτέλες περιτύλιξης είναι φοβερά

Φανταστείτε ότι το σύστημά σας προσαρμόζει το βάρος της ετικέτας καρτελών από κανονικό σε έντονο.

Μετά από μια αναβάθμιση δευτερεύουσας έκδοσης, οι καρτέλες δεν ανταποκρίνονται. ΟΧΙ καλα.

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

Παράδειγμα: Επιστολή διαστήματος Mayhem

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

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

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

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

Σπάσιμο χώρου και μέγεθος

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

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

Παράδειγμα 1: Αφαίρεση κατακόρυφου διαστήματος

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