काळोखाचा काळ येत आहे

किंवा अनुप्रयोग किंवा वेबसाइटसाठी गडद मोड विकसित करताना काय लक्षात ठेवावे

2018 ने दाखवले की गडद मोड मार्गावर आहेत. आता आम्ही 2019 च्या अर्ध्या वाटेवर आहोत, आम्ही आत्मविश्वासाने म्हणू शकतो: ते येथे आहेत आणि ते सर्वत्र आहेत.

जुन्या ग्रीन-ऑन-ब्लॅक मॉनिटरचे उदाहरण

चला सुरुवात करूया की डार्क मोड ही नवीन संकल्पना नाही. हे बर्याच काळापासून वापरले जात आहे. आणि एकेकाळी, खरं तर, बर्याच काळापासून, ही एकमेव गोष्ट त्यांनी वापरली होती: मॉनिटर्स "ग्रीन-ऑन-ब्लॅक" विविध प्रकारचे होते, परंतु केवळ रेडिएशनच्या संपर्कात असताना आतल्या ल्युमिनेसेंट कोटिंगमुळे हिरवट चमक निघत असे. .

परंतु कलर मॉनिटर्सच्या परिचयानंतरही, गडद मोड अस्तित्वात राहिला. हे असे का होते?

आज प्रत्येक दुसऱ्या व्यक्तीला त्यांच्या ऍप्लिकेशनमध्ये गडद थीम जोडण्याची घाई का आहे याची दोन मुख्य कारणे आहेत. सर्व प्रथम: संगणक सर्वत्र आहेत. आपण जिथे पाहतो तिथे एक प्रकारचा पडदा असतो. आम्ही सकाळपासून रात्री उशिरापर्यंत आमचे मोबाईल वापरतो. तुमच्या सोशल फीडमधून “शेवटच्या वेळी” स्क्रोल करण्यासाठी झोपण्यापूर्वी तुम्ही अंथरुणावर असता तेव्हा डार्क मोडची उपस्थिती डोळ्यांचा ताण कमी करते. नेटवर्क (तुम्ही माझ्यासारखे असाल तर, "शेवटच्या वेळी" याचा अर्थ 3-तास स्क्रोल असू शकतो R/EngineeringPorn. गडद मोड? होय करा! )

दुसरे कारण म्हणजे नवीन प्रदर्शन उत्पादन तंत्रज्ञान. Apple, Google, Samsung, Huawei - मोठ्या कंपन्यांचे फ्लॅगशिप मॉडेल सर्व OLED स्क्रीनसह सुसज्ज आहेत, जे एलसीडी डिस्प्लेच्या विपरीत, बॅकलाइटिंगची आवश्यकता नाही. आणि तुमच्या बॅटरीसाठी ही खरोखर चांगली बातमी आहे. कल्पना करा की तुम्ही तुमच्या फोनवर काळ्या चौकोनाची प्रतिमा पाहत आहात; LCD सह, बॅकलाईट संपूर्ण स्क्रीन प्रकाशित करेल जरी ती बहुतेक काळा आहे. परंतु OLED डिस्प्लेवर तीच प्रतिमा पाहताना, काळा चौकोन बनवणारे पिक्सेल फक्त बंद केले जातात. याचा अर्थ ते ऊर्जा वापरत नाहीत.

या प्रकारचे डिस्प्ले गडद मोड्स अधिक मनोरंजक बनवतात. गडद इंटरफेस वापरून, तुम्ही तुमच्या डिव्हाइसच्या बॅटरीचे आयुष्य लक्षणीयरीत्या वाढवू शकता. स्वतः पाहण्यासाठी गेल्या नोव्हेंबरच्या Android Dev समिटमधील तथ्ये आणि आकडेवारी पहा. गडद मोड अर्थातच UI बदलांसोबत हाताशी आहेत म्हणून चला आपल्या ज्ञानाची माहिती घेऊया!

गडद मोड 101

सर्व प्रथम: "गडद" "काळा" सारखा नाही. पांढऱ्या पार्श्वभूमीला काळ्या रंगाने बदलण्याचा प्रयत्न करू नका, कारण यामुळे सावल्या वापरणे अशक्य होईल. यासारखे डिझाइन सुपर फ्लॅट असेल (खराब मार्गाने).

शेडिंग/लाइटिंगची मूलभूत तत्त्वे लक्षात ठेवणे महत्त्वाचे आहे. ज्या वस्तू जास्त उंच आहेत त्या सावलीत हलक्या, वास्तविक जीवनातील प्रकाश आणि छायांकनाचे अनुकरण करणारे असावेत. यामुळे विविध घटक आणि त्यांची पदानुक्रमे यांच्यातील फरक ओळखणे सोपे होते.

सावलीसह दोन समान राखाडी चौकोन, एक 100% काळ्या पार्श्वभूमीवर, दुसरा #121212 वर. वस्तू जसजशी उठते तसतशी ती राखाडी रंगाची हलकी सावली बनते.

गडद थीममध्ये, जोपर्यंत कॉन्ट्रास्ट ठीक आहे तोपर्यंत तुम्ही तुमच्या नियमित बेस कलरसह काम करू शकता. उदाहरणासह स्पष्ट करू.

या इंटरफेसमध्ये, मुख्य क्रिया म्हणजे तळाच्या पट्टीतील मोठे निळे बटण. प्रकाश किंवा गडद मोडमध्ये स्विच करताना कॉन्ट्रास्टच्या बाबतीत कोणतीही समस्या नाही, बटण अद्याप लक्षवेधी आहे, चिन्ह स्पष्ट आहे आणि एकंदरीत सर्वकाही ठीक आहे.

जेव्हा समान रंग वेगवेगळ्या प्रकारे वापरला जातो, उदाहरणार्थ मजकूरात, तेव्हा समस्या असतील. मुख्य रंगाची (खूप) कमी संतृप्त सावली वापरण्याचा प्रयत्न करा किंवा इंटरफेसमध्ये ब्रँड रंग समाविष्ट करण्याचे इतर मार्ग शोधा.

डावीकडे: काळ्यावर लाल वाईट दिसते. उजवीकडे: संपृक्तता कमी करा आणि सर्वकाही चांगले दिसते. - अंदाजे भाषांतर

हेच तुम्ही वापरलेल्या इतर सशक्त रंगांसाठी आहे, जसे की चेतावणी किंवा त्रुटी रंग. Google त्यांच्या डीफॉल्ट एरर कलरच्या शीर्षस्थानी 40% पांढरा लेयर आच्छादन वापरते मटेरियल डिझाइन मार्गदर्शक तत्त्वे गडद मोडवर स्विच करताना. हा एक चांगला प्रारंभ बिंदू आहे कारण तो AA मानकांशी जुळण्यासाठी कॉन्ट्रास्ट पातळी सुधारेल. तुम्ही अर्थातच तुम्हाला योग्य वाटेल त्याप्रमाणे सेटिंग्ज बदलू शकता, परंतु कॉन्ट्रास्ट पातळी तपासण्याचे सुनिश्चित करा. तसे, या उद्देशासाठी एक उपयुक्त साधन आहे स्केच प्लगइन - जोरदार, जे 2 लेयर्समध्ये किती कॉन्ट्रास्ट आहे हे दर्शवते.

मजकुराचे काय?

येथे सर्व काही सोपे आहे: काहीही 100% काळा आणि 100% पांढरे नसावे आणि त्याउलट. पांढरा रंग सर्व तरंगलांबीच्या प्रकाश लाटा प्रतिबिंबित करतो, काळा शोषून घेतो. तुम्ही 100% काळ्या पार्श्वभूमीवर 100% पांढरा मजकूर ठेवल्यास, अक्षरे प्रकाश, स्मीअर प्रतिबिंबित करतील आणि कमी सुवाच्य होतील, ज्यामुळे वाचनीयतेवर नकारात्मक परिणाम होईल.

हेच 100% पांढऱ्या पार्श्वभूमीसाठी आहे, जे शब्दांवर पूर्णपणे लक्ष केंद्रित करण्यासाठी खूप जास्त प्रकाश परावर्तित करते. पांढरा रंग थोडा मऊ करण्याचा प्रयत्न करा, पार्श्वभूमीसाठी हलका राखाडी वापरा आणि काळ्या पार्श्वभूमीवर मजकूर वापरा. यामुळे डोळ्यांचा ताण कमी होईल, प्रतिबंध होईल त्यांचे ओव्हरव्होल्टेज

गडद मोड येथे आहे आणि जाणार नाही

आपण पडद्यासमोर घालवलेल्या वेळेचे प्रमाण सतत वाढत आहे आणि प्रत्येक नवीन दिवस, आपण जागे झाल्यापासून झोपी जाईपर्यंत आपल्या आयुष्यात नवीन स्क्रीन दिसतात. ही एक नवीन घटना आहे; आपल्या डोळ्यांना संध्याकाळी उशिरा स्क्रीन वेळेत वाढण्याची सवय झालेली नाही. इथेच डार्क मोड येतो. हे वैशिष्ट्य macOS आणि मटेरियल डिझाइनमध्ये (आणि बहुधा iOS मध्ये) सादर केल्यामुळे, आम्हाला विश्वास आहे की लवकरच किंवा नंतर ते सर्व ऍप्लिकेशन्समध्ये, मोबाइल आणि डेस्कटॉप दोन्हीमध्ये डीफॉल्ट होईल. आणि यासाठी तयार राहणे चांगले!

गडद मोड लागू न करण्याचे एकमेव कारण म्हणजे जेव्हा तुमची 100% खात्री असते की तुमचा ॲप्लिकेशन केवळ उजेडात उजेडात वापरला जातो. हे मात्र अनेकदा घडत नाही.

आधी सारांशित केलेल्या मूलभूत तत्त्वांच्या पलीकडे, गडद मोड लागू करताना काही गोष्टींचा उल्लेख करणे योग्य आहे ज्यांवर विशेष लक्ष देणे आवश्यक आहे.

प्रवेशयोग्यतेच्या बाबतीत, गडद मोड सर्वात सोयीस्कर नाही, कारण कॉन्ट्रास्ट सामान्यतः कमी असतो, ज्यामुळे वाचनीयता अजिबात सुधारत नाही.

स्त्रोत

पण कल्पना करा की तुम्ही अंथरुणासाठी तयार आहात, तुम्हाला खरोखर झोपायचे आहे, परंतु तुम्ही झोपण्यापूर्वी, तुम्हाला आठवत असेल की तुम्हाला एखाद्याला एक अतिमहत्त्वाचा संदेश पाठवायचा आहे जो एक रात्रही थांबू शकत नाही. तुम्ही तुमचा फोन घ्या, तो चालू करा आणि AAAAAAH... तुमच्या iMessage ची हलकी पार्श्वभूमी तुम्हाला आणखी 3 तास जागृत ठेवेल, परंतु गडद पार्श्वभूमीवरील हलका मजकूर या सेकंदाला सर्वात जास्त प्रवेशयोग्य मानला जात नाही दशलक्ष सुविधा वाढवा. हे सर्व वापरकर्ता या क्षणी कोणत्या परिस्थितीत आहे यावर अवलंबून आहे.

म्हणूनच आम्ही विचार करतो स्वयंचलित गडद मोड इतकी छान कल्पना. ते संध्याकाळी चालू होते आणि सकाळी बंद होते. वापरकर्त्याला त्याबद्दल विचार करण्याची देखील गरज नाही, जे खूप सोयीस्कर आहे. ट्विटरने त्याच्या डार्क मोड सेटिंग्जसह उत्तम काम केले आहे. याव्यतिरिक्त, या सर्व OLED स्क्रीनसाठी त्यांच्याकडे फक्त एक गडद मोड आणि आणखी गडद मोड आहे, ज्यामुळे बॅटरी आणि त्याच्याशी संबंधित सर्व गोष्टींची बचत होते. येथे हे लक्षात घेणे महत्त्वाचे आहे: वापरकर्त्याला जेव्हा हवे असेल तेव्हा स्वहस्ते स्विच करण्याची संधी द्या: परत स्विच करण्याच्या क्षमतेशिवाय इंटरफेस स्वयंचलितपणे बदलण्यापेक्षा काहीही वाईट नाही.

Twitter वर स्वयंचलित गडद मोड आहे जो संध्याकाळी चालू होतो आणि सकाळी बंद होतो.

तसेच, थीम विकसित करताना, हे लक्षात ठेवण्यासारखे आहे की काही गोष्टी फक्त गडद केल्या जाऊ शकत नाहीत.

Pages सारखे टेक्स्ट एडिटर घ्या. आपण इंटरफेस गडद करू शकता, परंतु पत्रक स्वतःच नेहमी पांढरे असेल, कागदाच्या वास्तविक शीटचे अनुकरण करते.

गडद मोड सक्षम असलेली पृष्ठे

स्केच किंवा इलस्ट्रेटर सारख्या सर्व प्रकारच्या सामग्री निर्मिती संपादकांसाठी हेच आहे. जरी इंटरफेस गडद केला जाऊ शकतो, परंतु तुम्ही ज्या आर्टबोर्डसह कार्य करता ते नेहमी डीफॉल्टनुसार पांढरे असेल.

गडद मोडमध्ये स्केच करा आणि तरीही एक चमकदार पांढरा आर्टबोर्ड आहे.

त्यामुळे ॲपची पर्वा न करता, तुम्ही वापरत असलेल्या ऑपरेटिंग सिस्टीमवर डार्क मोड मूळ येतील, याचा अर्थ भविष्यासाठी तयारी करणे सर्वोत्तम आहे असा आमचा विश्वास आहे. अंधार होईल. 

तुम्हाला गडद UI विकसित करण्याबद्दल अधिक जाणून घ्यायचे असल्यास, मार्गदर्शक तत्त्वे पहा साहित्य डिझाईन, हा या लेखासाठी आमचा माहितीचा मुख्य स्त्रोत होता.

स्त्रोत: www.habr.com