Ή τι πρέπει να έχετε κατά νου όταν αναπτύσσετε μια σκοτεινή λειτουργία για μια εφαρμογή ή ιστότοπο
Το 2018 έδειξε ότι οι σκοτεινές λειτουργίες είναι καθ' οδόν. Τώρα που βρισκόμαστε στα μισά του 2019, μπορούμε να πούμε με σιγουριά: είναι εδώ και είναι παντού.
Ας ξεκινήσουμε με το γεγονός ότι η σκοτεινή λειτουργία δεν είναι καθόλου νέα ιδέα. Έχει χρησιμοποιηθεί για αρκετό καιρό. Και μια φορά κι έναν καιρό, στην πραγματικότητα, για πολύ καιρό, αυτό ήταν το μόνο πράγμα που χρησιμοποιούσαν: οι οθόνες ήταν της ποικιλίας "πράσινο σε μαύρο", αλλά μόνο επειδή η φωτεινή επίστρωση στο εσωτερικό εξέπεμπε μια πρασινωπή λάμψη όταν εκτίθετο σε ακτινοβολία .
Αλλά ακόμα και μετά την εισαγωγή των έγχρωμων οθονών, η σκοτεινή λειτουργία συνέχισε να υπάρχει. Γιατί συμβαίνει αυτό;
Υπάρχουν δύο βασικά κίνητρα που εξηγούν γιατί σήμερα κάθε δεύτερο άτομο βιάζεται να προσθέσει ένα σκοτεινό θέμα στην εφαρμογή του. Πρώτα απ 'όλα: οι υπολογιστές είναι παντού. Όπου κι αν κοιτάξουμε υπάρχει κάποιο είδος οθόνης. Χρησιμοποιούμε τις φορητές συσκευές μας από το πρωί μέχρι αργά το βράδυ. Η παρουσία μιας σκοτεινής λειτουργίας μειώνει την καταπόνηση των ματιών όταν είστε στο κρεβάτι πριν πάτε για ύπνο για την «τελευταία φορά» κάνοντας κύλιση στη ροή κοινωνικής δικτύωσης σας. δίκτυα. (Αν είστε σαν εμένα, το "τελευταία φορά" μπορεί να σημαίνει κύλιση 3 ωρών . Σκοτεινή λειτουργία; Ναι παρακαλώ! )
Ένας άλλος λόγος είναι οι νέες τεχνολογίες παραγωγής οθονών. Τα κορυφαία μοντέλα μεγάλων εταιρειών - Apple, Google, Samsung, Huawei - είναι όλα εξοπλισμένα με οθόνες OLED, οι οποίες, σε αντίθεση με τις οθόνες LCD, δεν απαιτούν οπίσθιο φωτισμό. Και αυτά είναι πραγματικά καλά νέα για την μπαταρία σας. Φανταστείτε ότι βλέπετε μια εικόνα ενός μαύρου τετραγώνου στο τηλέφωνό σας. Με μια οθόνη LCD, ο οπίσθιος φωτισμός θα φωτίζει ολόκληρη την οθόνη, παρόλο που το μεγαλύτερο μέρος της είναι μαύρο. Αλλά κατά την προβολή της ίδιας εικόνας σε μια οθόνη OLED, τα pixel που αποτελούν το μαύρο τετράγωνο απλά απενεργοποιούνται. Αυτό σημαίνει ότι δεν καταναλώνουν καθόλου ενέργεια.
Αυτοί οι τύποι οθονών κάνουν τις σκοτεινές λειτουργίες πολύ πιο ενδιαφέρουσες. Χρησιμοποιώντας μια σκοτεινή διεπαφή, μπορείτε να παρατείνετε σημαντικά τη διάρκεια ζωής της μπαταρίας της συσκευής σας. . Οι σκοτεινές λειτουργίες φυσικά συμβαδίζουν με τις αλλαγές διεπαφής χρήστη, οπότε ας ανανεώσουμε τις γνώσεις μας!
Dark Modes 101
Πρώτα απ 'όλα: το "σκοτεινό" δεν είναι το ίδιο με το "μαύρο". Μην προσπαθήσετε να αντικαταστήσετε ένα λευκό φόντο με μαύρο, καθώς αυτό θα καταστήσει αδύνατη τη χρήση σκιών. Ένα σχέδιο σαν αυτό θα είναι εξαιρετικά επίπεδο (με την κακή έννοια).
Είναι σημαντικό να έχετε κατά νου τις βασικές αρχές της σκίασης/φωτισμού. Τα αντικείμενα που είναι πιο υπερυψωμένα θα πρέπει να είναι πιο ανοιχτά στη σκιά, προσομοιώνοντας τον πραγματικό φωτισμό και τη σκίαση. Αυτό διευκολύνει τη διάκριση μεταξύ των διαφορετικών στοιχείων και της ιεραρχίας τους.
Δύο πανομοιότυπα γκρι τετράγωνα με σκιά, το ένα σε 100% μαύρο φόντο, το άλλο στο #121212. Καθώς το αντικείμενο ανεβαίνει, γίνεται μια πιο ανοιχτή απόχρωση του γκρι.
Σε ένα σκούρο θέμα, μπορείτε ακόμα να δουλέψετε με το κανονικό βασικό σας χρώμα, εφόσον η αντίθεση είναι εντάξει. Ας εξηγήσουμε με ένα παράδειγμα.
Σε αυτή τη διεπαφή, η κύρια ενέργεια είναι το μεγάλο μπλε κουμπί στην κάτω γραμμή. Δεν υπάρχει πρόβλημα όσον αφορά την αντίθεση κατά την εναλλαγή μεταξύ φωτεινής ή σκοτεινής λειτουργίας, το κουμπί είναι ακόμα εντυπωσιακό, το εικονίδιο είναι καθαρό και συνολικά όλα είναι εντάξει.
Όταν το ίδιο χρώμα χρησιμοποιείται με διαφορετικούς τρόπους, για παράδειγμα σε κείμενο, θα υπάρχουν προβλήματα. Δοκιμάστε να χρησιμοποιήσετε μια (πολύ) λιγότερο κορεσμένη απόχρωση του κύριου χρώματος ή αναζητήστε άλλους τρόπους για να ενσωματώσετε χρώματα επωνυμίας στη διεπαφή.
Αριστερά: Το κόκκινο σε μαύρο φαίνεται άσχημο. Σωστά: μειώστε τον κορεσμό και όλα φαίνονται καλά. — περίπου. μετάφραση
Το ίδιο ισχύει για οποιαδήποτε άλλα έντονα χρώματα που μπορεί να έχετε χρησιμοποιήσει, όπως χρώματα προειδοποίησης ή σφάλματος. Η Google χρησιμοποιεί μια επικάλυψη λευκού επιπέδου 40% πάνω από το προεπιλεγμένο χρώμα σφάλματος κατά τη μετάβαση σε σκοτεινή λειτουργία. Αυτό είναι ένα πολύ καλό σημείο εκκίνησης, καθώς θα βελτιώσει τα επίπεδα αντίθεσης ώστε να ταιριάζουν με τα πρότυπα ΑΑ. Μπορείτε, φυσικά, να αλλάζετε πάντα τις ρυθμίσεις όπως σας ταιριάζει, αλλά φροντίστε να ελέγχετε τα επίπεδα αντίθεσης. Παρεμπιπτόντως, ένα χρήσιμο εργαλείο για το σκοπό αυτό είναι το πρόσθετο Sketch - , που δείχνει ακριβώς πόση αντίθεση υπάρχει ανάμεσα σε 2 επίπεδα.
Τι γίνεται με το κείμενο;
Όλα είναι απλά εδώ: τίποτα δεν πρέπει να είναι 100% μαύρο και 100% λευκό και το αντίστροφο. Το λευκό αντανακλά τα κύματα φωτός όλων των μηκών κύματος, το μαύρο απορροφά. Εάν τοποθετήσετε 100% λευκό κείμενο σε 100% μαύρο φόντο, τα γράμματα θα αντανακλούν το φως, θα κηλιδώνονται και θα γίνονται λιγότερο ευανάγνωστα, γεγονός που θα επηρεάσει αρνητικά την αναγνωσιμότητα.
Το ίδιο ισχύει και για ένα 100% λευκό φόντο, το οποίο αντανακλά πολύ φως για να εστιάσετε πλήρως στις λέξεις. Δοκιμάστε να απαλύνετε λίγο το λευκό χρώμα, χρησιμοποιήστε ανοιχτό γκρι για φόντο και κείμενο σε μαύρο φόντο. Αυτό θα μειώσει την καταπόνηση των ματιών, αποτρέποντας
Η σκοτεινή λειτουργία είναι εδώ και δεν θα εξαφανιστεί
Ο χρόνος που περνάμε μπροστά στις οθόνες αυξάνεται συνεχώς και κάθε νέα μέρα εμφανίζονται νέες οθόνες στη ζωή μας, από τη στιγμή που ξυπνάμε μέχρι να κοιμηθούμε. Αυτό είναι ένα αρκετά νέο φαινόμενο· τα μάτια μας δεν έχουν ακόμη συνηθίσει σε αυτήν την αύξηση του χρόνου οθόνης αργά το βράδυ. Εδώ μπαίνει στο παιχνίδι η σκοτεινή λειτουργία. Με την εισαγωγή αυτής της δυνατότητας σε macOS και Material Design (και πιθανότατα στο iOS), πιστεύουμε ότι αργά ή γρήγορα θα γίνει η προεπιλογή σε όλες τις εφαρμογές, τόσο για φορητές όσο και για επιτραπέζιους υπολογιστές. Και είναι καλύτερα να είστε προετοιμασμένοι για αυτό!
Ο μόνος λόγος για να μην εφαρμόσετε τη σκοτεινή λειτουργία είναι όταν είστε απολύτως 100% σίγουροι ότι η εφαρμογή σας χρησιμοποιείται αποκλειστικά σε έντονο φως της ημέρας. Αυτό, όμως, δεν συμβαίνει συχνά.
Αξίζει να αναφέρουμε μερικά πράγματα που θα απαιτήσουν ιδιαίτερη προσοχή κατά την εφαρμογή της σκοτεινής λειτουργίας, πέρα από τις βασικές αρχές που συνοψίστηκαν προηγουμένως.
Όσον αφορά την προσβασιμότητα, η σκοτεινή λειτουργία δεν είναι η πιο βολική, αφού η αντίθεση είναι γενικά χαμηλότερη, κάτι που με τη σειρά της δεν βελτιώνει καθόλου την αναγνωσιμότητα.
Φανταστείτε όμως ότι ετοιμάζεστε για ύπνο, θέλετε πολύ να κοιμηθείτε, αλλά αμέσως πριν κοιμηθείτε, θυμάστε ότι πρέπει να στείλετε σε κάποιον ένα πολύ σημαντικό μήνυμα που δεν μπορεί να περιμένει ούτε ένα βράδυ. Παίρνετε το τηλέφωνό σας, το ενεργοποιείτε και AAAAAAH... το ανοιχτό φόντο του iMessage σας θα σας κρατήσει ξύπνιους για άλλες 3 ώρες. Ενώ το ανοιχτό κείμενο σε σκούρο φόντο δεν θεωρείται το πιο προσιτό, η σκοτεινή λειτουργία αυτή τη στιγμή θα αυξήστε την ευκολία κατά ένα εκατομμύριο. Όλα εξαρτώνται από την κατάσταση στην οποία βρίσκεται ο χρήστης αυτή τη στιγμή.
Γι' αυτό νομίζουμε αυτόματη σκοτεινή λειτουργία τόσο ωραία ιδέα. Ανάβει το βράδυ και σβήνει το πρωί. Ο χρήστης δεν χρειάζεται καν να το σκεφτεί, κάτι που είναι πολύ βολικό. Το Twitter έχει κάνει εξαιρετική δουλειά με τις ρυθμίσεις σκοτεινής λειτουργίας. Επιπλέον, διαθέτουν τόσο σκοτεινή λειτουργία όσο και ακόμα πιο σκοτεινή λειτουργία για όλες αυτές τις οθόνες OLED, εξοικονομώντας μπαταρία και οτιδήποτε σχετίζεται με αυτήν. Είναι σημαντικό να σημειώσετε εδώ: δώστε στον χρήστη την ευκαιρία να αλλάζει χειροκίνητα όποτε θέλει: δεν υπάρχει τίποτα χειρότερο από την αυτόματη αλλαγή της διεπαφής χωρίς τη δυνατότητα αλλαγής.
Το Twitter έχει μια αυτόματη σκοτεινή λειτουργία που ενεργοποιείται το βράδυ και σβήνει το πρωί.
Επίσης, όταν αναπτύσσετε ένα θέμα, αξίζει να έχετε κατά νου ότι ορισμένα πράγματα απλά δεν μπορούν να γίνουν σκοτεινά.
Πάρτε ένα πρόγραμμα επεξεργασίας κειμένου όπως Σελίδες. Μπορείτε να κάνετε τη διεπαφή σκοτεινή, αλλά το ίδιο το φύλλο θα είναι πάντα λευκό, προσομοιώνοντας ένα πραγματικό φύλλο χαρτιού.
Σελίδες με ενεργοποιημένη τη σκοτεινή λειτουργία
Το ίδιο ισχύει για όλους τους τύπους επεξεργασίας δημιουργίας περιεχομένου, όπως το Sketch ή το Illustrator. Αν και η διεπαφή μπορεί να γίνει σκοτεινή, το artboard με το οποίο εργάζεστε θα είναι πάντα λευκό από προεπιλογή.
Κάντε σκίτσο σε σκοτεινή λειτουργία και εξακολουθείτε να έχετε ένα φωτεινό λευκό πίνακα τέχνης.
Επομένως, ανεξάρτητα από την εφαρμογή, πιστεύουμε ότι οι σκοτεινές λειτουργίες θα είναι εγγενείς στο λειτουργικό σύστημα που χρησιμοποιείτε, πράγμα που σημαίνει ότι είναι καλύτερο να προετοιμαστείτε για το μέλλον. θα είναι σκοτεινά.
Εάν θέλετε να μάθετε περισσότερα σχετικά με την ανάπτυξη σκοτεινών διεπαφών, φροντίστε να ελέγξετε τις οδηγίες , αυτή ήταν η κύρια πηγή πληροφοριών μας για αυτό το άρθρο.
Πηγή: www.habr.com