Google के मटेरियल डिज़ाइन यूआई को नए रंगों, आइकनोग्राफी और टच पर फोकस के साथ नया रूप दिया जा रहा है

click fraud protection

क्रोमियम गेरिट में नए कमिट "मटीरियल डिज़ाइन 2" का संदर्भ देते प्रतीत होते हैं, जो Google की मटेरियल डिज़ाइन भाषा का एक नया और बेहतर संस्करण हो सकता है।

मटेरियल डिज़ाइन, एंड्रॉइड लॉलीपॉप के साथ लॉन्च की गई एकीकृत डिज़ाइन भाषा, फ्लैट, पेस्टल रंग पैलेट, गहराई, नरम प्रकाश व्यवस्था और यथार्थवादी भौतिकी की सुविधा देती है। इसका उद्देश्य स्क्यूओमोर्फिज्म का सहारा लिए बिना वास्तविक दुनिया की वस्तुओं की चातुर्य की नकल करना है; Google इसे प्रौद्योगिकी के "[नवीनता और संभावना" के साथ "क्लासिक सिद्धांतों" के संश्लेषण के रूप में वर्णित करता है।

2014 में मटेरियल डिज़ाइन की शुरुआत के बाद से, यह एंड्रॉइड इकोसिस्टम में जंगल की आग की तरह फैल गया है - यूट्यूब, क्रोम, जीमेल, हैंगआउट और Google कैलेंडर जैसे Google ऐप्स का उल्लेख नहीं किया गया है। फ्लोटिंग एक्शन बटन, सुखद रंग और ऊंचाई तकनीक को इसके हिस्से के रूप में उपलब्ध कराया गया है सामग्री घटक पुस्तकालय GitHub पर (एंड्रॉइड की डिज़ाइन सपोर्ट लाइब्रेरी और Google की वेब-केंद्रित मटेरियल डिज़ाइन लाइट का अनुवर्ती), जो मटेरियल लाता है एंड्रॉइड के लिए कस्टम व्यू के रूप में और वेब के लिए बंडलों के रूप में अच्छाई है जिन्हें आयात किया जा सकता है और मानक HTML की तरह उपयोग किया जा सकता है टैग.

अब, मटेरियल डिज़ाइन की चौथी वर्षगांठ की पूर्व संध्या पर, Google अपनी अगली पीढ़ी की तैयारी कर रहा है कागज और स्याही से प्रेरित सौंदर्य संबंधी: सामग्री डिज़ाइन 2. मटेरियल डिज़ाइन 2 के बारे में बहुत कम जानकारी सार्वजनिक रूप से उपलब्ध है, जिसके अस्तित्व को हमने इस सप्ताह क्रोमियम गेरिट में नई प्रतिबद्धताओं में उजागर किया है। हम कोई दावा नहीं करते कि यह एक है उचित नवीनतम मटेरियल डिज़ाइन ढाँचे का उत्तराधिकारी, लेकिन प्रतिबद्धताएँ ध्यान देने योग्य, यदि सूक्ष्म हों, रंग पैलेट, आइकनोग्राफी और टचस्क्रीन व्यवहार में परिवर्तन की ओर इशारा करती हैं।


सामग्री डिज़ाइन 2 क्रोमियम गेरिट में दिखाई देता है

फरवरी की शुरुआत में, क्रोमियम गेरिट पर नई प्रतिबद्धताओं ने क्रोम में "मटेरियल डिज़ाइन 2" यूआई लागू किया टैबस्ट्रिप—खींचने योग्य टैब जिसमें वेबपेज शीर्षक, फ़ेविकॉन और क्रोम के ऊपर "टैब बंद करें" बटन होता है पता पट्टी।

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

Chrome टैब का संग्रह.

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

कमिट कोड में गहराई से जाने पर ग्रे, लाल और लाल-गहरे क्रोमियम थीम के लिए नए "मटेरियल डिज़ाइन 2" रंग पैलेट और मानक क्रोम टूलबार और गुप्त टूलबार के लिए नए रंग दिखाई देते हैं। हमने RGB नमूने उत्पन्न करने के लिए हेक्साडेसिमल लुकअप तालिका का उपयोग किया:

मटेरियल डिज़ाइन 2 का रंग लाल है थोड़ा गहरा वर्तमान सामग्री डिज़ाइन की तुलना में लाल 800 (#C62828) और लाल 600 (#E53935), जबकि ग्रे के नए शेड्स (#3C4043, #5F6368, #BDC1C6, #F1F3F4) में हल्का, नीला रंग है। मटीरियल डिज़ाइन में पारंपरिक ग्रे रंग शामिल हैं, जहां R=G=B, जबकि यहां, B>G>R हर शेड पर (लेकिन 255 में से केवल 1-4 तक)।

मटेरियल डिज़ाइन 2-अनुपालक संस्करण क्रोम में वर्तमान बिल्ड की तुलना में अधिक चमकदार टूलबार भी होगा - यह वर्तमान भूरे रंग की योजना की तुलना में लगभग सफेद है।

यहां एक त्वरित मॉकअप दिया गया है कि लागू किए गए नए रंगों के साथ टूलबार कैसा दिखेगा:

अंत में, कमिट एक नया जोड़ता है IsTouchअनुकूलित सामग्री() को ध्वजांकित करें मटेरियल डिज़ाइन नियंत्रक, जो स्पर्श-अनुकूलित सामग्री डिज़ाइन 2 तत्वों को संदर्भित कर सकता है। हमने जनवरी की शुरुआत में इसमें सुधार के लिए Google के प्रयास के बारे में लिखा था क्रोम ओएस उपकरणों पर क्रोम वेब ब्राउज़र का टचस्क्रीन समर्थन, और यह उसी की निरंतरता प्रतीत होता है।

उदाहरण के लिए, कमिट से पता चलता है कि टचस्क्रीन डिवाइस पर, Chrome का SetStackedLayout 'हमेशा' रहेगा सक्षम।' डिफ़ॉल्ट रूप से, जब आप बहुत सारे टैब खोलते हैं, तो अन्य टैब की चौड़ाई समायोजित करने के लिए सिकुड़ जाती है नये टैब. क्रोम का स्टैक्ड लेआउट मूल टैब की चौड़ाई को बरकरार रखता है, और उनके पीछे नए टैब जोड़ता है।


सामग्री डिज़ाइन में रंग का महत्व

तो मटीरियल डिज़ाइन के व्यापक संदर्भ में नए रंगों का क्या मतलब है?

मटेरियल डिज़ाइन केवल परतों, घटकों और तत्वों और वे एक दूसरे के संबंध में कैसे व्यवहार करते हैं, उससे कहीं अधिक है। Google के डिज़ाइन मोटिफ़ के केंद्र में उच्च-कंट्रास्ट थीम, चमकीले रंग और बोल्ड हाइलाइट्स हैं - वे वही हैं जो मटेरियल डिज़ाइन-अनुपालक ऐप्स को भीड़ से अलग करते हैं।

Google नमूना प्रदान करता है रंग पट्टियाँ सभी प्लेटफार्मों पर "एक साथ अच्छी तरह से काम करने" के लिए डिज़ाइन किया गया है, और उन डेवलपर्स को प्रोत्साहित करता है जो स्रोत का लाभ उठाते हैं एक प्राथमिक ऐप रंग - जिसे अन्यथा "प्रमुख" रंग के रूप में जाना जाता है - 500 अलग-अलग संग्रह से नमूने. ("नीला", "हरा", या "बैंगनी", और अन्य मूल रंगों के बारे में सोचें।) यदि आवश्यक हो, तो वे 700 रंगों के विस्तारित संग्रह से एक द्वितीयक रंग प्राप्त करते हैं। (सबसे महत्वपूर्ण यूआई तत्वों के लिए पूरक रंग, और कम महत्वपूर्ण यूआई तत्वों के लिए अनुरूप, और सबसेट से एक तृतीयक रंग 300).

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

मटेरियल डिज़ाइन 2 के रंग पैलेट के बारे में हम जो जानते हैं, उससे पता चलता है कि Google के "प्राइमरी 500" में कम से कम कुछ नमूने, जैसे रेड 600 और 800, उनके मटेरियल डिज़ाइन पूर्ववर्तियों की तुलना में अधिक गहरे हैं। लेकिन ग्रे जैसे अन्य लोगों के साथ विपरीत व्यवहार किया जाता है -- क्रोम टैब मॉकअप में दिखाए गए ग्रे और सफेद दोनों नमूनों में ठंडा ग्रेस्केल और उच्च नीला मान हैं.


फ़िलहाल, मटेरियल डिज़ाइन 2 के बारे में हम वास्तव में बस इतना ही जानते हैं। लेकिन प्रतिबद्धताएं इस बात का संकेत हो सकती हैं कि पर्दे के पीछे कुछ हो रहा है, और अगर यह सच है, तो हम जल्द ही इसके बारे में जान सकते हैं। उम्मीद है कि Google मार्च में Android के अगले प्रमुख संस्करण Android P से पर्दा उठा देगा और Google I/O 2018 8 मई से शुरू हो जाएगा। दोनों ही मटेरियल डिज़ाइन 2 से पर्दा उठाने के प्रमुख अवसर हैं।

अद्यतन 2/4/2018: इस लेख के प्रकाशन के तुरंत बाद, प्रतिबद्धता को निजी बना दिया गया, जिसका संभावित अर्थ यह है कि इसे गुप्त रखा जाना था। हम परिवर्तनों के लिए क्रोमियम गेरिट की जाँच करते रहेंगे, और यदि हमें कोई बदलाव मिलता है तो इस लेख को अपडेट करेंगे।