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

Χαμηλώστε τα φώτα, χαλαρώστε τα μάτια σας και εξοικονομήστε ενέργεια. Η σκοτεινή λειτουργία είναι μια από τις πιο δημοφιλείς τάσεις σχεδιασμού, και μάρκες παγκόσμιας κλάσης όπως το WhatsApp, το Instagram, η Google, το Facebook και η Apple έχουν ήδη επιβιβαστεί στο τρένο σχεδιασμού σκοτεινής λειτουργίας.

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

Έντυπο υλικό μάρκετινγκ

Τι είναι η σκοτεινή λειτουργία; Σχέδιο σε σκούρα χρώματα

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

Σχεδιασμός εφαρμογής Instagram σε σκοτεινή λειτουργία Σχεδιασμός σε σκούρα χρώματα

Διεπαφή χρήστη Instagram Dark Mode

 

Σχεδιασμός εφαρμογών WhatsApp σε επιτραπέζιους υπολογιστές σε σκοτεινή λειτουργία Σχεδιασμός σε σκούρα χρώματα

Το WhatsApp σε σκοτεινή λειτουργία επιφάνειας εργασίας μέσω του What's App

Σχεδίαση εφαρμογής σκοτεινής λειτουργίας Google Fit

Διεπαφή χρήστη σκοτεινής λειτουργίας Google Fit

 

Αλλά η σκοτεινή λειτουργία δεν είναι κάτι καινούργιο.

Ανάπτυξη αφίσας. 5 κανόνες

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

Πρώιμος οικιακός υπολογιστής με πράσινο κείμενο σε μαύρο

Οι πρώτοι οικικοί υπολογιστές με πράσινο κείμενο σε μαύρο ήταν ο σκοτεινός τρόπος λειτουργίας OG.

 

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

Τι είναι η διαφήμιση βίντεο; Ορισμός, είδη και τάσεις

Αυτό ήταν ο κανόνας για σχεδόν τρεις δεκαετίες έως ότου η σκοτεινή λειτουργία επέστρεψε στο Windows Phone 7 το 2010. Αφού η Google επιβεβαίωσε ότι η σκοτεινή λειτουργία εξοικονομεί μπαταρία, πρόσθεσε τη λειτουργία στο λειτουργικό σύστημα Android το 2018. Ένα χρόνο αργότερα, η Apple ακολούθησε τη σκοτεινή λειτουργία σε iOS και iPadOS.

Dark Mode και Light Mode στο iOS 13 App Design

Σκοτεινή λειτουργία στο iOS 13

Πλεονεκτήματα της χρήσης σκοτεινής λειτουργίας. Σχέδιο σε σκούρα χρώματα

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

Μειώνει την καταπόνηση των ματιών

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

Σχεδιασμός εφαρμογής σε σκοτεινή λειτουργία Σχεδιασμός σε σκούρα χρώματα

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

 

Αυξάνει την ορατότητα σε χαμηλό φωτισμό

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

Εξοικονομεί ενέργεια μπαταρίας

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

Δίνει συναισθηματική φόρτιση

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

Αποτρέπει την ΠΡΟΣΘΗΚΗ. Σχέδιο σε σκούρα χρώματα

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

Μειονεκτήματα της χρήσης σκοτεινής λειτουργίας

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

Μπορεί να μειώσει τη συναισθηματική σύνδεση. Σχέδιο σε σκούρα χρώματα

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

Συμπιέζει χώρο

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

Τα χρώματα με χαμηλή αντίθεση μπορεί να είναι δύσκολο να διαβαστούν. Σχέδιο σε σκούρα χρώματα

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

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

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

Πότε να χρησιμοποιήσετε τη σκοτεινή λειτουργία. Σχέδιο σε σκούρα χρώματα

Επιλέξτε τα χρώματα της επωνυμίας σας

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

Σχεδίαση εφαρμογής σκοτεινής λειτουργίας

Σχεδίαση εφαρμογής σκοτεινής λειτουργίας

 

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

Επισημάνετε τον κλάδο σας. Σχέδιο σε σκούρα χρώματα

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

Πηγαίνετε μινιμαλιστικά

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

Προκαλέστε συναισθήματα

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

σκοτεινό θέμα σχεδίασης ιστοσελίδων Σχεδιασμός σε σκούρα χρώματα

Σκοτεινή σχεδίαση ιστοσελίδων

 

Σύμβολο κατάστασης. Σχέδιο σε σκούρα χρώματα

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

Σκούρο θέμα Σχεδιασμός ιστότοπου για μια μάρκα πολυτελών ρολογιών

Κομψή, υψηλής ποιότητας σχεδιασμός ιστότοπου με σκούρο θέμα

 

Βέλτιστες πρακτικές για το σχέδιο Dark Mode

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

1. Μην σκοτίζετε πολύ. Σχέδιο σε σκούρα χρώματα

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

Σχεδιασμός σε σκούρα χρώματα Σχεδιασμός φορητού ψηφιακού περιοδικού στην εφαρμογή Dark Mode

Σχέδιο σκοτεινής εφαρμογής

 

2. Έχετε τη σωστή αντίθεση

Το φόντο στη σκοτεινή λειτουργία πρέπει να είναι αρκετά σκούρο για να εμφανίζεται λευκό κείμενο. Μια πρόταση από το Google Material Design είναι να χρησιμοποιήσετε ένα επίπεδο αντίθεσης κειμένου σε φόντο τουλάχιστον 15,8:1.

3. Αποκορεσμός των χρωμάτων. Σχέδιο σε σκούρα χρώματα

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

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

4. Χρησιμοποιήστε τα σωστά χρώματα "on"

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

5. Μην αναποδογυρίζετε απλώς. Σχέδιο σε σκούρα χρώματα

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

6. Βουτήξτε πιο βαθιά

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

Οπτική ιεραρχία της σκοτεινής λειτουργίας

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

 

7. Ζήστε και προσφέρετε ελευθερία. Σχέδιο σε σκούρα χρώματα

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

 

Ο βοηθός σας στην επιχείρηση διαφήμισης και εκτύπωσης "АЗБУКА«