डार्क यूआई डिजाइन करने के लिए 7 मददगार टिप्स

डार्क यूजर इंटरफेस ने लोकप्रियता हासिल की है, और कई एप्लिकेशन अब लाइट और डार्क मोड के बीच स्विच करने का विकल्प प्रदान करते हैं। हालाँकि, एक डार्क UI को लागू करना एक चुनौतीपूर्ण कार्य हो सकता है जिसके लिए उपयोग किए जाने वाले रंगों, फोंट, छवियों और रिक्ति पर सावधानीपूर्वक ध्यान देने की आवश्यकता होती है।

इन तत्वों में किसी भी गलती के परिणामस्वरूप खराब उपयोगकर्ता अनुभव हो सकता है। अपना पहला डार्क UI डिज़ाइन करते समय निम्नलिखित युक्तियों से आपको मदद मिलनी चाहिए।

1. शुद्ध काले रंग का प्रयोग न करें

गहरा UI डिज़ाइन करते समय, शुद्ध काली पृष्ठभूमि का उपयोग करने से बचें। ग्रे के डार्क शेड का उपयोग करना बेहतर है। उदाहरण के लिए, Google की सामग्री डिज़ाइन थीम रंग #121212 की सिफारिश करता है।

सफ़ेद टेक्स्ट के साथ संयुक्त काली पृष्ठभूमि में बहुत अधिक कंट्रास्ट हो सकता है और इससे आँखों पर जोर पड़ सकता है। इसके बजाय भूरे रंग के गहरे रंग आसानी से छाया, गहराई और ऊँचाई दिखा सकते हैं।

2. सुनिश्चित करें कि टेक्स्ट कंट्रास्ट डब्लुसीएजी 2.0 दिशानिर्देशों से मिलें

एक रंग संयोजन चुनें जो उचित स्तर का कंट्रास्ट प्रदान करता है, ताकि पाठ सुपाठ्य हो। डब्लुसीएजी 2.0 दिशानिर्देश बताते हैं कि टेक्स्ट या टेक्स्ट की छवियों का कंट्रास्ट अनुपात कम से कम 4.5:1 होना चाहिए और बड़े टेक्स्ट (कम से कम 18 पॉइंट या 14 पॉइंट बोल्ड) का कंट्रास्ट अनुपात कम से कम 3:1 होना चाहिए।

रंग कंट्रास्ट की जाँच के लिए कई उपकरण हैं, जिनमें लहर क्रोम एक्सटेंशन जो यह भी जांचता है कि रंग कितने सुलभ हैं।

3. राइट फॉन्ट स्टाइल चुनें

आपको अपने टेक्स्ट के आकार, वजन और लाइन की ऊंचाई सहित फ़ॉन्ट शैलियों को भी ध्यान में रखना चाहिए। यदि आप फ़ॉन्ट विकल्पों की तलाश कर रहे हैं, तो मत भूलिए कि वहाँ हैं ढेर सारी साइटें जो मुफ्त फोंट प्रदान करती हैं. फ़ॉन्ट आकार के लिए, उन मानों का उपयोग करें जो यह सुनिश्चित करने के लिए पर्याप्त हैं कि पाठ एक गहरे रंग की पृष्ठभूमि पर स्पष्ट और दृश्यमान है।

वेब पेज के लिए निम्नलिखित शैलियों पर विचार करें:

शरीर {
फुहारा परिवार: "संदेशवाहकनया", एकलस्पेस;
फ़ॉन्ट आकार: 12पिक्सल;
फ़ॉन्ट वजन: 200;
ऊंची लाईन: 1; 
रंग: #333333;
}

फ़ॉन्ट परिवार को पढ़ना मुश्किल है, फ़ॉन्ट का आकार बहुत छोटा है और फ़ॉन्ट का वजन बहुत हल्का है। ये शैलियाँ पृष्ठ को पढ़ने में कठिन बनाती हैं जैसा कि आप नीचे स्क्रीनशॉट से देख सकते हैं।

इसके बजाय नीचे कुछ उपयुक्त शैलियाँ दी गई हैं जिनका आप उपयोग कर सकते हैं।

शरीर {
फुहारा परिवार: "एरियल", सान्स सेरिफ़;
फ़ॉन्ट आकार: 16पिक्सल; 
फ़ॉन्ट वजन: 400; 
ऊंची लाईन: 1.5; 
रंग: #FFFFFF;
पृष्ठभूमि का रंग: #121212; 
}

और यहाँ परिणामी पृष्ठ है:

4. संतृप्त एक्सेंट रंगों से बचें

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

प्रदर्शित करने के लिए, इन दो बटन शैलियों पर विचार करें:

/* संतृप्त नीला */
.btn-संतृप्त-नीला {
पृष्ठभूमि का रंग: #121212;
रंग: #0e0bf6;
}
/* म्यूट नीला */
.btn-म्यूट-नीला {
पृष्ठभूमि का रंग: #121212; 
रंग: #4c5ab3;
}

गहरे रंग की पृष्ठभूमि पर संतृप्त नीला रंग बहुत चमकीला और पढ़ने में मुश्किल हो सकता है, जबकि म्यूट नीला रंग अच्छा कंट्रास्ट प्रदान करता है और पढ़ने में आसान होता है।

एक उपकरण जैसा संभाव्य एक्सेसिबिलिटी दिशानिर्देशों का पालन करने वाले रंग संयोजन उत्पन्न करने में मददगार है।

5. भारी UI बनाने से रोकने के लिए नकारात्मक स्थान का उपयोग करें

एक गहरा रंग पैलेट यूआई को उपयोगकर्ताओं के लिए भारी बना सकता है। जब ठीक से उपयोग किया जाता है, तो नकारात्मक स्थान आपको महत्वपूर्ण UI तत्वों को हाइलाइट करने और टेक्स्ट को स्कैन करने में आसान बनाने में मदद कर सकता है। पर्याप्त दूरी भी डिजाइन को साफ और अधिक आधुनिक बना सकती है।

उदाहरण के लिए लें, Apple का लैंडिंग पृष्ठ. तत्वों के बीच का स्थान पृष्ठ को बहुत आधुनिक और दृष्टिगत रूप से दिलचस्प बनाता है, जिससे महत्वपूर्ण तत्व अलग दिखाई देते हैं।

6. UI में गहराई जोड़ने के लिए विभिन्न रंगों के रंगों का उपयोग करें

हल्के यूआई डिजाइन करते समय, आप तत्वों में गहराई और ऊंचाई जोड़ने के लिए छाया का उपयोग कर सकते हैं। हालाँकि, डार्क बैकग्राउंड के कारण, डार्क UI में शैडो को देखना कभी-कभी मुश्किल होता है।

आप गहरे रंगों के कई रंगों का उपयोग करके एक गहरे UI में गहराई प्राप्त कर सकते हैं। उदाहरण के लिए, केवल एक गहरी पृष्ठभूमि के बजाय, आप बटन और मोडल जैसे विभिन्न तत्वों में एक ही रंग के हल्के रंगों को जोड़ सकते हैं।

7. सुनिश्चित करें कि आपकी छवियां डार्क UI से मेल खाती हैं

आपको लाइट मोड और डार्क मोड के लिए समान छवियों का उपयोग करने की आवश्यकता नहीं है। आप डार्क मोड का इस्तेमाल कर सकते हैं सीएसएस मीडिया क्वेरीज़ जब भी उपयोगकर्ता डार्क मोड में टॉगल करता है तो डार्क UI से मेल खाने वाली छवियों को स्विच आउट करने के लिए।

उदाहरण के लिए, डार्क मोड में अपने पृष्ठ के अनुभागों के लिए एक विशिष्ट पृष्ठभूमि पैटर्न लागू करने के लिए, आप .bgpattern वर्ग नाम का उपयोग कर सकते हैं और निम्न कोड को अपनी स्टाइलशीट में जोड़ सकते हैं।

@मीडिया (पसंद-रंग-योजना: अँधेरा) {
/* इस शैली को केवल डार्क मोड में लागू करें */
.bgpattern {
पृष्ठभूमि छवि: यूआरएल("/अँधेराजेपीजी");
 }
}

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

डार्क यूआई का उपयोग कब करें

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

आम तौर पर, डार्क यूआई उन ब्रांडों के लिए सबसे उपयुक्त होते हैं जो विलासिता, प्रतिष्ठा, अतिसूक्ष्मवाद या रहस्य को प्राथमिकता देते हैं। वे डैशबोर्ड और विज़ुअलाइज़ेशन टूल के लिए भी एक बढ़िया विकल्प हो सकते हैं।