10 Στοιχεία σχεδίασης ιστοσελίδων που δεν πρέπει να παραβλέπετε
Όταν πρόκειται για το σχεδιασμό και την κατασκευή ιστοσελίδων, ποτέ δεν φαίνεται να συμβαίνει αρκετά γρήγορα.
Δεδομένου αυτού του γρήγορου ρυθμού, πολλές μικρές λεπτομέρειες που τελικά απαιτούνται για την κατασκευή του ιστότοπου συχνά παραμένουν εκτός της διαδικασίας σχεδιασμού. Ενώ αυτές οι λεπτομέρειες μπορεί να είναι ήσσονος σημασίας, είναι ό, τι παίρνουν έναν ιστοχώρο από ωραίο σε πραγματικά φοβερό.
Αυτές οι λεπτομέρειες είναι συχνά εύκολο να χάσετε, επειδή δεν οδηγούν τη συνολική εμφάνιση και την αίσθηση της ιστοσελίδας. Το πρόβλημα είναι ότι καθώς η ομάδα ανάπτυξης σας εργάζεται μέσω του σχεδιασμού, θα αναγκαστεί να σχεδιάσει και να δημιουργήσει αυτά τα στοιχεία για σας ούτως ή άλλως.
Θα μπορούσατε να προσαρμόσετε τον κύκλο παραγωγής έτσι ώστε οι προγραμματιστές να έχουν χρόνο να επιστρέψουν αυτά τα περιουσιακά στοιχεία σε εσάς, αλλά γιατί να μην τα καταφέρετε απλά να φτάσετε μπροστά έτσι ώστε η διαδικασία να είναι τόσο καθαρότερη;
Ακόμη χειρότερα, η ομάδα ανάπτυξης μπορεί να αποφασίσει να προχωρήσει και να δημιουργήσει τα περιουσιακά στοιχεία καθώς πηγαίνουν.
Ενώ πολλοί προγραμματιστές έχουν έντονο μάτι για το σχεδιασμό, το δημιουργικό που είναι υπεύθυνο για το σχεδιασμό του ιστότοπου θα πρέπει τελικά να είναι αυτός που σχεδιάζει αυτά τα στοιχεία. Ο προγραμματισμός για τις λεπτότερες αποχρώσεις μπορεί να έχει σημαντικό αντίκτυπο στην ποιότητα του τελικού προϊόντος.
Κάθε στοιχείο που καλύπτεται σε αυτό το άρθρο πηγάζει από μια ερώτηση που ένας προγραμματιστής θα ρωτούσε τον σχεδιαστή εάν ένα στοιχείο έλειπε από το σχέδιο.
Ας δούμε τα 10 βασικά στοιχεία που πρέπει να θυμάστε καθώς γυαλίζετε τον ιστότοπό σας.
1. Σύνδεσμοι
Ενώ το στυλ των διαφόρων καταστάσεων ενός συνδέσμου είναι πράγματι μάλλον βασικό, μπορεί να εκπλαγείτε από πόσο συχνά παραβλέπονται όλες οι επιπλέον λεπτομέρειες. Συμπεριλάβετε τις ακόλουθες καταστάσεις για όλους τους συνδέσμους στη σελίδα:
- Κανονικός
Αυτή είναι η προεπιλεγμένη κατάσταση ενός συνδέσμου. δηλαδή ένα που δεν μετακινείται ή δεν κάνει κλικ ή δείχνει μια διεύθυνση URL που έχει ήδη επισκεφτεί ο χρήστης. Αυτή είναι η μορφή σύνδεσης που καλύπτει πάντα η πλειοψηφία των σχεδιαστών. - Επισκέφτηκε
Αυτός είναι ένας σύνδεσμος που δεν μετακινείται ή δεν κάνει κλικ, αλλά του οποίου ο στόχος έχει επισκεφθεί ο χρήστης. - Ενεργός
Ένας ενεργός σύνδεσμος είναι ένας σύνδεσμος στον οποίο γίνεται κλικ από το χρήστη. Οι περισσότεροι προγραμματιστές θα αναπαράγουν την κατάσταση του hover εδώ αν δεν τους δοθεί ένα στυλ. - Φτερουγίζω
Τέλος, η κατάσταση του hover είναι η εμφάνιση του συνδέσμου όταν ο χρήστης ποντίζει πάνω του. Αυτό και οι κανονικές καταστάσεις είναι εκείνες που οι περισσότεροι σχεδιαστές προετοιμάζονται.
Μια λεπτομέρεια που συχνά παραβλέπεται είναι ότι αυτά τα διάφορα κράτη πρέπει να σχεδιαστούν για όλες τις περιοχές μιας ιστοσελίδας. Για παράδειγμα, πολλοί ιστότοποι έχουν σκούρο σώμα αντί για ελαφρύ φόντο, αλλά η αντίθεση αντιστρέφεται στο υποσέλιδο. Πρέπει να προγραμματίσετε για όλα τα διάφορα πλαίσια συνδέσμων που βρίσκονται σε όλη τη σελίδα.
Επί Πλήρης Σελήνη BBQ , για παράδειγμα, βλέπουμε τους βασικούς κόκκινους συνδέσμους μέσα στην περιοχή περιεχομένου και τους βασικούς λευκούς δεσμούς στο παρακάτω υποσέλιδο. Και πάλι, μια μικροσκοπική λεπτομέρεια, αλλά σημαντική παρ 'όλα αυτά.
2. Έντυπα
Για πολλούς σχεδιαστές, η διαμόρφωση των μορφών είναι κρίσιμη και αδύνατο να παραβλεφθεί. Ωστόσο, για πολλούς άλλους, φαίνεται να έρχεται ως μακρινή σκέψη.
Το πρόβλημα με την τελευταία στάση είναι ότι οι φόρμες συχνά αντιπροσωπεύουν τον μοναδικό πραγματικό τρόπο μετατροπής των επισκεπτών σε πελάτες. Και χωρίς σωστό σχεδιασμό και σχεδιασμό, η χρηστικότητα αυτών των μορφών θα μπορούσε να καταρρεύσει, αποκρύπτοντας το μοναδικό σημείο μετατροπής της ιστοσελίδας. Η προετοιμασία για αυτά τα στοιχεία είναι απαραίτητη, ακόμα κι αν φαίνονται πολύ λιγότερο πιεστικά για τους πελάτες από το χρώμα, το branding και τις εικόνες.
Δύο από τα πιο σημαντικά θέματα κατά την κατάρτιση ενός εντύπου είναι:
- Ετικέτα φόρμας
Τα έντυπα τυπικά συλλέγουν τα προσωπικά δεδομένα που οι χρήστες διστάζουν να δώσουν. Ως εκ τούτου, η σωστή ενημέρωση των χρηστών σχετικά με τον ακριβή σκοπό του εντύπου είναι σοφή. - Πεδία εισαγωγής και ετικέτες
Δεύτερον, σχεδιάστε τον τρόπο με τον οποίο θα εμφανιστούν τα πεδία εισαγωγής της φόρμας στη σελίδα και πώς οι ετικέτες για τα πεδία αυτά θα σχεδιαστούν και προσανατολιστούν σε σχέση με τα πεδία.
Όταν παραμένουν στις προεπιλογές τους, οι φόρμες μπορούν να φανούν άβολα. Αλλά με την κατάλληλη προετοιμασία, ο ιστότοπος θα φαίνεται απρόσκοπτος και θα είναι πολύ πιο αποτελεσματικός. Ας δούμε ένα καλό παράδειγμα που πρέπει να έχει αρχίσει με καλό προγραμματισμό:
Αυτή η κρίσιμη για τις επιχειρήσεις μορφή Φοβερός ήταν σαφώς καλά μελετημένη. Η όλη αποστολή και ο σκοπός της σελίδας έχουν εξεταστεί προσεκτικά. Από τον τίτλο και την εισαγωγή στη διάταξη κάθε σειράς πεδίων, με τις ετικέτες και τα στυλ ελέγχου, αυτή η μορφή είναι ένα μοντέλο σχεδιασμού.
Ο προγραμματισμός των εντύπων μας οδηγεί σε αρκετές άλλες σκέψεις ...
3. Συμπεριφορά κουμπιού
Τα κουμπιά μπορούν να χρησιμοποιηθούν σε έναν ιστότοπο για διάφορους σκοπούς, αλλά φαίνεται ότι συχνά παραμελούνται, όπως και οι διάφορες καταστάσεις ενός κουμπιού. Οι τέσσερις καταστάσεις ενός κουμπιού είναι:
- Προκαθορισμένο
Αυτή είναι η προεπιλεγμένη κατάσταση ενός κουμπιού, που περιμένει να γίνει κλικ. Οι περισσότεροι σχεδιαστές καλύπτουν αυτό, αλλά χάσουν τους άλλους. - Φτερουγίζω
Η κατάσταση του hover εμφανίζεται όταν ο χρήστης ποντίζει πάνω από το κουμπί. Αυτή η κατάσταση είναι χρήσιμη για να υποδείξει στο χρήστη ότι το κουμπί είναι ένα αντικείμενο που μπορεί να προσβληθεί. - Κάντε κλικ
Μόλις ο χρήστης κάνει κλικ στο κουμπί, αυτή η κατάσταση υποδεικνύει οπτικά σε αυτά ότι έχουν κάνει κλικ σε αυτό. Η παροχή αυτού του οπτικού συμβόλου μπορεί να βοηθήσει στην ελαχιστοποίηση της απογοήτευσης των χρηστών. - άτομα με ειδικές ανάγκες
Η κατάσταση αναπηρίας ενός κουμπιού είναι ίσως η λιγότερο χρησιμοποιημένη αλλά μπορεί να είναι πολύ χρήσιμη για τους προγραμματιστές. Σπανίως είναι προγραμματισμένη αυτή η κατάσταση εκτός εάν ο σχεδιαστής έχει ετοιμάσει μια διαδικασία επικύρωσης του εντύπου (βλ. Επόμενη ενότητα).
Όπως και οι διάφορες καταστάσεις συνδέσεων, φροντίστε να εξετάσετε τις διάφορες καταστάσεις των κουμπιών που χρησιμοποιούνται σε ολόκληρο τον ιστότοπό σας. Από τις αναδυόμενες φόρμες σύνδεσης στα πεδία αναζήτησης σε έντυπα εγγραφής σε ενημερωτικά δελτία, όλα αυτά τα κουμπιά θα χρειαστούν αντίστοιχα στυλ.
4. Επικύρωση εντύπου
Μια σημαντική σχετική λεπτομέρεια είναι η επικύρωση της μορφής. Αυτό είναι το κρίσιμο σημείο όπου ο ιστότοπος επικοινωνεί τις απαιτήσεις των χρηστών και τα σφάλματα σε μια φόρμα. Υπάρχουν τρία βασικά πράγματα που πρέπει να εξετάσετε:
- Απαιτούμενα πεδία
Θα πρέπει να υποδεικνύονται όλα τα υποχρεωτικά πεδία. Τις περισσότερες φορές, αυτό γίνεται με έναν αστερίσκο, όπως φαίνεται Ξεκινήστε από την αρχή :
- Επικύρωση σε πραγματικό χρόνο
Κάποια επικύρωση μπορεί να γίνει σε πραγματικό χρόνο καθώς ο χρήστης ολοκληρώνει τη φόρμα. Αυτό το είδος επικύρωσης ενημερώνει το χρήστη το συντομότερο δυνατόν για τυχόν προβλήματα με τα δεδομένα που έχουν εισαγάγει. Αυτό μπορεί να επιτευχθεί πολύ καλά με αυτό jQuery επικύρωση plug-in :
- Επανεξέταση μετά την επιστροφή
Αυτός ο τύπος επικύρωσης γίνεται μετά την υποβολή του εντύπου από τον χρήστη. Το στυλ που χρησιμοποιείται για την επικύρωση σε πραγματικό χρόνο συχνά επαναλαμβάνεται εδώ, αλλά μια άλλη επιλογή είναι να ομαδοποιήσετε όλα τα σφάλματα σε ένα μόνο μήνυμα, όπως φαίνεται στο Μουγκανιτό :
5. Μηνύματα κατάστασης: σφάλματα, προειδοποιήσεις, επιβεβαιώσεις κ.λπ.
Οι χρήστες συνήθως θα χρειαστούν κάποιο είδος ανατροφοδότησης μετά την εκτέλεση μιας ενέργειας στον ιστότοπό σας. Το πιο πιθανό σενάριο είναι μετά την υποβολή μιας φόρμας, αλλά μπορούν να συμβούν και πολλά άλλα γεγονότα. Εξετάστε προσεκτικά τον ιστότοπό σας και τις ενέργειες που ενδέχεται να λάβουν οι χρήστες και σχεδιάστε τα μηνύματα που θα χρειαστεί να επικοινωνήσει ο ιστότοπος.
Επί Η ζωή σήμερα , βλέπουμε ένα μήνυμα επικύρωσης που θα μπορούσε εύκολα να χρησιμεύσει ως παγκόσμιο στυλ για μηνύματα σφάλματος. Και με μια μικρή αλλαγή στα χρώματα και τα εικονίδια, θα μπορούσε επίσης να χρησιμοποιηθεί για πιο λεπτή προειδοποίηση ή ακόμα και μηνύματα επιβεβαίωσης:
6. Επέκταση του φόντου σε μεγαλύτερες οθόνες
Ανάλογα με το στυλ της ιστοσελίδας, τα στοιχεία φόντου θα μπορούσαν να είναι ένα σημείο προβλημάτων για τους προγραμματιστές σας. Τα περισσότερα φόντα είναι απλά και δεν απαιτούν μεγάλη προετοιμασία, αλλά μερικά περιπλέκονται από κλίσεις, μοτίβα και εικόνες.
Λαμβάνοντας υπόψη ότι οι μεγάλες οθόνες γίνονται ολοένα και πιο συνηθισμένες και ότι τα περισσότερα σχέδια σχεδιάζονται για μια γραμμή βάσης 960-pixel, πολλά ακίνητα οθόνης παραμένουν ανοιχτά. Αν το φόντο σας περιλαμβάνει οτιδήποτε είναι πολύ περίπλοκο, σας παρακινεί να σχεδιάσετε πώς θα επεκταθεί για να γεμίσετε μεγαλύτερες οθόνες.
Στο παράδειγμα που έχτισα παρακάτω, έπρεπε να φιλοξενήσω μια υφή ξύλου που επεκτάθηκε προς όλες τις κατευθύνσεις. Δεν είναι κάτι που θέλετε να αντιμετωπίσετε ένας σκληροτράχηλος προγραμματιστής.
7. Βασικά στοιχεία HTML
Για ιστοτόπους βαρέως τύπου, ο σχεδιασμός και ο σχεδιασμός βασικών στοιχείων HTML είναι θεμελιώδεις και δεν πρέπει να αγνοηθούν. Αλλά σε πολλές ιστοσελίδες προσανατολισμένες στο μάρκετινγκ που έχουν απασχολημένη διάταξη και ξεχωριστό οπτικό στυλ, τα βασικά στοιχεία ξεχνούνται. Και φυσικά, ο προγραμματιστής δεν φτάνει ποτέ στη δημιουργία ενός δικτυακού τόπου προτού να κατασκευάσει ένα τυποποιημένο πρότυπο σελίδας ούτως ή άλλως.
Εδώ είναι τα στοιχεία βάσης για πάντα σχεδιασμό για: παραγράφους, επικεφαλίδες 1 έως 6, μη ταξινομημένες και ταξινομημένες λίστες, πίνακες δεδομένων, πεδία φόρμας, εικόνες και έντονα και πλάγια κείμενο.
Σε πολλούς ιστότοπους στους οποίους δουλεύω, έβαλα μαζί έναν οδηγό στυλ για να βοηθήσω τους προγραμματιστές, κάτι τέτοιο:
8. Ηλεκτρονικά μηνύματα ιστοτόπου
Ένα πράγμα που δεν βλέπω κανένα σχέδιο σχεδιαστή για τα ηλεκτρονικά μηνύματα που δημιουργούνται από ιστότοπους. Ένα τέτοιο βασικό στοιχείο είναι εύκολο να χάσετε γιατί δεν είναι συνήθως το επίκεντρο του ιστοχώρου. Και όμως το ηλεκτρονικό ταχυδρομείο είναι ένα ισχυρό εργαλείο που μπορεί να προωθήσει και να επεκτείνει μια υπηρεσία.
Η πρότασή μου είναι να επανεξετάσω προσεκτικά τα περιεχόμενα της ιστοσελίδας στο στάδιο του σχεδιασμού για να αναζητήσετε τυχόν μηνύματα ηλεκτρονικού ταχυδρομείου που θα μπορούσαν να σταλούν. Μερικά από τα πιο κοινά είναι τα εξής:
- Επιβεβαίωση εγγραφής αλληλογραφίας,
- Επιβεβαίωση Εγγραφής,
- Βεβαίωση συμπλήρωσης φόρμας (όπως για μια φόρμα επικοινωνίας),
- Επαλήθευση παραγγελίας μετά από μια αγορά.
Αν θέλετε πραγματικά να φυσήξετε το μυαλό των πελατών και των προγραμματιστών σας, ετοιμάστε ένα πρότυπο μάρκετινγκ ηλεκτρονικού ταχυδρομείου για την ιστοσελίδα. Θα παρέχετε στους χρήστες μια απρόσκοπτη μετάβαση από τον ιστότοπο στα εισερχόμενα και θα διατηρείτε τον προσεκτικό έλεγχο της επωνυμίας στις διάφορες μορφές της.
9. Επέκταση σελίδας
Το ζήτημα του πώς ένα σχέδιο θα τεντώσει για να φιλοξενήσει το μεταβαλλόμενο περιεχόμενο είναι επίσης σπάνια αντιμετωπιστεί, αλλά θα μπορούσε να είναι κρίσιμη, ανάλογα με το ύφος του δικτυακού τόπου. Ας δούμε ένα παράδειγμα όπου αυτό θα μπορούσε να έχει ενοχληθεί:
Πλήρης Σελήνη BBQ έχει μια σφιχτή αρχική σελίδα. Αυτός ο σχεδιασμός δεν επιτρέπει μεγάλη κίνηση ή αλλαγή στο περιεχόμενο. Όλα έχουν ένα συγκεκριμένο μέγεθος και τοποθέτηση. Τι συμβαίνει εάν οι ιδιοκτήτες αποφασίσουν να επιμηκύνουν πραγματικά το μήνυμα καλωσορίσματος ή να προσθέσουν μια εικόνα; Ευτυχώς, έχουν προγραμματίσει γι 'αυτό. Όπως μπορείτε να δείτε σε αυτή τη μακέτα, έχω επεξεργαστεί τη σελίδα για να συμπεριλάβει το διπλό κείμενο. Η σελίδα επεκτείνεται τέλεια και φιλοξενεί:
Η προετοιμασία εναλλακτικών εκδόσεων μιας διάταξης με πολύ περισσότερο περιεχόμενο μπορεί να είναι εξαιρετικά χρήσιμη για την επίδειξη του τρόπου προγραμματισμού ενός τέτοιου σεναρίου.
10. Κινούμενα σχέδια: pop-ups, tooltips, μεταβάσεις κλπ.
Σε έναν τυπικό ιστό HTML και CSS (δηλαδή χωρίς Flash), οι κινούμενες εικόνες και οι μεταβάσεις είναι τόσο εύκολο να παραβλεφθούν. Και όταν παραβλέπεται, συχνά δεν θα φιλοξενηθούν καθόλου. Έτσι, εάν τα κινούμενα σχέδια είναι κρίσιμα, το καλύτερο στοίχημά σας είναι να παρέχετε στους προγραμματιστές ένα δείγμα του τρόπου με τον οποίο πρέπει να λειτουργούν, ώστε το προϊόν να λειτουργεί όπως πρέπει.
Μερικά από τα πιο συνηθισμένα εφέ κινούμενα σχέδια είναι:
- Εργαλεία
Αυτά τα μικρά αναδυόμενα παράθυρα όταν οι χρήστες χρησιμοποιούν ποντίκι πάνω από στοιχεία. - Περιστροφείς εικόνας
Οι slideshows της αρχικής σελίδας είναι όλοι οι οργισμοί και διατίθεται ένα ευρύ φάσμα επιλογών για μεταβάσεις και στυλ. - Lightbox
Μπορείτε να στυλ όχι μόνο το ίδιο το lightbox, αλλά και η μετάβαση σε αυτό.
Κάθε ένα από αυτά τα κινούμενα στοιχεία έχει ένα ξεχωριστό οπτικό στυλ που πρέπει να φιλοξενείται από μόνο του.
Γιατί να με νοιάζει?
Πολλά από τα στοιχεία που παρουσιάζονται εδώ φαίνονται πιο χρήσιμα στους προγραμματιστές απ 'ό, τι οι σχεδιαστές. Για να είμαστε δίκαιοι, αυτό είναι εν μέρει αληθές: αν προετοιμάσετε όλα αυτά τα στοιχεία μπροστά από το χρόνο, οι προγραμματιστές θα σας αγαπήσουν. Αυτά είναι τα πράγματα που οι προγραμματιστές κουραστούν να ζητούν ή να πρέπει να καταλάβουν μόνοι τους.
Ακόμα, κάνοντας όλα αυτά τα έργα μπροστά από το χρόνο, κρατάτε τους προγραμματιστές από την εικασία, και έτσι διατηρείτε τον έλεγχο του σχεδιασμού. Και διατηρώντας τον έλεγχο του σχεδιασμού, έχετε πολύ περισσότερες πιθανότητες να προσθέσετε το είδος της βερνίκι που μετατρέπει έναν απλό ιστότοπο σε ένα εξαιρετικό. Μερικοί σχεδιαστές αναφέρονται σε αυτό ως τη μυστική σάλτσα που κάνει τα σχέδιά τους να τραγουδούν.
Και αν αυτό δεν είναι αρκετά κίνητρο, σκεφτείτε αυτό. Οι σχεδιαστές που σχεδιάζουν μπροστά αυτό καλά και να παραδώσει ένα πακέτο αυτό το πλήρες είναι απλώς θεμελιωδώς πιο πολύτιμη. Δεν δημιουργούν μόνο ένα προϊόν υψηλότερης ποιότητας, αλλά μειώνουν επίσης το κόστος παραγωγής. Αυτό σημαίνει ότι υπάρχει περισσότερο περιθώριο κέρδους, το οποίο φυσικά κάνει όλους ευτυχείς.
Έτσι, κρατήστε όλες αυτές τις λεπτότερες λεπτομέρειες στο μυαλό σας και διασκεδάστε να σχεδιάσετε τον ιστότοπό σας. Ειλικρινά, αυτές οι λεπτομέρειες είναι η μισή διασκέδαση του σχεδιασμού για τον ιστό, το συνεχώς μεταβαλλόμενο μέσο που φιλοξενεί την αλληλεπίδραση των χρηστών και το μεταβαλλόμενο περιεχόμενο.
Ο Patrick McNeil είναι ανεξάρτητος συγγραφέας, προγραμματιστής και σχεδιαστής. Συγκεκριμένα, αγαπά να γράψει για το σχεδιασμό ιστοσελίδων, να εκπαιδεύσει τους ανθρώπους στην ανάπτυξη ιστοσελίδων και να δημιουργήσει ιστότοπους. Το τελευταίο έργο βιβλίων του Patrick είναι Το Εγχειρίδιο Ιστού του Σχεδιαστή . Περιλαμβάνει πολλά επιπλέον θέματα σύμφωνα με το άρθρο αυτό. Μπορείτε να μάθετε περισσότερα σχετικά με αυτό ΤοWebDesignersIdeaBook.com . Ακολουθήστε τον Patrick στο Twitter @designmeltdown .
Τι σχεδιάζετε για αυτό που όλοι οι άλλοι φαίνεται να ξεχνούν; Έχετε ποτέ παρουσιάσει πρόσθετα όπως αυτά στους πελάτες σας; Τι είδους πράγματα βρίσκετε οι προγραμματιστές που πάντα σας ζητούν να προσθέσετε σε ένα σχέδιο;