Android, कई तरह के डिवाइसों, फ़ॉर्मैट, और स्क्रीन साइज़ पर काम करता है. इसलिए, किसी खास पिक्सल-परफ़ेक्ट लॉकअप के लिए डिज़ाइन करना न सिर्फ़ असरदार नहीं है, बल्कि इससे उपयोगकर्ता अनुभव पर भी बुरा असर पड़ सकता है. इसके बजाय, अडैप्टिव तरीके से डिज़ाइन करें, बनाएं, और सोचें. हमने हाल ही में नए एपीआई लॉन्च किए हैं. ये एपीआई, अडैप्टिव लेआउट बनाने में मदद करने के लिए, डिज़ाइन के कुछ जाने-पहचाने कॉन्सेप्ट का इस्तेमाल करते हैं.
Pawparazzi एक सैंपल ऐप्लिकेशन है, जिसमें इन कॉन्सेप्ट को दिखाया गया है. इसे अडैप्टिव एपीआई का इस्तेमाल करके, अडैप्टिव डिज़ाइन को हाइलाइट करने के लिए डिज़ाइन और बनाया गया है. जैसे, ग्रिड और फ़्लेक्सबॉक्स.
स्क्रीन के हिसाब से लेआउट को अडजस्ट करने का मतलब सिर्फ़ ब्रेकपॉइंट के साथ डिज़ाइन करना नहीं है, बल्कि फ़्लेक्सिबल कंटेनर में कॉन्टेंट के बारे में सोचना भी है.
हर चीज़ एक ग्रिड है!
कॉन्टेंट को स्ट्रक्चर करने के लिए एक फ़्रेमवर्क होने से, डिज़ाइन को बेहतर बनाने में मदद मिलती है. साथ ही, इससे यह तय करने में मदद मिलती है कि कॉन्टेंट को कैसे अडैप्ट किया जाना चाहिए. Android में 8 dp की बेसलाइन ग्रिड होती है. हम सभी कॉन्टेंट को माइक्रो लेवल पर इससे अलाइन कर सकते हैं.
Pawparazzi, एक जैसी मॉड्यूलर ग्रिड या एक दिशा वाली कॉलम ग्रिड के बजाय, क्रम के हिसाब से लेआउट ग्रिड का इस्तेमाल करता है. इसका मतलब है कि इसमें मौजूद कॉलम और लाइनों को कॉन्टेंट के क्रम के हिसाब से तय किया जाता है.
ग्रिड का टाइप, कॉन्टेंट के हिसाब से तय किया जाना चाहिए. अपने ऐप्लिकेशन के कॉन्टेंट से शुरुआत करें और सोचें कि कॉन्टेंट को एक साथ कैसे ग्रुप किया गया है. इससे पूरे लेआउट स्ट्रक्चर को तय करने में मदद मिलती है. पेन में सोचने के बारे में ज़्यादा जानने के लिए, ग्रिड और यूनिट, कॉन्टेंट स्ट्रक्चर, और डेस्कटॉप पर शुरू करना लेख पढ़ें.
Pawparazzi के लिए मुख्य लक्ष्य, टीम के पालतू जानवरों को अलग-अलग तरीकों से दिखाना था. इसकी शुरुआत, पालतू जानवरों की खास जानकारी, पालतू जानवरों की जानकारी, और फिर रैंक किए गए पालतू जानवरों से हुई. इसका मतलब यह था कि पालतू जानवरों की गैलरी, मुख्य कॉन्टेंट वाले पैन और ग्रिड की ज़्यादा जगह लेगी. इसके बाद, नेविगेशन और फ़िल्टर एलिमेंट दिखेंगे. ज़्यादा जगह उपलब्ध होने पर, गैलरी को ज़्यादा पंक्तियों और ज़्यादा पालतू जानवरों के हिसाब से बड़ा किया जा सकता है. साथ ही, पालतू जानवरों की जानकारी एक साथ दिखाई जा सकती है. अनुकूलन के इस सिद्धांत को 'ज़्यादा कॉन्टेंट दिखाना' कहा जाता है. इसका मतलब है कि बड़े लेआउट पर ज़्यादा कॉन्टेंट दिखाया जाता है.
ऐप्लिकेशन के मुख्य लक्ष्य और कॉन्टेंट को देखकर यह तय किया गया कि लेआउट ग्रिड को कब और कैसे अडजस्ट करना होगा. जैसे, विंडो क्लास के साइज़, हिंज प्लेसमेंट, और डिवाइस स्क्रीन की दिशा.
लेआउट ग्रिड में सबग्रिड की मदद से, कॉन्टेंट के स्ट्रक्चर को ज़्यादा बेहतर बनाया जा सकता है. गैलरी खुद एक ग्रिड होती है. छोटे साइज़ के लिए, दो कॉलम वाली ग्रिड का इस्तेमाल किया जाता है.
ग्रिड, दो दिशाओं में लेआउट बनाने का कॉन्सेप्ट है. इसलिए, कॉन्टेंट को हॉरिज़ॉन्टल और वर्टिकल, दोनों दिशाओं में रखा जा सकता है.
इसका इस्तेमाल ज़्यादा दिलचस्प लेआउट बनाने या विज़ुअल हाइरार्की को ज़्यादा साफ़ तौर पर दिखाने के लिए किया जा सकता है. जैसे, 'इस हफ़्ते का पालतू जानवर' सेक्शन में, ग्रिड का इस्तेमाल सबसे ज़्यादा रैंकिंग वाले पालतू जानवरों को दिखाने के लिए किया जाता है. ग्रिड 2x4 का हो सकता है, लेकिन सबसे ऊपर वाली जगह में दो कॉलम और दो लाइनें होती हैं.
यह सब Grid API की मदद से किया जाता है.
उन कॉम्पोनेंट को फ़्लेक्स करें
ग्रिड, मैक्रो और माइक्रो कॉन्टेंट स्ट्रक्चर को कवर करता है. वहीं, फ़्लेक्सबॉक्स उन कॉम्पोनेंट के लिए मददगार होता है जिन्हें अपने कॉन्टेंट के हिसाब से रिस्पॉन्स देना होता है. इसका इस्तेमाल एक ही दिशा में चलने वाले कॉन्टेंट के लिए किया जाता है. इसमें सिर्फ़ हॉरिज़ॉन्टल या वर्टिकल का इस्तेमाल किया जाता है. उदाहरण के लिए, फ़िल्टर चिप अपने लेबल के हिसाब से काम कर सकते हैं. साथ ही, फ़िल्टर की संख्या के हिसाब से फ़िल्टर एरिया बढ़ सकता है. बड़ी स्क्रीन पर 'ज़्यादा फ़िल्टर दिखाएं' सुविधा का इस्तेमाल करके, एक साथ ज़्यादा फ़िल्टर दिखाएं.
बारीकी से की गई क्वेरी
लेआउट ग्रिड डिज़ाइन करने और ग्रिड और फ़्लेक्सबॉक्स का इस्तेमाल करने से, हम अलग-अलग स्क्रीन के लिए अडैप्टिव लेआउट की अनुमति देते हैं. साथ ही, फ़ोल्ड किए जा सकने वाले डिवाइसों जैसे यूनीक फ़ॉर्म को भी शामिल करते हैं. हालांकि, अलग-अलग उपयोगकर्ताओं के हिसाब से कॉन्टेंट दिखाने के बारे में क्या कहा जा सकता है? Android डिवाइस इस्तेमाल करने वाले लोग, किसी डिसप्ले से कनेक्ट कर सकते हैं या माउस प्लग इन कर सकते हैं! MediaQuery की मदद से, हम डिज़ाइन से जुड़े फ़ैसले ले सकते हैं. इससे, सभी संदर्भों में उपयोगकर्ताओं की ज़रूरतों को पूरा किया जा सकता है.
Pawparazzi में, इसका मतलब था कि पॉइंटर के सटीक इनपुट का फ़ायदा उठाया जाए. इसमें टारगेट एरिया छोटे और कॉन्टेंट ज़्यादा होता है.
Android AdaptiveUI के सैंपल
बड़ी स्क्रीन वाले डिवाइसों के लिए, प्रेरणा देने वाले और ऑप्टिमाइज़ किए गए डिज़ाइन देखें. लोकप्रिय ऐप्लिकेशन कैटगरी के लिए, यूज़र इंटरफ़ेस (यूआई) और यूज़र एक्सपीरियंस (यूएक्स) टेंप्लेट ब्राउज़ करें. इनमें मीडिया, क्रिएटिविटी, गेम वगैरह शामिल हैं.
