Χρήση του ατομικού σχεδιασμού στη σύγχρονη ανάπτυξη ιστού
Αν υπάρχει κάτι που έχω μάθει να δουλεύω για μια εταιρεία τεχνολογίας, είναι ότι για να οικοδομήσουμε μια ιστοσελίδα - μια πραγματικά εκπληκτική, όμορφη και λειτουργική ιστοσελίδα - ένα πλήθος διαφορετικών ταλέντων και στοιχείων πρέπει να έρθουν μαζί και να εργαστούν αρμονικά. Μερικές φορές μπορεί να νιώθει σαν να δουλεύει στον Πύργο της Βαβέλ: ένα άτομο κοσκινίζει μέσα από μια παλέτα εξάγωνων κωδικών, τα παιδιά σε όλη την αίθουσα κουδουνίζουν από μια αλφαβήτη σούπα διαφορετικών κωδικών αρχείων και ο διαχειριστής λογαριασμών είναι δίπλα μου στο τηλέφωνο εξηγώντας πώς να χρησιμοποιήσετε ένα σύστημα διαχείρισης περιεχομένου σε έναν πελάτη, όλα ενώ προσπαθώ να γράψω αυτό το άρθρο σε απλά αγγλικά.
Όλα αυτά τα στοιχεία χρειάζονται έναν τρόπο να έρθουν μαζί χωρίς να χάνουν τίποτα στην κακοφωνία και υπάρχει μια σχετικά νέα ιδέα που πραγματικά μας βοήθησε να δουλέψουμε καλύτερα ως ομάδα: σχεδιαστές, προγραμματιστές, δοκιμαστές ... ο καθένας.
Λέγεται Ατομικός Σχεδιασμός .
Τι είναι ο ατομικός σχεδιασμός;
Τα συστατικά του Ατομικού Σχεδιασμού προέρχονταν από τον σχεδιαστή Μπραντ Φρόστη 'S γοητεία με τη χημεία? τα άτομα που είναι η μικρότερη μονάδα, συνδέονται με μόρια, τα οποία με τη σειρά τους σχηματίζουν πιο σύνθετους οργανισμούς, δημιουργώντας τελικά όλη την ύλη στο σύμπαν.
Έτσι, αν είμαστε στον Διεθνή Διαστημικό Σταθμό, κοιτάζοντας προς τα κάτω ολόκληρο το έργο, εδώ είναι η ολοκληρωμένη τέχνη αρχικής σελίδας για ένα πρόσφατο έργο που εφαρμόσαμε στο Atomic Design, Route 93 Pizza Mill :
Route 93 Η αρχική σελίδα της Pizza αποτελείται από όλα τα στοιχεία μας ως ενιαία, λειτουργική ιστοσελίδα. Τώρα, εάν τοποθετήσουμε την περιοχή κάτω από μικροσκόπιο, μπορούμε να δούμε τα κοκκώδη συστατικά της:
Άτομα: Παρακάτω είναι τα άτομα για την ιστοσελίδα του Route 93 Pizza Mill. Τα άτομα είναι τα βασικά δομικά στοιχεία, όπως ετικέτες, ετικέτες, κουμπιά, παλέτα χρωμάτων και γραμματοσειρές. Αν και δεν είναι πολύ χρήσιμες μόνοι τους, τα άτομα είναι το προκαταρκτικό σημείο αναφοράς - οι αρχές της δημιουργίας σας.
Μόρια: μόρια είναι όπου τα άτομα τίθενται στη δουλειά-όπου ο ολοκληρωμένος σχεδιασμός ιστοσελίδων αρχίζει να αισθάνεται απτός. Στα μόρια της διαδρομής 93, μπορείτε να δείτε την παλέτα χρωμάτων, τις γραμματοσειρές και την εικονογραφία να συναθροίζονται σε πεδία φόρμας, επικαλύψεις εικόνων και κουμπιά. Είναι, όπως το θέτει ο Frost, το εργαλείο σας να "κάνετε ένα πράγμα και να το κάνετε καλά".
Οργανισμοί: από τη στιγμή που φθάνουμε σε οργανισμούς, μπορούμε να δημιουργήσουμε ολόκληρο το υποσέλιδο για τη Διαδρομή 93. Συνδυάζει όλα τα παραπάνω συστατικά σε έναν λειτουργικό, αισθητικό ιστότοπο.
Το Inventory Interface: τώρα που έχουμε όλα τα συστατικά, χρειαζόμαστε ένα απτό μενού για να τα οργανώσουμε σε κάτι εύπεπτο. ένα έγγραφο που περιέχει όλα τα παραπάνω στοιχεία ως αναγνώσιμο, χρησιμοποιήσιμο πόρο - ένα απόθεμα διεπαφής.
Ενώ ορισμένοι οργανισμοί το ονομάζουν Βιβλιοθήκη Pattern ή Οδηγός στυλ και χρησιμοποιούν το Inventory Interface ειδικά για να αναφερθούν σε έναν έλεγχο που έχουν κάνει σε έναν υπάρχοντα ιστότοπο, χρησιμοποιούμε τον όρο Interface Inventory για τα δικά μας έργα (καθώς και ελέγχους άλλων τοποθεσιών) μέρος μιας συνεχούς διαδικασίας αξιολόγησης.
Επειδή η ροή εργασίας του Atomic Design μιμείται κάπως ένα δίλημμα τύπου κοτόπουλου ή αυγού, το απόθεμα διεπαφής συνήθως παίρνει μορφή κάπως οργανικά μετά τη δημιουργία της αρχικής σελίδας και μιας άλλης σελίδας της ιστοσελίδας, αλλά όχι πολύ αργότερα. Καθώς αυτές οι δύο αρχικές σελίδες διαμορφώνονται, ο σχεδιαστής εξασφαλίζει ότι τα στοιχεία και των δύο είναι συνεπή. Για όλες τις σελίδες στη συνέχεια, έχουν τη δυνατότητα να αντλούν από την απογραφή. Αυτό δημιουργεί μια κανονική πηγή για τον τρόπο με τον οποίο θα πρέπει να εφαρμοστούν τα οράματα σε όλο το έργο, μια κυριολεκτική κοινή γλώσσα, στα απλά αγγλικά, των δεκαεξαδικών κωδικών, των κουμπιών, των επιπέδων των κουμπωμάτων κλπ. Στα οποία μπορούν να αναφερθούν οι προγραμματιστές και ολόκληρη η ομάδα.
Με το σχεδιασμό ενός Inventory Interface με τη διαδικασία Atomic Design, μπορούμε να ξεκινήσουμε με πρωτόγονα modules και να τα συναρμολογήσουμε σε ολοκληρωμένα στοιχεία. Αυτή η διαδικασία βελτιώνει την αποτελεσματικότητα, την επικοινωνία μεταξύ των μελών της ομάδας και παράγει έναν πιο όμορφο ιστότοπο συνολικά.
Τι κάνει το Atomic Design για μας
Το Atomic Design μας βοηθά να ανακαλύψουμε στερεές "αλήθειες" για το σχεδιασμό του έργου στο οποίο εργαζόμαστε, καθώς και να δημιουργήσουμε ένα κοινό λεξιλόγιο μεταξύ των καλλιτεχνικών και τεχνικών πτυχών του. Ενθαρρύνει ένα πιο ισχυρό σύστημα συνολικά που βελτιώνει το UX και παρέχει μια μεθοδολογία έτσι ώστε οι σχεδιαστές να μπορούν να τηρούν τις κατευθυντήριες γραμμές που βασίζονται σε συστατικά των προγραμματιστών διατηρώντας παράλληλα τη δημιουργικότητα.
Φυσικά, οι προγραμματιστές κωδικοποιούνται από το έδαφος, ενώ η προσέγγιση ενός καλλιτέχνη ξεκινά συνήθως σε μια πιο ογκώδη μορφή, η οποία στη συνέχεια στερεοποιείται σε μια λειτουργική ιστοσελίδα μετά από κάποια χύτευση. Το Atomic Design ενθαρρύνει και απαιτεί από τους σχεδιαστές να δουλεύουν από το έδαφος μέχρι και να κάνουν όλα τα στοιχεία της διασύνδεσης συνεπή και σκόπιμα στο χαμηλότερο δυνατό επίπεδο.
Η δημιουργία αυτής της κοινής γλώσσας, που αντιπροσωπεύεται από το Inventory Interface, εξασφαλίζει ότι οι σχεδιαστές και οι προγραμματιστές δεν επινοούν νέες λύσεις σε προβλήματα που έχουν ήδη λυθεί. Για παράδειγμα, αν μια νέα φόρμα επικοινωνίας προστεθεί σε ένα έργο, τα στυλ που απαιτούνται για τη δημιουργία αυτής της φόρμας υπάρχουν ήδη και μπορούν εύκολα να χρησιμοποιηθούν για την κατασκευή της σελίδας, θεωρώντας ότι είναι περιττό για τον σχεδιαστή να προχωρήσει σε πρόσθετες προσπάθειες. Δεν παίρνει απαραίτητα το έργο μακριά από τον σχεδιαστή, αλλά διευκολύνει τους προγραμματιστές να χτίζουν γρήγορα λύσεις αντί να απαιτούν από τον σχεδιαστή να μπερδεύει πρώτα κάθε σελίδα ή οργανισμό. Ο ρόλος του σχεδιαστή στη συνέχεια μετατοπίζεται σε κάτι περισσότερο σαν την κατεύθυνση της τέχνης μετά την κατασκευή των σελίδων. Αυτές οι απτές «αλήθειες» εξαλείφουν επίσης την ανάγκη χρήσης του σχεδιαστή ως διαιτητή. Ερωτήσεις όπως "είναι αυτή η επιλογή σχεδιασμού σκόπιμη;" ή "ποιο χρώμα πρέπει να χρησιμοποιήσουμε σε αυτό το συγκεκριμένο στοιχείο;" καθώς και αλλαγές ή προσθήκες τελευταίας στιγμής σε μια σελίδα απαντώνται από το Inventory Interface.
Η κοινή γλώσσα ασκεί επίσης τη διασφάλιση της ποιότητας. Κατά τη δοκιμή μιας ιστοσελίδας τόσο για περιεχόμενο όσο και για λειτουργικότητα, τραβάω την οθόνη του Interface Inventory στην οθόνη μου ως οδηγό. Παρόλο που είναι κυρίως ένα εργαλείο σχεδιαστή και δεύτερον ένα εργαλείο ανάπτυξης, επιτρέπει σε όλους τους συμμετέχοντες στην ομάδα να συμμετέχουν με εμπιστοσύνη στις συζητήσεις για το σχεδιασμό και τη συνέπεια, καθώς βεβαιώνουμε ότι οι ιστότοποί μας είναι άψογοι και έτοιμοι να παραδοθούν στον πελάτη.
συμπέρασμα
Προκειμένου να διασφαλιστεί η ορθή εκτέλεση ενός έργου, ειδικά μερικές από τις μεγαλύτερες που συχνά αντιμετωπίζουμε, η επικοινωνία είναι καθοριστική. αν φωνάζετε μια σειρά από διαφορετικές ιδέες σε ολόκληρο το δωμάτιο ο ένας στον άλλο, τίποτα εφικτό δεν θα έρθει ποτέ από αυτό. Το Atomic Design βοηθά να ενεργεί ως μεταφραστής για αυτά τα διαφορετικά τμήματα και τις "γλώσσες" που πηγαίνουν μαζί τους για να διατηρήσουν τη συνέπεια στο σχεδιασμό. Δημιουργεί ένα αρθρωτό πόρο για την ομάδα, επιτρέποντας τη συνεκτικότητα και αποτελέσματα στην αποτελεσματική ανάκαμψη, λιγότερα λάθη και ένα πιο γυαλισμένο τελικό προϊόν.