स्क्रोल न करने वाले ऐप्लिकेशन के लिए सामान्य लेआउट

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

रिस्पॉन्सिव और ऑप्टिमाइज़ किए गए डिज़ाइन बनाना

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

यूनीक स्क्रीन डिज़ाइन के लिए, अलग-अलग स्क्रीन साइज़ पर पूरी तरह से जांच करें. इससे यह पक्का किया जा सकता है कि कॉम्पोनेंट और एलिमेंट आसानी से अडजस्ट हो जाएं और कॉन्टेंट का क्लिप होने से बचा जा सके. हमारे प्रतिशत मार्जिन की मदद से, स्पेसर्स को असरदार तरीके से स्केल किया जा सकता है. हमारा सुझाव है कि स्मार्टवॉच की बड़ी स्क्रीन पर ज़्यादा जानकारी और बेहतर सुविधाएं देने के लिए, 225dp पर ब्रेकपॉइंट का इस्तेमाल करें.

देखें कि कॉम्पोनेंट, उपलब्ध चौड़ाई और ऊंचाई के हिसाब से अडजस्ट हो रहे हैं या नहीं

अडैप्टिव और अलग-अलग तरह के डिज़ाइन बनाना

बड़ी स्क्रीन के साइज़ पर अतिरिक्त जगह का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, 225dp पर साइज़ ब्रेकपॉइंट जोड़ें. इस ब्रेकपॉइंट की मदद से, ज़्यादा कॉन्टेंट दिखाया जा सकता है, ज़्यादा जानकारी, विकल्प, डेटा शामिल किया जा सकता है या बड़े स्क्रीन साइज़ के हिसाब से लेआउट बदला जा सकता है.

इसके लिए, हर ब्रेकपॉइंट के लिए अलग डिज़ाइन की ज़रूरत होती है. बड़ी स्क्रीन के डिज़ाइन (225 से ज़्यादा) में ये अतिरिक्त एलिमेंट शामिल किए जा सकते हैं:

मौजूदा कॉम्पोनेंट का साइज़ बढ़ाना या उनकी स्थिति बदलना

मौजूदा लेआउट में कॉन्टेंट जोड़ना

पेज पर नंबर डालने की सुविधा का इस्तेमाल करना

अगर किसी अनुभव में ज़्यादा कॉन्टेंट की ज़रूरत है, लेकिन स्क्रोल न करने वाले लेआउट को बनाए रखना है, तो वर्टिकल या हॉरिज़ॉन्टल पेजेशन वाले कई पेज वाले लेआउट का इस्तेमाल करें.

रिस्पॉन्सिव और अडैप्टिव व्यवहार

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

डिज़ाइन करते समय, स्क्रोल न होने वाली स्क्रीन को सबसे ऊपर, बीच में, और सबसे नीचे वाले सेक्शन में बांटना सबसे अच्छा होता है. इस तरह, क्लिपिंग से बचने के लिए, सबसे ऊपर और सबसे नीचे वाले सेक्शन में अंदरूनी मार्जिन जोड़े जा सकते हैं. हालांकि, अपने बीच वाले सेक्शन को स्क्रीन की पूरी चौड़ाई का फ़ायदा लेने दें. अगर स्क्रीन का साइज़ छोटा है, तो स्क्रीन के एलिमेंट को कंट्रोल करने के लिए, रोटरी स्क्रोल बटन का इस्तेमाल करें. ऐसा इसलिए, क्योंकि टैप करने से शायद आपको बेहतर अनुभव न मिले.

चेकलिस्ट

• ऐसे लेआउट बनाएं जो सभी स्क्रीन साइज़ पर सही दिखें.
• ऊपर, नीचे, और किनारों के लिए सुझाए गए मार्जिन लागू करें.
• उन जगहों पर मार्जिन को प्रतिशत वैल्यू में तय करें जहां कॉन्टेंट को क्लिप किया जा सकता है.
• लेआउट की सीमाओं का इस्तेमाल करें, ताकि एलिमेंट स्क्रीन के स्पेस का बेहतर तरीके से इस्तेमाल कर सकें और अलग-अलग डिवाइस के साइज़ के हिसाब से बैलेंस बनाए रख सकें.
• अगर समय टेक्स्ट का इस्तेमाल किया जाता है, तो उसे पेज के सबसे ऊपर वाले सेक्शन में शामिल करें, ताकि वह उस पर ओवरलैप न हो (ज़्यादा जानकारी के लिए, सबसे ऊपर गैप वाले प्रोग्रेस इंडिकेटर देखें)
• सीमित जगह का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, किनारों पर बटन इस्तेमाल करें.
• ज़्यादा कॉन्टेंट दिखाने या बड़ी स्क्रीन पर मौजूद कॉन्टेंट को आसानी से पढ़ने के लिए, 225dp पर ब्रेकपॉइंट लागू करें.

फ़ुल स्क्रीन पर गतिविधि की स्थिति दिखाने वाले इंडिकेटर

प्रोग्रेस इंडिकेटर के व्यवहार में कोई बदलाव नहीं होता, क्योंकि यह स्क्रीन साइज़ के हिसाब से अपने-आप अडजस्ट हो जाता है. हालांकि, स्पेस का बेहतर तरीके से इस्तेमाल करने के लिए, बीच के हिस्से पर प्रॉपोर्टेशनल (प्रतिशत) मार्जिन और पैडिंग लागू करें. बड़ी स्क्रीन पर कॉम्पोनेंट का साइज़ या संख्या बढ़ाने के लिए, ब्रेकपॉइंट का भी इस्तेमाल करें.

अलग-अलग तरह के अनुभव बनाना

स्क्रोल न करने वाले लेआउट को पसंद के मुताबिक बनाया जा सकता है. हालांकि, इनमें स्क्रीन पर ज़्यादा कॉन्टेंट नहीं जोड़ा जा सकता. साथ ही, इनमें यह तय करना मुश्किल होता है कि किस तरह के कॉम्पोनेंट सबसे सही काम करेंगे. बड़े गोल बटन के बजाय आइकॉन बटन का इस्तेमाल करने से, सीमित जगह का बेहतर इस्तेमाल होता है. साथ ही, प्रोग्रेस इंडिकेटर और बड़े डेटा पॉइंट जैसे विज़ुअल ग्राफ़िक की मदद से, अहम जानकारी को ग्राफ़िक के तौर पर दिखाया जा सकता है. स्क्रीन के बेज़ल के आस-पास मौजूद सभी एलिमेंट, स्क्रीन के साइज़ के हिसाब से अपने-आप बड़े हो जाते हैं, ताकि वे ज़्यादा असरदार हों.