يقدّم هذا المستند إرشادات حول كيفية عرض زر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. ويجب أن يتّبع موقعك الإلكتروني أو تطبيقك هذه الإرشادات لإكمال عملية التحقّق من التطبيق.
تعرض حِزم تطوير البرامج (SDK) لخدمات هوية Google زر "تسجيل الدخول باستخدام حساب Google" الذي يتوافق دائمًا مع أحدث إرشادات وضع العلامة التجارية من Google. هذه هي الطريقة المُقترَحة لعرض زر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. وفي الحالات التي لا تتمكّن فيها من استخدام خيار الزر الذي يعرضه محرّك بحث Google، يمكنك عرض عنصر زر HTML، أو تنزيل مواد العرض الخاصة بالعلامة التجارية والمعتمدة مسبقًا، أو يمكنك اختياريًا إنشاء زر مخصّص لتسجيل الدخول باستخدام حساب Google.
عنصر زر العرض HTML
نوفّر أداة إعدادات HTML تتيح لك تخصيص مظهر زر "تسجيل الدخول باستخدام حساب Google". ويمكنك بعد ذلك تنزيل مقتطف HTML وCSS الذي سيعرض الزر على موقعك الإلكتروني.إنشاء عنصر زر HTML
تنزيل رموز العلامات التجارية المعتمدة مسبقًا
بدلاً من استخدام زر صورة مخصّص، يمكنك تنزيل الأزرار المعتمَدة مسبقًا لميزة "تسجيل الدخول باستخدام حساب Google" والمتوفّرة بتنسيقات PNG وSVG لجميع المنصات.تتوفّر أزرار الصور المقدَّمة في الوضع العادي ووضع الرموز، وتتضمّن خيارات الأنماط التالية:
- المظهر : فاتح، محايد، داكن
- الشكل : مستطيل، مستدير
| المظهر | الأزرار | الوصف |
|---|---|---|
| فاتح |
|
زر "تسجيل الدخول باستخدام حساب Google" مستطيل عريض وبمظهر فاتح |
| داكن |
|
زر "تسجيل الدخول باستخدام حساب Google" عادي على شكل حبة دوّارة |
أوضاع الأزرار المتوافقة
| فاتح |
|
|
| داكن |
|
|
| إلى حدٍ ما |
|
|
إنشاء زر "تسجيل الدخول باستخدام حساب Google" مخصّص
ننصح بشدة باستخدام حِزم تطوير البرامج (SDK) لخدمات Google Identity) أو أي من الخيارات الأخرى المشمولة في الأقسام السابقة، لأنّه يتيح لمستخدمي Google التعرّف على علامة Google التجارية بسهولة أكبر. وكلما تعرّف المستخدمون على زر الإجراء بسهولة أكبر، زادت احتمالية تفاعلهم معه.
أمّا إذا كنت بحاجة إلى تعديل الزر ليلائم تصميم تطبيقك، فاتّبِع الإرشادات التالية.
حجم الملف
يمكنك تغيير حجم الزر حسب الحاجة لأحجام الشاشات المختلفة والأجهزة، ولكن عليك الحفاظ على نسبة العرض إلى الارتفاع حتى لا يوسّع شعار Google.
النص
لتشجيع المستخدمين على النقر على الزر، ننصح باستخدام عبارة الحث على اتخاذ إجراء "تسجيل الدخول باستخدام حساب Google" أو "الاشتراك باستخدام حساب Google" أو "المتابعة باستخدام حساب Google". ويجب أن يكون واضحًا للمستخدم أنه يسجّل الدخول إلى تطبيقك أو يشترك في تطبيقك باستخدام بيانات اعتماده على Google، وليس لديه اشتراك أو تسجيل للحصول على حساب Google على تطبيقك.
اللون
يتم توضيح الحالة الافتراضية للأزرار أدناه. ويجب أن يتضمّن الزر دائمًا اللون العادي لرقم "G" من Google.
| المظهر | مثال | |
|---|---|---|
| فاتح |
|
التعبئة: #FFFFFF الحد الخارجي: #747775 | 1 بكسل | داخل الخط: #1F1F1F | Roboto Medium | 14/20 |
| داكن |
|
التعبئة: #131314 الحد الخارجي: #8E918F | 1 بكسل | الجزء الداخلي الخط: #E3E3E3 | Roboto Medium | 14/20 |
| إلى حدٍ ما |
|
التعبئة: #F2F2F2 سُمك الخط: بدون شطب الخط: #1F1F1F | Roboto Medium | 14/20 |
الخط
خط الزر هو Roboto Medium، وهو خط TrueType. للتثبيت، يجب أولاً تنزيل الخط Roboto ثم فك ضغط حزمة التنزيل. على نظام التشغيل Mac، انقر مرّتين على Roboto-Medium.ttf، ثم انقر على "Install Font" (تثبيت الخط). على نظام التشغيل Windows، اسحب الملف إلى مجلد "جهاز الكمبيوتر" > "Windows" > "الخطوط".
مساحة متروكة
| Android |
|
| iOS |
|
| الويب (الأجهزة الجوّالة + أجهزة الكمبيوتر المكتبي) |
|
| مَراجع |
|
شعار Google في زر "تسجيل الدخول باستخدام حساب Google"
بصرف النظر عن النص، لا يمكنك تغيير حجم شعار Google "G" أو لونه. ويجب أن يكون هذا الرمز هو إصدار اللون العادي وأن يظهر على خلفية بيضاء. إذا كنت تحتاج إلى إنشاء شعار Google بحجم مخصص، فابدأ بأي من أحجام الشعارات المضمّنة في حزمة التنزيل.
تصميم الزر غير صحيح
 الإجراءات المقترَحة استخدِم إرشادات تصميم Google Material 3 لحدود الأزرار والألوان. |
 الإجراءات غير المسموح بها يمكنك استخدام رمز أو شعار Google فقط بدون حدود الزر وبدون نص للإشارة إلى إجراء المستخدم. |
 الإجراءات المقترَحة يمكنك استخدام لون علامة Google التجارية لرمز Google في الأوضاع الداكنة والفاتحة والمحايدة. |
 الإجراءات غير المسموح بها استخدِم الإصدارات الأحادية اللون من "G" من Google للزر. |
 الإجراءات المقترَحة اختر الزر في وضع الألوان المناسب لإمكانية الوصول وللبروز المتساوي. |
 الإجراءات غير المسموح بها ضَع رمز Google اللون العادي "G" على خلفية ملوّنة غير الفاتح أو الداكن أو المحايد. |
 الإجراءات المقترَحة التزم بحرف "G" الخاص بـ Google مع ترك مساحة وحجم ثابتَين. |
 الإجراءات غير المسموح بها أنشئ الأيقونة الخاصة بك للزر. |
 الإجراءات المقترَحة استخدام زر "G" من Google وحده لزر الإجراء، إذا لزم الأمر. |
 الإجراءات غير المسموح بها استخدام المصطلح "Google" وحده في الزرّ لتمثيل إجراء "تسجيل الدخول باستخدام حساب Google" |
أفضل ممارسات وضع العلامة التجارية في "تسجيل الدخول باستخدام حساب Google"
تسجيل الدخول باستخدام حساب Google وخيارات تسجيل الدخول الأخرى التابعة لجهات خارجية
يجب أن يظهر زر "تسجيل الدخول باستخدام حساب Google" بشكل بارز على الأقل مثل خيارات تسجيل الدخول التابعة لجهات خارجية أخرى. على سبيل المثال، يجب أن تكون الأزرار بنفس الحجم تقريبًا ولها وزن بصري مشابه.
إرشادات أخرى
إذا طلبت نطاقات إضافية، يمكنك إجراء ذلك باستخدام عملية تفويض متزايدة (Android وiOS والويب)، مع طلب الإذن من المستخدم فقط عند بدء التفاعل مع ميزة تتطلّب الوصول إلى واجهة برمجة التطبيقات.
إذا طلبت نطاقات YouTube، استخدِم زرّ YouTube.
إذا كنت تستخدم خدمات "ألعاب Google Play"، يمكنك أيضًا الاطّلاع على إرشادات وضع العلامة التجارية لخدمات "ألعاب Google Play".
لا يُسمح باستخدام العلامات التجارية لشركة Google بطرق غير مشمولة صراحةً في هذا المستند بدون موافقة كتابية مُسبقة من Google (للحصول على مزيد من المعلومات، يمكنك الاطّلاع على إرشادات استخدام الطرف الثالث لميزات العلامة التجارية لشركة Google).