रिस्पॉन्सिव और ऑप्टिमाइज़ की गई
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
रिस्पॉन्सिव और ऑप्टिमाइज़ किए गए ऐप्लिकेशन, रिस्पॉन्सिव लेआउट का इस्तेमाल करते हैं. ये लेआउट, अलग-अलग स्क्रीन साइज़ के हिसाब से अपने-आप बदल जाते हैं. इससे, उपयोगकर्ताओं को कुछ अतिरिक्त फ़ायदे मिलते हैं. साथ ही, उन्हें बेहतर और दिलचस्प अनुभव मिलता है.
रिस्पॉन्सिव डिज़ाइन की मदद से अहमियत जोड़ना
रिस्पॉन्सिव लेआउट, उपयोगकर्ता को बेहतर अनुभव देने के लिए बटन, टेक्स्ट फ़ील्ड, और डायलॉग जैसे एलिमेंट को डाइनैमिक तौर पर फ़ॉर्मैट करते हैं और उनकी पोज़िशन तय करते हैं. रिस्पॉन्सिव डिज़ाइन के तरीकों का इस्तेमाल करके, अपने ऐप्लिकेशन के उपयोगकर्ताओं को बड़ी स्क्रीन पर अपने-आप ज़्यादा फ़ायदे दें. रिस्पॉन्सिव डिज़ाइन के इस्तेमाल से, बड़ी स्क्रीन का इस्तेमाल करने वाले लोगों को बेहतर अनुभव मिलता है. जैसे, एक नज़र में ज़्यादा टेक्स्ट दिखना, स्क्रीन पर ज़्यादा कार्रवाइयां या बड़े और आसानी से ऐक्सेस किए जा सकने वाले टैप टारगेट.
Wear OS के लिए रिस्पॉन्सिव ऐप्लिकेशन और टाइल बनाना
रिस्पॉन्सिव यूज़र इंटरफ़ेस (यूआई), स्क्रीन के सभी उपलब्ध स्पेस का बेहतर तरीके से इस्तेमाल करने के लिए स्ट्रेच और बदलते हैं. इससे कोई फ़र्क़ नहीं पड़ता कि उन्हें किस साइज़ की स्क्रीन पर रेंडर किया जा रहा है. राउंड स्क्रीन पर रिस्पॉन्सिव लेआउट डिज़ाइन करते समय, स्क्रोलिंग और नॉन-स्क्रोलिंग व्यू, दोनों के लिए यूज़र इंटरफ़ेस (यूआई) एलिमेंट के स्केलिंग को बनाए रखने के साथ-साथ, लेआउट और कॉम्पोज़िशन को संतुलित बनाए रखने के लिए, अलग-अलग ज़रूरतें होती हैं. स्क्रोल किए जा सकने वाले व्यू के लिए, प्रतिशत का इस्तेमाल करके, ऊपर, नीचे, और किनारों के सभी मार्जिन तय करें. इससे, एलिमेंट को काटने से बचा जा सकता है और उन्हें सही अनुपात में स्केल किया जा सकता है. नॉन-स्क्रोलिंग व्यू के लिए, सभी मार्जिन के लिए प्रतिशत और वर्टिकल कंस्ट्रेंट का इस्तेमाल करें. इस तरह, बीच में मौजूद मुख्य कॉन्टेंट को उपलब्ध जगह के हिसाब से बड़ा किया जा सकता है.
रिस्पॉन्सिव लेआउट के लिए, कॉम्पोज़ और टाइल लागू करने के दिशा-निर्देश देखें.
check_circle
यह करें
- ऐसे स्टैंडर्ड कॉम्पोनेंट का इस्तेमाल करें जिन्हें ऐडैप्ट करने के लिए डिज़ाइन किया गया हो.
- अडैप्टिव लेआउट का इस्तेमाल करें, जो सभी स्क्रीन साइज़ के हिसाब से आसानी से अडजस्ट हो जाते हैं.
cancel
यह न करें
- अतिरिक्त जगह भरने के लिए, यूज़र इंटरफ़ेस (यूआई) एलिमेंट (टेक्स्ट फ़ील्ड, बटन, डायलॉग) को बड़ा करें.
- फ़ॉन्ट के साइज़ बढ़ाएं (अगर वे मुख्य रूप से ग्राफ़िक के मकसद से इस्तेमाल नहीं किए जा रहे हैं).
अगला चरण: उपयोगकर्ताओं के हिसाब से बदलने वाला और अलग-अलग तरह का कॉन्टेंट
अडैप्टिव और अलग ऐप्लिकेशन, उपयोगकर्ता को ऐसा अनुभव देते हैं जो छोटी स्क्रीन वाले डिवाइसों पर नहीं मिल सकता.
शुरू करें
इस पेज पर मौजूद कॉन्टेंट और कोड सैंपल कॉन्टेंट के लाइसेंस में बताए गए लाइसेंस के हिसाब से हैं. Java और OpenJDK, Oracle और/या इससे जुड़ी हुई कंपनियों के ट्रेडमार्क या रजिस्टर किए हुए ट्रेडमार्क हैं.
आखिरी बार 2025-07-27 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-07-27 (UTC) को अपडेट किया गया."],[],[],null,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]
