Γιατί πρέπει να χρησιμοποιείτε βιβλιοθήκες πρότυπων
Έχετε ακούσει βιβλιοθήκες προτύπων, οδηγούς στυλ, βιβλιοθήκες εξαρτημάτων, μοτίβα σχεδίασης ή εργαλεία εργαλείων UI; Μην ανησυχείτε αν είστε μπερδεμένοι ή δεν γνωρίζετε τις διαφορές. Εδώ είναι ένα μυστικό - οι περισσότεροι άνθρωποι στη βιομηχανία σχεδιασμού είναι επίσης λίγο συγκεχυμένοι.
Με όλους αυτούς τους όρους που πετούν γύρω από αυτό μπορεί γρήγορα να γίνει συντριπτική. Αλλά να είστε βέβαιοι ότι είναι στην πραγματικότητα πολύ λιγότερο περίπλοκο από ότι ίσως πρώτα να σκεφτείτε.
Όλοι αυτοί οι διαφορετικοί όροι μπορούν να ομαδοποιηθούν σε δύο διαφορετικές κατηγορίες:
1) Οδηγοί στυλ
Αυτές είναι κατευθυντήριες γραμμές για έναν ιστότοπο. Περιέχουν το λογότυπο, τα χρώματα και την τυπογραφία. Ένας οδηγός στυλ λαμβάνει όλα τα σχετικά μέρη των οδηγιών μάρκας και τα τοποθετεί μαζί.
2) Βιβλιοθήκες μοτίβων / βιβλιοθήκες στοιχείων / εργαλειοθήκες UI
Όλοι αυτοί οι όροι αναφέρονται στο ίδιο πράγμα.
Πρόκειται για μια συλλογή επαναχρησιμοποιήσιμων στοιχείων που αποτελούν έναν ιστότοπο. Οι βιβλιοθήκες μοτίβων (όπως θα τους αναφερθώ από τώρα) είναι ένας τρόπος να αναπαριστώ όλα όσα αποτελούν έναν ιστότοπο. Αυτό περιλαμβάνει τη διάταξη, τη δομή και όλα όσα περιέχονται σε αυτά.
Σε μια ιστοσελίδα ηλεκτρονικού εμπορίου αυτό θα περιλαμβάνει ένα προϊόν, μια αναθεώρηση, βαθμολογία αστέρος, ποσότητα, πλοήγηση, πίνακες και κουμπιά, για να αναφέρουμε μερικά. Καθένα από αυτά ονομάζεται συνιστώσα.
Έτσι, μια βιβλιοθήκη μοτίβο είναι μια συλλογή των στοιχείων που απαρτίζουν την ιστοσελίδα.
Βιβλιοθήκες μοτίβων εναντίον οδηγών στυλ
Οι ιστότοποι απαιτούν τόσο οδηγό στυλ όσο και βιβλιοθήκη μοτίβου. Θα ζουν συχνά μαζί, κάτι που μπορεί να είναι από όπου προέρχεται πολύ η σύγχυση.
Οι οδηγοί στυλ εφαρμόζουν το branding ενώ οι βιβλιοθήκες μοτίβων εφαρμόζουν τη διάταξη και τη δομή. Για παράδειγμα, ο οδηγός στυλ για τον Levis θα υπαγορεύσει ότι ο ιστότοπος θα πρέπει να χρησιμοποιεί κόκκινο με μια βαριά γραμματοσειρά, αλλά η βιβλιοθήκη μοτίβων θα υπαγόρευε ότι ένα προϊόν με καταχωρίσεις προϊόντων θα περιέχει μια εικόνα, τίτλο και τιμή.
Και οι δύο προσπαθούν να επιτύχουν έναν κοινό στόχο - να καταστήσουν την ιστοσελίδα συνεπή, φιλική προς το χρήστη και φιλική προς το χρήστη.
Γιατί είναι χρήσιμες;
Το κυριότερο πλεονέκτημα των οδηγών στυλ και των βιβλιοθηκών προτύπων είναι η συνέπεια. Οι σχεδιαστές αγαπούν τη συνέπεια, οι προγραμματιστές αγαπούν τη συνοχή, οι ιδιοκτήτες ιστοχώρου αγαπούν τη συνοχή και το πιο σημαντικό, οι πελάτες σας αγαπούν τη συνοχή.
Εδώ γιατί:
Οφέλη για τους πελάτες σας
- Η βελτιωμένη απόδοση και οι γρηγορότεροι ιστότοποι, επειδή χρησιμοποιούν συνεκτικά στοιχεία και στυλ, σημαίνει πιο ευλύγιστο και καθαρότερο κώδικα.
- Ένα συνεπές περιβάλλον χρήστη σε ολόκληρο τον ιστότοπο που επιτρέπει ευκολότερη πλοήγηση - αν το προϊόν εμφανίζεται το ίδιο παντού, είναι ευκολότερο να κατανοηθεί.
- Καλύτερη υποστήριξη προγράμματος περιήγησης, διότι οι βιβλιοθήκες προτύπου μας επιτρέπουν να απομονώσουμε και να ελέγχουμε αυστηρά τα εξαρτήματα.
Οφέλη για τους ιδιοκτήτες ιστότοπων
- Ένα μέρος που περιέχει τα πάντα στην ιστοσελίδα τους.
- Δημιουργήστε γρήγορα νέες σελίδες και ενότητες χρησιμοποιώντας τα υπάρχοντα στοιχεία.
- Ο ιστότοπος θα παραμείνει γρήγορος και φτωχός, επειδή τα νέα τμήματα μπορούν να κληρονομήσουν εξαρτήματα που είχαν προηγουμένως κατασκευαστεί.
- Κάθε σελίδα σε μάρκα. Χωρίς εξαιρέσεις. Οι οδηγοί στυλ επιβάλλουν τη συνοχή της μάρκας, χωρίς να εισέρχονται αστείες γραμματοσειρές ή χρώματα.
- Υψηλότερος ρυθμός μετατροπής, επειδή ο ιστότοπος είναι πιο συνεπής και κάνει τον ιστότοπο γρηγορότερο και παρέχει συνεπή εμπειρία χρήστη σε ολόκληρη την περιοχή.
- Βελτιωμένη βελτιστοποίηση μηχανών αναζήτησης από σταθερά και καλά δομημένα στοιχεία.
- Ένας άσχημος και καθαρός κώδικας σημαίνει ότι η μελλοντική εργασία απαιτεί λιγότερο χρόνο.
- Αυξάνει τη διάρκεια ζωής του ιστότοπου, διότι είναι ευκολότερο να γίνουν συνεχείς βελτιώσεις.
Οφέλη για τους προγραμματιστές
- Γράψτε λιγότερο και καλύτερο κώδικα. Αυτό καθιστά πολύ πιο εύκολο τον χειρισμό και τη διαχείριση του κώδικα.
- Δεν εξαρτάται από ένα άτομο. Όλα τα στοιχεία είναι προσβάσιμα από τον καθένα, οπότε δεν απαιτούνται προηγούμενες γνώσεις για την κατασκευή νέων τμημάτων και σελίδων.
- Βελτιωμένη δοκιμή του προγράμματος περιήγησης έτσι ώστε όταν συναρμολογούνται νέα τμήματα γνωρίζετε ότι θα λειτουργήσει σε όλα τα υποστηριζόμενα προγράμματα περιήγησης.
- Καλή τεκμηρίωση κανονικά ενσωματώνεται στη βιβλιοθήκη μοτίβων.
Οφέλη για τους σχεδιαστές
- Όλα για το εμπορικό σήμα. Εάν υπάρχει στη βιβλιοθήκη μοτίβων υπάρχει στον ιστότοπο. Κάθε στοιχείο μπορεί να ελεγχθεί για να βεβαιωθείτε ότι έχει μεγάλη εμφάνιση.
- Συνεπές σχέδια και διατάξεις. Τα επαναχρησιμοποιούμενα εξαρτήματα σημαίνουν ένα καλύτερο σύστημα σχεδιασμού.
- Πάντα ξέρεις τι υπάρχει στην περιοχή. Εάν απαιτούνται μελλοντικές εργασίες σχεδιασμού, η βιβλιοθήκη μοτίβων μπορεί να χρησιμοποιηθεί ως αναφορά για ό, τι υπάρχει ήδη.
Παραδείγματα
Καθώς οι οδηγοί στυλ και οι βιβλιοθήκες προτύπων γίνονται πιο δημοφιλείς, έτσι και τα ευρέως διαδεδομένα παραδείγματα. Υπάρχει ακόμη και μια ολόκληρη ιστοσελίδα αφιερωμένη στην επίδειξη αυτών.
Ακολουθούν μερικά από τα αγαπημένα μας παραδείγματα.
Salesforce
Αυτό είναι μια από τις πιο στιλβωμένες εκδόσεις που θα βρείτε στον ιστό. Ο οδηγός στυλ και η βιβλιοθήκη μοτίβων περιέχουν όλα όσα βρίσκονται στον ιστότοπό τους. Θα παρατηρήσετε επίσης ότι περιλαμβάνει πολλά έγγραφα και οδηγίες για τον τρόπο παρουσίασης των στοιχείων.
uSwitch
Εκτός από έναν οδηγό στυλ και βιβλιοθήκη σχεδίων, uSwitch έχουν αποφασίσει να προσθέσουν γλώσσα και τόνο. Αυτή είναι μια μεγάλη ιδέα καθώς λειτουργεί ως ένα έγγραφο που καλύπτει όλο το περιεχόμενο της ιστοσελίδας. εξασφαλίζοντας το σχεδιασμό, τη διάταξη και ακόμη και τον τόνο παραμένει συνεπής.
Walmart
Ποιος θα είχε σκεφτεί Walmart θα έχει έναν από τους καλύτερους οδηγούς στυλ και βιβλιοθήκες σχεδίων γύρω; Αυτό είναι ένα εξαιρετικό παράδειγμα μιας ιστοσελίδας ηλεκτρονικού εμπορίου που χρησιμοποιεί στοιχεία για την κατασκευή σελίδων στην ιστοσελίδα τους. Είναι πιθανώς μια από τις πιο ολοκληρωμένες εκδόσεις εκεί έξω.
Μέσα σε μια αντιπροσωπεία
Τα περισσότερα παραδείγματα οδηγών καλών στυλ και βιβλιοθηκών προτύπων αφορούν μεγάλους ιστότοπους. Ίσως να είναι εύκολο να πηδήσετε στο συμπέρασμα ότι είναι μόνο χρήσιμες για ιστοσελίδες που έχουν πολλούς ανθρώπους που εργάζονται συνεχώς πάνω τους.
Μάλλον θα δούμε μόνο παραδείγματα μεγάλων ιστότοπων επειδή ο χρόνος για την κατασκευή ενός οδηγού στυλ και μιας βιβλιοθήκης σχεδίων μπορεί να είναι σημαντικός. Οι περισσότεροι μικρότεροι ιστότοποι δεν μπορούν να δικαιολογήσουν την απαιτούμενη αρχική δαπάνη σε σύγκριση με τις μελλοντικές εξοικονομήσεις.
Στο iWeb, προσπαθούμε να το αλλάξουμε. Στόχος μας είναι να κάνουμε κάθε ιστοσελίδα που χτίζουμε όσο πιο γρήγορα και φτωχότερα γίνεται. Περίπου 18 μήνες πριν ξεκινήσαμε να κατασκευάζουμε τον δικό μας οδηγό στυλ και βιβλιοθήκη μοτίβου. Έχουμε φτιαχτεί Γρήγορα .
Ως πρακτορείο είμαστε σε θέση να εκμεταλλευτούμε τα πλεονεκτήματα της εργασίας σε δεκάδες έργα κάθε εβδομάδα. Αυτή η μοναδική γνώση των ιστοτόπων μας δίνει τη δυνατότητα να δημιουργήσουμε έναν οδηγό στυλ και μια βιβλιοθήκη μοτίβου που να μπορεί να χρησιμοποιηθεί σε κάθε ιστότοπο - ανεξάρτητα από το μέγεθος.
Χρησιμοποιώντας την ίδια βιβλιοθήκη κώδικα σε κάθε έργο, μπορούμε να εισαγάγουμε πολύ περισσότερη συνοχή σε όλα τα επίπεδα. Αυτό έχει ένα τεράστιο όφελος για όλους τους πελάτες μας. Καθώς τα έργα γίνονται πιο συνεπή, περισσότεροι προγραμματιστές μπορούν να εργαστούν πάνω τους χωρίς προηγούμενη γνώση. Αυτό σημαίνει ότι κανένας προγραμματιστής δεν είναι συνδεδεμένος με το έργο, επιτρέποντας στις εργασίες να ξεκινούν πιο γρήγορα και να παίρνουν λιγότερο χρόνο.
Τίποτα δεν ωφελεί
Βλέπουμε ότι δεν υπάρχει τίποτα άλλο εκτός από τα οφέλη για να έχετε έναν οδηγό στυλ και βιβλιοθήκη μοτίβο για κάθε ιστοσελίδα. Η οικοδόμηση του δικού μας συστήματος μας επέτρεψε να μειώσουμε τα αρχικά γενικά απαιτούμενα έξοδα. Με τον καιρό αυτό θα συνεχίσει να βελτιώνεται.
Οι οδηγοί στυλ και οι βιβλιοθήκες σχεδίων φέρνουν οφέλη για τους πελάτες, τους ιδιοκτήτες ιστοτόπων, τους προγραμματιστές και τους σχεδιαστές. Έτσι στο επόμενο έργο σας, ή ακόμα και σε ένα ήδη υπάρχον, αξίζει σίγουρα να ρωτήσετε για την ευκαιρία να τα χρησιμοποιήσετε.