ये कैननिकल लेआउट, ऐप्लिकेशन के लिए बेहतरीन और काम के लेआउट हैं. ये बड़ी स्क्रीन वाले डिवाइसों पर, उपयोगकर्ताओं को बेहतरीन अनुभव देते हैं.
टाइल
टाइल से, उपयोगकर्ताओं को ज़रूरी जानकारी और कार्रवाइयों का तुरंत ऐक्सेस मिलता है. वॉच फ़ेस पर स्वाइप करके, उपयोगकर्ता यह देख सकता है कि वह अपने फ़िटनेस लक्ष्यों को हासिल करने के लिए कितनी तरक्की कर रहा है. साथ ही, मौसम की जानकारी वगैरह भी देख सकता है. टाइल की मदद से, ऐप्लिकेशन लॉन्च करें या ज़रूरी टास्क तेज़ी से पूरे करें.
हमारे कॉम्पोनेंट और स्टाइल का इस्तेमाल करके, कस्टमाइज़ेशन
कुछ कॉम्पोनेंट पर, अपने ब्रैंड की स्टाइल लागू की जा सकती है. इसमें मुख्य रंग, ऐप्लिकेशन आइकॉन, फ़ॉन्ट, आइकॉन, और टाइल के अनुभव पर लागू होने वाली कोई भी विज़ुअल एसेट शामिल है.
रिस्पॉन्सिव लेआउट (तय ऊंचाई वाली स्क्रीन और प्रतिशत मार्जिन) के लिए बनाए गए
अपने कोड और डिज़ाइन लेआउट को बड़ी स्क्रीन के साइज़ के हिसाब से अडजस्ट करने के लिए, हमने उन्हें अपडेट किया है. अब इनमें रिस्पॉन्सिव व्यवहार की सुविधा पहले से मौजूद है. इसमें प्रतिशत के हिसाब से मार्जिन और पैडिंग भी शामिल है. अगर हमारे टेंप्लेट का इस्तेमाल किया जा रहा है, तो Tiles API की मदद से ये अपडेट अपने-आप इनहेरिट हो सकते हैं. इसके लिए, आपको सिर्फ़ उन लेआउट की जानकारी देनी होगी जिनमें आपने स्क्रीन साइज़ के ब्रेकपॉइंट के बाद अतिरिक्त कॉन्टेंट या कॉम्पोनेंट जोड़े हैं. बड़ी स्क्रीन के फ़ायदे पाने के बारे में पूरी जानकारी और सुझाव पाने के लिए, टाइल के बारे में हमारा दिशा-निर्देश देखें.
मार्जिन को स्क्रीन साइज़ के आधार पर, प्रतिशत वैल्यू पर सेट किया गया है, ताकि पंक्तियां उपलब्ध जगह को भर सकें, लेकिन बहुत ज़्यादा न बढ़ें और ऊपर और नीचे की तरफ़ मौजूद कर्व स्क्रीन से काटी न जाएं. टाइल की स्क्रीन की ऊंचाई तय होती है. इसलिए, हमने पैडिंग में बदलाव किया है, ताकि स्क्रीन के सीमित हिस्से का ज़्यादा से ज़्यादा इस्तेमाल किया जा सके.
प्राइमरी लेआउट और एज कॉन्टेंट लेआउट (प्रोग्रेस रिंग के साथ) के दो मुख्य टेंप्लेट के मार्जिन अलग-अलग होते हैं. हालांकि, सभी डिज़ाइन लेआउट इनमें से किसी एक पर मैप करने के लिए बनाए जाते हैं. हर टाइल के लिए तीन मुख्य सेक्शन होते हैं. साथ ही, इनमें से हर सेक्शन के लिए स्लॉट भी होते हैं. कुछ मामलों में, डिफ़ॉल्ट तौर पर मार्जिन और पैडिंग भी हो सकती है. इससे कॉन्टेंट को उपलब्ध जगह में भरने में मदद मिलती है. साथ ही, कॉन्टेंट का डिज़ाइन एक जैसा और आसानी से समझ आने वाला बना रहता है.
लागू करने के दिशा-निर्देश के लिए, ProtoLayout का इस्तेमाल करके रिस्पॉन्सिव लेआउट बनाना देखें.
अलग-अलग तरह के अनुभव बनाना
इसमें चार मुख्य कैननिकल लेआउट हैं, जिनमें 80 से ज़्यादा वैरिएशन मौजूद हैं. इनकी मदद से, अपनी ज़रूरत के मुताबिक कॉन्टेंट को अनलिमिटेड तरीके से बनाया जा सकता है. टाइल, स्लॉट पर आधारित सिस्टम पर बनाई जाती हैं. इसलिए, कैननिकल लेआउट के किसी स्लॉट को अपनी पसंद के किसी भी कॉन्टेंट से बदला जा सकता है. ऐसे में, ऐप्लिकेशन को रिस्पॉन्सिव बनाए रखें और डिज़ाइन के लिए हमारे सुझावों का पालन करें.
टाइल को पसंद के मुताबिक बनाने के लिए किए गए बदलाव सीमित होने चाहिए. साथ ही, इनसे टाइल टेंप्लेट का स्ट्रक्चर नहीं बदलना चाहिए. ऐसा इसलिए किया जाता है, ताकि जब उपयोगकर्ता अपने Wear OS डिवाइसों पर टाइल कैरसेल को स्क्रोल करें, तो उन्हें एक जैसा अनुभव मिले.
लागू करने के बारे में दिशा-निर्देश पाने के लिए, ब्रेकपॉइंट की मदद से टाइल में अलग-अलग अनुभव दें लेख पढ़ें.
बड़ी स्क्रीन के साइज़ के ब्रेकपॉइंट के बाद वैल्यू जोड़ना
बड़ी स्क्रीन के साइज़ पर अतिरिक्त जगह का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, 225dp पर साइज़ ब्रेकपॉइंट जोड़ें. इस ब्रेकपॉइंट की मदद से, ज़्यादा कॉन्टेंट दिखाया जा सकता है, ज़्यादा बटन या डेटा शामिल किया जा सकता है या लेआउट को बड़ी स्क्रीन के हिसाब से बदला जा सकता है.
स्क्रोल किए जा सकने वाले और स्क्रोल न किए जा सकने वाले ऐप्लिकेशन लेआउट
गोल स्क्रीन पर अडैप्टिव लेआउट के लिए डिज़ाइन करते समय, यूज़र इंटरफ़ेस (यूआई) एलिमेंट को स्केल करने और लेआउट और कॉम्पोज़िशन को संतुलित बनाए रखने के लिए, स्क्रोलिंग और स्क्रोल न करने वाले व्यू, दोनों की अलग-अलग ज़रूरतें होती हैं.
ऐसे ऐप्लिकेशन लेआउट जिन्हें स्क्रोल नहीं किया जा सकता
कैननिकल लेआउट और फ़ुल-स्क्रीन कॉम्पोनेंट (इनमें मीडिया और फ़िटनेस शामिल हैं)
स्क्रोल न किए जा सकने वाले ऐप्लिकेशन व्यू लेआउट में, मीडिया प्लेयर, पिकर, स्विचर, और प्रोग्रेस इंडिकेटर का इस्तेमाल करके बनाई गई खास फ़िटनेस या ट्रैकिंग स्क्रीन शामिल होती हैं. किसी भी स्क्रीन की ऊंचाई को सीमित किया जा सकता है. इससे यह पक्का होता है कि उपयोगकर्ता, विकल्पों की सूची को ब्राउज़ करने के बजाय, एक टास्क या कंट्रोल के सेट पर फ़ोकस कर सके. छोटे स्क्रीन साइज़ वाले डिवाइसों के लिए, सीमित साइज़ को ध्यान में रखकर डिज़ाइन करें. साथ ही, यह पक्का करें कि एक नज़र में जानकारी दिखे और जहां ज़रूरी हो वहां सर्कुलर स्क्रीन का इस्तेमाल करें.
रिस्पॉन्सिव डिज़ाइन (प्रतिशत मार्जिन) के लिए दिशा-निर्देश
सभी मार्जिन को प्रतिशत में तय करें. साथ ही, वर्टिकल कंस्ट्रेंट को इस तरह से तय करें कि बीच में मौजूद मुख्य कॉन्टेंट, डिसप्ले के लिए उपलब्ध जगह को भर सके.
डिज़ाइन करते समय, स्क्रोल न होने वाली स्क्रीन को सबसे ऊपर, बीच में, और सबसे नीचे वाले सेक्शन में बांटना सबसे अच्छा होता है. इस तरह, क्लिपिंग से बचने के लिए, सबसे ऊपर और सबसे नीचे वाले सेक्शन में अंदरूनी मार्जिन जोड़े जा सकते हैं. हालांकि, अपने बीच वाले सेक्शन को स्क्रीन की पूरी चौड़ाई का फ़ायदा लेने दें. अगर स्क्रीन का साइज़ छोटा है, तो स्क्रीन के एलिमेंट को कंट्रोल करने के लिए, रोटरी स्क्रोल बटन का इस्तेमाल करें. ऐसा इसलिए, क्योंकि टैप करने से शायद आपको बेहतर अनुभव न मिले.
लागू करने के बारे में दिशा-निर्देश पाने के लिए, Horologist में नॉन-स्क्रोलिंग लेआउट देखें.
अलग-अलग तरह के अनुभव बनाना
स्क्रोल न करने वाले लेआउट को पसंद के मुताबिक बनाया जा सकता है. हालांकि, इनमें स्क्रीन पर ज़्यादा कॉन्टेंट नहीं जोड़ा जा सकता. साथ ही, इनमें यह तय करना मुश्किल होता है कि किस तरह के कॉम्पोनेंट सबसे सही काम करेंगे. चिप के बजाय आइकॉन बटन का इस्तेमाल करने से, सीमित जगह का बेहतर इस्तेमाल किया जा सकता है. साथ ही, प्रोग्रेस इंडिकेटर और बड़े डेटा पॉइंट जैसे विज़ुअल ग्राफ़िक की मदद से, मुख्य जानकारी को ग्राफ़िक के तौर पर दिखाया जा सकता है.
स्क्रीन के बेज़ल के आस-पास मौजूद सभी एलिमेंट, स्क्रीन के साइज़ के साथ अपने-आप बड़े हो जाते हैं, ताकि वे ज़्यादा असरदार बन सकें.
बड़े स्क्रीन साइज़ पर ब्रेकपॉइंट के बाद वैल्यू जोड़ने का तरीका
बड़े स्क्रीन साइज़ के लिए रिस्पॉन्सिव डिज़ाइन बनाते समय, स्क्रोल न करने वाले ऐप्लिकेशन लेआउट को ज़्यादा फ़ायदा मिलता है. मौजूदा एलिमेंट, अतिरिक्त जगह को भरने के लिए बड़े हो सकते हैं. इससे, इस्तेमाल करने में आसानी होती है. साथ ही, स्क्रीन साइज़ के ब्रेकपॉइंट के बाद कॉम्पोनेंट और कॉन्टेंट दिख सकते हैं.
इस तरह के व्यवहार के कई उदाहरण, यहां दी गई सूची में दिए गए हैं:
- मीडिया प्लेयर में अतिरिक्त बटन या बड़े कंट्रोल जोड़े जा सकते हैं.
- पुष्टि करने वाले डायलॉग बॉक्स में इलस्ट्रेशन या ज़्यादा जानकारी शामिल की जा सकती है.
- फ़िटनेस स्क्रीन में ज़्यादा मेट्रिक जोड़ी जा सकती हैं और एलिमेंट का साइज़ भी बड़ा किया जा सकता है.
लागू करने से जुड़े दिशा-निर्देशों के लिए, ब्रेकपॉइंट की मदद से Wear Compose में अलग-अलग अनुभव उपलब्ध कराना लेख पढ़ें.
स्क्रोल किए जा सकने वाले ऐप्लिकेशन लेआउट
कैननिकल लेआउट
स्क्रोल किए जा सकने वाले ऐप्लिकेशन व्यू के लेआउट में, सूचियां (ScalingLazyColumn) और डायलॉग शामिल होते हैं. इन लेआउट से ज़्यादातर ऐप्लिकेशन स्क्रीन बनती हैं. साथ ही, इनमें ऐसे कॉम्पोनेंट का कलेक्शन होता है जिन्हें बड़ी स्क्रीन के साइज़ के हिसाब से बदलना पड़ता है.
देखें कि कॉम्पोनेंट रिस्पॉन्सिव हैं या नहीं. इसका मतलब है कि वे उपलब्ध चौड़ाई को भरते हैं और स्क्रीन की ज़्यादा ऊंचाई उपलब्ध होने पर, ScalingLazyColumn में बदलाव करते हैं. ये लेआउट पहले से ही रिस्पॉन्सिव तरीके से बनाए गए हैं. साथ ही, ज़्यादा जगह मिलने के फ़ायदे पाने के लिए, हमारे पास कुछ और सुझाव भी हैं.
लागू करने के दिशा-निर्देश के लिए, Horologist का इस्तेमाल करके रिस्पॉन्सिव लेआउट बनाना देखें.
रिस्पॉन्सिव डिज़ाइन (प्रतिशत मार्जिन) के लिए दिशा-निर्देश
ऊपर, नीचे, और किनारों के सभी मार्जिन को प्रतिशत में तय किया जाना चाहिए, ताकि क्लिपिंग से बचा जा सके और एलिमेंट को सही अनुपात में स्केल किया जा सके. ध्यान दें कि जब उपयोगकर्ता स्क्रोल करता है, तो पोज़िशन इंडिकेटर दिखता है. यह स्क्रीन के बेज़ल के साइज़ के हिसाब से अपने-आप अडजस्ट हो जाता है.
अलग-अलग तरह के अनुभव बनाना
स्क्रोलिंग व्यू को अपनी पसंद के मुताबिक बनाया जा सकता है. साथ ही, इसमें कॉम्पोनेंट को किसी भी क्रम में जोड़ा जा सकता है.
सबसे ऊपर और सबसे नीचे मौजूद कॉम्पोनेंट के आधार पर, सबसे ऊपर और सबसे नीचे के मार्जिन में बदलाव हो सकता है. ऐसा इसलिए किया जाता है, ताकि स्क्रीन के बढ़ते हुए कर्व की वजह से कॉन्टेंट काट-छांट न हो.
बड़ी स्क्रीन पर ब्रेकपॉइंट के बाद वैल्यू जोड़ना
स्क्रोलिंग लेआउट में, स्क्रीन फ़ोल्ड के नीचे पहले छिपी हुई जानकारी अपने-आप दिखेगी. इसलिए, आपको ज़्यादा जानकारी जोड़ने के लिए कुछ करने की ज़रूरत नहीं है. हर कॉम्पोनेंट, उपलब्ध चौड़ाई को भरता है. कुछ मामलों में, किसी कॉम्पोनेंट में टेक्स्ट की अतिरिक्त लाइनें (जैसे, कार्ड) हो सकती हैं या कॉम्पोनेंट, उपलब्ध चौड़ाई को भरने के लिए स्ट्रेच हो सकते हैं (जैसे, आइकॉन बटन).