अडैप्टिव लेआउट का इस्तेमाल शुरू करना

Wear OS नेटवर्क में ऐसे डिवाइस शामिल हैं जिनकी स्क्रीन के साइज़ अलग-अलग होते हैं. सभी उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, ऐडैप्टिव यूज़र इंटरफ़ेस (यूआई) के सिद्धांतों का इस्तेमाल करना ज़रूरी है.

अडैप्टिव यूज़र इंटरफ़ेस (यूआई) क्या है?

अडैप्टिव यूज़र इंटरफ़ेस, स्क्रीन के सभी उपलब्ध स्पेस का बेहतर तरीके से इस्तेमाल करने के लिए, स्ट्रेच और बदलते रहते हैं. इससे कोई फ़र्क़ नहीं पड़ता कि उन्हें किस साइज़ की स्क्रीन पर रेंडर किया जा रहा है.

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

स्क्रीन के मुख्य साइज़

नए अनुभवों को डिज़ाइन करते समय, रेफ़रंस के लिए इस्तेमाल होने वाले मुख्य साइज़ के बारे में जानें

स्क्रीन साइज़

लेआउट के टाइप

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

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

अडैप्टिव लेआउट और डिज़ाइन के तरीकों की मदद से वैल्यू जोड़ना

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

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

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

ऐप्लिकेशन की क्वालिटी

क्वालिटी से जुड़े हमारे दिशा-निर्देश तीन लेवल में बांटकर दिए गए हैं. तीनों टीयर के दिशा-निर्देशों का पालन करके, अपने उपयोगकर्ताओं को बेहतर अनुभव दें.

क्वालिटी के लिए दिशा-निर्देश

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

शुरू करें

रिस्पॉन्सिव और ऑप्टिमाइज़ किया गया
जिन डिवाइसों पर ऐसा किया जा सकता है उन पर उपयोगकर्ताओं को ज़्यादा कॉन्टेंट डिलीवर करें. साथ ही, रिस्पॉन्सिव लेआउट का इस्तेमाल करें, जो अलग-अलग स्क्रीन साइज़ के हिसाब से अपने-आप बदल जाते हैं.

शुरू करें

अडैप्टिव और अलग-अलग
ब्रेकपॉइंट का इस्तेमाल करके, बड़ी स्क्रीन पर बेहतरीन अनुभव दें. ये अनुभव, छोटी स्क्रीन वाले डिवाइसों पर नहीं मिल सकते.

शुरू करें

कैननिकल लेआउट का इस्तेमाल करना

कैननिकल लेआउट का इस्तेमाल करें, ताकि आपके यूज़र इंटरफ़ेस (यूआई) अलग-अलग डिवाइस साइज़ के हिसाब से आसानी से अडजस्ट हो सकें.

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

कैननिकल लेआउट