يوفّر هذا المستند إرشادات حول كيفية عرض زر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. يجب أن يتّبع موقعك الإلكتروني أو تطبيقك هذه الإرشادات لإكمال عملية التحقّق من التطبيق.
حِزم SDK لخدمات Google لتحديد الهوية: تعرِض هذه الحِزم زر "تسجيل الدخول باستخدام حساب Google" الذي يلتزم دائمًا بأحدث إرشادات علامتنا التجارية. وهما الطريقتان المُقترَحتان لعرض الزر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. وفي الحالات التي لا يمكنك فيها استخدام خيار الزر الذي تنشئه Google، يمكنك عرض عنصر زر HTML، تنزيل مواد عرض العلامة التجارية الموافَق عليها مسبقًا أو اختياريًا إنشاء زر "تسجيل الدخول باستخدام حساب Google" مخصّص.
عرض عنصر زر HTML
نوفّر أداة ضبط HTML تتيح لك تخصيص مظهر زر "تسجيل الدخول باستخدام حساب Google". يمكنك بعد ذلك تنزيل مقتطف HTML وCSS سيعرض الزر على موقعك الإلكتروني.إنشاء عنصر زر HTML
تنزيل رموز العلامات التجارية التي تمت الموافقة عليها مسبقًا
كبديل لاستخدام زر صورة مخصّص، يمكنك تنزيل أزرار "تسجيل الدخول باستخدام حساب Google" الموافَق عليها مسبقًا والمتوفرة بتنسيقَي PNG وSVG لجميع المنصّات.تتوفّر أزرار الصور المقدَّمة في الوضعَين العادي والرمزي، وتشمل خيارات الأسلوب التالية:
- المظهر : فاتح، محايد، داكن
- الشكل : مستطيل، بيضاوي
| المظهر | الأزرار | الوصف |
|---|---|---|
| فاتح |
|
زر "تسجيل الدخول باستخدام حساب Google" المستطيل العادي الكبير ذو المظهر الفاتح |
| داكن |
|
زر "تسجيل الدخول باستخدام حساب Google" العادي على شكل قرص أبيض على خلفية داكنة |
أوضاع الأزرار المتوافقة
| فاتح |
|
|
| داكن |
|
|
| محايد |
|
|
إنشاء زر مخصّص لميزة "تسجيل الدخول باستخدام حساب Google"
ننصحك بشدة باستخدام حِزم SDK لخدمات Google لتحديد الهوية أو أي من الخيارات الأخرى التي تم تناولها في الأقسام السابقة، لأنّ ذلك يتيح لمستخدمي 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، ثم النقر على "تثبيت الخط". على نظام التشغيل Windows، اسحب الملف إلى مجلّد "جهاز الكمبيوتر" > "Windows" > "الخطوط" .
مساحة متروكة
| Android |
|
| iOS |
|
| الويب (الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي) |
|
| مَراجع |
|
شعار Google في زر "تسجيل الدخول باستخدام حساب Google"
بغض النظر عن النص، لا يمكنك تغيير حجم شعار "G" من Google أو لونه. يجب أن يكون الشعار بالألوان العادية وأن يظهر على خلفية بيضاء. إذا كنت بحاجة إلى إنشاء شعار 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 التجارية للحصول على مزيد من المعلومات).