बटन

बटन की मदद से उपयोगकर्ता, कार्रवाइयां या फ़्लो शुरू कर सकते हैं. अन्य प्लैटफ़ॉर्म में से चुनें अलग-अलग तरह के बटनों को हाइलाइट करना.

संसाधन

टाइप	लिंक	स्थिति
डिज़ाइन	डिज़ाइन सोर्स (Figma)	उपलब्ध है
लागू करना	Jetpack Compose	उपलब्ध है

हाइलाइट

• कार्रवाई की अहमियत के आधार पर बटन का टाइप चुनें. कार्रवाई जितनी अहम होगी, बटन पर उतना ही ज़्यादा ज़ोर दिया जाएगा.
• बटन पर साफ़ लेबल होने चाहिए, ताकि यह पता चल सके कि वे क्या कार्रवाई कर रहे हैं.
• बटनों को स्क्रीन पर तर्क के साथ रखें—जहां उपयोगकर्ताओं की उम्मीद उन्हें ढूंढना.
• बटन का ज़रूरत से ज़्यादा इस्तेमाल न करें. स्क्रीन पर बहुत ज़्यादा बटन होने पर विज़ुअल हैरारकी.

वैरिएंट

बटन छह तरह के होते हैं:

1. 'भरा गया' बटन
2. आउटलाइन बटन
3. आइकॉन बटन
4. आउटलाइन आइकॉन वाला बटन
5. बड़ा बटन
6. तस्वीर वाला बटन

कार्रवाई की अहमियत के आधार पर बटन का टाइप चुनें. कार्रवाई जितनी अहम होगी, बटन पर उतना ही ज़्यादा ज़ोर होना चाहिए.

भरा गया और आउटलाइन बटन

भरे हुए बटन सबसे ज़्यादा विज़ुअल इफ़ेक्ट देते हैं. इसलिए, इनका इस्तेमाल ज़रूरी है, फ़्लो को पूरा करने वाली आखिरी कार्रवाइयां, जैसे कि सेव करना, अभी शामिल हों, पुष्टि करना या डाउनलोड करना.

आउटलाइन वाले बटन, लोगों को बीच में फ़ोकस करने वाले बटन होते हैं. इनमें ऐसी कार्रवाइयाँ शामिल होती हैं जो ज़रूरी हैं, लेकिन ऐप्लिकेशन में मुख्य कार्रवाई नहीं हैं. आउटलाइन वाले बटन का जोड़ा साथ ही, इसमें अन्य कार्रवाई के लिए वैकल्पिक बटन भी होते हैं.

शरीर-रचना विज्ञान

1. कंटेनर
2. लेबल लेख
3. आइकॉन (ज़रूरी नहीं)

राज्य

कॉम्पोनेंट का स्टेटस विज़ुअल तौर पर दिखाना.

1. डिफ़ॉल्ट
2. फ़ोकस्ड
3. दबाया जा चुका है

खास जानकारी

आइकॉन और आउटलाइन आइकॉन वाला बटन

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

आइकॉन बटन को तीन साइज़ में बांटा जा सकता है: छोटा, मीडियम, और बड़ा.

शरीर-रचना विज्ञान

1. कंटेनर
2. आइकॉन

राज्य

1. डिफ़ॉल्ट
2. फ़ोकस्ड
3. दबाया जा चुका है

राज्यों का इस्तेमाल विज़ुअल प्रतिनिधित्व के तौर पर किया जाता है. कोई कॉम्पोनेंट या इंटरैक्टिव एलिमेंट.

खास जानकारी

वाइड बटन

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

शरीर-रचना विज्ञान

1. कंटेनर
2. लीडिंग आइकॉन
3. शीर्षक
4. उपशीर्षक

राज्य

1. डिफ़ॉल्ट
2. फ़ोकस्ड
3. दबाया जा चुका है

राज्यों का इस्तेमाल विज़ुअल प्रतिनिधित्व के तौर पर किया जाता है. कोई कॉम्पोनेंट या इंटरैक्टिव एलिमेंट.

प्रॉडक्ट के बारे में जानकारी

तस्वीर वाला बटन

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

शरीर-रचना विज्ञान

1. कंटेनर
2. लीडिंग आइकॉन
3. शीर्षक
4. उपशीर्षक
5. इमेज लेयर, जिसमें यह शामिल है:
   1. स्क्रिम (स्टेट ओवरले)
   2. ग्रेडिएंट (सतह के रंग के आधार पर)
   3. इमेज

राज्य

1. डिफ़ॉल्ट
2. फ़ोकस्ड
3. दबाया जा चुका है

राज्यों का इस्तेमाल विज़ुअल प्रतिनिधित्व के तौर पर किया जाता है. कोई कॉम्पोनेंट या इंटरैक्टिव एलिमेंट.

खास जानकारी

इस्तेमाल

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

बटन, आपके यूज़र इंटरफ़ेस (यूआई) में कार्रवाइयों को दिखाने का सिर्फ़ एक विकल्प है. ये काम न करें बहुत ज़्यादा इस्तेमाल करते हैं. स्क्रीन पर बहुत ज़्यादा बटन होने की वजह से विज़ुअल हैरारकी में रुकावट आती है.

1. कंटेनर
2. आइकॉन
3. लेबल लेख
4. शीर्षक
5. उपशीर्षक
6. इमेज

कंटेनर

बटन, कॉन्टेंट के चारों ओर एक कंटेनर दिखाते हैं. चालू होने पर कंटेनर का स्केल 1.1x तक हो जाता है फ़ोकस करें, अंदरूनी पैडिंग बनाए रखें. यहां कुछ ज़रूरी बातें बताई गई हैं कंटेनर के लिए:

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

टेक्स्ट और आइकॉन बटन कंटेनर के कोने पूरी तरह गोल होते हैं. वाइड और इमेज बटन कंटेनर में 12dp के गोल कंटेनर होते हैं.

आइकॉन

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

लेबल लेख

लेबल टेक्स्ट किसी बटन का सबसे ज़रूरी एलिमेंट होता है. यह बताता है कि यह तब होती है, जब कोई उपयोगकर्ता किसी बटन पर टैप करता है.

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

इमेज

इमेज के बटन पर हमेशा एक ग्रेडिएंट ओवरले होता है और इमेज के ऊपर स्क्रिम होता है बैकग्राउंड. ग्रेडिएंट ओवरले, कंटेनर के रंग के हिसाब से सेट होता है. स्थिति के हिसाब से स्क्रिम बदलता रहता है.

बटन के ग्रुप

जानकारी को एक जैसा बनाए रखने के लिए, बटन किसी पंक्ति या कॉलम में एक साथ दिखते हैं एक कार्रवाई से दूसरी कार्रवाई पर जाना. यहां दिए सेक्शन में, ध्यान देने लायक बातों के बारे में बताया गया है.

हैरारकी की जानकारी दें

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

फ़ोकस होने के बाद, ग्रुप में पहला बटन मुख्य कार्रवाई के तौर पर काम करता है उस पर पहुंचता है.

लीनियर लेआउट को बनाए रखना

1. लाइन का लेआउट
2. कॉलम का लेआउट

वैरिएंट का सही तरीके से इस्तेमाल करना

कॉलम के लेआउट में, एक बटन वाले वैरिएंट को मैनेज किया जाना चाहिए. तय सीमा में लाइन का लेआउट, बटन के ग्रुप में अलग-अलग वैरिएंट को एक साथ क्लस्टर किया जा सकता है लेकिन तर्क साफ़ होना चाहिए. भरी हुई और आउटलाइन बटन का इस्तेमाल इनमें किया जा सकता है एक ही ग्रुप में शामिल होने चाहिए, लेकिन कार्रवाइयों के क्रम के बारे में साफ़ तौर पर बताना न भूलें.