नेविगेशन पैनल किसी भी टीवी ऐप्लिकेशन के लिए ज़रूरी कॉम्पोनेंट होते हैं, क्योंकि इनसे लोगों को टीवी पर कॉन्टेंट देखने की सुविधा मिलती है की मदद से अलग-अलग डेस्टिनेशन और सुविधाओं को ऐक्सेस किया जा सकता है. नेविगेशन पैनल यह ऐप्लिकेशन के इन्फ़ॉर्मेशन आर्किटेक्चर का मुख्य हिस्सा होता है. नेविगेट करने का एक तरीका है.
मोबाइल नेविगेशन पैनल के उलट, नेविगेशन पैनल चालू है टीवी की विंडो को बड़ा और छोटा किया गया है और यह उपयोगकर्ता को दिख रहा है.
संसाधन
| टाइप | लिंक | स्थिति |
|---|---|---|
| डिज़ाइन | डिज़ाइन सोर्स (Figma) | उपलब्ध है |
| लागू करना |
Jetpack Compose (नेविगेशनड्रॉर)
Jetpack Compose (MoodनेविगेशनDrawer) |
उपलब्ध है |
हाइलाइट
- डेस्टिनेशन को उपयोगकर्ता की ज़रूरत के हिसाब से क्रम में लगाया जाता है. इसमें उपयोगकर्ताओं को अक्सर पहले डेस्टिनेशन और मिलते-जुलते डेस्टिनेशन को एक साथ ग्रुप किया जाता है.
- स्टैंडर्ड और मॉडल नेविगेशन, दोनों के लिए नेविगेशन रेल ज़रूरी है छोटा करने पर ड्रॉर.
वैरिएंट
नेविगेशन पैनल के स्टाइल दो तरह के होते हैं:
- स्टैंडर्ड नेविगेशन पैनल — इसमें बड़ा किया जाता है पेज के कॉन्टेंट को अलग रखते हुए, नेविगेशन के लिए अतिरिक्त जगह बनाना.
- मोडल नेविगेशन पैनल — ओवरले को ऐप्लिकेशन के कॉन्टेंट पर एक स्क्रिम से लगाया जाता है. इससे पैनल बड़ा होने पर रीडबिलिटी बेहतर होती है.
स्टैंडर्ड नेविगेशन पैनल
शरीर-रचना विज्ञान
- सबसे ऊपर मौजूद सेक्शन: इसमें ऐप्लिकेशन का लोगो दिखता है. बटन के तौर पर काम करता है प्रोफ़ाइल स्विच करने या खोज कार्रवाई ट्रिगर करने के लिए. ढह गई स्थिति में, टॉप कंटेनर में सिर्फ़ आइकॉन ही दिखता है.
- नेविगेशन आइटम: नेविगेशन रेल की सुविधाओं में शामिल हर आइटम आइकन और टेक्स्ट का संयोजन, जिसमें केवल आइकन दिखाई देता है की स्थिति में नहीं है.
- नेविगेशन रेल: नेविगेशन रेल एक ऐसा कॉलम होता है जो ऐप्लिकेशन के तीन से सात डेस्टिनेशन दिखाता है, जो मुख्य मेन्यू के तौर पर काम करते हैं. हर मंज़िल इसमें एक टेक्स्ट लेबल और एक वैकल्पिक आइकॉन है. इसमें ग्रुप बनाने वाला मेन्यू आइटम को बेहतर प्रासंगिक बनाने के लिए.
- सबसे नीचे वाला सेक्शन: एक से तीन ऐक्शन बटन हो सकते हैं, जो सेटिंग, सहायता या प्रोफ़ाइल जैसे पेजों के लिए सबसे सही होते हैं.
व्यवहार
- नेविगेशन पैनल का एक्सपैंशन: स्टैंडर्ड नेविगेशन को बड़ा करने पर ड्रॉर, पेज सामग्री को विस्तारित करने के लिए जगह बनाते हैं वर्शन देखें.
- नेविगेशन अपडेट: एक नेविगेशन आइटम से दूसरे पर जाने पर, पेज नए डेस्टिनेशन पर अपने-आप अपडेट हो जाता है.
मोडल नेविगेशन पैनल
शरीर-रचना विज्ञान
- सबसे ऊपर मौजूद सेक्शन: इसमें ऐप्लिकेशन का लोगो दिखता है. स्विच करने के लिए बटन के रूप में काम करता है प्रोफ़ाइल या खोज कार्रवाई ट्रिगर करने के लिए. संक्षिप्त स्थिति में, केवल आइकन शीर्ष कंटेनर में दिखाई देता रहेगा.
- नेविगेशन आइटम: नेविगेशन रेल की सुविधाओं में शामिल हर आइटम आइकन और टेक्स्ट का संयोजन, जिसमें केवल आइकन दिखाई देता है हेडिंग को छोटा किया गया है.
- नेविगेशन रेल: वह कॉलम जो ऐप्लिकेशन के तीन से सात डेस्टिनेशन दिखाता है, जो मुख्य मेन्यू के तौर पर काम करते हैं. हर डेस्टिनेशन में एक टेक्स्ट लेबल और एक वैकल्पिक आइकॉन है, जिसमें यह मेन्यू आइटम को ग्रुप में बांटने का विकल्प देता है, ताकि कॉन्टेंट को बेहतर तरीके से संदर्भ के साथ दिखाया जा सके.
- स्क्रिम करें: नेविगेशन आइटम के टेक्स्ट को बेहतर तरीके से पढ़ने के लिए.
- सबसे नीचे वाला सेक्शन: एक से तीन ऐक्शन बटन हो सकते हैं, जो सेटिंग, सहायता या प्रोफ़ाइल जैसे पेजों के लिए सबसे सही होते हैं.
व्यवहार
- ड्रॉर एक्सपैंशन: इस पर ओवरले के तौर पर दिखता है ऐप्लिकेशन के कॉन्टेंट को सबसे ऊपर रखता है. साथ ही, ऐसा स्क्रिम भी करता है जिससे कॉन्टेंट को आसानी से पढ़ा जा सके जब पैनल को बड़ा किया जाता है.
- नेविगेशन अपडेट: ऐसा तब होता है, जब उपयोगकर्ता किसी नेविगेशन आइटम को चुनता है.
स्क्रिम
मोडल नेविगेशन पैनल के लिए, ड्रॉवर यह पक्का करता है कि पैनल का कॉन्टेंट पढ़ने लायक है. आप नेविगेशन पैनल के पीछे ग्रेडिएंट या ठोस सतह का इस्तेमाल करके अलग-अलग फ़ॉर्मैट अलग-अलग वर्शन हैं.
ग्रेडिएंट स्क्रिम
सॉलिड स्क्रिम
खास जानकारी
इस्तेमाल
ऐक्टिव इंडिकेटर
ऐक्टिव इंंडिकेटर एक विज़ुअल क्यू है, जो डिसप्ले किए गए नेविगेशन पैनल के डेस्टिनेशन को हाइलाइट करता है. आम तौर पर, इंडिकेटर को ऐसे बैकग्राउंड के आकार से दिखाया जाता है जो पैनल में मौजूद अन्य आइटम से विज़ुअल तौर पर अलग होता है. ऐक्टिव इंडिकेटर से उपयोगकर्ताओं को यह समझने में मदद मिलती है कि वे ऐप्लिकेशन में कहां हैं और किस डेस्टिनेशन को ब्राउज़ कर रहे हैं. पक्का करें कि ऐक्टिव इंंडिकेटर साफ़ तौर पर दिख रहा हो. साथ ही, नेविगेशन पैनल में मौजूद अन्य आइटम से इसे अलग करना आसान हो.
डिवाइडर (ज़रूरी नहीं)
नेविगेशन पैनल में डेस्टिनेशन के ग्रुप को अलग-अलग करने के लिए डिवाइडर का इस्तेमाल किया जा सकता है, ताकि यह बेहतर तरीके से व्यवस्थित हो सके. हालांकि, उनका कम से कम इस्तेमाल करना ज़रूरी है, क्योंकि बहुत सारे डिवाइडर की वजह से विज़ुअल नॉइज़ पैदा हो सकता है. साथ ही, इससे उपयोगकर्ताओं को ज़्यादा कॉग्निटिव ओवरलोड हो सकता है.
बैज
बैज विज़ुअल संकेत होते हैं. इन्हें उपलब्ध कराने के लिए, नेविगेशन आइटम में जोड़ा जा सकता है अतिरिक्त जानकारी. उदाहरण के लिए, बैज का इस्तेमाल इन कामों के लिए किया जा सकता है यह बताती है कि किसी स्ट्रीमिंग ऐप्लिकेशन में कितनी नई फ़िल्में उपलब्ध हैं. इस्तेमाल की जाने वाली चीज़ें बहुत कम और केवल ज़रूरत होने पर ही, जैसे कि वे यूज़र इंटरफ़ेस (यूआई) को व्यस्त और अस्त-व्यस्त दिखाएं. बैज इस्तेमाल करते समय, पक्का करें कि वे समझने में आसान होते हैं और समझ में नहीं आते उपयोगकर्ता के ऐप्लिकेशन को नेविगेट करने में रुकावट डालना.
बैज को बड़ा किया गया
बैज को छोटा किया गया
लेबल
नेविगेशन पैनल में लेबल साफ़ और कम शब्दों में होने चाहिए, ताकि वे उन्हें पढ़ना आसान होता है.
सावधान
यह न करें
यह न करें
यह न करें
नेविगेशन पैनल बुनियादी एलिमेंट होते हैं, जो आपके ऐप्लिकेशन की हैरारकी है और इसका इस्तेमाल, मुख्य तौर पर सिर्फ़ पांच से छह मुख्य लोगों को नेविगेशन डेस्टिनेशन.
यह करें
