एक सामग्री बटन एक बटन से अधिक है

सामग्री डिजाइन थीम का उपयोग करके (और अंतर) बटन कैसे स्टाइल करें

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

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

मटेरियल DIY - जानें कि इन बटनों को अपने आप बटन के .readme फ़ाइल में कैसे रीमिक्स किया जाता है।

सिनर्जी

ध्यान मार्गदर्शन ऐप

Synergee एक मेडिटेशन गाइडेंस ऐप है, जो यूजर्स को मेडिटेशन के जरिए हैप्टिक टेक्नोलॉजी और दूसरे नॉन-विजुअल साधनों के जरिए गाइड करता है। सिनर्जी के ब्रांड में निम्नलिखित विशेषताएं हैं: उज्ज्वल, विनम्र और परिष्कृत।

रंग

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

$ mdc-theme-Primary: # ded7ff;
$ mdc-theme-on-Primary: # 003db8;

प्रकार

कैडसन डेमक द्वारा निर्मित थाई और लैटिन टाइपफेस K2D के उपयोग के माध्यम से सिनर्जी ने अपने परिष्कृत ब्रांड विशेषता को व्यक्त किया। K2D में पारंपरिक थाई अक्षर शामिल हैं जो स्वाभाविक रूप से गोल और "ढलान" हैं, यह देखने के लिए शांत है कि लैटिन वर्णमाला और थाई abugida की डिजाइन विशेषताओं को कैसे कुछ अनोखे और रोमांचक रूप में रूपांतरित किया गया।

$ mdc-टाइपोग्राफी-फॉन्ट-परिवार: अनक्वॉट ("K2D, sans-serif");
$ mdc- टाइपोग्राफी-शैली-बटन: (
 फ़ॉन्ट-आकार: 14px,
 फ़ॉन्ट-वजन: 500,
 पत्र-रिक्ति: 0.05em,
);

आकार

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

$ mdc- आकार-छोटे-घटक-त्रिज्या: (जीपीएक्सएक्स);

लाल गुलाब

फूल वितरण सेवा

लाल गुलाब एक फूल वितरण सेवा है जो देने के कार्य के माध्यम से सकारात्मकता को बढ़ावा देता है और निम्नलिखित ब्रांड विशेषताओं को ग्रहण करता है: प्राकृतिक, हर्षित और सुरुचिपूर्ण।

रंग

रंग प्रणाली लाल रंग के टन का उपयोग करती है जो गुलाब की स्वाभाविकता से बात करते हैं, और विभिन्न घटकों के बीच विपरीत बनाने में आसान बनाते हैं। बटन डिफ़ॉल्ट रूप से आपके सामग्री थीम के प्राथमिक रंग का उपयोग करते हैं।

$ mdc-theme-Primary: # b31839;
$ mdc-theme-on-primary: #ffffff;

प्रकार

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

$ mdc-typography-font-family: unquote ("केबिन, संस-सेरिफ़");
$ mdc- टाइपोग्राफी-शैली-बटन: (
 फ़ॉन्ट-आकार: 14px,
 फ़ॉन्ट-वजन: 500,
 पत्र-रिक्ति: 0.05em,
);

आकार

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

$ mdc- आकार-छोटे-घटक-त्रिज्या: (4px 12px 4px 12px);

किया हुआ!

टास्क प्रबंधन अनुप्रयोग

किया हुआ! एक कार्य प्रबंधन ऐप है जो उपयोगकर्ताओं को अपने कार्यों को पूरा करने की अनुमति देने के लिए त्वरित, कॉम्पैक्ट अनुभवों पर जोर देता है, व्याकुलता मुक्त। द डन! ब्रांड में निम्नलिखित विशेषताएं हैं: पेशेवर, तेज और रसीला।

रंग

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

$ mdc-theme-Primary: # 5973bf;
$ mdc-theme-on-primary: #ffffff;

प्रकार

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

$ mdc- टाइपोग्राफी-फॉन्ट-परिवार: अनक्वोट ("लिबरे फ्रैंकलिन, संस-सेरिफ़");
$ mdc- टाइपोग्राफी-शैली-बटन: (
 फ़ॉन्ट-आकार: 14px,
 फ़ॉन्ट-वजन: 500,
 पत्र-रिक्ति: 0.02em,
 पाठ-परिवर्तन: बड़ा करें,
);

आकार

ड्रोन की आकृति प्रणाली घुमावदार या कोण कोनों के दृश्य भार को जोड़ने से रोककर ब्रांड की गति और सफलता के लिए बोलती है।

$ mdc- आकार-छोटा-घटक-त्रिज्या: (0px);

मूडी

मूड रिंग ऐप

मूडी एक रहस्यमय मूड रिंग ऐप है जो बायोमेट्रिक डेटा एकत्र करके आपके मूड को निर्धारित करता है। इसके ब्रांड में निम्नलिखित ब्रांड विशेषताएं हैं: रहस्यमय, तकनीकी और आनंदमय।

रंग

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

$ mdc-theme-Primary: # 009b3b;
$ mdc-theme-on-Primary: # 003db8;

प्रकार

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

$ mdc-टाइपोग्राफी-फॉन्ट-परिवार: अनक्वोट ("IBM Plex Mono, sans-serif");
$ mdc- टाइपोग्राफी-शैली-बटन: (
 फ़ॉन्ट-आकार: 14px,
 फ़ॉन्ट-वजन: 600,
 पत्र-रिक्ति: 0.05em,
);

आकार

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

$ mdc- आकार-छोटे-घटक-त्रिज्या: (8px);

वेवरली

पॉडकास्ट स्ट्रीमिंग ऐप

वेवरली एक पॉडकास्ट स्ट्रीमिंग सेवा है, जो पॉडकास्ट, लेख, वीडियो या संगीत जैसे किसी एक विषय के आसपास विभिन्न प्रकार की सामग्री के लिए प्लेलिस्ट के कथानक पर केंद्रित है। वेवर्ली निम्नलिखित ब्रांड विशेषताओं का प्रतीक है: मेहनती, समकालीन और क्यूरेट।

रंग

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

$ mdc-theme-Primary: # FE8A00;
$ mdc-theme-on-Primary: # 003db8;

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

प्रकार

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

$ mdc- टाइपोग्राफी-फॉन्ट-परिवार: अनक्वोट ("मॉन्सेरेट, संस-सेरिफ़");
$ mdc- टाइपोग्राफी-शैली-बटन: (
 फ़ॉन्ट-आकार: 14px,
 फ़ॉन्ट-वजन: 600,
 पत्र-रिक्ति: 0.05em,
);आकार

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

$ mdc- आकार-छोटे-घटक-त्रिज्या: (4px);

सामग्री डिजाइन + गड़बड़

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

रीमिक्स और शेयर करें जो आप बनाते हैं!
glitch.com/@material