अंधकारमय समय आ रहा है

या किसी एप्लिकेशन या वेबसाइट के लिए डार्क मोड विकसित करते समय क्या ध्यान रखना चाहिए

2018 ने दिखाया कि डार्क मोड आने वाले हैं। अब जबकि हम 2019 के आधे रास्ते पर हैं, हम विश्वास के साथ कह सकते हैं: वे यहां हैं, और वे हर जगह हैं।

पुराने हरे-पर-काले मॉनिटर का एक उदाहरण

आइए इस तथ्य से शुरुआत करें कि डार्क मोड कोई नई अवधारणा नहीं है। इसका प्रयोग काफी समय से किया जा रहा है. और एक समय, वास्तव में, लंबे समय तक, यही एकमात्र चीज़ थी जिसका वे उपयोग करते थे: मॉनिटर "हरे-पर-काले" किस्म के होते थे, लेकिन केवल इसलिए क्योंकि विकिरण के संपर्क में आने पर अंदर की ल्यूमिनसेंट कोटिंग एक हरे रंग की चमक उत्सर्जित करती थी .

लेकिन कलर मॉनिटर के आने के बाद भी डार्क मोड मौजूद रहा। ऐसा क्यों है?

दो मुख्य उद्देश्य हैं जो बताते हैं कि क्यों आज हर दूसरा व्यक्ति अपने एप्लिकेशन में एक डार्क थीम जोड़ने की जल्दी में है। सबसे पहले: कंप्यूटर हर जगह हैं. हम जहां भी देखते हैं वहां किसी न किसी प्रकार की स्क्रीन होती है। हम सुबह से देर रात तक अपने मोबाइल उपकरणों का उपयोग करते हैं। जब आप बिस्तर पर होते हैं और बिस्तर पर जाने से पहले अपने सोशल फीड को "आखिरी बार" स्क्रॉल करते हैं तो डार्क मोड की मौजूदगी से आंखों का तनाव कम हो जाता है। नेटवर्क. (यदि आप मेरे जैसे हैं, तो "पिछली बार" का मतलब 3 घंटे की स्क्रॉल हो सकता है आर/इंजीनियरिंगपोर्न. डार्क मोड? जी कहिये! )

दूसरा कारण नई प्रदर्शन उत्पादन प्रौद्योगिकियाँ हैं। बड़ी कंपनियों के प्रमुख मॉडल - Apple, Google, Samsung, Huawei - सभी OLED स्क्रीन से लैस हैं, जिन्हें LCD डिस्प्ले के विपरीत, बैकलाइटिंग की आवश्यकता नहीं होती है। और यह आपकी बैटरी के लिए सचमुच अच्छी खबर है। कल्पना कीजिए कि आप अपने फ़ोन पर एक काले वर्ग की छवि देख रहे हैं; एलसीडी के साथ, बैकलाइट पूरी स्क्रीन को रोशन करेगी, भले ही इसका अधिकांश भाग काला हो। लेकिन उसी छवि को OLED डिस्प्ले पर देखते समय, काले वर्ग को बनाने वाले पिक्सेल बस बंद हो जाते हैं। इसका मतलब है कि वे बिल्कुल भी ऊर्जा की खपत नहीं करते हैं।

इस प्रकार के डिस्प्ले डार्क मोड को और अधिक दिलचस्प बनाते हैं। डार्क इंटरफ़ेस का उपयोग करके, आप अपने डिवाइस की बैटरी लाइफ को महत्वपूर्ण रूप से बढ़ा सकते हैं। स्वयं देखने के लिए पिछले नवंबर के एंड्रॉइड डेव समिट के तथ्यों और आंकड़ों को देखें. डार्क मोड निश्चित रूप से यूआई परिवर्तनों के साथ-साथ चलते हैं तो आइए अपने ज्ञान को बढ़ाएं!

डार्क मोड्स 101

सबसे पहले: "अंधेरा" "काला" के समान नहीं है। सफ़ेद पृष्ठभूमि को काले रंग से बदलने का प्रयास न करें, क्योंकि इससे छाया का उपयोग करना असंभव हो जाएगा। इस तरह का डिज़ाइन सुपर फ्लैट (खराब तरीके से) होगा।

छायांकन/प्रकाश के बुनियादी सिद्धांतों को ध्यान में रखना महत्वपूर्ण है। जो वस्तुएं अधिक ऊंची हैं, उनकी छाया हल्की होनी चाहिए, जो वास्तविक जीवन की रोशनी और छायांकन का अनुकरण करती हैं। इससे विभिन्न घटकों और उनके पदानुक्रम के बीच अंतर करना आसान हो जाता है।

छाया के साथ दो समान ग्रे वर्ग, एक 100% काली पृष्ठभूमि पर, दूसरा #121212 पर। जैसे-जैसे वस्तु ऊपर उठती है, वह हल्के भूरे रंग की हो जाती है।

डार्क थीम में, आप तब तक अपने नियमित आधार रंग के साथ काम कर सकते हैं जब तक कंट्रास्ट ठीक है। चलिए एक उदाहरण से समझाते हैं.

इस इंटरफ़ेस में, मुख्य क्रिया निचली पट्टी में बड़ा नीला बटन है। लाइट या डार्क मोड के बीच स्विच करते समय कंट्रास्ट के मामले में कोई समस्या नहीं है, बटन अभी भी आकर्षक है, आइकन स्पष्ट है और कुल मिलाकर सब कुछ ठीक है।

जब एक ही रंग का उपयोग विभिन्न तरीकों से किया जाता है, उदाहरण के लिए पाठ में, तो समस्याएं होंगी। मुख्य रंग की (बहुत) कम संतृप्त छाया का उपयोग करने का प्रयास करें, या इंटरफ़ेस में ब्रांड रंगों को शामिल करने के अन्य तरीकों की तलाश करें।

बाएँ: काले पर लाल बुरा दिखता है। दाएं: संतृप्ति कम करें और सब कुछ अच्छा दिखने लगेगा। - लगभग। अनुवाद

आपके द्वारा उपयोग किए गए किसी भी अन्य मजबूत रंग, जैसे चेतावनी या त्रुटि रंग, के लिए भी यही बात लागू होती है। Google अपने डिफ़ॉल्ट त्रुटि रंग के शीर्ष पर 40% सफेद परत ओवरले का उपयोग करता है सामग्री डिज़ाइन दिशानिर्देश डार्क मोड पर स्विच करते समय। यह एक बहुत अच्छा प्रारंभिक बिंदु है क्योंकि यह एए मानकों से मेल खाने के लिए कंट्रास्ट स्तर में सुधार करेगा। बेशक, आप सेटिंग्स को हमेशा अपनी इच्छानुसार बदल सकते हैं, लेकिन कंट्रास्ट स्तरों की जांच करना सुनिश्चित करें। वैसे, इस उद्देश्य के लिए एक उपयोगी उपकरण स्केच प्लगइन है - निरा, जो दर्शाता है कि दो परतों के बीच कितना विरोधाभास है।

पाठ के बारे में क्या?

यहां सब कुछ सरल है: कुछ भी 100% काला और 100% सफेद नहीं होना चाहिए और इसके विपरीत भी। सफेद सभी तरंग दैर्ध्य की प्रकाश तरंगों को परावर्तित करता है, काला अवशोषित करता है। यदि आप 100% सफेद पाठ को 100% काली पृष्ठभूमि पर रखते हैं, तो अक्षर प्रकाश को प्रतिबिंबित करेंगे, धुंधले हो जाएंगे और कम सुपाठ्य हो जाएंगे, जो पठनीयता पर नकारात्मक प्रभाव डालेगा।

यही बात 100% सफेद पृष्ठभूमि पर भी लागू होती है, जो शब्दों पर पूरी तरह से ध्यान केंद्रित करने के लिए बहुत अधिक प्रकाश को प्रतिबिंबित करती है। सफ़ेद रंग को थोड़ा नरम करने का प्रयास करें, पृष्ठभूमि के लिए हल्के भूरे रंग का और काली पृष्ठभूमि पर टेक्स्ट का उपयोग करें। इससे आंखों का तनाव कम होगा, बचाव होगा उनका ओवरवोल्टेज

डार्क मोड यहाँ है और दूर नहीं जाएगा

हम स्क्रीन के सामने जितना समय बिताते हैं वह लगातार बढ़ रहा है, और हर नए दिन, हमारे जीवन में नई स्क्रीनें दिखाई देती हैं, जागने से लेकर सोने तक। यह बिल्कुल नई घटना है; हमारी आँखें अभी तक देर शाम स्क्रीन समय में इस वृद्धि की आदी नहीं हैं। यहीं पर डार्क मोड काम आता है। MacOS और मटेरियल डिज़ाइन (और iOS में सबसे अधिक संभावना है) में इस सुविधा की शुरूआत के साथ, हमारा मानना ​​है कि देर-सबेर यह मोबाइल और डेस्कटॉप दोनों ही सभी एप्लिकेशन में डिफ़ॉल्ट बन जाएगा। और इसके लिए तैयार रहना बेहतर है!

डार्क मोड लागू न करने का एकमात्र कारण यह है कि जब आप पूरी तरह से 100% आश्वस्त हों कि आपका एप्लिकेशन विशेष रूप से उज्ज्वल दिन के उजाले में उपयोग किया जाता है। हालाँकि, ऐसा अक्सर नहीं होता है।

पहले संक्षेप में बताए गए बुनियादी सिद्धांतों से परे, कुछ चीजों का उल्लेख करना उचित है जिन पर डार्क मोड लागू करते समय विशेष ध्यान देने की आवश्यकता होगी।

पहुंच के संदर्भ में, डार्क मोड सबसे सुविधाजनक नहीं है, क्योंकि कंट्रास्ट आम तौर पर कम होता है, जो बदले में पठनीयता में बिल्कुल भी सुधार नहीं करता है।

स्रोत

लेकिन कल्पना करें कि आप बिस्तर के लिए तैयार हो रहे हैं, आप वास्तव में सोना चाहते हैं, लेकिन सोने से ठीक पहले, आपको याद आता है कि आपको किसी को एक अति महत्वपूर्ण संदेश भेजने की ज़रूरत है जिसके लिए एक रात भी इंतजार नहीं किया जा सकता है। आप अपना फोन पकड़ें, इसे चालू करें और आआआआह... आपके iMessage का हल्का बैकग्राउंड आपको अगले 3 घंटे तक जगाए रखेगा। जबकि गहरे रंग के बैकग्राउंड पर हल्के टेक्स्ट को सबसे सुलभ नहीं माना जाता है, लेकिन डार्क मोड होने पर यह दूसरा होगा सुविधा को दस लाख तक बढ़ाएँ। यह सब उस स्थिति पर निर्भर करता है जिसमें उपयोगकर्ता इस समय है।

इसलिए हम सोचते हैं स्वचालित डार्क मोड कितना अच्छा विचार है. यह शाम को चालू होता है और सुबह बंद हो जाता है। उपयोगकर्ता को इसके बारे में सोचने की भी आवश्यकता नहीं है, जो बहुत सुविधाजनक है। ट्विटर ने अपनी डार्क मोड सेटिंग्स के साथ बहुत अच्छा काम किया है। इसके अलावा, इन सभी OLED स्क्रीनों के लिए उनके पास केवल एक डार्क मोड और उससे भी अधिक डार्क मोड दोनों हैं, जिससे बैटरी और उससे जुड़ी हर चीज़ की बचत होती है। यहां यह नोट करना महत्वपूर्ण है: उपयोगकर्ता को जब भी वह चाहे मैन्युअल रूप से स्विच करने का अवसर दें: वापस स्विच करने की क्षमता के बिना इंटरफ़ेस को स्वचालित रूप से बदलने से बुरा कुछ भी नहीं है।

ट्विटर पर एक स्वचालित डार्क मोड है जो शाम को चालू होता है और सुबह बंद हो जाता है।

इसके अलावा, किसी थीम को विकसित करते समय यह ध्यान में रखना चाहिए कि कुछ चीजों को डार्क नहीं बनाया जा सकता है।

पेज जैसा टेक्स्ट एडिटर लें। आप इंटरफ़ेस को अंधेरा बना सकते हैं, लेकिन कागज की वास्तविक शीट का अनुकरण करते हुए शीट हमेशा सफेद रहेगी।

डार्क मोड सक्षम वाले पेज

यही बात स्केच या इलस्ट्रेटर जैसे सभी प्रकार के सामग्री निर्माण संपादकों के लिए भी लागू होती है। हालाँकि इंटरफ़ेस को गहरा बनाया जा सकता है, आप जिस आर्टबोर्ड के साथ काम करते हैं वह डिफ़ॉल्ट रूप से हमेशा सफेद रहेगा।

डार्क मोड में स्केच करें और अभी भी एक चमकदार सफेद आर्टबोर्ड है।

इसलिए ऐप की परवाह किए बिना, हमारा मानना ​​है कि डार्क मोड आपके द्वारा उपयोग किए जाने वाले ऑपरेटिंग सिस्टम में ही आ जाएंगे, जिसका अर्थ है कि भविष्य के लिए तैयारी करना सबसे अच्छा है। यह अंधेरा होगा. 

यदि आप डार्क यूआई विकसित करने के बारे में अधिक जानना चाहते हैं, तो दिशानिर्देशों को अवश्य देखें सामग्री डिजाइन, यह इस लेख के लिए हमारी जानकारी का मुख्य स्रोत था।

स्रोत: www.habr.com