Εισαγωγή στον ατομικό σχεδιασμό για τους σχεδιαστές ιστοσελίδων

Τα άτομα δεν είναι απλώς τα στοιχεία HTML, αλλά επίσης τα στυλ ανάρτησής τους: γραμματοσειρές, χρώματα, διαστάσεις και άλλους κανόνες στυλ CSS. Με τα λόγια του Brad, άτομα “επιδείξτε όλα τα βασικά σας στυλ με μια ματιά”.

Άτομα - Παράδειγμα

Ακολουθεί ένα παράδειγμα από τον ιστότοπό μας. Οι τίτλοι των συνιστώμενων αναρτήσεων μπορεί να αντιστοιχούν ένα είδος ατόμου. χρησιμοποιούν το τον ίδιο κώδικα HTML και CSS και μπορεί να είναι εύκολα διακρίνονται από το υπόλοιπο περιεχόμενο.

Σημειώστε ότι το Hongkiat.com δεν σχεδιάστηκε με ατομικό σχεδιασμό στο μυαλό, εδώ χρησιμοποιείται μόνο για σκοπούς επίδειξης.

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

2. Μόρια

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

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

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

Μόρια - Παράδειγμα

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

3. Οργανισμοί

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

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

Οργανισμοί - Παράδειγμα

Στην ιστοσελίδα του Hongkiat, η πλαϊνή μπάρα μπορεί να είναι ένας οργανισμός. Αποτελείται από α μπαρα αναζήτησης (ένας τύπος μορίου που εμφανίζεται μόνο μία φορά) και μερικές συνιστώμενες θέσεις (άλλος τύπος μορίου που εμφανίζεται πολλές φορές).

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

4. Πρότυπα

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

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

Τα πρότυπα δείχνουν πόσο διαφορετικά άτομα, μόρια, οργανισμοί “λειτουργούν μαζί στο πλαίσιο μιας διάταξης”. Βασικά αντιπροσωπεύουν το σκελετό μιας σελίδας.

Πρότυπα - Παράδειγμα

Για παράδειγμα, σκεφτείτε ένα πρότυπο αρχικής σελίδας με εικονίδια κράτησης θέσης και μπλοκ κειμένου lorem ipsum.

Παρακάτω, μπορείτε να δείτε ένα παράδειγμα από το βιβλίο Atomic Design. Είναι το πρότυπο της αρχικής σελίδας του περιοδικού TimeInc. Τα άτομα, τα μόρια και οι οργανισμοί είναι όλα στη θέση τους μόνο με σχηματικό περιεχόμενο.

5. Σελίδες

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

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

Παραλλαγές σελίδων και προτύπων

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

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

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

Σελίδες - Παράδειγμα

Παρακάτω, μπορείτε να δείτε το στάδιο σελίδας του προηγούμενου προτύπου αρχικής σελίδας TimeInc. Φαίνεται διαφορετικό, ε; Αυτο ειναι απλα μία παραλλαγή προτύπου, αν και. Για να έχετε ένα αποτελεσματικό περιβάλλον χρήστη, η ομάδα σχεδίασης πρέπει να σκεφτεί σκληρά τι μπορεί να αλλάξει στην πραγματική περιοχή. Στη συνέχεια, πρέπει να δοκιμάσουν το σχεδιασμό για αυτή την παραλλαγή πρότυπο (σελίδα), πάρα πολύ.