يوفّر هذا المستند إرشادات حول كيفية عرض زر "تسجيل الدخول باستخدام حساب 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" > "الخطوط" (Fonts).
مساحة متروكة
| 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 التجارية للحصول على مزيد من المعلومات).