Βασικό πλαίσιο οπτικού σχεδιασμού

Το Visual Design ως ένα skillet έχει περάσει από πολλά στάδια. Για όσους είναι νέοι στη βιομηχανία, είναι το τεχνούργημα που επέστησε πολλούς από εμάς στο ρόλο. Για τους έμπειρους σχεδιαστές, είναι η φυσική έκφραση της στοχαστικής εργασίας του προϊόντος. Ενώ η σημασία της είναι αμφισβητήσιμη, οι πτυχές δεν αλληλοαποκλείονται. Το Visual Design είναι περίπλοκο. Πρέπει να γίνει κατανοητό για το εύρος, την πολυπλοκότητα και την ευελιξία.

Χρειάζεστε ένα καλό μάτι για τον οπτικό σχεδιασμό.

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

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

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

Έτσι, πώς μπορούμε να επαναπροσδιορίσουμε τον οπτικό σχεδιασμό;

Ο καλός σχεδιασμός μεταφέρει ακριβώς αυτό που σχεδίαζε ο σχεδιαστής. Προκειμένου να προσεγγίσουμε τον καλύτερο οπτικό σχεδιασμό, ας δούμε πώς επικρίνουμε την οπτική δουλειά. Δεν ζητάμε "φαίνεται καλό;". Συγκρίνουμε την ερμηνεία ενός χρήστη από μια διεπαφή με αυτό που προοριζόταν. Ρωτάμε πώς η εργασία σχετίζεται με τα σημαντικότερα αποτελέσματα για το προϊόν και τους χρήστες του. Λέμε ότι οι διασυνδέσεις φαίνονται γεμάτες ή άγνωστες.

Μπορούμε να συνοψίσουμε ότι ο οπτικός σχεδιασμός κάνει τα εξής:

  1. Επικοινωνεί και οργανώνει σημαντικές και σύνθετες πληροφορίες.
  2. Ενθαρρύνει τις επιδιωκόμενες συμπεριφορές και υποτιμά τους άλλους.
  3. Διατηρεί την αναγνωσιμότητα και την εξοικείωση.

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

  1. Είναι χρήσιμο; Ο σχεδιασμός παρέχει αξία ή χρησιμότητα στον χρήστη;
  2. Είναι ξεκάθαρο? Ο σχεδιασμός ενθαρρύνει μια επιδιωκόμενη συμπεριφορά; Ακολουθεί μια αφήγηση που έχει νόημα.
  3. Είναι ευχάριστο; Το οπτικό έργο νιώθει εγγενές στο προϊόν στο οποίο εργάζεται; Είναι γνωστά τα στοιχεία; Νιώθεις γυαλισμένο;

1. Είναι χρήσιμο;

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

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

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

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

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

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

2. Είναι σαφές;

Γραμμή εργαλείων του Microsoft Word 2010

Πριν από 10 χρόνια, εργαλεία όπως το Microsoft Word και το Adobe Photoshop παρείχαν καλές δυνατότητες στα προϊόντα τους. Είχαν προφανή κουμπιά, ετικέτες και εικονογραφία. Έλαβαν διαφορετικές περιπτώσεις χρήσης με διάφορα χαρακτηριστικά. Ωστόσο, ορισμένα χαρακτηριστικά δεν χρησιμοποιήθηκαν καθόλου, αλλά άλλα χρησιμοποιήθηκαν συνεχώς.

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

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

  1. Προβολή: Χρησιμοποιήστε ισχυρότερες οπτικές θεραπείες για να κάνετε τα συστατικά να αισθάνονται πιο σημαντικά και ελαφρύτερα θεραπείες για εκείνα που είναι λιγότερα.
  2. Εγγύτητα: Βάλτε περιεχόμενο που σχετίζεται πιο κοντά.
  3. Ομοιότητα: Διατηρήστε ομοιότητες μεταξύ των στοιχείων που έχουν παρόμοια συμπεριφορά.
  4. Κλείσιμο: Περάστε τα εξαρτήματα που σχετίζονται.
  5. Συνέχεια: Τοποθετήστε περιεχόμενο γραμμικά (π.χ. σε μια ροή) για να δείξετε ομοιότητα μεταξύ πολλών στοιχείων.
Αυτό είναι ένα παράδειγμα Prominence. Παίρνει το βασικό στοιχείο ενός κουμπιού, αλλά στη συνέχεια χρησιμοποιεί ένα γερό γεμάτο φόντο σε σύγκριση με ένα φωτεινό περίγραμμα. Και οι δύο, προσελκύουν την προσοχή σε αυτό που ένας χρήστης πιθανώς θα έκανε και τι το προϊόν θέλει να κάνει ο χρήστης - να ολοκληρώσει μια συναλλαγή.

3. Είναι ευχάριστο;

Χρήσιμα στοιχεία που ομαδοποιούνται με τρόπο σαφή και λειτουργούν και μια άποψη για το τι πρέπει να κάνει ένας χρήστης. Οι εγκέφαλοί μας επεξεργάζονται αυτές τις πληροφορίες σε κάθε περίπτωση. Ανακτά παρόμοια παραδείγματα από παρελθόντες διεπαφές και ψάχνουμε για πρότυπα και εκείνα που τα σπάνε - το καθένα προκαλεί στον εγκέφαλό μας επιπλέον ενέργεια για να επεξεργαστεί. Πολλές από αυτές τις στιγμές εκδηλώνονται ως απογοήτευση ή σύγχυση. Βλέπουμε αυτά τα ζητήματα και στην πραγματική ζωή - όταν υπάρχει ένα μικρό σφάλμα στο πρόσωπό μας ή όταν μια τρίχα είναι εκτός τόπου. Σε μια διεπαφή, ενώ δεν μπορούμε να προσδιορίσουμε ρητά τη διαφορά μεταξύ γραμματοσειράς 24pt και 25pt, μπορούμε να την αισθανόμαστε. Δεν μπορούμε να το διακρίνουμε ακριβώς, αλλά ο εγκέφαλός μας ξέρει ότι κάτι αισθάνεται μακριά.

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

Πώς μπορούμε να δείξουμε τη διαφορά;

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

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

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

Πώς μπορούμε να δείξουμε ομοιότητα;

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

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

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

Το παραπάνω είναι ένα παράδειγμα μιας οπτικής θεραπείας που χρησιμοποιεί ένα step-size των 4pt για να δημιουργήσει περιθώρια και να γεμίσει μεταξύ των στοιχείων. Σας εμποδίζει να είναι αυθαίρετος, αλλά δίνει και στο προϊόν σας συνεπή κενό.

Βάζοντας το Μαζί

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

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

Είναι χρήσιμο; Είναι ξεκάθαρο? Είναι ευχάριστο;

___

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

Σας ευχαριστώ για τον Brad Birdsall για τις σκέψεις και τα σχόλιά του!