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