Google ने पिछले सितंबर में नवीनतम एंड्रॉइड 10 जारी किया, और हालांकि यह केवल कुछ नवीनतम, सबसे प्रीमियम फोन पर उपलब्ध है, बहुत सारे फोन निर्माताओं से निकट भविष्य में अपने कुछ सबसे हालिया फोन पर एंड्रॉइड 10 रोल आउट करने की उम्मीद है।
समान पढ़ें: ग्राफिक्स डिज़ाइन के लिए सर्वश्रेष्ठ कंप्यूटर
एंड्रॉइड 10 एक सिस्टम-वाइड डार्क मोड जैसे कुछ अपडेट और शानदार फीचर लेकर आया, लेकिन वास्तविक UI अपडेट के मामले में बहुत कम। Google मटीरियल डिज़ाइन पर अटका रहा क्योंकि यह बहुत अच्छा काम करता है, इसलिए यह गाइड पिछले एंड्रॉइड वर्जन (Oreo, Pie, आदि) के लिए भी लागू होगी।
मटीरियल डिज़ाइन के लिए UI तत्वों को ठीक से डिज़ाइन करना जानने से कई चीजों में मदद मिलेगी, एंड्रॉइड डिवाइस पर अच्छा प्रदर्शन करने वाले ऐप्स विकसित करने से लेकर, सैमसंग थीम स्टोर जैसे थीम स्टोर में अपने कस्टम थीम को स्वीकृत करवाने तक।
आप Appuals पर इन अन्य विषयों को भी पढ़ सकते हैं, जो इस विषय से संबंधित बहुत सारी अतिरिक्त जानकारी देंगे:
- अपने एंड्रॉइड ऐप में डार्क थीम कैसे शामिल करें
- विजुअल स्टूडियो 2017 में एंड्रॉइड ऐप विकसित करना कैसे शुरू करें
- Android Open Source Project से कस्टम ROM कैसे बनाएं | भाग 2
- एंड्रॉइड सिस्टम UI को मैन्युअली थीम कैसे करें (कुछ चरण Android 9/10 के लिए पुराने हो सकते हैं, लेकिन समग्र जानकारी अभी भी बहुत उपयोगी है।)
मटीरियल डिज़ाइन का अवलोकन
मटीरियल डिज़ाइन कुछ महत्वपूर्ण चीजों के इर्द-गिर्द घूमता है। कलर पैलेट, रिस्पॉन्सिव ग्रिड लेआउट, और एंड्रॉइड सिस्टम UI के आसपास अपना रास्ता जानना, अगर आप थीम डिज़ाइन कर रहे हैं। ऐप्स विकसित करने के लिए, आपको उपरोक्त सभी के बारे में पता होना चाहिए, साथ ही एंड्रॉइड रनटाइम परमिशन और अनुरोध जैसी चीजें, अगर आपका ऐप उपयोगकर्ता के स्टोरेज फोल्डर, कैमरा आदि को एक्सेस करेगा।
आधिकारिक एंड्रॉइड डेवलपर का यह पेज गोपनीयता और परमिशन परिवर्तनों में बहुत गहराई से जाता है जिनके बारे में ऐप डेवलपर्स को एंड्रॉइड 10 के लिए पता होना चाहिए। लेकिन अधिकांश भाग के लिए, हम इस लेख के लिए वास्तविक ऐप विकास नहीं, बल्कि थीमिंग पर ध्यान केंद्रित करने जा रहे हैं।
कलर पैलेट
मटीरियल डिज़ाइन कलर पैलेट के लिए, Google वैरिएंट के साथ "दो रंग" प्रणाली पसंद करता है:
उदाहरण के लिए, इस फोटो की तरह। आपका प्राथमिक रंग बैंगनी होगा, द्वितीयक रंग सियान। और फिर आपके UI के अन्य तत्वों के लिए, आप बैंगनी और सियान के शेड वैरिएंट का उपयोग करेंगे, ताकि सब कुछ एक साथ मिश्रित हो जाए।
यह मटीरियल डिज़ाइन एडिटर एक बहुत उपयोगी टूल है जो आपको कलर वैरिएशन को एक साथ रखने में मदद करता है। आप पेशेवर UI/UX डिज़ाइन एजेंसियों जैसे Clay से प्रेरणा भी ले सकते हैं, या 2019 की टॉप-रेटेड वेब डिज़ाइन कंपनियों की इस सूची से।
रिस्पॉन्सिव ग्रिड लेआउट
रिस्पॉन्सिव ग्रिड लेआउट को समझने का अर्थ है पिक्सेल डेंसिटी और स्वचालित स्क्रीन अनुकूलन कैसे काम करता है, इसे समझना। अधिकांश भाग के लिए, औसत एंड्रॉइड फोन DPI 300 से 480 DPI के बीच कहीं है।
इसे ध्यान में रखते हुए, एक 300 DPI स्क्रीन आमतौर पर 4 कॉलम तक प्रदर्शित करने में सक्षम होगी:
जबकि 600 dpi वाली स्क्रीन 8 कॉलम तक प्रदर्शित करेगी।
प्रत्येक कॉलम के बीच "गटर" होते हैं, मूल रूप से वे क्षेत्र जो प्रत्येक कॉलम को अलग करते हैं। तो 360dp वाले मोबाइल पर, प्रत्येक गटर लगभग 16dp होगा।
स्क्रीन DPI को समझना
UI डिज़ाइन करते समय, चाहे वह सिस्टम UI हो या आपके ऐप का UI, आपको विभिन्न फोन आकारों के विभिन्न पिक्सेल डेंसिटी को ध्यान में रखना होगा। यहां सबसे आम स्क्रीन रिज़ॉल्यूशन और पिक्सेल डेंसिटी का चार्ट है:
इसलिए एक नियम के रूप में, जब "ग्लोबल" थीम या ऐप डिज़ाइन कर रहे हों, और किसी एक डिवाइस के लिए थीम बनाने पर ध्यान केंद्रित न कर रहे हों, तो आपको सबसे कम डेंसिटी से शुरू करना चाहिए। ऐसा इसलिए है क्योंकि अगर आप अपना डिज़ाइन 1x से शुरू करते हैं, तो आपको बस पिक्सेल में माप लेना होगा, और मान DPs में समान रहेंगे।
हालांकि, अगर आप 3.5x के लिए डिज़ाइन करते हैं, तो आपको अन्य डेंसिटी के अनुकूल होने के लिए सभी मानों को 3.5 से विभाजित करना होगा, और फिर यह कई DP मानों की गणना का सिरदर्द बन जाता है।
एंड्रॉइड 10 UI/UX डिज़ाइन के लिए अतिरिक्त टिप्स
अगर आपको रेडियो, बटन, चेकबॉक्स आदि जैसे थीम घटकों के लिए कस्टम कलर की आवश्यकता है, तो आपको विभिन्न राज्यों (चेक्ड, क्लिक्ड, आदि) को दिखाने के लिए ड्रॉएबल्स का उपयोग नहीं करना चाहिए। क्योंकि जब आप ड्रॉएबल्स का उपयोग करते हैं, तो आप नेटिव मटीरियल डिज़ाइन प्रभाव (जैसे रिपल) खो देते हैं जिसे Google ने एंड्रॉइड 9 और एंड्रॉइड 10 में व्यापक रूप से अपडेट किया।
मटीरियल डिज़ाइन के साथ काम करते समय, Google में बहुत सारी अच्छी चीजें शामिल हैं जिनका आप लाभ उठा सकते हैं, और वे आपके UI/UX के साथ अधिक स्वाभाविक रूप से प्रवाहित होंगी।
उदाहरण के लिए, यहां अंतर्निहित मटीरियल डिज़ाइन तत्वों के साथ थीमिंग घटकों के लिए कुछ कीवर्ड हैं, और आपका ऐप या UI/UX अभी भी नेटिव सिस्टम व्यवहार और UI राज्यों का आनंद लेगा।
कस्टम रंग के साथ बटन android:backgroundTint="@color/red" ----- कस्टम रंग के साथ रेडियो बटन android:buttonTint="@color/red" ----- इमेज और आइकन android:drawableTint="@color/red" ----- कस्टम रंग के साथ ProgressBar android:progressTint="@color/red"
कार्डव्यू मोड में घटकों के नीचे एक साधारण छाया दिखाने के लिए, आपको बस एलिवेशन प्रॉपर्टी का उपयोग करना होगा।
android:elevation="1dp"
टैग और पैरेंट प्रॉपर्टी को मर्ज करना बेहद उपयोगी है, ताकि आपको बेहतर नियंत्रण और प्रबंधनीय XML फाइलें मिलें।
<LinearLayout> <include layout="@layout/light_expanded_card" /> <include layout="@layout/light_collapsed_card" /> <include layout="@layout/color_indicator_strip" /> </LinearLaout>
एनिमेटेड लेआउट परिवर्तन वास्तव में आपके UX में सुधार कर सकते हैं, और लगभग सभी ViewGroup इसका सम्मान करेंगे। तो जब भी व्यू पदानुक्रम में कोई परिवर्तन होता है, तो यह एनिमेशन के साथ आएगा। थोड़े ज्ञान के साथ, आप कस्टम ट्रांज़िशन प्रभाव भी डिज़ाइन कर सकते हैं।
android:animateLayoutChanges="true"
