يقدّم هذا المستند إرشادات حول كيفية عرض زر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. يجب أن يلتزم موقعك الإلكتروني أو تطبيقك بهذه الإرشادات لإكمال عملية إثبات ملكية التطبيق.
تعرض حِزم تطوير البرامج (SDK) الخاصة بخدمات Google Identity زر "تسجيل الدخول باستخدام حساب Google" الذي يلتزم دائمًا بأحدث إرشادات العلامة التجارية من Google. وهي الطريقة المقترَحة لعرض زر "تسجيل الدخول باستخدام حساب Google" على موقعك الإلكتروني أو تطبيقك. في الحالات التي لا يمكنك فيها استخدام خيار الزر الذي تعرضه Google، يمكنك عرض عنصر زر HTML أو تنزيل مواد عرض العلامة التجارية الموافَق عليها مسبقًا أو إنشاء زر مخصّص لتسجيل الدخول باستخدام حساب Google.
عرض عنصر زر HTML
نوفّر أداة ضبط HTML تتيح لك تخصيص مظهر زر "تسجيل الدخول باستخدام Google". يمكنك بعد ذلك تنزيل مقتطف HTML وCSS سيؤدي إلى عرض الزر على موقعك الإلكتروني.إنشاء عنصر زر HTML
تنزيل رموز العلامات التجارية التي تمت الموافقة عليها مسبقًا
كبديل لاستخدام زر صورة مخصّص، يمكنك تنزيل أزرار "تسجيل الدخول باستخدام حساب Google" التي تمت الموافقة عليها مسبقًا والمقدَّمة بتنسيقَي PNG وSVG لجميع المنصات.تتوفّر أزرار الصور المقدَّمة في الوضعَين العادي ووضع الرمز، وتشمل خيارات الأنماط التالية:
- المظهر : فاتح أو محايد أو داكن
- الشكل : مستطيل، بيضاوي
| المظهر | الأزرار | الوصف |
|---|---|---|
| فاتح |
|
زر مستطيل كبير عادي ذو مظهر فاتح لتسجيل الدخول باستخدام حساب Google |
| داكن |
|
زر "تسجيل الدخول باستخدام حساب Google" على شكل حبّة دواء مع مظهر داكن عادي |
أوضاع الأزرار المتوافقة
| فاتح |
|
|
| داكن |
|
|
| محايد |
|
|
إنشاء زر مخصّص لخدمة "تسجيل الدخول باستخدام حساب Google"
ننصحك بشدة باستخدام حِزم تطوير البرامج (SDK) الخاصة بخدمات Google Identity Services أو أي من الخيارات الأخرى الموضّحة في الأقسام السابقة، لأنّها تتيح لمستخدمي Google التعرّف على علامة Google التجارية بسهولة أكبر. كلما كان من الأسهل على المستخدمين تحديد زر إجراء، زادت احتمالية تفاعلهم معه.
ومع ذلك، إذا كنت بحاجة إلى تعديل الزر ليتوافق مع تصميم تطبيقك، عليك الالتزام بالإرشادات التالية.
الحجم
يمكنك تغيير حجم الزر حسب الحاجة ليناسب الأجهزة وأحجام الشاشات المختلفة، ولكن يجب الحفاظ على نسبة العرض إلى الارتفاع كي لا يتم تمديد شعار Google.
نص
لتشجيع المستخدمين على النقر على الزر، ننصحك باستخدام عبارة الحث على اتّخاذ إجراء "تسجيل الدخول باستخدام حساب Google" أو "الاشتراك باستخدام حساب Google" أو "المتابعة باستخدام حساب Google". يُسمح بترجمة هذا النص ليتوافق مع لغة تطبيقك أو موقعك الإلكتروني، وننصح بذلك لتوفير تجربة أفضل للمستخدمين. يجب أن يكون واضحًا للمستخدم أنّه يسجّل الدخول إلى تطبيقك أو يشترك فيه باستخدام بيانات اعتماد Google، وليس أنّه يشترك في حساب Google أو يسجّله على تطبيقك.
اللون
يتم عرض الحالة التلقائية للأزرار أدناه. يجب أن يتضمّن الزر دائمًا اللون العادي لحرف "G" من Google.
| المظهر | مثال | |
|---|---|---|
| فاتح |
|
Fill: #FFFFFF Stroke: #747775 | 1px | inside Font: #1F1F1F | Roboto Medium | 14/20 |
| داكن |
|
Fill: #131314 Stroke: #8E918F | 1px | inside Font: #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 للزر. |
 الإجراءات المقترَحة اختَر الزرّ في وضع الألوان المناسب لتسهيل الاستخدام وإبرازه بشكل متساوٍ. |
 ما ننصحك بتجنّبه وضع رمز "G" القياسي من Google على خلفية ملونة غير فاتحة أو داكنة أو محايدة |
 الإجراءات المناسبة استخدِم الرمز "G" من Google مع مساحة متروكة وحجم ثابتَين. |
 ما ننصحك بتجنّبه أنشِئ أيقونة خاصة للزر. |
 الإجراءات المناسبة استخدِم حرف "G" من Google وحده لزر الإجراء إذا لزم الأمر. |
 ما ننصحك بتجنّبه استخدِم كلمة "Google" وحدها في الزر للإشارة إلى إجراء "تسجيل الدخول باستخدام حساب Google". |
أفضل الممارسات المتعلّقة بالعلامة التجارية في ميزة "تسجيل الدخول باستخدام حساب Google"
تسجيل الدخول باستخدام حساب Google وخيارات تسجيل الدخول الأخرى التابعة لجهات خارجية
يجب عرض زر "تسجيل الدخول باستخدام حساب Google" بوضوح على الأقل مثل خيارات تسجيل الدخول الأخرى التابعة لجهات خارجية. على سبيل المثال، يجب أن تكون الأزرار بالحجم نفسه تقريبًا وأن يكون لها وزن مرئي مشابه.
إرشادات أخرى
إذا طلبت نطاقات إضافية، عليك إجراء ذلك من خلال التفويض التدريجي (Android وiOS والويب)، ولا تطلب من المستخدم التفويض إلا عندما يبدأ في التفاعل مع ميزة تتطلّب الوصول إلى واجهة برمجة التطبيقات.
إذا طلبت نطاقات YouTube، استخدِم زر YouTube.
إذا كنت تستخدم "خدمات ألعاب Google Play"، يمكنك أيضًا الاطّلاع على إرشادات بناء هوية العلامة التجارية لـ "خدمات ألعاب Google Play".
لا يُسمح باستخدام علامات Google التجارية بطرق غير مشمولة صراحةً في هذا المستند بدون الحصول على موافقة كتابية مسبقة من Google (راجِع إرشادات استخدام الجهات الخارجية لميزات العلامة التجارية من Google لمزيد من المعلومات).