1. खास जानकारी
Google I/O 2019 में, Material Design ने गहरे रंग वाली थीम बनाने के लिए दिशा-निर्देश पेश किए थे. इससे आपके प्रॉडक्ट की मौजूदा Material थीम को बेहतर बनाया जा सकता है. हल्के रंग वाली थीम, लंबे समय तक पढ़ने के लिए बेहतर होती हैं. साथ ही, इनसे टेक्स्ट ज़्यादा आसानी से पढ़ा जा सकता है. वहीं, गहरे रंग वाली थीम से कम रोशनी में स्क्रीन देखने में आसानी होती है और आंखों पर कम दबाव पड़ता है.
Material में, डार्क थीम को डिफ़ॉल्ट लाइट थीम के साथ इस्तेमाल करने के लिए डिज़ाइन किया गया है. इससे आपके ऐप्लिकेशन की यूनीक पहचान बनी रहती है. इसमें रंग, आकार, टाइप, और एलिवेशन के लिए स्टाइल शामिल हैं. साथ ही, इसे रात के हिसाब से बनाया गया है.
इस डिज़ाइन लैब में, हम आपको मौजूदा मटीरियल थीम के आधार पर गहरे रंग वाली थीम बनाने के लिए ज़रूरी चरणों के बारे में बताएंगे. इसके लिए, हम अपनी किसी एक मटीरियल स्टडी का इस्तेमाल करेंगे.
हम Reply के साथ मिलकर काम करेंगे. यह एक ईमेल ऐप्लिकेशन है. इसे साफ़ तौर पर जानकारी देने, पढ़ने में आसान बनाने, और इस्तेमाल करने में आसान बनाने के लिए डिज़ाइन किया गया है. हम Reply की पहचान के बारे में जानेंगे. साथ ही, ऐप्लिकेशन में ब्रैंडेड मोमेंट बनाए रखने के लिए सोच-समझकर फ़ैसले लेंगे. इसके अलावा, हम ऐसी थीम तैयार करेंगे जो डार्क मोड में भी अच्छी दिखे.
हम थीम को और बेहतर बनाएंगे. साथ ही, कस्टम सर्फ़ेस कलर का इस्तेमाल करेंगे. ये कलर, गहरे रंग वाली बुनियादी थीम से अलग होंगे. इससे Reply की खास पहचान को फिर से हाइलाइट किया जा सकेगा.
ज़रूरी मटीरियल:
2. ज़रूरी फ़ाइलें इकट्ठा करना
शुरू करने से पहले, आपको हमारी Figma स्टार्टर फ़ाइल डाउनलोड करनी होगी. इस फ़ाइल में, डिज़ाइन लैब के लिए ज़रूरी सभी चीज़ें शामिल हैं.
3. अपना एनवायरमेंट सेट अप करने का तरीका
इसके बाद, आपको डिज़ाइन एनवायरमेंट सेट अप करना होगा.
सबसे पहले, Figma में साइन इन करें या खाता बनाएं.
साइन इन करने के बाद, उस फ़ाइल को इंपोर्ट करें जिसे आपने पिछले चरण में डाउनलोड किया था. इसके लिए, Figma फ़ाइलों की स्क्रीन पर सबसे ऊपर बाईं ओर मौजूद "फ़ाइल इंपोर्ट करें" आइकॉन ढूंढें. इसके बाद, "डाउनलोड" फ़ोल्डर में जाकर फ़ाइल ढूंढें.
कुछ समय निकालकर फ़ाइल को देखें. इसमें हल्के रंग वाली थीम, ऐप्लिकेशन के ब्रैंड के आधार पर पहले से तैयार किया गया टोनल पैलेट, और गहरे रंग वाली फ़ाइनल थीम की एक कॉपी शामिल है.
- दूसरे टैब में, गहरे रंग वाली थीम के लिए Material Design के दिशा-निर्देश खोलें. हम डिज़ाइन लैब में इन दिशा-निर्देशों का पालन करेंगे.
4. प्रॉडक्ट की पहचान के बारे में जानकारी
Reply के लिए डार्क थीम का इस्तेमाल शुरू करने से पहले, हमें Reply की ब्रैंडिंग से जुड़ी कुछ खास बातों को समझना होगा. इससे हमें अपनी थीम के बारे में सोच-समझकर फ़ैसले लेने में मदद मिलेगी. इससे Reply की पहचान और ब्रैंड को हल्के और गहरे रंग वाली, दोनों थीम में एक जैसा दिखाया जा सकेगा.
Reply का ब्रैंड, कम्यूनिकेशन पर ज़ोर देता है. ऐप्लिकेशन में फ़ंक्शनल क्वालिटी को प्राथमिकता दी जाती है. इसमें डिज़ाइन एलिमेंट के बजाय इस्तेमाल में आसानी को प्राथमिकता दी जाती है.
इस डिज़ाइन लैब में, Reply के लिए ब्रैंड एक्सप्रेशन के सबसे अहम एलिमेंट रंग, टाइप, और शेप हैं.
रंग
Reply की कलर थीम में, गहरे नीले-स्लेटी रंग को प्राइमरी कलर के तौर पर इस्तेमाल किया गया है. इसके साथ, नारंगी-पीले रंग को सेकंडरी कलर के तौर पर इस्तेमाल किया गया है.
सेकंडरी कलर का इस्तेमाल बहुत कम किया जाता है. इसलिए, Reply का यूज़र इंटरफ़ेस (यूआई) अक्सर मोनोक्रोमैटिक होता है. इसमें प्राइमरी कलर के अलग-अलग वर्शन का इस्तेमाल किया जाता है. इस हल्के रंग वाली थीम की वजह से, कॉन्टेंट को बिना किसी रुकावट के आसानी से पढ़ा जा सकता है. साथ ही, फ़ोटोग्राफ़िक अवतार आसानी से देखे जा सकते हैं.
इसलिए, Reply के सेकंडरी कलर का इस्तेमाल जहां भी किया जाता है वहां इसका असर बहुत ज़्यादा होता है. इससे ऐप्लिकेशन में ज़रूरी कार्रवाइयों पर ज़ोर दिया जाता है और ब्रैंड के मोमेंट को साफ़ तौर पर दिखाया जाता है.
टाइप
Reply, टेक्स्ट पर आधारित कॉन्टेंट और काम करने के तरीके पर ज़्यादा फ़ोकस करता है. इसलिए, टाइप और टाइपोग्राफ़ी, Reply की पहचान को ज़ाहिर करने के लिए ज़रूरी हैं. ऐप्लिकेशन में, टाइप स्केल के लिए पूरी तरह से Work Sans पर भरोसा किया जाता है. इसमें Work Sans के छह वर्शन का इस्तेमाल किया जाता है: Light, Regular, Medium, SemiBold, और Bold.
Work Sans फ़ॉन्ट का इस्तेमाल करके, Reply के लिए टाइप स्केल बनाया गया है. इससे Reply को एक जैसा और अनुमान लगाया जा सकने वाला टाइपोग्राफ़ी मिलती है. साथ ही, यह टाइपोग्राफ़ी नैचुरल और पढ़ने में आसान होती है.
Work Sans के डिज़ाइनर वेई हुआंग के मुताबिक, इस फ़ॉन्ट को स्क्रीन पर इस्तेमाल करने के लिए ऑप्टिमाइज़ किया गया है. इससे ईमेल या अन्य कॉन्टेंट में मौजूद टेक्स्ट को आसानी से पढ़ा जा सकता है. यह फ़ॉन्ट, शुरुआती ग्रोटेस्क फ़ॉन्ट पर आधारित है. इसलिए, यह ज़्यादा मानवीय और आकर्षक लगता है. साथ ही, इसमें ट्रैकिंग ज़्यादा होने की वजह से, इसे आसानी से पढ़ा जा सकता है.
आकार
Reply में, शेप की बारीकियां हैं. इसमें गोल और शार्प कॉम्पोनेंट को इस तरह से जोड़ा गया है कि ईमेल सूची की कार्यक्षमता और असरदार होने की पुष्टि होती है. साथ ही, मुख्य कार्रवाइयों और बड़े कॉम्पोनेंट को ज़्यादा आसान बनाया गया है.
- छोटे कॉम्पोनेंट
- मीडियम कॉम्पोनेंट
- बड़े कॉम्पोनेंट
बटन और फ़्लोटिंग ऐक्शन बटन (एफ़एबी) जैसे छोटे कॉम्पोनेंट पूरी तरह से गोल होते हैं. वहीं, ईमेल कार्ड और बॉटम ऐप्लिकेशन बार जैसे मीडियम कॉम्पोनेंट पूरी तरह से चौकोर होते हैं. खाता स्विच करने की सुविधा और बॉटम शीट जैसे बड़े कॉम्पोनेंट के कोने थोड़े गोल होते हैं.
ये शेप मिलकर, उपयोगकर्ता को यह समझने में मदद करते हैं कि वे ऐप्लिकेशन में कहां हैं और हर कॉम्पोनेंट को कैसे बनाया गया है. साथ ही, यह भी समझने में मदद करते हैं कि यह कॉम्पोनेंट, इंटरफ़ेस के बाकी हिस्सों से कैसे जुड़ा है.
5. रंगों का इस्तेमाल करना
डिफ़ॉल्ट रूप से उपलब्ध हल्के रंग वाली थीम में, Reply के ब्रैंड को दिखाने के लिए रंग का इस्तेमाल कैसे किया जाता है, यह जानने के बाद हम गहरे रंग वाली थीम के लिए, इसके रंग पैलेट में ज़रूरी बदलाव कर सकते हैं. इससे गहरे रंग वाली थीम का इस्तेमाल करना आसान हो जाएगा और वह ज़्यादा आकर्षक दिखेगी.
Material में, कलर सिस्टम टोनल पैलेट पर आधारित होते हैं. ये पैलेट, आपके ब्रैंड के रंगों का इस्तेमाल करके, मिलते-जुलते वैरिएंट का एक सेट बनाते हैं. ये वैरिएंट, एक साथ मिलकर एक ऐसा कलर सिस्टम बनाते हैं जिसे आपके ऐप्लिकेशन पर लागू किया जाता है. इससे यह पक्का होता है कि आपके ऐप्लिकेशन में स्टाइल और पढ़ने में आसानी बनी रहे.
Figma फ़ाइल में, Reply की प्राइमरी और सेकंडरी टोनल पैलेट देखे जा सकते हैं. हर पैलेट के ऊपर मौजूद हल्के रंग वाले ऐरो, Reply की लाइट थीम में इस्तेमाल की गई वैल्यू दिखाते हैं. वहीं, गहरे रंग वाले ऐरो, डार्क थीम में इस्तेमाल किए जाने वाले वैरिएंट दिखाते हैं.
Material के साथ गहरे रंग वाली थीम बनाते समय, हल्के रंग के वैरिएंट चुने जाते हैं. इससे आपका कलर सिस्टम, आंखों पर ज़ोर डाले बिना सही कंट्रास्ट बनाए रख सकता है. ज़्यादा गहरे रंग, गहरे बैकग्राउंड के साथ "वाइब्रेट" करते हैं. इस वजह से, उन्हें पढ़ना मुश्किल हो जाता है. हल्के टोन से, एलिवेटेड सतहों के रंग में बदलाव करने में भी आसानी होती है. इसके बारे में हम जल्द ही जानेंगे.
6. प्लैटफ़ॉर्म के रंगों में बदलाव करना
अब हमारे पास Reply के टोनल पैलेट और डार्क थीम में इस्तेमाल किए जाने वाले रंगों की जानकारी है. इसलिए, अब समय आ गया है कि हम अपने मॉकअप में रंग की वैल्यू को अडजस्ट करना शुरू करें.
मटेरियल डार्क थीम में, इंटरफ़ेस की सबसे निचली लेयर आम तौर पर गहरे स्लेटी रंग की होती है. इसकी हेक्स वैल्यू #121212 होती है.
- Figma फ़ाइल में, "Reply Starter" नाम का आर्टबोर्ड ढूंढें. इसके बाद, "Background" नाम की लेयर चुनें.
- स्क्रीन के दाईं ओर मौजूद इंस्पेक्टर पैनल में, "भरें" में जाकर, रंग की वैल्यू को 121212 पर सेट करें और Return दबाएं.
- आपका आर्टबोर्ड ऐसा दिखना चाहिए:
Reply के मोनोक्रोमैटिक इनबॉक्स व्यू में, ईमेल कार्ड का रंग बैकग्राउंड से थोड़ा हल्का होता है. इसलिए, हमें डार्क थीम में कार्ड के लिए भी यही तरीका अपनाना चाहिए, ताकि इनबॉक्स की विज़ुअल हैरारकी बनी रहे.
- उसी आर्टबोर्ड पर, "ईमेल कार्ड" नाम के ग्रुप को बड़ा करें. इसके बाद, "ईमेल कार्ड" नाम की सभी लेयर चुनें.
- पहले की तरह, इंस्पेक्टर पैनल में भरें वैल्यू चुनें. वैल्यू को 121212 पर सेट करें और Return दबाएं.
- अब सिर्फ़ "ईमेल कार्ड ओवरले" नाम की लेयर चुनें. इन लेयर की मदद से, हम एक ऐसा ओवरले बना पाएंगे जो ईमेल कार्ड को उनके बैकग्राउंड से अलग करता है.
- लेयर में भरें और इसे 2% ओपैसिटी पर FFFFFF पर सेट करें.
ईमेल कार्ड का रंग गहरा होने की वजह से, टेक्स्ट को पढ़ा नहीं जा सकता. इसके बाद, हम टेक्स्ट के रंगों के बारे में जानेंगे.
7. टेक्स्ट के रंगों में बदलाव करना
डार्क थीम में टेक्स्ट के रंगों को समझने के लिए, यह जानना ज़रूरी है कि मटीरियल डिज़ाइन सिस्टम में टेक्स्ट पर रंग कैसे लागू किया जाता है.
Material कॉम्पोनेंट, "ऑन" कलर के बारे में बताते हैं. इन्हें "ऑन" कलर इसलिए कहा जाता है, क्योंकि ये ऐसे रंग होते हैं जो कॉम्पोनेंट और मुख्य सर्फ़ेस के "ऊपर" दिखते हैं. ये कॉम्पोनेंट और मुख्य सर्फ़ेस, प्राइमरी, सेकेंडरी, सर्फ़ेस, बैकग्राउंड या गड़बड़ी वाले रंगों का इस्तेमाल करते हैं. "चालू" रंगों का इस्तेमाल मुख्य रूप से टेक्स्ट के लिए किया जाता है, ताकि यह पक्का किया जा सके कि टेक्स्ट इन सतहों पर पढ़ा जा सके.
Material में डिफ़ॉल्ट रूप से "चालू" रंगों के तौर पर, सफ़ेद (#FFFFFF) और काला (#000000) रंग उपलब्ध होते हैं. गहरे रंग वाले प्लैटफ़ॉर्म पर, काले या गहरे रंग का "चालू है" आइकॉन सही नहीं लगेगा. इसलिए, हम सफ़ेद रंग का इस्तेमाल करेंगे.
इस "चालू" रंग की मदद से, टेक्स्ट की हैरारकी तय करने का सिस्टम आसान है. ज़्यादा अहमियत वाले टेक्स्ट की ओपैसिटी 87% होती है, जबकि सामान्य अहमियत वाले टेक्स्ट की ओपैसिटी 60% होती है. इसके अलावा, बंद किए गए टेक्स्ट की ओपैसिटी 38% होती है.
ज़्यादा अहमियत वाले टेक्स्ट का रंग पूरी तरह से सफ़ेद नहीं होता. ऐसा इसलिए, क्योंकि जैसा कि पांचवें चरण में बताया गया है कि #FFFFFF—एक चमकदार रंग—हमारे गहरे रंग के बैकग्राउंड के साथ "वाइब्रेट" होगा. इसके अलावा, गहरे रंग के बैकग्राउंड पर बिलकुल सफ़ेद (#FFFFFF) टेक्स्ट का इस्तेमाल करने से, उसे पढ़ने में मुश्किल हो सकती है. ऐसा इसलिए, क्योंकि उस टेक्स्ट से निकलने वाली रोशनी, गहरे रंग के बैकग्राउंड पर धुंधली दिखती है.
इन सभी बातों को ध्यान में रखते हुए, आइए डार्क थीम में टेक्स्ट के रंगों को ठीक करें.
- हमारे स्टार्टर लेआउट में मौजूद सभी टेक्स्ट को आसानी से ऐक्सेस करने के लिए ग्रुप किया गया है. इनबॉक्स टेक्स्ट नाम का ग्रुप ढूंढें और उसे बड़ा करके, उसकी सभी लेयर देखें.
- "Hi -" से शुरू होने वाली सभी लेयर चुनें. ये हमारे लेआउट में, ज़्यादा अहमियत वाले सभी टेक्स्ट हैं.
- इंस्पेक्टर पैनल में, भरें को FFFFFF पर सेट करें. साथ ही, ओपैसिटी को 87% पर सेट करें.
- इनबॉक्स टेक्स्ट ग्रुप में वापस जाएं. इसके बाद, "Med -" से शुरू होने वाली सभी लेयर चुनें
- इंस्पेक्टर पैनल में, भरें को FFFFFF पर सेट करें. साथ ही, ओपैसिटी को 60% पर सेट करें.
8. कंपोनेंट के रंगों में बदलाव करना
मटीरियल डिज़ाइन के साथ बनाई गई गहरे रंग वाली थीम में, एलिवेटेड सर्फ़ेस और कॉम्पोनेंट को ओवरले का इस्तेमाल करके रंग दिया जाता है. सतह जितनी ज़्यादा ऊंची होगी, ओवरले उतना ही ज़्यादा मज़बूत और चमकदार होगा. यह ऊंचाई और क्रम को दिखाने का एक तरीका है. ऐसा तब किया जाता है, जब बैकग्राउंड इतना गहरा हो कि उसमें गहरे रंग की परछाईं को ठीक से न दिखाया जा सके.
बॉटम ऐप्लिकेशन बार
जवाब देने की सुविधा के लिए, इनबॉक्स के बाकी यूज़र इंटरफ़ेस (यूआई) के ऊपर मौजूद बॉटम ऐप्लिकेशन बार पर, हम हल्का ओवरले लागू करेंगे.
- लेयर की सूची में, Bottom app bar नाम का ग्रुप ढूंढें और उसे बड़ा करें, ताकि आपको उसकी कॉम्पोनेंट लेयर दिख सकें.
- उस ग्रुप में Surface नाम की लेयर ढूंढें. इसके बाद, उसकी Fill वैल्यू को 121212 पर सेट करें.
- इसके ऊपर मौजूद लेयर को ढूंढें. इसका नाम Surface overlay है. इसे भरें वैल्यू के तौर पर FFFFFF दें. साथ ही, इसकी ओपैसिटी 12% पर सेट करें.
फ़्लोटिंग ऐक्शन बटन
इसके बाद, हम FAB पर नया रंग लागू करेंगे. इसके लिए, उस टोनल पैलेट पर वापस जाएं जिसे हमने पहले देखा था. इसके बाद, जवाब के सेकंडरी रंग की 700 वैल्यू को चुनें.
अगर आपको अपने ऐप्लिकेशन में छोटे, लेकिन ज़्यादा असर डालने वाले कॉम्पोनेंट के लिए कोई रंग चुनना है, तो आपके पास थोड़ा ज़्यादा सैटुरेशन वाला रंग चुनने का विकल्प होता है. हालांकि, यह ज़रूरी है कि वह रंग, बैकग्राउंड के रंगों के साथ सही कंट्रास्ट बनाए रखे. हम इस विकल्प के बारे में अगले चरण में जानेंगे.
- लेयर की सूची में, FAB नाम का ग्रुप ढूंढें और उसके कॉम्पोनेंट देखने के लिए उसे बड़ा करें.
- सरफ़ेस लेयर ढूंढें और उसे चुनें. इसके फ़िल को FCC13B पर सेट करें.
चुने गए कार्ड
आपको दिख सकता है कि Reply के इनबॉक्स में, चुने गए ईमेल कार्ड के कोने पर भी वही असरदार नारंगी-पीला रंग दिखता है. यह ब्रैंडिंग का एक और अहम पल है, लेकिन यह कॉम्पोनेंट, प्लैटफ़ॉर्म या टेक्स्ट में सही तरीके से फ़िट नहीं होता.
इस तरह की स्थितियों के लिए, हमारे सेकंडरी वैरिएंट कलर (इस मामले में #FFFBE6) से शुरुआत करना सबसे अच्छा होता है. इसके बाद, पीछे की ओर जाकर ऐसा रंग ढूंढें जो Reply के फ़ंक्शनल एस्थेटिक को ध्यान में रखते हुए, सही तरीके से एक्सप्रेसिव हो. जवाब देने के लिए, हम अपने सामान्य सेकंडरी वैरिएंट का इस्तेमाल कर सकते हैं.
- Earmark नाम की लेयर चुनें और उसके Fill को FFF5A0 पर सेट करें.
9. और भी बेहतर बनाएं: कस्टम सर्फ़ेस
जैसा कि हमने पहले सीखा था, Reply में फ़्लोटिंग ऐक्शन बटन (या FAB) एक ऐसा कॉम्पोनेंट है जिस पर बहुत ज़्यादा ज़ोर दिया जाता है. यह ऐप्लिकेशन में ब्रैंडिंग के लिए भी बहुत अहम होता है. इस वजह से, हम Reply की डार्क थीम में इसके रंग को बनाए रखने का फ़ैसला कर सकते हैं. इसके लिए, Reply के ओरिजनल सेकंडरी रंग का इस्तेमाल किया जाएगा.
- लेयर की सूची में, FAB नाम का ग्रुप ढूंढें और उसके कॉम्पोनेंट देखने के लिए उसे बड़ा करें.
- सरफ़ेस लेयर ढूंढें और उसे चुनें. इसके फ़िल को वापस F9AA33 पर सेट करें.
हम Reply के मुख्य रंग को, बॉटम ऐप्लिकेशन बार और ईमेल कार्ड के लिए कस्टम सर्फ़ेस कलर के तौर पर वापस ला सकते हैं. इसके लिए, हमें सिर्फ़ ओवरले को बदलकर, टोनल पैलेट में बताए गए गहरे रंग का इस्तेमाल करना होगा.
- लेयर की सूची में, Bottom app bar नाम का ग्रुप ढूंढें और उसे बड़ा करें, ताकि आपको उसकी कॉम्पोनेंट लेयर दिख सकें.
- Surface overlay नाम की लेयर ढूंढें. इसके बाद, उसे 344955 की नई Fill वैल्यू दें. साथ ही, ओपैसिटी को 48% पर सेट करें. इससे, ब्रैंड के रंग को ज़्यादा बेहतर बनाया जा सकेगा. साथ ही, कंट्रास्ट को भी सही रखा जा सकेगा.
- लेयर की सूची में, ईमेल कार्ड ओवरले नाम की लेयर ढूंढें और उन सभी को चुनें.
- उनके भरें को ADC0CB पर सेट करें. साथ ही, ओपैसिटी को 4% पर सेट करें.
10. Wrapup
Material में, डार्क थीम को आपके प्रॉडक्ट की यूनीक पहचान के तौर पर डिज़ाइन किया गया है. यह पहचान, लाइट थीम में भी दिखती है. आपने रंग और एलिवेशन दिखाने के तरीके में कुछ आसान बदलाव करके, अपनी पहली मटीरियल डार्क थीम बना ली है. बधाई हो!
इस डिज़ाइन लैब में दिए गए चरणों को, अपने प्रॉडक्ट के लिए डार्क थीम को समझने और तय करने के फ़्रेमवर्क के तौर पर इस्तेमाल करें. साथ ही, अपने ब्रैंड और प्रॉडक्ट की प्रॉपर्टी और लक्ष्यों को हमेशा ध्यान में रखें.
गहरे रंग वाली थीम के बारे में ज़्यादा जानकारी के लिए, गहरे रंग वाली थीम के लिए Material Design स्पेसिफ़िकेशन देखें.
अगर आपका कोई सवाल है, तो @MaterialDesign on Twitter पर जाकर, हमसे कभी भी पूछें.
Google Design के YouTube चैनल पर, डिज़ाइन से जुड़े ज़्यादा कॉन्टेंट और ट्यूटोरियल के लिए बने रहें.