Χρησιμοποιώντας τον τρόπο Οι άνθρωποι επεξεργάζονται τις οπτικές πληροφορίες στο Web Design

Ο σχεδιασμός ιστότοπων και διεπαφών χρήστη έχει γίνει πολύ πιο εύκολος τα τελευταία χρόνια. Υπάρχουν τόσα πολλά εργαλεία εκεί έξω που μπορείτε να χρησιμοποιήσετε, πράγμα που καθιστά άσκοπο να ξεκινήσετε από το μηδέν όταν αναπτύσσετε UIs (ελέγξτε τη νέα μας σύνταξη UI). Αλλά δεν είμαι εδώ για να συζητήσω για το θάνατο του web design.

Αντ 'αυτού, αυτό που θα κάνω είναι να προσπαθήσω να εξηγήσω τις βασικές έννοιες βασισμένες στην ψυχολογία πίσω από την πληθώρα εργαλείων οπτικού σχεδιασμού (από τα πιο βασικά κιτ CSS μέχρι τα πιο εξελιγμένα θέματα υψηλής ποιότητας). Δεν πρόκειται απλώς να τα χρησιμοποιήσετε, αλλά και να τα καταλάβετε. Είμαι βέβαιος ότι αυτό θα διευκολύνει επίσης την τροποποίηση των υφιστάμενων με επιτυχία.

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

Οι αρχές της αντιληπτικής οργάνωσης

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

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

Νόμος ομοιότητας

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

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

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

Νόμος της εγγύτητας

Σύμφωνα με αυτόν τον νόμο αντικείμενα που είναι πιο κοντά μεταξύ τους είναι θεωρείται ότι ανήκουν στην ίδια ομάδα. Τα ίδια τετράγωνα, όταν δίνονται μεταξύ τους σε στενή, τακτική εγγύτητα, δημιουργούν μια αίσθηση ομαδοποίησης.

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

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

Για την καλύτερη εξυπηρέτησή σας, θα αναφέρω και την Wikipedia που δηλώνει:

Νόμος καλής μορφής

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

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

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

Θεωρία χρωμάτων, αντίληψη και χρήση

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

Χρωματικές ιδιότητες

Ακόμα υπάρχουν τρεις αντικειμενικές ιδιότητες του χρώματος. απόχρωση, αξία και ένταση.

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

Κίτρινο, μπλε και κόκκινο είναι πρωταρχικός, πορτοκαλί, πράσινο και ιώδες δευτερεύων αποχρώσεις; επίσης, υπάρχουν τριτογενής οι αποχρώσεις που είναι τα άμεσα μίγματα δύο πρωτογενών και δευτερογενών αποχρώσεων (π.χ. κίτρινο πράσινο ή κόκκινο ιώδες).

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

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

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

Χρωματικές αντιθέσεις

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

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

Υπάρχουν 7 έγχρωμες αντιθέσεις σύμφωνα με τον Johannes Itten, αν και θα αναφέρω μόνο 3.

1. Αντίθεση απόχρωσης

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

2. Συμπληρωματική αντίθεση

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

3. Φωτεινή-Σκοτεινή αντίθεση

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

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

Δημιουργία παλετών και έλεγχος αντιθέσεων

Γνωρίζοντας τη θεωρία είναι μεγάλη, η ερμηνεία των ιδεών σας είναι ένα άλλο πράγμα εντελώς. Δεν πρέπει να ανησυχείτε, ωστόσο, ο ιστός παρέχει μεγάλη υποστήριξη για τις ανάγκες σας για χρωματική ζογκλέρ. Υπάρχουν πολλά εργαλεία που σας βοηθούν να δημιουργήσετε προσαρμοσμένα σχέδια χρωμάτων με βάση τους κανόνες αντίθεσης χρώματος, π.χ. Paletton ή Adobe Kuler.

Για ιστότοπους, ίσως θελήσετε να ελέγξετε τις αντιθέσεις που επιλέξατε να χρησιμοποιήσετε στο webAIM, στον ιστότοπο του Jonathan Snook ή να κάνετε λήψη μιας εμφάνισης του Αναλυτή Χρώματος Αντίθεσης από την ομάδα Paciello εδώ.

συμπέρασμα

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

Σημείωση του συντάκτη: Αυτή η θέση φιλοξενουμένου είναι γραμμένη για το Hongkiat.com από Μάρτον Φέκε. Ο Marton είναι ένας δημιουργός ιστότοπων της Ουγγαρίας που έχει προσκολληθεί πρόσφατα στο WordPress. Είναι ένας ενθουσιώδης επανασχεδιασμός και ανεξάρτητος συγγραφέας περιεχομένου που του αρέσει να παίζει RPGs στον ελεύθερο χρόνο του.