लेआउट और नेविगेशन पैटर्न

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

लेआउट और नेविगेशन पेयरिंग

नेविगेशन बार और मॉडल नेविगेशन ड्रॉअर का इस्तेमाल, पैरंट लेआउट व्यू और प्राइमरी नेविगेशन डेस्टिनेशन के लिए, प्राइमरी नेविगेशन पैटर्न के तौर पर किया जाता है.

प्राइमरी नेविगेशन यूज़र इंटरफ़ेस (यूआई)

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

नेविगेशन पैनल में पांच से ज़्यादा नेविगेशन डेस्टिनेशन हो सकते हैं. हालांकि, यह पैटर्न नेविगेशन बार जितना बेहतर नहीं है. ऐसा इसलिए, क्योंकि छोटे साइज़ वाले डिवाइसों पर, उपयोगकर्ताओं को सबसे ऊपर मौजूद बार तक पहुंचने के लिए हाथ फैलाना पड़ता है.

सेकंडरी नेविगेशन टैब

Material 3 टैब और बॉटम ऐप्लिकेशन बार, सेकंडरी नेविगेशन पैटर्न हैं. इनका इस्तेमाल, प्राइमरी नेविगेशन के साथ-साथ किया जा सकता है या इन्हें चाइल्ड व्यू पर दिखाया जा सकता है.

यहां टैब, एक जैसे कॉन्टेंट को ग्रुप करने के लिए, सेकंडरी नेविगेशन लेयर के तौर पर काम करते हैं.

लेआउट से जुड़ी कार्रवाइयां

उपयोगकर्ताओं को कार्रवाइयां पूरी करने के लिए कंट्रोल उपलब्ध कराएं. आम तौर पर, टॉप बार ऐक्शन, फ़्लोट करने वाला कार्रवाई बटन (एफ़एबी) और मेन्यू शामिल होते हैं.

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

एफ़एबी वाला लेआउट

फ़्लोट करने वाला कार्रवाई बटन (एफ़एबी), जिसकी मदद से उपयोगकर्ता प्लांट गैलरी में पौधे जोड़ सकते हैं

सेकंडरी कार्रवाइयों को टॉप बार में रखा जा सकता है. इसके अलावा, अगर उन्हें संबंधित कॉन्टेंट के पास ग्रुप किया गया है, तो उन्हें पेज पर रखा जा सकता है.

शो की जानकारी (बाईं ओर) में टॉप बार में दिखने वाली अलर्ट ऐक्शन और सूची आइटम (दाईं ओर) के साथ दिखने वाला ओवरफ़्लो आइकॉन

ऐसी अन्य कार्रवाइयों के लिए जो तुरंत या अक्सर ज़रूरी नहीं होती हैं, उन्हें ओवरफ़्लो मेन्यू में जोड़ें.

अडैप्टिव नेविगेशन

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

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

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

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