इस दस्तावेज़ में, आपकी वेबसाइट या ऐप्लिकेशन पर 'Google से साइन इन करें' बटन को दिखाने के तरीके के बारे में दिशा-निर्देश दिए गए हैं. ऐप्लिकेशन की पुष्टि की प्रक्रिया पूरी करने के लिए, आपकी वेबसाइट या ऐप्लिकेशन को इन दिशा-निर्देशों का पालन करना होगा.
हमारे Google Identity Services SDK टूल 'Google से साइन इन करें' बटन को रेंडर करते हैं. यह बटन, ब्रैंडिंग के लिए Google के सबसे नए दिशा-निर्देशों का हमेशा पालन करता है. अपनी वेबसाइट या ऐप्लिकेशन पर 'Google से साइन इन करें' बटन दिखाने के लिए, इनका इस्तेमाल करने का सुझाव दिया जाता है. अगर Google से रेंडर किए गए बटन के विकल्प का इस्तेमाल नहीं किया जा सकता, तो एचटीएमएल बटन एलिमेंट रेंडर करें, पहले से मंज़ूरी पा चुकी हमारी ब्रैंडिंग एसेट डाउनलोड करें या वैकल्पिक तौर पर 'Google से साइन इन करें' का कस्टम बटन बनाएं.
एचटीएमएल बटन को रेंडर करें
हम एक एचटीएमएल कॉन्फ़िगरेशनर उपलब्ध कराते हैं. इसकी मदद से, 'Google से साइन इन करें' बटन के दिखने का तरीका बदला जा सकता है. इसके बाद, एचटीएमएल और सीएसएस स्निपेट डाउनलोड किया जा सकता है, जो आपकी वेबसाइट पर बटन को रेंडर करेगा.एचटीएमएल बटन एलिमेंट जनरेट करना
पहले से मंज़ूरी पा चुके ब्रैंड आइकॉन डाउनलोड करना
पसंद के मुताबिक इमेज बटन का इस्तेमाल करने के बजाय, सभी प्लैटफ़ॉर्म के लिए, पहले से मंज़ूरी पा चुके 'Google से साइन इन करें' बटन को PNG और SVG फ़ॉर्मैट में डाउनलोड किया जा सकता है.दिए गए इमेज बटन, स्टैंडर्ड और आइकॉन मोड में उपलब्ध हैं. साथ ही, इनमें स्टाइल के ये विकल्प शामिल हैं:
- थीम : हल्की, न्यूट्रल, गहरी
- आकार : आयताकार, कैप्सूल
| थीम | बटन | ब्यौरा |
|---|---|---|
| हल्का |
|
हल्के रंग की थीम वाला, स्टैंडर्ड साइज़ का बड़ा आयताकार 'Google से साइन इन करें' बटन |
| गहरा |
|
गहरे रंग वाली स्टैंडर्ड थीम में, गोल आकार का 'Google से साइन इन करें' बटन |
बटन के काम करने के मोड
| हल्का |
|
|
| गहरा |
|
|
| ठीक-ठाक |
|
|
अपनी पसंद के मुताबिक 'Google से साइन इन करें' बटन बनाना
हमारा सुझाव है कि आप Google Identity Services SDKs या पिछले सेक्शन में बताए गए किसी भी अन्य विकल्प का इस्तेमाल करें. इससे Google के उपयोगकर्ताओं को Google ब्रैंड की पहचान करने में आसानी होती है. उपयोगकर्ताओं के लिए, ऐक्शन बटन को पहचानना जितना आसान होगा, उसके इंटरैक्ट करने की संभावना उतनी ही ज़्यादा होगी.
हालांकि, अगर आपको इस बटन को अपने ऐप्लिकेशन के डिज़ाइन के मुताबिक बनाना है, तो इन दिशा-निर्देशों का पालन करें.
साइज़
अलग-अलग डिवाइसों और स्क्रीन साइज़ के हिसाब से बटन का साइज़ बदला जा सकता है. हालांकि, आपको आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखना होगा, ताकि Google के लोगो पर क्लिक न हो.
टेक्स्ट
उपयोगकर्ताओं को बटन पर क्लिक करने के लिए बढ़ावा देने के लिए, हमारा सुझाव है कि आप कॉल-टू-ऐक्शन टेक्स्ट के तौर पर "Google से साइन इन करें", "Google से साइन अप करें" या "Google से जारी रखें" का इस्तेमाल करें. उपयोगकर्ता को यह साफ़ तौर पर पता चलना चाहिए कि वह आपके ऐप्लिकेशन में अपने Google क्रेडेंशियल से साइन इन कर रहा है या आपके ऐप्लिकेशन के लिए साइन अप कर रहा है, न कि आपके ऐप्लिकेशन पर Google खाते के लिए साइन अप या रजिस्टर कर रहा है.
रंग
बटनों की डिफ़ॉल्ट स्थिति नीचे दिखाई गई है. बटन में हमेशा Google "G" के लिए स्टैंडर्ड रंग होना चाहिए.
| थीम | उदाहरण | |
|---|---|---|
| हल्का |
|
भरना: #FFFFFF स्ट्रोक: #747775 | 1 पिक्सल | अंदर फ़ॉन्ट: #1F1F1F | Roboto Medium | 14/20 |
| गहरा |
|
भरना: #131314 स्ट्रोक: #8E918F | 1 पिक्सल | अंदर फ़ॉन्ट: #E3E3E3 | Roboto Medium | 14/20 |
| ठीक-ठाक |
|
भरें: #F2F2F2 स्ट्रोक: कोई स्ट्रोक नहीं फ़ॉन्ट: #1F1F1F | Roboto Medium | 14/20 |
फ़ॉन्ट
बटन का फ़ॉन्ट, TrueType फ़ॉन्ट Roboto Medium है. इंस्टॉल करने के लिए, सबसे पहले Roboto फ़ॉन्ट डाउनलोड करें और डाउनलोड किए गए बंडल को अनज़िप करें. Mac पर, Roboto-Medium.ttf पर दो बार क्लिक करें. इसके बाद, "फ़ॉन्ट इंस्टॉल करें" पर क्लिक करें. Windows पर, फ़ाइल को "मेरा कंप्यूटर" > "Windows" > "फ़ॉन्ट" फ़ोल्डर में खींचें और छोड़ें.
पैडिंग (जगह)
| Android |
|
| iOS |
|
| वेब (मोबाइल + डेस्कटॉप) |
|
| रेफ़रंस |
|
"Google से साइन इन करें" बटन में Google का लोगो
टेक्स्ट चाहे जो भी हो, Google "G" लोगो के साइज़ या रंग को नहीं बदला जा सकता. यह स्टैंडर्ड रंग वाला वर्शन होना चाहिए और सफ़ेद बैकग्राउंड पर दिखना चाहिए. अगर आपको अपनी पसंद के मुताबिक, Google का पसंद के मुताबिक साइज़ का लोगो बनाना है, तो डाउनलोड बंडल में शामिल लोगो के किसी भी साइज़ के साथ शुरुआत करें.
बटन का गलत डिज़ाइन
 ऐसा करें बटन की सीमा और कलर स्कीम के लिए, 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 ब्रैंड की सुविधाओं का इस्तेमाल करने के लिए तीसरे पक्ष के दिशा-निर्देश देखें.