Απελευθέρωση συστημάτων σχεδιασμού

Παροχή διασυνδεδεμένων εξόδων προς υιοθετητές με την πάροδο του χρόνου

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

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

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

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

Αυτές οι ιστορίες αντικατοπτρίζουν αυτό που έμαθα να απελευθερώσω συστήματα που συνεργάζονται με ομάδες όπως η Discovery Education, η Morningstar, η Target και η REI. Αυξάνονται με πληροφορίες από συνεργάτες του Salesforce, Adobe, Atlassian, Shopify και Financial Times. Σας ευχαριστούμε για την ευγενική διανομή του χρόνου και των πρακτικών σας!

Αποδόσεις: Τι έχει κυκλοφορήσει;

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

Κώδικας, η Πηγή της Αλήθειας

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

  • UI Βιβλιοθήκη στοιχείων ως HTML Markup & CSS. Συχνά αναφέρεται ως "το CSS", η κατανάλωση αυτού του πακέτου στηρίζεται στη χρήση ή την συμπλήρωση του CSS ως σταθερής βασικής γραμμής οπτικού στυλ σε συνδυασμό με την επαναχρησιμοποίηση των αποσπασμάτων HTML.

και / ή ...

  • UI Components Library ως Javascript: Πολλά συστήματα περιστρέφουν το HTML & CSS με JavaScript για να ενισχύσουν τη λογική, να ενσωματώσουν το στυλ και να διευκολύνουν την ολοκλήρωση και τη συντήρηση πιο άμεσα σε ένα πλαίσιο επιλογής. Ενώ οι περισσότερες βιβλιοθήκες στοχεύουν σε ένα συγκεκριμένο πλαίσιο (React, Vue, Ember, Angular, ...), τα σήματα της βιομηχανίας υποδηλώνουν μια στροφή προς την κατασκευή στοιχείων διαδικτύου για όλα τα πλαίσια. Τελευταίες έξι προσπάθειες του συστήματος μου; Αργότερα 2017: Βανίλια HTML, Βανίλια HTML. Αρχές 2018: Αντιδρά, Vue. Αργότερα 2018: Στοιχεία Web, Στοιχεία Ιστού.

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

  • Design Tokens που καθιερώνουν ένα οπτικό στυλ μέσω σημασιολογικά σημαντικών ζευγών ιδιοτήτων-αξίας. Τα Tokens είναι μεταβλητές διαθέσιμες σε πολλές μορφές για χρήση σε πλατφόρμες (web, iOS, Android), προεπεξεργαστές (Sass και LESS) και πλαίσια (όπως το React). Ορισμένα συστήματα διαχειρίζονται μάρκες σε αποθετήριο χωριστά από τον κωδικό συνιστωσών UI. Ως αποτέλεσμα, η βιβλιοθήκη τους - μαζί με άλλες εφαρμογές - μπορεί να εξαρτάται και από το κουπόνι ως πακέτο.
  • Επίδειξη εφαρμογών / ιστότοπων ως περιβάλλον με παραδείγματα σελίδων που έχουν δημιουργηθεί χρησιμοποιώντας τη βιβλιοθήκη στοιχείων. Το demo είναι επίσης για τα σεμινάρια και τα γρήγορα πρωτότυπα, ακόμα και από τους σχεδιαστές!
  • Διασυνδεδεμένα εξαρτήματα κατάλληλα για iOS, Android και Windows.

Σχεδιασμός περιουσιακών στοιχείων

Οι περισσότερες ομάδες περιορίζουν την κατανόηση του τι απελευθερώνουν σε απλά "απελευθερώνουμε κώδικα". Είναι το άνοιγμα των ματιών για να συνειδητοποιήσουν ότι δημοσιεύουν τόσα άλλα εργαλεία που αλλάζουν με την πάροδο του χρόνου. Περιλαμβάνουν:

  • Design Toolkits ως αρχεία προτύπων και βιβλιοθήκες συμβόλων που προσφέρονται στο λογισμικό σχεδιασμού. Σήμερα, σχεδόν πάντα Sketch. Αύριο, η Figma, το Invision Studio και άλλοι αναδυόμενοι ανταγωνιστές;
  • Τις γραμματοσειρές, τα εικονίδια και ακόμη και τα σύνολα εικόνων του Origami λόγω του συχνά αναμενόμενου ρόλου του συστήματος στη διανομή και την έκδοση τέτοιων βιβλιοθηκών.
  • Άλλοι πόροι σχεδιασμού όπως εικονογράφηση και έγχρωμο δείγμα αρχείων ASE / CLR ως εφαλτήριο για παραστατικά έργα τέχνης. Αυτές οι συλλογές αλλάζουν αργά, λιγότερο τυπικά και με τη συμβολή των μελών της κοινότητας που δεν αποτελούν μέρος μιας κεντρικής ομάδας του συστήματος. Ωστόσο, από την οπτική γωνία του πελάτη και τις επικοινωνίες του συστήματος, αποτελεί μέρος του συστήματος.

Ιστοσελίδα τεκμηρίωσης

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

  • Οι ιστότοποι τεκμηρίωσης περιγράφουν λειτουργίες (όπως ένα κουμπί), ενσωματώνουν νέους χρήστες και ενεργοποιούν διαδικασίες, όπως βοήθεια ή συμβολή. Οι ομάδες δημιουργούν τοποθεσίες πιο συχνά χρησιμοποιώντας μια γεννήτρια στατικών τοποθεσιών ή λιγότερο συχνά με ένα σύστημα διαχείρισης περιεχομένου.
  • Τα στοιχεία τεκμηρίωσης - κώδικας-παράδειγμα-ζευγαριού, do-dont, hex-code, εξερευνητής εξαρτημάτων εξαρτώνται από τη βιβλιοθήκη στοιχείων UI και συνήθως εξυπηρετούν μόνο τον ιστότοπο doc. Αυτά τα στοιχεία μπορούν να εκδοθούν με την τοποθεσία τεκμηρίωσης ή ως μια τρίτη, χωριστά εκδοθείσα βιβλιοθήκη σε σχέση με το έγγραφο και τα στοιχεία UI που βρίσκονται μεταξύ.

Προορισμοί: Πού πηγαίνει;

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

Για τον κώδικα

  • BEST: Μητρώα όπως το npmjs (ή ένα εσωτερικό αντίγραφο όπως το σύνδεσμο του Sonatype) που παρέχουν πρόσβαση και διαχείριση των πακέτων κώδικα που απελευθερώνονται. Οι προγραμματιστές χρησιμοποιούν έπειτα εργαλεία όπως το Bower, npm, νήματα, webpack και babel για να ενσωματώσουν και να αναβαθμίσουν τον κώδικα ομαλά στο περιβάλλον τους.
  • ΚΑΛΥΤΕΡΑ: Φιλοξενούμενα στοιχεία ενεργητικού σε CDN για απευθείας συνδέσεις με εκδομένες στυλ και σενάριο, καθώς και γραμματοσειρές και εικονίδια που αλλάζουν πιο αργά.
  • ΕΝΑΝΤΙ ΟΚ: Αποθηκευτικός χώρος Πρόσβαση στο Github, το Bitbucket ή κάτι παρόμοιο για να κλωνοποιήσετε, πιρούνι ή άλλως να συνθέσετε, να χρησιμοποιήσετε και ίσως - ενδεχομένως - να συμβάλλετε.
  • ΕΑΝ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ: Άμεση Λήψη Κώδικα, συνήθως του "αρχείου ZIP" των μεταγλωττισμένων ή μη συμπιεσμένων στοιχείων του συστήματος από την τοποθεσία doc για τοπική χρήση ή / και χειροκίνητη ενσωμάτωση σε ξεχωριστό αποθετήριο.

Το Bootstrap και το Material Design Lite είναι παραδείγματα που κυκλοφορούν σε 2+ προορισμούς.

Για τα εργαλεία σχεδιασμού

  • BEST: Δημιουργία νέου ως συγχρονισμένης, ενσωματωμένης διαδρομής στο μενού του εργαλείου σχεδιασμού για να δημιουργήσετε μια νέα παρουσία από ένα πρότυπο.
  • ΚΑΛΥΤΕΡΑ: Εκδόθηκε και διανεμήθηκε χρησιμοποιώντας λογισμικό διαχείρισης περιουσιακών στοιχείων σχεδιασμού βάσει αδειών όπως Abstract ή Lingo.
  • GOOD: Άμεση λήψη εργαλείων από μια τοποθεσία τεκμηρίωσης, με σαφή εκδοχή που υποδεικνύεται και σχετιζόμενη με το Εγχειρίδιο έναρξης στο εγγύς αρχείο.
  • ΕΝΑΝΤΙ ΟΚ: Κοινή μονάδα δίσκου, μέσω διαφήμισης και ενδεχομένως απλουστευμένης εσωτερικής διεύθυνσης URL (όπως http: //system.uitoolkit).
  • ΔΕΝ ΕΙΝΑΙ ΚΑΛΗ ΕΞΟΔΟΣ: Θρυμματισμένη σε κάποια σελίδα τέταρτου επιπέδου σε μια μόλις οργανωμένη περιοχή wiki που πολλοί άνθρωποι δεν μπορούν να βρουν.

Επόμενο → # 2. Ρυθμός