Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
यूएक्स पैटर्न6 मिनट पढ़ें·Updated अक्टूबर 2026·ExodeUI टीम द्वारा

टैब बार्स और बॉटम नेविगेशन: डिज़ाइन नियम जो टिके रहते हैं

iOS और Android पर टैब बार और निचला नेविगेशन कैसे डिज़ाइन करें: 3 से 5 गंतव्य, नेविगेशन नहीं क्रियाएं, लेबल, बैज, दृश्यता और एनिमेटेड सक्रिय स्थिति।

प्रत्यक्ष सारांश एवं परिभाषा

कोर टेकअवे

तीन से पांच शीर्ष-स्तरीय गंतव्यों के लिए टैब बार या निचले नेविगेशन का उपयोग करें, कार्यों के लिए नहीं। प्रत्येक टैब को एक आइकन और एक लेबल दें, जब लोग अनुभागों के बीच जा रहे हों तो बार को दृश्यमान रखें, जहां भी संभव हो "अधिक" टैब के अतिप्रवाह से बचें और बैज का संयम से उपयोग करें। सक्रिय अवस्था को सूक्ष्मता से चेतन करें ताकि लोग देख सकें कि वे कहाँ हैं।

प्लेटफ़ॉर्म क्या कहते हैं

Material Design 3 का कहना है कि नेविगेशन बार तीन से पांच गंतव्यों तक पहुंच प्रदान करते हैं, प्रत्येक एक आइकन और लेबल के साथ, और एक गंतव्य हमेशा सक्रिय रहता है। ऐप्पल के दिशानिर्देश नेविगेशन के लिए टैब बार का उपयोग करने के लिए कहते हैं, न कि कार्रवाई प्रदान करने के लिए, जब लोग अनुभागों के बीच जाते हैं तो इसे दृश्यमान रखें (सिवाय इसके कि जब कोई मॉडल इसे कवर करता है), और ओवरफ्लो टैब से बचें।

चार-टैब निचले नेविगेशन बार के साथ एक फ़ोन स्क्रीन, होम सक्रिय, नेविगेशन के बारे में नोट्स और कार्यों और आइकन प्लस लेबल के साथ
तीन से पांच गंतव्य, प्रत्येक में एक आइकन और लेबल, एक हमेशा सक्रिय।

टैब चुनना

टैब ऐप की संरचना का प्रतिनिधित्व करते हैं:

  • उन अनुभागों को चुनें जिनका लोग अक्सर उपयोग करते हैं, न कि आपके पास मौजूद प्रत्येक अनुभाग को चुनें।
  • गंतव्य ("लाइब्रेरी") के लिए संज्ञा का उपयोग करें, क्रियाओं के लिए क्रिया का नहीं ("अपलोड")।
  • क्रियाओं को स्क्रीन में ही टूलबार या फ्लोटिंग एक्शन बटन में रखें।
  • यदि आपको पाँच से अधिक की आवश्यकता है, तो "अधिक" टैब जोड़ने से पहले अपनी संरचना पर पुनर्विचार करें।

लेबल और बैज

केवल-आइकन टैब स्थान बचाते हैं लेकिन लोगों को अनुमान लगाने के लिए बाध्य करते हैं। लेबल नेविगेशन को स्पष्ट बनाते हैं, विशेष रूप से कम सामान्य आइकन के लिए। बैज को कुछ ऐसा संकेत देना चाहिए जिस पर लोगों को कार्रवाई करने की आवश्यकता है; एक बैज जो हमेशा मौजूद रहता है उस पर ध्यान देना बंद हो जाता है।

प्रति टैब स्थिति सुरक्षित रखें

ऐप्पल नोट करता है कि टैब बार लोगों को प्रत्येक सेक्शन के भीतर वर्तमान नेविगेशन स्थिति को संरक्षित करते हुए सेक्शन स्विच करने देते हैं। किसी टैब पर लौटने पर यह दिखना चाहिए कि उन्होंने कहां छोड़ा था, शीर्ष पर रीसेट नहीं होना चाहिए।

गति

सक्रिय संकेतक पर एक छोटा सा बदलाव, जैसे कि एक गोली जो स्लाइड करती है या एक आइकन जो भरता है, लोगों को यह ट्रैक करने में मदद करता है कि वे कहां हैं। इसे तेज़ रखें, लगभग 250 मिलीसेकंड से कम, प्रत्येक टैप पर प्रत्येक आइकन को उछालने से बचें, और कम गति चालू होने पर इसे सरल बनाएं।

याद रखने योग्य कुंजी Principle

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

अक्सर पूछे जाने वाले प्रश्नों

स्रोत

  1. Navigation bar guidelines — Material Design 3
  2. Tab bars — एप्पल मानव इंटरफ़ेस दिशानिर्देश

संबंधित मार्गदर्शिकाएँ एवं उदाहरण

एनिमेटेड टैब बार जिन्हें आप अनुकूलित कर सकते हैं

मुफ़्त इंटरैक्टिव टैब बार और नेविगेशन घटकों को खोलें और उनकी गति को ExodeUI में बदलें।

लाइव घटक ब्राउज़ करें
मुफ्त में प्रयास करें