Οι σχεδιαστές είναι από τον Κρόνο, οι προγραμματιστές είναι από τον Δία: ή, γιατί η επικοινωνία έχει σημασία

Σχετικά με το 'Αλλά φαίνεται διαφορετικό στο αποτέλεσμα Specs', UI Toolkits, και άλλα πράγματα.

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

Συμβουλές για αλλεργίες

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

Σχεδιαστές, κάτι μου λέει ότι ξέρετε για τα Συστήματα Σχεδιασμού και ότι μπορείτε να τα σκάψετε :) Σε περίπτωση που θέλετε να διαβάσετε περισσότερα, ο Nathan Curtis έγραψε πολλά γι 'αυτό. Αγαπώ και σέβομαι το έργο του στα συστήματα σχεδιασμού.

Οι προγραμματιστές, πρόκειται να δείξω κάποιο κωδικό στο τέλος. Η παιδική χαρά είναι μια εφαρμογή React + CSS-in-JS (όπως συναισθήματα ή στυλ).

Ένα είδος τυπικού σεναρίου

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

διαφήμιση

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

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

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

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

Οι προγραμματιστές, από την άλλη πλευρά, δουλεύουν διαφορετικά.

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

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

Το αρχείο Visual Spec

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

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

Λίγα μέρες μετά ...

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

Απογοητευμένοι σχεδιαστές, απογοητευμένοι προγραμματιστές.

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

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

Ο παππούς μου είπε:

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

Χρειάζεστε ένα καλό εργαλείο UI Toolkit

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

Γιατί χρειάζεστε πραγματικά ένα καλό εργαλείο UI

  • Η εφαρμογή σας γίνεται όλο και πιο περίπλοκη;
  • Οι σχεδιαστές μιλούν αρκετά για ασυνέπειες στην εφαρμογή;
  • CI / CD; Πηγαίνοντας γρήγορα γρήγορα γρήγορα;
  • Απομακρυσμένες ομάδες;
  • Να πάρει λίγο βρώμικο με αυτά τα αρχεία CSS;
  • Ξεκινώντας να ενδιαφέρεται για το μέγεθος της εφαρμογής;
  • Είναι η εμπειρία χρήστη στον πυρήνα του επιχειρηματικού σας μοντέλου;

Δεν χρειάζεται να σημειώσετε όλα αυτά - ακόμα και κάποιος μπορεί να είναι αρκετός :)

Γιατί χρειάζεστε το δικό σας Toolkit UI

Ένα Σύστημα Σχεδιασμού αφορά το θέμα της Γλώσσας. Οπτική γλώσσα, Γλώσσα σχεδιασμού UI κ.λπ. Χρειάζεται μεγάλη προσπάθεια για να ορίσετε τη δική σας: Προϊόν, Σχεδίαση, Μηχανική, όλα αυτά τα τμήματα θα ασχοληθούν σε μεγάλο βαθμό.

Πολλές φορές αυτό δεν είναι απλώς μια βιώσιμη επιλογή. Υπάρχουν εκπληκτικά πλαίσια εκεί έξω, σημασιολογική-ui, ant-design, Bootstrap, Material-UI. Όλα έρχονται με ένα είδος προεγκατεστημένης Γλώσσας και ένα δοκιμασμένο με μάχη UI Toolkit, έτοιμο για χρήση από εσάς.

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

Κλέψτε ως καλλιτέχνης

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

Κοιτάξτε αυτή τη λίστα των Συστημάτων Σχεδίασης: https://adele.uxpin.com:

  • BBC: Gel
  • Τρέλο: Νατσός
  • Πωλήσεις: Lightning

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

Ας κάνουμε ένα

Θα σας δείξω πόσο εύκολο είναι να ξεκινήσετε το δικό σας σύστημα σχεδιασμού.

Θα το ονομάσω Larry.

Ας πάρουμε ένα μικρό μέρος της διάταξης μας και προσπαθήστε να το φτιάξετε από το μηδέν:

Τελικό αποτέλεσμα πρώτα

Το ακόλουθο CodeSandbox είναι η μόνη και μοναδική εφαρμογή στον κόσμο που υλοποιεί τον Larry:

Μπορείτε να βρείτε τον Larry στο GitHub: https://github.com/albinotonnina/larry

Η τεκμηρίωση

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

Ας ξεκινήσουμε να ορίζουμε μερικές πραγματικά βασικές συμβάσεις:

Χρωματιστά

Ας δημιουργήσουμε μια παλέτα για τη διάταξή μας.

Προτείνω να ορίσετε μια σειρά σημασιολογικών ονομάτων από αυτά τα χρώματα, όπως π.χ.:

headerText = JapaneseIndigo
paragraphText = JapaneseIndigo
elementBackgroundDefault = Χιόνι
elementBackgroundHover = BrilliantAzure
στοιχείοButton = LightGray - άλφα 60%

Αυτά είναι τα ονόματα που θα χρησιμοποιήσετε και τα δύο όταν κάνετε speccing (που είναι μια λέξη).

Διαχωρισμός

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

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

Ένα αρχείο spec θα μοιάζει με αυτό:

Τυπογραφία

Βεβαιωθείτε ότι τα μεγέθη γραμματοσειράς, τα βάρη γραμματοσειρών, τα υψόμετρα γραμμών, τα περιθώρια, τα χρώματα στις επικεφαλίδες σας, οι παράγραφοι σας και τα λοιπά αντιστοιχούν ακριβώς. Καλέστε τους με ονόματα που σας αρέσουν, π.χ. HeaderHuge, HeaderLarge, HeaderTiny ή χρησιμοποιήστε τις σημασιολογικές ετικέτες (h1, h2, h3) σωστά. Απλά βεβαιωθείτε ότι έχετε ευθυγραμμιστεί σε αυτό.

Μοτίβα

Τι λέει με το UI Toolkit; Βιβλιοθήκη μοτίβων! Πρέπει να αρχίσετε να χρησιμοποιείτε τη βιβλιοθήκη μοτίβα. Αυτό που θέλετε είναι να έχετε τα στοιχεία που χρειάζεστε συμπεριφέρονται όπως συμφωνήσατε, ώστε να μπορείτε να τα συνθέσετε με τον τρόπο που θέλετε, όποτε θέλετε.

Ξεκινήστε από τα σωματίδια και τα πρωτόγονα, ένα τέτοιο στοιχείο του κουτιού, όταν πρέπει να ορίσετε διαστήματα και περιγράμματα γύρω από κάτι άλλο.

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

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

Συνεχίστε με πιο σύνθετα συστατικά UI, συνθέσεις άλλων μικρότερων συστατικών και ούτω καθεξής.

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

Παράδειγμα ενός πιο σύνθετου στοιχείου UI

Παίρνετε την ουσία;

Έχετε ορίσει σταθερές και έχετε κάποια σωματίδια για να χτίσετε.

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

Έτσι, σχεδιαστές και προγραμματιστές, αμέσως μετά το άρθρο πηγαίνετε να κάνετε το δικό σας Larry αν δεν έχετε ένα!

Κώδικας

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

Θέμα, καθορίστε τις σταθερές

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

Δεν υπάρχει κανένα όριο στην πολυπλοκότητα / πληρότητα που μπορείτε να επιτύχετε εδώ, αφού τελικά πρόκειται για τη δημιουργία ενός αντικειμένου JavaScript, φανταστείτε τι θα μπορούσατε να κάνετε!

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

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

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

Συνδέστε το θέμα στην εφαρμογή σας

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

Δημιουργία βασικών στοιχείων UI

ένα πρωτόγονο στοιχείο UI Box

Πιο εξειδικευμένα συστατικά UI

Εδώ είναι ένα στοιχείο Flex.

Εφαρμογή των στοιχείων UI στα αρχεία χαρακτηριστικών σας

Ώρα να κάνουμε κάτι

Αυτό είναι όπου θα υλοποιήσετε το συστατικό UI σας και την επιχειρηματική σας λογική.

Η δομή των αρχείων

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

Ο Larry βρίσκεται στο φάκελο "design-system". Αυτό είναι όπου μπορείτε να βρείτε τις σταθερές του και τα γενικά και επαναχρησιμοποιήσιμα στοιχεία UI.

Παρατηρήστε επίσης το φάκελο UI στο φάκελο Layout Document - εδώ καθορίζω και εξάγω τα στοιχεία UI που είναι ειδικά για τη λειτουργία μας.

συμπέρασμα

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

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

https://dribbble.com/shots/2712522-Designer-vs-Developer

Ευχαριστούμε που το διαβάσατε

Έχετε θετικές εμπειρίες για να μοιραστείτε; Παρακαλείστε να το κάνετε στα σχόλια.

Γεια σας, το όνομά μου είναι Albino Tonnina, Είμαι Μηχανικός Λογισμικού που εργάζεται στο Λονδίνο, μπορείτε να με βρείτε στο Twitter ή στο Github ή το Instagram ή στην πόλη.

Τα τελευταία μου άρθρα

Πώς να χάσετε μια εργασία IT σε 10 λεπτά
Μιλώντας για layouts στο web ... εισάγοντας την τεχνική Magic Hat

Ακολούθησέ με στο τουίτερ!