إرشادات وضع العلامة التجارية في Google لميزة "تسجيل الدخول باستخدام حساب Google"

يقدّم هذا المستند إرشادات حول كيفية عرض زر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. ويجب أن يتّبع موقعك الإلكتروني أو تطبيقك هذه الإرشادات لإكمال عملية التحقّق من التطبيق.

تعرض حِزم تطوير البرامج (SDK) لخدمات هوية Google زر "تسجيل الدخول باستخدام حساب Google" الذي يتوافق دائمًا مع أحدث إرشادات وضع العلامة التجارية من Google. هذه هي الطريقة المُقترَحة لعرض زر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. وفي الحالات التي لا تتمكّن فيها من استخدام خيار الزر الذي يعرضه محرّك بحث Google، يمكنك عرض عنصر زر HTML، أو تنزيل مواد العرض الخاصة بالعلامة التجارية والمعتمدة مسبقًا، أو يمكنك اختياريًا إنشاء زر مخصّص لتسجيل الدخول باستخدام حساب Google.

عنصر زر العرض HTML

نوفّر أداة إعدادات HTML تتيح لك تخصيص مظهر زر "تسجيل الدخول باستخدام حساب Google". ويمكنك بعد ذلك تنزيل مقتطف HTML وCSS الذي سيعرض الزر على موقعك الإلكتروني.

إنشاء عنصر زر HTML

  
  

تنزيل رموز العلامات التجارية المعتمدة مسبقًا

بدلاً من استخدام زر صورة مخصّص، يمكنك تنزيل الأزرار المعتمَدة مسبقًا لميزة "تسجيل الدخول باستخدام حساب Google" والمتوفّرة بتنسيقات PNG وSVG لجميع المنصات.

تتوفّر أزرار الصور المقدَّمة في الوضع العادي ووضع الرموز، وتتضمّن خيارات الأنماط التالية:

  • المظهر : فاتح، محايد، داكن
  • الشكل : مستطيل، مستدير
في ما يلي مثالان على ذلك:
المظهر الأزرار الوصف
فاتح مثال على زر "تسجيل الدخول باستخدام حساب Google" مستطيل كبير يحمل طابع الضوء والضوء زر "تسجيل الدخول باستخدام حساب Google" مستطيل عريض وبمظهر فاتح
داكن مثال على زر "تسجيل الدخول باستخدام حساب Google" العادي على شكل حبة دوّارة زر "تسجيل الدخول باستخدام حساب Google" عادي على شكل حبة دوّارة
تنزيل رموز العلامات التجارية الموافَق عليها مسبقًا

أوضاع الأزرار المتوافقة

فاتح

زر "تسجيل الدخول باستخدام حساب Google" مستدير الشكل بمظهر فاتح

زر "تسجيل الدخول باستخدام حساب Google" على شكل مربّع فاتح

زر "تسجيل الدخول باستخدام حساب Google" على شكل حبة فاتحة

زر "تسجيل الدخول باستخدام حساب Google" على شكل مستطيل فاتح

داكن

زر "تسجيل الدخول باستخدام حساب Google" مستدير الشكل بمظهر داكن

زر "تسجيل الدخول باستخدام حساب Google" على شكل مربّع داكن

زر "تسجيل الدخول باستخدام حساب Google" على شكل حبة داكنة

زر تسجيل الدخول باستخدام حساب Google على شكل مستطيل بمظهر داكن

إلى حدٍ ما

زر "تسجيل الدخول باستخدام حساب Google" مستدير الشكل ومحايد

زر "تسجيل الدخول باستخدام حساب Google" بمظهر مربّع محايد

زر "تسجيل الدخول باستخدام حساب Google" على شكل حبة محايدة

زر تسجيل الدخول باستخدام حساب Google على شكل مستطيل بتصميم محايد

إنشاء زر "تسجيل الدخول باستخدام حساب Google" مخصّص

ننصح بشدة باستخدام حِزم تطوير البرامج (SDK) لخدمات Google Identity) أو أي من الخيارات الأخرى المشمولة في الأقسام السابقة، لأنّه يتيح لمستخدمي Google التعرّف على علامة Google التجارية بسهولة أكبر. وكلما تعرّف المستخدمون على زر الإجراء بسهولة أكبر، زادت احتمالية تفاعلهم معه.

أمّا إذا كنت بحاجة إلى تعديل الزر ليلائم تصميم تطبيقك، فاتّبِع الإرشادات التالية.

حجم الملف

يمكنك تغيير حجم الزر حسب الحاجة لأحجام الشاشات المختلفة والأجهزة، ولكن عليك الحفاظ على نسبة العرض إلى الارتفاع حتى لا يوسّع شعار Google.

النص

لتشجيع المستخدمين على النقر على الزر، ننصح باستخدام عبارة الحث على اتخاذ إجراء "تسجيل الدخول باستخدام حساب Google" أو "الاشتراك باستخدام حساب Google" أو "المتابعة باستخدام حساب Google". ويجب أن يكون واضحًا للمستخدم أنه يسجّل الدخول إلى تطبيقك أو يشترك في تطبيقك باستخدام بيانات اعتماده على Google، وليس لديه اشتراك أو تسجيل للحصول على حساب Google على تطبيقك.

اللون

يتم توضيح الحالة الافتراضية للأزرار أدناه. ويجب أن يتضمّن الزر دائمًا اللون العادي لرقم "G" من Google.

المظهر مثال
فاتح زر "تسجيل الدخول باستخدام حساب 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، ثم انقر على "Install Font" (تثبيت الخط). على نظام التشغيل Windows، اسحب الملف إلى مجلد "جهاز الكمبيوتر" > "Windows" > "الخطوط".

مساحة متروكة

Android المساحة المتروكة اليمنى 12 بكسل قبل شعار Google، والمساحة المتروكة اليمنى 10 بكسل بعد شعار Google، والمساحة المتروكة اليمنى 12 بكسل بعد شعار "تسجيل الدخول باستخدام حساب Google"
iOS المساحة المتروكة اليمنى 16 بكسل قبل شعار Google، والمساحة المتروكة اليمنى 12 بكسل بعد شعار Google، والمساحة المتروكة اليمنى 16 بكسل بعد شعار "تسجيل الدخول باستخدام حساب Google"
الويب (الأجهزة الجوّالة + أجهزة الكمبيوتر المكتبي) المساحة المتروكة اليمنى 12 بكسل قبل شعار Google، والمساحة المتروكة اليمنى 10 بكسل بعد شعار Google، والمساحة المتروكة اليمنى 12 بكسل بعد شعار "تسجيل الدخول باستخدام حساب Google"
مَراجع مرجع المساحة المتروكة لزر "تسجيل الدخول باستخدام حساب Google"

شعار Google في زر "تسجيل الدخول باستخدام حساب Google"

بصرف النظر عن النص، لا يمكنك تغيير حجم شعار Google "G" أو لونه. ويجب أن يكون هذا الرمز هو إصدار اللون العادي وأن يظهر على خلفية بيضاء. إذا كنت تحتاج إلى إنشاء شعار 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).