लेआउट, स्ट्रक्चरल टेंप्लेट होते हैं. इनकी मदद से, आपके ऐप्लिकेशन में एक जैसा विज़ुअल दिखना. विज़ुअल ग्रिड, स्पेसिंग, और और सेक्शन के साथ लेआउट, यूज़र इंटरफ़ेस (यूआई) एलिमेंट.
हाइलाइट
- वेब या मोबाइल से अलग, टीवी में 16:9 का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) तय होता है.
- इस्तेमाल में आसान बनाने के लिए, हॉरिज़ॉन्टल और वर्टिकल ऐक्सिस के साथ लेआउट ऑप्टिमाइज़ करें और नियंत्रण.
सिद्धांत
टीवी के लेआउट डिज़ाइन करते समय डिज़ाइन से जुड़े फ़ैसले लेने में आपकी मदद करने के लिए दिशा-निर्देश.
बड़ी स्क्रीन के लिए डिज़ाइन करना
HDTV के लोकप्रिय होने के बाद से, 16:9 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाले आयताकार टीवी सामान्य बन गए हैं. पहले, टेलिविज़न एक स्क्वेयर आकार में बनाए जाते थे, जिसे 4:3 या 1.33 से 1 आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के नाम से जाना जाता था.
Android प्लैटफ़ॉर्म के लिए डिज़ाइन करना
डिज़ाइन करते समय, डीपी का इस्तेमाल करें. इससे Android डिवाइस की स्क्रीन की तरह, अलग-अलग डेंसिटी वाली स्क्रीन पर एलिमेंट एक जैसे दिखते हैं. इसे हमेशा 960 पिक्सल * 540 पिक्सल के एमडीपीआई रिज़ॉल्यूशन पर डिज़ाइन करें.
MDPI पर 1px = 1dp.
ऐसेट का रिज़ॉल्यूशन 1080 पिक्सल होना चाहिए. इससे Android सिस्टम, ज़रूरत के मुताबिक लेआउट एलिमेंट को 720p तक डाउनस्केल कर सकता है.
पक्का करें कि विज़िबिलिटी और निगरानी से जुड़ी सुरक्षा उपलब्ध हो
पक्का करें कि उपयोगकर्ताओं को अहम एलिमेंट हमेशा दिखते हों. ऐसा करने के लिए, एलिमेंट को बाईं और दाईं तरफ़ 5% के मार्जिन के साथ 48dp की पोज़िशन में रखें. साथ ही, लेआउट के टॉप और निचले हिस्से में 27dp का मार्जिन रखें. इससे यह पक्का होता है कि लेआउट की स्क्रीन के एलिमेंट ओवरस्कैन में हैं.
फ़ुल स्क्रीन में कॉन्टेंट दिखाएं
बैकग्राउंड स्क्रीन पर मौजूद एलिमेंट को ओवरस्कैन सेफ़ एरिया में अडजस्ट या क्लिप न करें. इसके बजाय, ऑफ़स्क्रीन एलिमेंट को कुछ हद तक दिखाने की अनुमति दें. इससे यह पक्का किया जाता है कि सभी स्क्रीन पर, बैकग्राउंड और ऑफ़स्क्रीन एलिमेंट सही तरीके से दिखें.
ऐक्सिस की मदद से ऑप्टिमाइज़ करना
इस बात पर ध्यान दें कि लोग अपने टीवी से रिमोट कंट्रोल का इस्तेमाल किस तरह करते हैं. पक्का करें कि रिमोट से आपके टीवी का इंटरफ़ेस आसानी से इस्तेमाल किया जा सके. हर दिशा (ऊपर, नीचे, बाएं, दाएं) को इस तरह से डिज़ाइन करें कि उसका मकसद साफ़ तौर पर पता चले. साथ ही, उपयोगकर्ताओं को यह समझने में मदद मिले कि विकल्पों के बड़े ग्रुप में कैसे जाना है.
लेआउट
हर डिवाइस के लिए टीवी की स्क्रीन का साइज़ अलग-अलग होता है. आधुनिक टीवी में 16:9 का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) हो, तो हमारा सुझाव है कि आप ऐप्लिकेशन को स्क्रीन का साइज़ 960 पिक्सल x 540 पिक्सल होना चाहिए. इससे यह पक्का होता है कि सभी एलिमेंट एचडी या 4K स्क्रीन के लिए, अनुपात के हिसाब से साइज़ बदला गया हो.
ओवरस्कैन मार्जिन
ओवरस्कैन मार्जिन, कॉन्टेंट और स्क्रीन के बाएं और दाएं किनारे.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
ये बॉर्डर मार्जिन, मुख्य एलिमेंट को ओवरस्कैन समस्याओं से बचाते हैं. अपने कॉन्टेंट और जानकारी को सुरक्षित रखने के लिए, 5% मार्जिन लेआउट का इस्तेमाल करें (साइड पर 58dp और ऊपर और नीचे के किनारों के लिए 28dp).
कॉलम और गटर
कॉन्टेंट को स्क्रीन की उन जगहों पर डाला जाता है जहां कॉलम और गटर होते हैं. ग्रिड सिस्टम में 12 कॉलम होते हैं. गटर बीच के बीच के स्पेस होते हैं हैं जो कॉन्टेंट को अलग-अलग हिस्सों में बांटने में मदद करते हैं.
ऐसे 12 कॉलम इस्तेमाल करें जिनकी चौड़ाई 52dp हो और उनके बीच 20dp की खाली जगह हो. दोनों तरफ़ 58dp की जगह और वर्टिकल 4dp होना चाहिए लाइनों के बीच की दूरी.
लेआउट पैटर्न
आपके लिए तय किए गए लेआउट के हिसाब से, तीन तरह के लेआउट पैटर्न उपलब्ध हैं मकसद और डिसप्ले डिवाइस: हॉरिज़ॉन्टल स्टैक लेआउट, वर्टिकल स्टैक लेआउट, और ग्रिड लेआउट.
हॉरिज़ॉन्टल स्टैक लेआउट
हॉरिज़ॉन्टल स्टैक लेआउट, कॉम्पोनेंट को हॉरिज़ॉन्टल तौर पर व्यवस्थित करता है. ये अलग-अलग साइज़, अनुपात या फ़ॉर्मैट के हिसाब से हो सकते हैं. यह लेआउट अक्सर का इस्तेमाल कॉन्टेंट और कॉम्पोनेंट को ग्रुप करने के लिए किया जाता है.
वर्टिकल स्टैक लेआउट
वर्टिकल स्टैक लेआउट, कॉम्पोनेंट को वर्टिकल तरीके से व्यवस्थित करता है, सुविधाजनक साइज़, अनुपात, और फ़ॉर्मैट की सुविधा मिलती है. आम तौर पर, यह इसका इस्तेमाल कई तरह के टेक्स्ट, इंटरैक्टिव कॉम्पोनेंट और लेआउट पैटर्न को एक साथ सेट कर सकते हैं.
ग्रिड लेआउट
ग्रिड, एक-दूसरे को काटते हुए कॉलम और पंक्तियों का संग्रह होता है. साथ ही, ग्रिड को ग्रिड कहा जाता है लेआउट इस ग्रिड में कॉन्टेंट दिखाता है. यह कॉन्टेंट को लॉजिकल तरीके से व्यवस्थित करता है इससे उपयोगकर्ताओं के लिए, नेविगेट करना और ब्राउज़ करना आसान हो जाता है.
ओवरलैप से बचने के लिए, उसके बीच की पैडिंग आइटम और फ़ोकस किए गए राज्यों के आकार में बढ़ोतरी. उदाहरण के लिए, जब कॉम्पोनेंट (जैसे कि कार्ड) को हाइलाइट किया गया हो. अगर अपग्रेड किए गए हमारे सुझाए गए प्रॉडक्ट ग्रिड लेआउट (52dp में 12 कॉलम, 20dp में गटर के साथ), सुझाए गए कॉम्पोनेंट के लेआउट और झलक.
लेआउट स्ट्रक्चर
बेहतर बनाने में आपकी मदद करने के लिए, यहां कुछ लेआउट स्ट्रक्चर दिए गए हैं फ़ैसला लेते समय, टीवी के लेआउट डिज़ाइन करते हैं. टीवी स्क्रीन को क्षैतिज रूप से विभाजित करके, यह अलग-अलग तरह के कॉम्पोनेंट, जानकारी देने, और शेयर करने में मदद कर सकता है हैरारकी और नेविगेशन लॉजिक की मदद से बनाया गया है. किसी पैनल में कई यूनिट कॉलम हो सकते हैं. हर पैनल, अलग-अलग लेआउट पैटर्न होस्ट कर सकता है, जैसे कि स्टैक लेआउट और ग्रिड लेआउट.
सिंगल-पैनल लेआउट
एक पैनल वाला लेआउट, प्राइमरी कॉन्टेंट पर लोगों का ध्यान खींचने में मदद कर सकता है. इसका इस्तेमाल उन पेजों पर करें जहां कॉन्टेंट बेहतरीन हो. साथ ही, इसमें अहम जानकारी वाले पेजों को शामिल करें.
दो पैनल वाला लेआउट
पेज पर हैरारकी के हिसाब से कॉन्टेंट दिखने पर, दो पैनल वाला लेआउट बेहतर तरीके से काम करता है. इस टूल का बड़े पैमाने पर इस्तेमाल, टास्क-फ़ॉरवर्ड करने के लिए किया जाता है.
कॉग्निटिव ओवरलोड
मुश्किल और अस्पष्ट कॉन्टेंट की वजह से लोगों को उलझन, परेशानी, और उलझन में कमी हो सकती है दिलचस्पी है. अपने डिज़ाइन को स्कैन करने लायक, व्यवस्थित, और आकर्षक बनाएं वह भी ज़रूरी जानकारी.
कॉन्टेंट का ग्रुप बनाने के लिए, बहुत सारे पैनल का इस्तेमाल करने से बचें. इससे कॉन्टेंट बनाने में सीखने-सिखाने का बेवजह लोड इस्तेमाल कर पाते हैं.
यह करें
यह न करें
एक्सप्रेस हैरारकी और नेविगेशन
पैनल, कॉन्टेंट को विज़ुअल तौर पर अलग और व्यवस्थित करते हैं. इनसे लोगों को गाइड करने में मदद मिलती है, साथ ही, ज़्यादा आसानी से इस्तेमाल किया जा सकने वाला इंटरफ़ेस तैयार कर सकता है, जो इस अनुभव को बेहतर बनाएगा.
यह करें
यह न करें
लेआउट टेंप्लेट
लेआउट टेंप्लेट, एक जैसा क्रम रखने, एक जैसा अनुभव देने, और इससे जुड़े होने के बारे में बताते हैं. डिज़ाइन एक सहज यूज़र इंटरफ़ेस (यूआई) अनुभव बनाता है, जो साफ़ तौर पर बताता है कि उपयोगकर्ता है और वे कहां जा सकते हैं.
ब्राउज़ करना
ब्राउज़र टेंप्लेट, मीडिया कॉन्टेंट "क्लस्टर" दिखाता है या पंक्तियों को वर्टिकल स्टैक में रखना चाहिए. पंक्तियों को ब्राउज़ करने के लिए उपयोगकर्ता ऊपर और नीचे नेविगेट करते हैं और किसी खास पंक्ति की सामग्री ब्राउज़ करने के लिए दाएं और बाएं नेविगेट करते हैं.
बायां ओवरले
बाईं ओर मौजूद नेविगेशन टेंप्लेट में, स्क्रीन की बाईं ओर एक ओवरले पैनल दिखता है. आम तौर पर, यह नेविगेशन या ऐसे आइटम दिखाता है जिन पर आपके काम करने के लिए, बैकग्राउंड में मौजूद कॉन्टेंट का इस्तेमाल किया जा सकता है.
दायां ओवरले
दायां ओवरले टेंप्लेट, स्क्रीन की दाईं ओर एक ओवरले पैनल दिखाता है. आम तौर पर, यह बैकग्राउंड में मौजूद कॉन्टेंट के अलावा ऐसे आइटम दिखाता है जिन पर आपने अलग से कार्रवाई की है.
बीच वाला ओवरले
बीच वाला ओवरले टेंप्लेट, मॉडल एलिमेंट दिखाता है जो किसी मौजूदा व्यू के ऊपर ओवरले करता है. इसका इस्तेमाल, आपातकालीन जानकारी देने या कोई फ़ैसला लेने के लिए किया जाता है.
निचला ओवरले
बॉटम ओवरले टेंप्लेट का इस्तेमाल, आम तौर पर बॉटम शीट के लिए किया जाता है. सबसे नीचे मौजूद शीट में, मिलता-जुलता कॉन्टेंट होता है. स्क्रीन के सबसे निचले हिस्से पर, ऐसा कॉन्टेंट होता है जो स्क्रीन के सबसे नीचे दिखता है. इनकी मदद से, मौजूदा पेज के कॉन्टेक्स्ट को बदले बिना, मिनी फ़्लो तैयार किए जा सकते हैं.
कार्रवाइयां
कार्रवाई टेंप्लेट, बाईं ओर टाइटल और सबटाइटल दिखाता है. इसमें दाईं ओर विकल्प या कार्रवाइयां दिखती हैं. आम तौर पर, उपयोगकर्ताओं को इस टेंप्लेट का इस्तेमाल करके कोई विकल्प देने या कोई कार्रवाई करने के लिए कहा जाता है.
कॉन्टेंट की जानकारी
कॉन्टेंट की जानकारी वाला टेंप्लेट, कॉन्टेंट को हॉरिज़ॉन्टल स्टैक किए गए लेआउट में दिखाता है. आम तौर पर, कॉन्टेंट में टाइटल, मेटाडेटा, कम शब्दों में जानकारी, तेज़ कार्रवाइयां, और उनसे जुड़ी जानकारी शामिल होती है.
कंपाइलेशन
कंपाइलेशन टेंप्लेट में स्क्रीन के बाईं ओर मौजूद आइटम की जानकारी, दाएं पैनल में दिखाई जाती है. जैसे, पॉडकास्ट. इसमें आइटम के एलिमेंट (जैसे, एपिसोड) भी दाएं पैनल में दिखते हैं.
ग्रिड
ग्रिड टेंप्लेट, व्यवस्थित ग्रिड में कॉन्टेंट के कलेक्शन दिखाता है. इसमें, रिमोट नेविगेशन लॉजिक और बेहतर तरीके से ब्राउज़िंग अनुभव वाला कॉन्टेंट दिखता है.
सूचना
अलर्ट टेंप्लेट, फ़ुल स्क्रीन मैसेज दिखाता है. आम तौर पर, सूचना को अनब्लॉक करने और पिछली स्क्रीन पर वापस जाने के लिए कार्रवाई करनी पड़ती है.
कार्ड कॉलम
1 कार्ड लेआउट
कार्ड की चौड़ाई — 844dp
दो कार्ड वाला लेआउट
कार्ड की चौड़ाई — 412 डीपी
3 कार्ड वाला लेआउट
कार्ड की चौड़ाई — 268dp
4 कार्ड वाला लेआउट
कार्ड की चौड़ाई — 196dp
5 कार्ड वाला लेआउट
कार्ड की चौड़ाई — 124 डीपी
