टाइल लेआउट

अपने ऐप्लिकेशन के लिए यूनीक टाइल डिज़ाइन और बनाने के लिए, ProtoLayout के Material लेआउट टेंप्लेट और सैंपल डिज़ाइन लेआउट को समझें.

ProtoLayout के Material लेआउट टेंप्लेट

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

खास सघनता और लेआउट हासिल करने के लिए, हर टेंप्लेट में वैकल्पिक स्लॉट होते हैं:

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

इन लेआउट को पसंद के मुताबिक बनाने और मुख्य कॉन्टेंट स्लॉट में कॉम्पोनेंट के अलग-अलग कॉम्बिनेशन पाने के लिए, इन अतिरिक्त लेआउट कॉम्पोनेंट का इस्तेमाल करें:

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

कैननिकल डिज़ाइन के सैंपल लेआउट

अपने ऐप्लिकेशन की टाइल डिज़ाइन करने के लिए, यहां बताए गए लेआउट टेंप्लेट और Figma डिज़ाइन टेंप्लेट में दिए गए टेंप्लेट का इस्तेमाल करें.

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

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

हम जिन एलिमेंट को पसंद के मुताबिक बनाने का सुझाव नहीं देते उनमें ये शामिल हैं:

• लेबल की मुख्य स्टाइल और पोज़िशन
• प्रोग्रेस इंडिकेटर की स्टाइल और पोज़िशन
• सबसे नीचे मौजूद कॉम्पैक्ट चिप का स्टाइल और पोज़िशन

टाइल के लेआउट कई तरह के होते हैं. इनमें से किसी एक को चुनने के लिए, यहां दी गई टॉप-लेवल की शर्तों को ध्यान में रखें. सोचें कि आपकी टाइल का मुख्य मकसद क्या है. साथ ही, यह भी सोचें कि आपको किस तरह का कॉन्टेंट दिखाना है.

टेक्स्ट पर आधारित लेआउट

यह लेआउट, PrimaryLayout टेंप्लेट का इस्तेमाल करता है.

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

छोटे स्क्रीन साइज़ वाले डिवाइसों की लंबाई को ज़्यादा से ज़्यादा बढ़ाने के लिए, सेकंडरी लेबल स्लॉट और प्राइमरी चिप स्लॉट को हटाएं.

बटन पर आधारित लेआउट

बटन-केंद्रित लेआउट में, चिप और बटन वाले लेआउट शामिल होते हैं.

बटन पर आधारित (चिप)

यह लेआउट, PrimaryLayout टेंप्लेट का इस्तेमाल करता है.

चिप कॉम्पोनेंट, मुख्य कॉन्टेंट स्लॉट में दिखता है. दो स्टैंडर्ड चिप वाले लेआउट में, छोटी स्क्रीन साइज़ के लिए लेआउट में सेकंडरी लेबल का इस्तेमाल न करें.

बटन-सेंट्रिक (बटन)

इस लेआउट में PrimaryLayout टेंप्लेट का इस्तेमाल किया जाता है.

ग्रिड लेआउट में एक से ज़्यादा बटन दिखाने के लिए, मुख्य कॉन्टेंट स्लॉट में MultiButtonLayout का इस्तेमाल करें. यह कॉम्पोनेंट, छोटी स्क्रीन वाले डिवाइसों पर ज़्यादा से ज़्यादा छह बटन और बड़ी स्क्रीन वाले डिवाइसों पर ज़्यादा बटन दिखाता है.

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

जानकारी पर आधारित लेआउट

जानकारी पर आधारित लेआउट में, प्रोग्रेस इंडिकेटर वाले और बिना प्रोग्रेस इंडिकेटर वाले लेआउट शामिल होते हैं.

प्रोग्रेस इंडिकेटर के बिना जानकारी देने वाला विजेट

यह लेआउट, PrimaryLayout टेंप्लेट का इस्तेमाल करता है.

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

प्रोग्रेस इंडिकेटर के साथ जानकारी-केंद्रित

यह लेआउट EdgeContentLayout टेंप्लेट का इस्तेमाल करता है.

प्रोग्रेस और एक मुख्य मेट्रिक दिखाने के लिए, इस लेआउट का इस्तेमाल करें. प्रोग्रेस इंडिकेटर, लेआउट के बीच में मौजूद जगह को कम कर देता है.

इस लेआउट में, प्राइमरी चिप स्लॉट को छोड़कर, प्रोग्रेस इंडिकेटर के बिना वाले लेआउट के जैसे ही स्लॉट होते हैं.

आखिरी उदाहरण में दिखाया गया लेआउट, मौसम बनाने के लिए, मुख्य कॉन्टेंट स्लॉट में MultiSlotLayout कॉम्पोनेंट का इस्तेमाल करें.

डेटा पर आधारित लेआउट

यह लेआउट, PrimaryLayout टेंप्लेट का इस्तेमाल करता है.

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

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

रिस्पॉन्सिव डिज़ाइन

नीचे दिए गए टेंप्लेट से पता चलता है कि टाइल लेआउट, बड़ी स्क्रीन वाले Wear OS डिवाइसों के हिसाब से कैसे ढल जाते हैं. इन उदाहरणों में, डिफ़ॉल्ट तौर पर लागू होने वाले व्यवहार के बारे में बताया गया है. इससे, बड़े डिसप्ले साइज़ की वजह से स्क्रीन पर ज़्यादा जगह मिलने में मदद मिलती है. ऐप्लिकेशन डेवलपर के तौर पर, कई संभावित लेआउट तय किए जा सकते हैं. साथ ही, ब्रेकपॉइंट भी तय किया जा सकता है. इससे सिस्टम को यह पता चलता है कि कौनसा लेआउट दिखाना है, "छोटी स्क्रीन" वाला या "बड़ी स्क्रीन" वाला.

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

टेक्स्ट पर आधारित डिज़ाइन लेआउट

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

बटन पर आधारित डिज़ाइन लेआउट

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

चिप के साथ बटन के हिसाब से लेआउट

गोल बटन वाला बटन-सेंट्रिक लेआउट

जानकारी पर आधारित डिज़ाइन लेआउट

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

टाइल को एक नज़र में देखने लायक बनाए रखने के लिए, अहम डेटा को प्राथमिकता दें और टाइल में बहुत ज़्यादा जानकारी न डालें.

डेटा-सेंट्रिक डिज़ाइन लेआउट

यह टेंप्लेट, जानकारी को ग्राफ़ या मिलती-जुलती इमेज में दिखाता है.

Wear OS डिवाइसों के लिए टाइल की डिज़ाइन किट डाउनलोड करना

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

Figma डिज़ाइन किट डाउनलोड करें (64 एमबी)
SHA-256 हैश: db443d4ba5cc10716719bed84b859f9d66cbd3a0a41694666a3752415434b362