साइन इन करने के लिए Google ब्रैंडिंग से जुड़े दिशा-निर्देश

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

Google Identity Services SDK टूल से 'Google से साइन इन करें' बटन रेंडर होता है. इस बटन पर हमेशा Google के ब्रैंडिंग से जुड़े नए दिशा-निर्देशों का पालन किया जाता है. ये आपकी वेबसाइट या ऐप्लिकेशन पर 'Google से साइन इन करें' बटन दिखाने का सुझाया गया तरीका है. जिन मामलों में Google के रेंडर किए गए बटन का विकल्प इस्तेमाल नहीं हो सकता उनके लिए एचटीएमएल बटन एलिमेंट को रेंडर किया जा सकता है. पहले से मंज़ूर की गई ब्रैंडिंग एसेट को डाउनलोड किया जा सकता है. इसके अलावा, 'Google से साइन इन करें' बटन को पसंद के मुताबिक बनाया जा सकता है.

एचटीएमएल बटन का एलिमेंट रेंडर करें

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

एचटीएमएल बटन का एलिमेंट जनरेट करें

  
  

पहले से मंज़ूर ब्रैंड आइकॉन डाउनलोड करें

कस्टम इमेज बटन का इस्तेमाल करने के विकल्प के तौर पर, सभी प्लैटफ़ॉर्म के लिए, पहले से मंज़ूर किए गए 'Google से साइन इन करें' बटन को डाउनलोड किया जा सकता है. ये बटन, PNG और SVG फ़ॉर्मैट में उपलब्ध कराए जाते हैं.

इमेज के लिए दिए गए बटन, स्टैंडर्ड और आइकॉन मोड में उपलब्ध हैं. इनमें स्टाइल के ये विकल्प शामिल हैं:

  • थीम : लाइट, न्यूट्रल, डार्क
  • आकार : आयताकार, गोल
नीचे दो उदाहरण दिए गए हैं:
थीम बटन ब्यौरा
हल्का बड़े साइज़ की, हल्के रंग की थीम वाला आयताकार 'Google से साइन इन करें' बटन का उदाहरण हल्के रंग की स्टैंडर्ड थीम वाला आयताकार, 'Google से साइन इन करें' बटन
गहरा गहरे रंग की थीम और 'Google से साइन इन करें' बटन का उदाहरण गहरे रंग की थीम वाली गोली के आकार का स्टैंडर्ड 'Google से साइन इन करें' बटन
पहले से मंज़ूर ब्रैंड आइकॉन डाउनलोड करें

बटन के साथ काम करने वाले मोड

हल्का

हल्के रंग की थीम वाला गोल आकार का 'Google से साइन इन करें' बटन

हल्के रंग की थीम वाले स्क्वेयर के आकार वाला 'Google से साइन इन करें' बटन

हल्के रंग की थीम वाली गोली के आकार का 'Google से साइन इन करें' बटन

हल्के रंग की थीम वाले आयत के आकार का 'Google से साइन इन करें' बटन

गहरा

गहरे रंग की थीम वाला गोल आकार का 'Google से साइन इन करें' बटन

गहरे रंग की थीम वाले वर्ग के आकार का 'Google से साइन इन करें' बटन

गहरे रंग की थीम वाली गोली के आकार का 'Google से साइन इन करें' बटन

गहरे रंग की थीम वाले आयत के आकार का 'Google से साइन इन करें' बटन

न्यूट्रल इमोजी

न्यूट्रल थीम पर आधारित गोल आकार का 'Google से साइन इन करें' बटन

न्यूट्रल थीम पर आधारित वर्ग के आकार का 'Google से साइन इन करें' बटन

न्यूट्रल थीम वाली पिल के आकार का 'Google से साइन इन करें' बटन

न्यूट्रल थीम वाले रेक्टैंगल के आकार, 'Google से साइन इन करें' बटन

'Google से साइन इन करें' बटन को पसंद के मुताबिक बनाएं

हमारा सुझाव है कि आप Google Identity Services SDK टूल या पिछले सेक्शन में दिए गए किसी भी विकल्प का इस्तेमाल करें. इससे, Google के उपयोगकर्ता, Google ब्रैंड की ज़्यादा आसानी से पहचान कर सकते हैं. उपयोगकर्ता जितनी आसानी से किसी ऐक्शन बटन की पहचान कर पाएंगे, उतनी ही आसानी से वे उस बटन के साथ इंटरैक्ट कर पाएंगे.

हालांकि, अगर आपको अपने ऐप्लिकेशन के डिज़ाइन के हिसाब से बटन को बदलना है, तो इन दिशा-निर्देशों का पालन करें.

साइज़

बटन को अलग-अलग डिवाइसों और स्क्रीन के साइज़ के हिसाब से बढ़ाया जा सकता है. हालांकि, आपको आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखना चाहिए, ताकि Google के लोगो पर ज़्यादा न दिखे.

टेक्स्ट

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

रंग

बटन की डिफ़ॉल्ट स्थिति नीचे दिखाई गई है. बटन में हमेशा Google "G" का मानक रंग शामिल होना चाहिए.

थीम उदाहरण
हल्का हल्के रंग की थीम वाली गोली के आकार का 'Google से साइन इन करें' बटन भरना: #FFFFFF
स्ट्रोक: #747775 | 1 पिक्सल |
के अंदर फ़ॉन्ट: #1F1F1F | Roboto Medium | 14/20
गहरा गहरे रंग की थीम वाली गोली के आकार का 'Google से साइन इन करें' बटन भरना: #131314
स्ट्रोक: #8E918F | 1 पिक्सल |
के अंदर फ़ॉन्ट: #E3E3E3 | Roboto Medium | 14/20
न्यूट्रल इमोजी न्यूट्रल थीम वाली पिल के आकार का 'Google से साइन इन करें' बटन भरना: #F2F2F2
स्ट्रोक: कोई स्ट्रोक नहीं
फ़ॉन्ट: #1F1F1F | Roboto Medium | 14/20

फ़ॉन्ट

बटन का फ़ॉन्ट Roboto Medium है, जो कि TrueType फ़ॉन्ट है. इंस्टॉल करने के लिए, सबसे पहले Roboto फ़ॉन्ट डाउनलोड करें और डाउनलोड किए गए बंडल को अनज़िप करें. Mac पर, बस Roboto-Medium.ttf पर दो बार क्लिक करें और "फ़ॉन्ट इंस्टॉल करें" पर क्लिक करें. Windows पर, फ़ाइल को खींचकर "My Computer" > "Windows" > "फ़ॉन्ट" फ़ोल्डर में छोड़ें.

पैडिंग (जगह)

Android Google लोगो के पहले 12 पिक्सल की बाईं पैडिंग, Google लोगो के बाद 10 पिक्सल दाईं ओर पैडिंग और 'Google से साइन इन करें' वाले टेक्स्ट के बाद 12 पिक्सल दाईं ओर पैडिंग (जगह)
iOS Google लोगो के पहले 16 पिक्सल बाईं पैडिंग, Google लोगो के बाद 12 पिक्सल दाईं ओर पैडिंग, और 'Google से साइन इन करें' वाले टेक्स्ट के बाद 16 पिक्सल दाईं ओर पैडिंग (जगह)
वेब (मोबाइल और डेस्कटॉप) Google लोगो के पहले 12 पिक्सल की बाईं पैडिंग, Google लोगो के बाद 10 पिक्सल दाईं ओर पैडिंग और 'Google से साइन इन करें' वाले टेक्स्ट के बाद 12 पिक्सल दाईं ओर पैडिंग (जगह)
रेफ़रंस 'Google से साइन इन करें' बटन की पैडिंग (जगह) रेफ़रंस

"Google से साइन इन करें" बटन में Google का लोगो

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

Google G का आइकॉन

बटन का गलत डिज़ाइन

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
ऐसा करें

बटन की सीमा और कलर स्कीम के लिए, Google Material 3 के डिज़ाइन से जुड़े दिशा-निर्देशों का इस्तेमाल करें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
यह न करें

उपयोगकर्ता की कार्रवाई को बताने के लिए, Google के आइकॉन या लोगो का इस्तेमाल, बटन के बिना और टेक्स्ट के बिना करें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
ऐसा करें

गहरे, हल्के, और न्यूट्रल मोड के लिए, Google ब्रैंड के कलर का इस्तेमाल करके Google आइकॉन का इस्तेमाल करें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
यह न करें

बटन के लिए, Google "G" के मोनोक्रोम वर्शन का इस्तेमाल करें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
ऐसा करें

समान प्रमुखता और सुलभता के लिए सही रंग मोड में बटन चुनें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
यह न करें

मानक रंग Google "G" आइकॉन को हल्के, गहरे या न्यूट्रल के बजाय किसी रंगीन बैकग्राउंड पर रखें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
ऐसा करें

तय पैडिंग और साइज़ के साथ, Google "G" के साथ बने रहें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
यह न करें

बटन के लिए अपना खुद का आइकॉन बनाएं.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
ऐसा करें

अगर ज़रूरत हो, तो ऐक्शन बटन का इस्तेमाल करने के लिए Google "G" का इस्तेमाल करें.

ब्रैंडिंग ग्रैंडिंग डॉस और डॉट्स इमेज सैंपल
यह न करें

'Google से साइन इन करें' सुविधा की कार्रवाई को दिखाने के लिए, बटन में "Google" शब्द का इस्तेमाल करें.

Google ब्रैंडिंग से साइन इन करने के सबसे सही तरीके

'Google से साइन इन करें' और तीसरे पक्ष के अन्य साइन-इन विकल्प

'Google से साइन इन करें' बटन को तीसरे पक्ष के साइन इन करने के अन्य विकल्पों की तरह ही प्रमुखता से दिखाया जाना चाहिए. उदाहरण के लिए, बटन का साइज़ एक जैसा होना चाहिए. साथ ही, इन बटन का विज़ुअल वज़न एक जैसा होना चाहिए.

अन्य दिशा-निर्देश

अगर आपको अतिरिक्त स्कोप के लिए अनुरोध करना है, तो इंक्रीमेंटल ऑथराइज़ेशन (Android, iOS, वेब) की मदद से ऐसा करें. इसके लिए, उपयोगकर्ता से सिर्फ़ अनुमति लेने के लिए कहा जा सकता है, क्योंकि वे किसी ऐसी सुविधा से इंटरैक्ट करते हैं जिसके लिए एपीआई ऐक्सेस की ज़रूरत होती है.

अगर आपने YouTube के स्कोप का अनुरोध किया है, तो YouTube बटन का इस्तेमाल करें.

अगर Google Play की गेम सेवाओं का इस्तेमाल किया जाता है, तो Google Play की गेम सेवाओं के ब्रैंडिंग से जुड़े दिशा-निर्देश भी देखें.

Google ब्रैंड का इस्तेमाल इस दस्तावेज़ में साफ़ तौर पर बताए बिना इस्तेमाल करने की अनुमति नहीं है. इसके लिए, Google से लिखित सहमति लेना ज़रूरी है. ज़्यादा जानकारी के लिए, तीसरे पक्ष के Google ब्रैंड सुविधाएं इस्तेमाल करने से जुड़े दिशा-निर्देश देखें.