पिछले 2014 I / O इवेंट में, Google अपने नए आश्चर्य के साथ वापस आया। कोडेन लॉलीपॉप के साथ आधिकारिक तौर पर नया एंड्रॉइड अपडेट जारी करने के अलावा, Google ने अपनी नई नई डिज़ाइन भाषा, मटेरियल डिज़ाइन भी पेश की। यह एक डिजाइन प्रणाली है जो न केवल नए लॉलीपॉप उपयोगकर्ता इंटरफ़ेस में सुधार के लिए बनाई गई है, बल्कि पूरे उपकरणों और वातावरणों के लिए भी है।
मटीरियल डिज़ाइन की कुछ प्रमुख विशेषताएं हैं जो इसे अपने स्वयं के अनूठे तरीकों के साथ अन्य डिज़ाइन रुझानों में अंतर करती हैं। अपने नाम की तरह ही, यह वास्तविक सामग्रियों से प्रेरित था और उन्हें चिकना, सहज, सुंदर और सबसे इंटरैक्टिव उपयोगकर्ता अनुभव बनाने के लिए एक डिजाइन सिस्टम में मिलाया। इस पोस्ट में, हम यह देख रहे हैं कि मटेरियल डिज़ाइन के अंदर क्या है और आपको इसे लागू करने के तरीके के बारे में एक त्वरित गाइड देना है। Google के ब्लॉग के हवाले से, मैं यह कहने जा रहा हूं, "यह सामग्री डिजाइन है"।
एक परिचय
मटीरियल डिज़ाइन एक एकीकृत डिज़ाइन प्रणाली है, इसका मतलब है कि यह सभी उपलब्ध उपकरणों और प्लेटफार्मों के साथ काम करने के लिए बनाया गया था। टैबलेट, स्मार्टफोन से डेस्कटॉप और एंड्रॉइड से आईओ, विंडोज से वेब प्लेटफॉर्म तक। सभी डिज़ाइन दिखते हैं और महसूस करते हैं कि यह जहाँ भी हो वही होना चाहिए।
मुख्य सिद्धांत
सामग्री डिजाइन का निर्माण करने वाले तीन मुख्य सिद्धांत हैं। ये सामान्य रूप से सामग्री की पेशकश का सबसे मौलिक हिस्सा हैं।
- सामग्री रूपक है । मटेरियल का विकास स्पर्शशील तत्वों के अध्ययन से प्रेरित था जिसे हम हर रोज, कागज और स्याही का उपयोग करते हैं। यह ऑब्जेक्ट को हल्का बनाता है, सतह और आंदोलनों को एक दूसरे के साथ बातचीत करते समय बेहतर होता है।
- बोल्ड, ग्राफिक और जानबूझकर । टाइपोग्राफी, ग्रिड, स्पेस, स्केल, कलर और इमेजरी का उपयोग जो कि प्रिंट-बेस्ड डिज़ाइन फाउंडेशनल में उपयोग किया जाता है, सामग्री की सामग्री को बेहतर बनाता है।
- गति अर्थ प्रदान करती है । यह सबसे प्रसिद्ध चीज में से एक है। सामग्री में, आपके पास सार्थक और उचित गति, सूक्ष्म और स्पष्ट प्रतिक्रिया और कुशल और सुसंगत संक्रमण होना चाहिए।
अवयव
सामग्री डिजाइन अपने घटकों के प्रत्येक विवरण पर ध्यान देता है ताकि उनका उपयोग सार्वभौमिक रूप से किया जा सके। ये घटक आपको अद्भुत ऐप और साइट बनाने में मदद करेंगे। सामग्री द्वारा बहुत सारे घटक प्रदान किए जाते हैं जैसे बटन, स्विच, कार्ड, टेक्स्ट इनपुट, फैब (फ्लोटिंग एक्शन बटन), डायलॉग, टोस्ट, सबमेनू, टैब और बहुत कुछ। उनमें से प्रत्येक का अपना नियम और गाइड है कि उन्हें कैसे बनाया जाए ताकि आपके पास कोई असंगत तत्व न हों।
पैटर्न थिंग
घटकों के अलावा, सामग्री आपको अतिरिक्त UI के लिए कुछ बुनियादी पैटर्न भी प्रदान करती है। ये पैटर्न सामग्री के घटकों के साथ आपके द्वारा बनाए गए UI को बेहतर बनाएंगे। डेटा प्रारूप, नेविगेशन दराज, त्रुटियों, इशारों, स्क्रॉलिंग तकनीक, खोज, सेटिंग्स, लोडिंग छवियां, ताज़ा करने के लिए स्वाइप और अधिक सहित पैटर्न।
सामग्री डिजाइन रंग
मैटेरियल में रंगों को इस तरह से डिजाइन किया गया था जिससे आप असहज, अजीब और सपाट महसूस नहीं करेंगे। सड़क के संकेतों, समकालीन वास्तुकला, फुटपाथ अंकन टेप और खेल अदालतों जैसे हमारे दैनिक वातावरण से प्रेरणा लेते हुए, सामग्री डिजाइन आपको अप्रत्याशित और उच्च-उत्साही रंग लाता है। ऐप्स या साइट्स विकसित करते समय आपको अधिक सुविधा देने के लिए बहुत सारे रंग पैलेट हैं। आप अपने फ़ोटोशॉप संग्रह के लिए स्थानीय उपयोग के लिए रंग स्वैच भी डाउनलोड कर सकते हैं।
सामग्री का चिह्न
यदि आप एक Android डेवलपर हैं, तो आपको Google द्वारा प्रदान किए गए कुछ मुफ्त आइकन पैक से परिचित होना चाहिए। वे आमतौर पर मुख्य तत्व और एक्शनबार के लिए ही उपयोग किए जाते हैं। अन्य संसाधनों के लिए, हमें अन्य आइकन जैसे फ़ोल्डर, फ़ाइल, कॉपी और पेस्ट आदि को मैन्युअल रूप से खोजना होगा। मटेरियल डिज़ाइन में Google ने आपके द्वारा उपयोग किए जा सकने वाले आइकन पैक के साथ समस्या को ठीक किया है।
प्रत्येक आइकन कुछ डिज़ाइन दृष्टिकोण से गुजरे हैं जो स्पर्शनीय सामग्रियों के अध्ययन का भी उपयोग करते हैं। वे सामग्री सिद्धांत को भी बनाए रख रहे हैं, यह सुसंगत है। आप इन आइकनों को GitHub पर डाउनलोड कर सकते हैं, वे आईओएस, वेब, एंड्रॉइड या एसवीजी जैसे विभिन्न उपयोग के लिए कुछ विकल्प के साथ आते हैं। यदि आप आसान अनुकूलन के लिए एक व्यापक विकल्प चाहते हैं, तो आप शायद FlatIcon पर सामग्री डिज़ाइन आइकन पैक देखना चाहते हैं। पैक के अंदर, आपको आइकन वेक्टर (एसवीजी और ईपीएस), पीएसडी और पीएनजी संस्करण मिलेगा।
सामग्री का एनीमेशन
यह सामग्री की विशेषताएं हैं जो मुझे सबसे अधिक पसंद हैं। सामग्री में एनिमेशन बहुत वास्तविक और सहज हैं। हर एनीमेशन में एक सार्थक, सुसंगत और सही समय परिवर्तन होता है। आपको नीचे दिखाया गया gif डेमो सुंदर सामग्री एनीमेशन में से एक है। आकर्षक और संवेदनशील बातचीत प्रदान करने के लिए, Google टीम उपयोगकर्ता इनपुट प्रभाव के लिए पानी की लहर जैसा एनीमेशन भी बनाती है। इसका उपयोग ज्यादातर बटन और कार्ड पर किया जाता है।
उन विशेषताओं के बारे में मैंने बताया जो मटेरियल डिज़ाइन की पेशकश का एक छोटा सा हिस्सा हैं। सामग्री की दुनिया के बारे में अधिक जानने के लिए, प्रलेखन पृष्ठ पर जाएं।
कार्यान्वयन
डिफ़ॉल्ट रूप से, सामग्री डिज़ाइन एंड्रॉइड लॉलीपॉप के लिए नए यूआई अपडेट के रूप में आता है। सामग्री है कि सभी दिशा निर्देशों के अंदर लागू किया गया है। चूंकि सामग्री सभी प्रकार के वातावरण के लिए लक्षित है, इसलिए इसे किसी अन्य सिस्टम पर लागू करना कठिन नहीं होगा। और समुदायों के लिए धन्यवाद, उनके द्वारा बनाए गए कुछ उपकरणों के साथ यह और भी आसान है।
ये कई तरीके हैं जिनसे आप एंड्रॉइड के बाहर मटीरियल डिज़ाइन प्राप्त कर सकते हैं, उदाहरण के लिए वेब।
CSS फ्रेमवर्क का उपयोग करना
यदि आप वेब प्लेटफ़ॉर्म में सामग्री डिज़ाइन को लागू करना चाहते हैं तो यह सबसे आसान तरीका है। चौखटे के साथ, आपको बस इसे शुरू करने की आवश्यकता है, फिर उन तत्वों को लिखें जिनकी आपको आवश्यकता है। कई चौखटे हैं जिनका उपयोग आप कुछ नाम करने के लिए Materialize, Material UI या पॉलिमर जैसे कर सकते हैं। मेरी व्यक्तिगत पसंद मटेरियलाइज में आती है। इसका उपयोग करना और समझना आसान है और अच्छा डेमो के साथ महान प्रलेखन है।
दिशानिर्देशों का पालन करता है
यदि आप फ्रेमवर्क की मदद के बिना सामग्री को लागू करना चाहते हैं और सबसे अधिक कोड के साथ गड़बड़ करना पसंद करते हैं, तो आपको सामग्री दिशानिर्देशों का पालन करना चाहिए। वहां, आपको सभी सिद्धांत मिल जाएंगे और आपको सामग्री सिद्धांतों को प्राप्त करने के लिए नोटिस करना चाहिए। आप घटकों, लेआउट, एनीमेशन, रंग, पैटर्न और बहुत कुछ बनाने के लिए सभी मूल मार्गदर्शिका देखेंगे। आप आसान विकास के लिए कुछ सामग्री चेकलिस्ट देखना चाह सकते हैं।
निष्कर्ष
सामग्री डिजाइन एक महान डिजाइन प्रणाली है और वर्ष की सबसे प्रत्याशित प्रवृत्ति में से एक बन गई है। अगले कुछ महीनों में, हम इसे हर जगह देख सकते हैं। Google के इस नए अपडेट के साथ अधिक एप्लिकेशन और साइट को पॉलिश किया जाएगा।
और मटीरियल डिज़ाइन के साथ, Google ने सबसे बड़ी टेक कंपनी के रूप में अपनी श्रेष्ठता साबित की है। यह Google को न केवल खोज इंजन और मोबाइल OS क्षेत्र में बल्कि डिजाइन क्षेत्र में भी अग्रणी बनाता है। अब तक, कोई अन्य कंपनियां नहीं हैं जो Google जैसी बड़ी चीज़ को विकसित करती हैं। लेकिन अनुभव कहता है, यह लंबे समय तक नहीं रहेगा। आइए बस प्रतीक्षा करें कि अन्य कंपनियां Google के मटीरियल डिज़ाइन पर प्रतिक्रिया दें।
