Αρχές οπτικής ιεραρχίας για σχεδιαστές

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

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

Εδώ είναι ο ορισμός της οπτικής ιεραρχίας: Η οπτική ιεραρχία είναι η διάταξη γραφικά στοιχεία στο σχέδιο κατά σειρά σπουδαιότητας κάθε στοιχείου. Το οπτικό βάρος καθορίζει σημασία στοιχείου στην ιεραρχία του σχεδίου, λέγοντας στον θεατή σε τι να εστιάσει και με ποια σειρά.

Πόροι για σχεδιαστές. 50 δωρεάν

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

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

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

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

Μοτίβα F. Αρχές Οπτικής Ιεραρχίας

Πρότυπα F εφαρμόζονται σε παραδοσιακές σελίδες κειμένου, όπως άρθρα ή αναρτήσεις ιστολογίου. Ο αναγνώστης σαρώνει την αριστερή πλευρά σελίδες ψάχνει για ενδιαφέρουσες λέξεις-κλειδιά σε επικεφαλίδες με αριστερή στοίχιση ή αρχικές προτάσεις θέματος, στη συνέχεια σταματά και διαβάζει (στα δεξιά) όταν συναντήσει κάτι ενδιαφέρον. Το αποτέλεσμα μοιάζει με ένα F (ή ένα E, ή κάτι με ακόμη πιο οριζόντιες ρίγες, αλλά ο όρος "F" κόλλησε).

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

Ζ-μοντέλο. Αρχές Οπτικής Ιεραρχίας

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

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

Στο παρακάτω Στο σχεδιασμό της συνέλευσης του συνεδρίου του 2010, σημαντικά στοιχεία είναι το λογότυπο (πάνω αριστερά), ένα κουμπί "εγγραφή τώρα" (πάνω δεξιά) και μια λίστα με ηχεία (κάτω), τα οποία είναι στρατηγικά τοποθετημένα σε ωραία σημεία με μοτίβο Ζ.

2. Το μέγεθος μετράει. Αρχές Οπτικής Ιεραρχίας
_

Είναι πολύ απλό: οι άνθρωποι διαβάζουν πρώτα μεγάλα πράγματα. Αν το βλέμμα σας τραβιέται από την «απόδοση» πριν «χωρίσετε» στην παρακάτω διαφήμιση για το Young Vic, θα πρέπει να επικοινωνήσετε αμέσως με έναν ψυχολόγο αντιληπτικών: πιθανότατα θα μπορούσατε να κερδίσετε καλά χρήματα με το να εξεταστείτε ως μια σπάνια ανωμαλία.

Αυτό που είναι ενδιαφέρον είναι ότι αυτή η τάση είναι στην πραγματικότητα αρκετά ισχυρή ώστε να απορρίψει τον κανόνα από πάνω προς τα κάτω. Στην παραπάνω εικόνα, το "hack" υπερισχύει του "time to action" επειδή είναι μεγαλύτερο και αριστερά (άρα βοηθάει ο κανόνας από αριστερά προς τα δεξιά).

Αλλά στην επόμενη σελίδα της Ετήσιας Έκθεσης: Εκστρατεία για τα Ανθρώπινα Δικαιώματα 2012 (που αναπτύχθηκε στην πέμπτη στήλη των μέσων ενημέρωσης) διαβάζουμε σε μεγάλο βαθμό γραμματοσειρά "The Fight for Equality on the Campaign Trail" πριν από το κείμενο ακριβώς πάνω από αυτό "Election 2012". Αρχές Οπτικής Ιεραρχίας

Το "Election 2012" είναι η σειρά πληροφοριών υψηλότερου επιπέδου: μας λέει το γενικό θέμα με το οποίο σχετίζονται οι παρακάτω πληροφορίες. Αλλά ο σχεδιαστής αποφάσισε ότι ο τίτλος του άρθρου ήταν πιο ενδιαφέρον για τους αναγνώστες και ως εκ τούτου το βαθμολόγησε έτσι ώστε να διαβαστεί πρώτα.

3. Χώρος και υφή. Αρχές Οπτικής Ιεραρχίας

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

Όπως μπορείτε να δείτε στην παρακάτω εικόνα (μέρος του ιστότοπου του DrawtoClick), η απόσταση μπορεί να είναι μια κομψή εναλλακτική ή συμπλήρωμα στη χρήση του μεγέθους. Εδώ, το σημείο πώλησης, «Notre agence vouscompagne...», είναι γραμμένο με πολύ μικρά γράμματα, αλλά περιβάλλεται από άφθονο λευκό χώρο, υποδεικνύοντας τη σημασία του. Παρακάτω, οι φράσεις «Le Compendre», «Le Réaliser» και «Le Partager» δίνουν πρόσθετη έμφαση, αποσπώνται από τον περιβάλλοντα χώρο.

Όταν οι άνθρωποι μιλούν για "υφή" σε σχέση με την οπτική ιεραρχία, δεν εννοούν τα γραφικά εφέ της υφής. Μάλλον, αυτός ο τύπος "υφής" αναφέρεται στη συνολική διάταξη ή δομή του χώρου, του κειμένου και άλλων λεπτομερειών σε μια σελίδα. Αυτό το παράδειγμα από το Bright Pink απεικονίζει καλά την ιδέα:

Στην πρώτη εικόνα, η λέξη «Sport» βρίσκεται ψηλότερα στην ιεραρχία από το «μπάντμιντον» γιατί είναι πιο ψηλή, μεγαλύτερη και πιο τολμηρή. Στην εικόνα 2, οι δύο λέξεις είναι περίπου ισοδύναμες, χάρη στο μαύρο ορθογώνιο που κάνει το «μπάντμιντον» να ξεχωρίζει και το βάζει στον δικό του χώρο.

Στην τρίτη εικόνα, το σκαρίφημα του φόντου διακόπτει τον χώρο "Αθλητισμός" αλλά όχι τον χώρο "μπάντμιντον", και ως εκ τούτου οδηγεί σε μια αναστροφή όπου το "μπάντμιντον" είναι το υψηλότερο στην ιεραρχία. Αυτή η εξέλιξη είναι δύσκολο να προβλεφθεί, επομένως οι σχεδιαστές συχνά τη συνδέουν με μια ολιστική αίσθηση «υφής».

4. Βάρος γραμματοσειράς και αντιστοίχιση. Αρχές Οπτικής Ιεραρχίας

Η επιλογή γραμματοσειράς είναι κρίσιμη για τη δημιουργία οπτικής ιεραρχίας. Μεταξύ των πιο σημαντικών χαρακτηριστικών μιας γραμματοσειράς είναι το βάρος, το πλάτος των πινελιών που απαρτίζουν τα γράμματά της και το στυλ, όπως το serif και το sans serif. Άλλες τροποποιήσεις, όπως τα πλάγια γράμματα, μπορεί επίσης να παίξουν κάποιο ρόλο.

Παρατηρήστε πώς ακουστικό επηρεάζει τη σειρά της ιεραρχίας των λέξεων στην παρακάτω σχεδίαση ιστοσελίδων για το The Tea Factory: "τέλεια τσάγια που θα σας βοηθήσουν να ζεσταθείτε" είναι το όνομα του παιχνιδιού, αλλά οι διαφορές στο βάρος της γραμματοσειράς και στους πλάγιους χαρακτήρες, εκτός από την τοποθέτηση των λέξεων, δημιουργούν ένα περισσότερο δυναμική, λιγότερο γραμμική, αναγνωστική εμπειρία. "://azbyka.com.ua/foto/tea-factory.jpg" />

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

Προετοιμασία μπροσούρας για εκτύπωση.

Εδώ, τα πέντε teaser γύρω από την περιφέρεια της σελίδας είναι τα ίδια σε ιεραρχία, αλλά επιτυγχάνουν ποικιλία αλλάζοντας δύο καλά συνδυασμένες γραμματοσειρές—η μία σερίφ μεσαίου βάρους και η άλλη ένα ελαφρύ αλλά ψηλό sans-serif.

5. Χρώμα και απόχρωση. 

Εδώ είναι ένα άλλο ασυνήθιστο: τα φωτεινά χρώματα ξεχωρίζουν από τα σιωπηλά χρώματα ή τις αποχρώσεις του γκρι, ενώ οι ανοιχτότερες αποχρώσεις εμφανίζονται πιο «απόμακρες» και έτσι πέφτουν χαμηλότερα στην ιεραρχία από τις πιο πλούσιες, πιο σκούρες αποχρώσεις. Ο ιστότοπος Where Are They έρχεται σε αντίθεση με το έντονο φως και τον έγχρωμο οπίσθιο φωτισμό με ένα ασπρόμαυρο εφέ πλέγματος για την επίδραση της φωτεινότητας:

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

Καλύτερη γραμματοσειρά για προσαρμοσμένη συσκευασία

Ο ιστότοπος του Μουσείου Whitney, από την άλλη πλευρά, καθιερώνει μια ιεραρχία εντός μιας γραμματοσειράς, βάρους και τόνου (μαύρο) χρησιμοποιώντας απόχρωση (που σημαίνει προσθήκη λευκού στον βασικό τόνο, καθιστώντας τον πιο ανοιχτό). Το "Cory Archangel on Pop Culture" βρίσκεται σαφώς κάτω από το "New on Whitney Stories" στην οπτική ιεραρχία, όχι μόνο επειδή είναι χαμηλότερο, αλλά και επειδή η απόχρωση του είναι πιο ανοιχτή, καθιστώντας το λιγότερο εμφανές στο λευκό φόντο. Αρχές Οπτικής Ιεραρχίας

Το χρώμα έχει ιδιαίτερη σημασία σχεδιασμός κινητού εφαρμογές όπου το μέγεθος της μικρής οθόνης περιορίζει την ικανότητά σας να χρησιμοποιείτε άλλες στρατηγικές, όπως διακύμανση μεγέθους και μεγάλη απόσταση. Στην εφαρμογή Grainger Industrial Supply, το κουμπί "Συνέχεια στο ταμείο" είναι χρωματισμένο με κόκκινο χρώμα, που το κάνει να ξεχωρίζει σε οποιαδήποτε σελίδα εμφανίζεται. Ο πίνακας "Στενή Αποτελέσματα Αναζήτησης", αντίθετα, είναι γκρι, καθιστώντας τον κατά προσέγγιση ισοδύναμο στην ιεραρχία με άλλα στοιχεία, όπως η γραμμή αναζήτησης και οι σύνδεσμοι προϊόντων.

6. Κατεύθυνση για σχεδιαστές.

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

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