portaldacalheta.pt
  • Κύριος
  • Άνοδος Του Απομακρυσμένου
  • Τεχνολογία
  • Τάσεις
  • Το Μέλλον Της Εργασίας
Σχεδιασμός Διεπαφής Χρήστη

Ένα φάσμα δυνατοτήτων: Ο οδηγός χρωμάτων Go-to UI



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

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



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



Σε αυτόν τον οδηγό, θα:



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

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

Μια παλέτα χρωμάτων UI μπορεί να είναι ένα ουράνιο τόξο χρωμάτων.



Μάθημα συντριβής: Θεωρία χρωμάτων για σχεδιαστές UI

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

Για να χρησιμοποιήσετε το χρώμα με αυτόν τον τρόπο, οι σχεδιαστές UI πρέπει να έχουν μια σταθερή κατανόηση αυτών των βασικών εννοιών θεωρίας χρώματος:



  • Το χρώμα είναι σχετικό.
  • Η υπερφόρτωση κορεσμού σκοτώνει τη ζωντάνια των χρωμάτων.
  • Η ταυτόχρονη αντίθεση έχει πλεονεκτήματα και μειονεκτήματα.
  • Τα βασικά χρώματα είναι τα καλύτερα.
  • Η απόχρωση επηρεάζει πάντα την αξία.

Ας σκάψουμε.

responsive web design για φορητές συσκευές

Το χρώμα είναι σχετικό

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



  • Φως που λάμπει στο χρώμα
  • Άλλα χρώματα που περιβάλλουν το χρώμα

Δείτε αυτό το παράδειγμα από τη φύση:

Σχετικότητα χρωμάτων στο σχεδιασμό και τη φύση της διεπαφής χρήστη

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



ΠΡΟΣ ΤΟ: Ο εγκέφαλος και τα μάτια συνεργάζονται για να μας βοηθήσουν να καταλάβουμε ότι το λουλούδι στο σύνολό του είναι στην πραγματικότητα έντονο κόκκινο.

ΠΡΟ ΧΡΙΣΤΟΥ: Το σκούρο καφέ της σκιάς του λουλουδιού (B) κάνει το αποκορύφωμα στην κορυφογραμμή του πετάλου (C) να φαίνεται πολύ πιο φωτεινό από το θαμπό χρώμα καφέ. Ουσιαστικά, το φως που λάμπει στην κορυφογραμμή του πέταλου και το χρώμα της σκιάς λειτουργούν παράλληλα για να ξεγελάσουν τα μάτια και να εντείνουν την ένταση.



Ακολουθεί ένα άλλο παράδειγμα που δείχνει πόσο παραπλανητικό χρώμα μπορεί να είναι:

Σχετικότητα χρώματος και σχεδιασμός διεπαφής χρήστη

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

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

Σφάλματα χρώματος σχεδιασμού διεπαφής εφαρμογής

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

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

Υπερφόρτωση κορεσμού σκοτώνει τη ζωντάνια του χρώματος

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

Όμορφος κορεσμός και φωτεινότητα παλετών χρωμάτων

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

Η ταυτόχρονη αντίθεση έχει πλεονεκτήματα και μειονεκτήματα

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

Ταυτόχρονοι συνδυασμοί χρωμάτων UI αντίθεσης

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

Αριθμοί πιστωτικών καρτών εργασίας 2017 με χρήματα

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

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

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

Ταυτόχρονη αντίθεση στη μοντέρνα σχεδίαση UI: κακή παλέτα χρωμάτων UI

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

Τα βασικά χρωματικά σχέδια είναι τα καλύτερα

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

Ακολουθούν δύο ανόητα σχέδια για τη δημιουργία ενός βασικού συνδυασμού χρωμάτων UI:

1. Αναλογικά σχέδια χρωμάτων UI

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

Σχεδιαστικά UI χρώματα ανάλογα

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

2. Συμπληρωματικά σχέδια χρωμάτων UI

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

Η σχεδίαση UI συμπληρώνει τα χρώματα

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

Η απόχρωση επηρεάζει πάντα την αξία

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

Σχεδιασμός διεπαφής χρήστη θεωρίας χρωμάτων

Στην παραπάνω εικόνα, έχουμε μια σειρά αποχρώσεων σε 100% φωτεινότητα και κορεσμό, αλλά κοιτάξτε τι συμβαίνει όταν αυτά τα χρώματα μετατρέπονται σε κλίμακα του γκρι:

Τα χρώματα μετατράπηκαν σε σχεδιασμό UI σε κλίμακα του γκρι

Παρόλο που τα χρώματα στην επάνω σειρά έχουν 100% φωτεινότητα και κορεσμό, οι αντίστοιχες τιμές κλίμακας του γκρι ποικίλλουν δραματικά.

Κεραία! Αποκαλύπτεται μια ολόκληρη γκάμα τιμών γκρι. Γιατί αυτό έχει σημασία για τους σχεδιαστές UI; Μια λέξη: Αντίθεση .

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

Θυμηθείτε, η απόχρωση επηρεάζει πάντα την αξία.

Ζητούσαν οι ανεξάρτητοι σχεδιαστές UI πλήρους απασχόλησης με έδρα τις ΗΠΑ

4 βασικές αρχές χρώματος για ψηφιακές διασυνδέσεις

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

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

Η σχέση μεταξύ κειμένου και χρώματος είναι κρίσιμη

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

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

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

Όμορφο περιβάλλον εργασίας με κακή αντίθεση χρώματος

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

Δεν είναι δυνατή η παράβλεψη της προσβασιμότητας χρώματος

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

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

Παραδείγματα σχεδιασμού προσβασιμότητας χρώματος

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

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

Η αντίθεση είναι απαραίτητη, αλλά δεν είναι θεραπεία για όλους

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

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

Το χρώμα λειτουργεί καλύτερα όταν εφαρμόζεται αναλογικά

Φανταστείτε μια εφαρμογή ειδήσεων όπου κάθε παρουσία κειμένου έχει οριστεί σε περίπτωση τίτλου ή ιστότοπος ηλεκτρονικού εμπορίου σχεδιασμένο σε πλέγμα εικόνας 9x9. Και τα δύο θα ήταν τρομερά!

Κακά παραδείγματα ιεραρχίας σχεδιασμού

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

τι κάνει ένας διευθυντής μιας εταιρείας

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

Πόροι χρώματος για συνεχή πρόοδο

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

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

Ctrl + Paint

Εάν είστε σχεδιαστής διεπαφής χρήστη που θέλετε να αποκτήσετε άμεση αυτοπεποίθηση χρώματος, ξεκινήστε με ctrlpaint.com , ένας ιστότοπος αφιερωμένος στην ψηφιακή διδασκαλία ζωγραφικής. Ψηφιακή ζωγραφική; Πραγματικά?

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

Ξεκινήστε με το δωρεάν βιβλιοθήκη βίντεο (Ενότητα 11) πριν μετακινηθείτε στις πιο εντατικές ασκήσεις στο Σετ εκκίνησης χρώματος .

Μαθήματα ψηφιακής θεωρίας χρωμάτων

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

Ο Josef Albers και η εφαρμογή αλληλεπίδρασης του Color

Η σύγχρονη κατανόηση της σχετικότητας των χρωμάτων διερευνήθηκε σε μεγάλο βαθμό και προωθήθηκε από το πρακτική- πριν -θεωρία προσέγγιση του καλλιτέχνη / εκπαιδευτή Josef Albers.

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

Το 1963 ο Άλμπερς συνέγραψε Αλληλεπίδραση χρώματος , ένα βιβλίο που συνεχίζει να έχει μεγάλη επιρροή στην παγκόσμια εκπαίδευση τέχνης και σχεδιασμού. Για να γιορτάσει την 50ετή επέτειο της έκδοσης του βιβλίου, το Πανεπιστήμιο Yale κυκλοφόρησε ένα διαδραστική εφαρμογή iPad που περιέχει το πλήρες κείμενο, αλλά επιτρέπει επίσης στους χρήστες να παίζουν και να πειραματίζονται με τις χρωματικές πινακίδες του Albers.

Εφαρμογή χρωμάτων σχεδιασμού διεπαφής χρήστη

Ένας από τους καλύτερους τρόπους για να βελτιωθεί η εργασία με το χρώμα είναι ο πειραματισμός. Η εφαρμογή Interaction of Color είναι ένας εύκολος και διαισθητικός τρόπος για τους σχεδιαστές UI να δημιουργήσουν προσαρμοσμένες παλέτες και να δουν πώς τα χρώματα σχετίζονται μεταξύ τους.

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

Άντριου Λόμης

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

Χρώματα σχεδιασμού UI από παραδοσιακή ζωγραφική

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

Στα βιβλία του Δημιουργική απεικόνιση και Μάτι του Ζωγράφου (και οι δύο διατίθενται στις archive.org ), Η Loomis ρίχνει μια σειρά από ανθεκτικές γραμμές που παραμένουν σχετικές με το σύγχρονο πεδίο σχεδίασης διεπαφής χρήστη:

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

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

Το χρώμα προσφέρεται να πειραματιστεί περισσότερο από οποιοδήποτε άλλο στοιχείο ομορφιάς.

Διεπαφές άλλων σχεδιαστών

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

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

Παραδείγματα συνδυασμών χρωμάτων UI

Ψάχνετε για έμπνευση χρωμάτων διεπαφής; Δοκιμάστε το Βραβεία Webby δικτυακός τόπος. Είναι γεμάτο απίστευτα παραδείγματα οργανωμένα σε συγκεκριμένες κατηγορίες κλάδων.

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

Το χρώμα είναι πολύ σημαντικό να αγνοηθεί

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

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

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

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

• • •

πώς να εκτελέσετε μια προσομοίωση Μόντε Κάρλο

Περαιτέρω ανάγνωση στο ApeeScape Design Blog:

  1. Ο ρόλος του χρώματος στο UX
  2. Δημιουργία οδηγού στυλ UI για Better UX
  3. UX και η σημασία της προσβασιμότητας στον Ιστό
  4. Art vs. Design - Μια διαχρονική συζήτηση
  5. Σχεδιασμός για διαδραστικά περιβάλλοντα και έξυπνους χώρους

Κατανόηση των βασικών

Τι είναι μια παλέτα χρωμάτων;

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

Τι είναι ο συνδυασμός χρωμάτων;

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

Ποια είναι η λειτουργία ενός περιβάλλοντος εργασίας χρήστη;

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

Λίγα μεγέθη: Ένας οδηγός για απαντήσεις σε λύσεις εικόνας στο σχεδιασμό ιστοσελίδων

Διεπαφή Ιστού

Λίγα μεγέθη: Ένας οδηγός για απαντήσεις σε λύσεις εικόνας στο σχεδιασμό ιστοσελίδων
Γιατί είναι σημαντικό το μερίδιο αγοράς; Επειδή το μεγαλύτερο είναι καλύτερο από το καλύτερο

Γιατί είναι σημαντικό το μερίδιο αγοράς; Επειδή το μεγαλύτερο είναι καλύτερο από το καλύτερο

Κύκλος Ζωής Προϊόντος

Δημοφιλείς Αναρτήσεις
Οι αρχές του σχεδιασμού και η σημασία τους
Οι αρχές του σχεδιασμού και η σημασία τους
Πώς να σχεδιάσετε εξαιρετικές εμπειρίες για το Διαδίκτυο των πραγμάτων
Πώς να σχεδιάσετε εξαιρετικές εμπειρίες για το Διαδίκτυο των πραγμάτων
Διαχείριση προϊόντων που ενισχύεται από την επιχειρηματική νοοτροπία
Διαχείριση προϊόντων που ενισχύεται από την επιχειρηματική νοοτροπία
Ενθάρρυνση ευκαιριών και δράσης σε απομακρυσμένο χώρο εργασίας
Ενθάρρυνση ευκαιριών και δράσης σε απομακρυσμένο χώρο εργασίας
Αρχές Σχεδιασμού - Εισαγωγή στην Οπτική Ιεραρχία
Αρχές Σχεδιασμού - Εισαγωγή στην Οπτική Ιεραρχία
 
Γιατί πρέπει να κάνετε αναβάθμιση σε Java 8 ήδη
Γιατί πρέπει να κάνετε αναβάθμιση σε Java 8 ήδη
Διαχείριση εμποδίων διαπολιτισμικής επικοινωνίας
Διαχείριση εμποδίων διαπολιτισμικής επικοινωνίας
Εκμάθηση ροής Apache Spark: Αναγνώριση τάσεων Twitter Trending Hashtags
Εκμάθηση ροής Apache Spark: Αναγνώριση τάσεων Twitter Trending Hashtags
Μείωση του κόστους σε ένα ψηφιακό μέλλον πετρελαίου και φυσικού αερίου
Μείωση του κόστους σε ένα ψηφιακό μέλλον πετρελαίου και φυσικού αερίου
Κατανόηση των συστημάτων και προτύπων σχεδιασμού
Κατανόηση των συστημάτων και προτύπων σχεδιασμού
Δημοφιλείς Αναρτήσεις
  • πώς μπορεί η τεχνητή νοημοσύνη να ωφελήσει τους ανθρώπους
  • πώς χρησιμοποιείται ο python στα οικονομικά
  • Το angular.module δεν είναι συνάρτηση
  • μία από τις πιο σημαντικές έννοιες στο μάρκετινγκ είναι η ελαστικότητα της ζήτησης ως προς την τιμή, η οποία είναι η
  • πώς να δημιουργήσετε τη δική σας γλώσσα προγραμματισμού
  • ποιο από τα παρακάτω είναι υπεύθυνα ενός cfo;
Κατηγορίες
  • Άνοδος Του Απομακρυσμένου
  • Τεχνολογία
  • Τάσεις
  • Το Μέλλον Της Εργασίας
  • © 2022 | Ολα Τα Δικαιώματα Διατηρούνται

    portaldacalheta.pt