این سند دستورالعمل هایی را در مورد نحوه نمایش دکمه ورود با 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 "G" باشد.
| موضوع | مثال | |
|---|---|---|
| نور |  | پر کردن: #FFFFFF سکته مغزی: #747775 | 1px | داخل فونت: #1F1F1F | Roboto Medium | 14/20 |
| تاریک | | پر کنید: #131314 سکته مغزی: #8E918F | 1px | داخل فونت: #E3E3E3 | Roboto Medium | 14/20 |
| خنثی |  | پر کردن: #F2F2F2 سکته مغزی: بدون سکته فونت: #1F1F1F | Roboto Medium | 14/20 |
فونت
فونت دکمه Roboto Medium، یک فونت TrueType است. برای نصب ابتدا فونت Roboto را دانلود کرده و باندل دانلود را از حالت فشرده خارج کنید. در مک، فقط روی Roboto-Medium.ttf دوبار کلیک کنید، سپس روی «Install Font» کلیک کنید. در ویندوز، فایل را به پوشه "My Computer" > "Windows" > "Fonts" بکشید.
بالشتک
| اندروید |  |
| iOS |  |
| وب (موبایل + دسکتاپ) |  |
| مرجع |  |
نشان‌واره گوگل در دکمه "ورود با گوگل"
صرف نظر از متن، نمی توانید اندازه یا رنگ لوگوی Google "G" را تغییر دهید. باید نسخه رنگی استاندارد باشد و روی پس‌زمینه سفید ظاهر شود. اگر می‌خواهید لوگوی Google با اندازه سفارشی خود را ایجاد کنید، با هر یک از اندازه‌های لوگوی موجود در بسته دانلود شروع کنید.
طراحی دکمه نادرست
 انجام دهید از دستورالعمل‌های طراحی Google Material 3 برای مرز دکمه و طرح رنگ استفاده کنید. |  نکن از نماد یا لوگوی Google به تنهایی بدون مرز دکمه و بدون متن برای نشان دادن عملکرد کاربر استفاده کنید. |
 انجام دهید برای حالت‌های تاریک، روشن و خنثی از نماد رنگ برند Google برای Google استفاده کنید. |  نکن از نسخه های تک رنگ Google "G" برای دکمه استفاده کنید. |
 انجام دهید دکمه را در حالت رنگ مناسب برای دسترسی و برجستگی یکسان انتخاب کنید. |  نکن نماد رنگ استاندارد Google "G" را روی پس‌زمینه رنگی غیر از روشن، تاریک یا خنثی قرار دهید. |
 انجام دهید به Google "G" با بالشتک و اندازه ثابت بچسبید. |  نکن نماد خود را برای دکمه ایجاد کنید. |
 انجام دهید در صورت نیاز از Google "G" به تنهایی برای دکمه اقدام استفاده کنید. |  نکن از عبارت "Google" به خودی خود در دکمه برای نشان دادن عملکرد Sign in with Google استفاده کنید. |
با بهترین روش های برندسازی گوگل وارد شوید
با Google و سایر گزینه های ورود به سیستم شخص ثالث وارد شوید
دکمه Sign in with Google باید حداقل به اندازه سایر گزینه های ورود به سیستم شخص ثالث برجسته نمایش داده شود. به عنوان مثال، دکمه ها باید تقریباً یک اندازه و وزن بصری مشابهی داشته باشند.
سایر رهنمودها
اگر دامنه‌های بیشتری درخواست می‌کنید، این کار را با مجوز افزایشی ( اندروید ، iOS ، وب ) انجام دهید، تنها زمانی که کاربر شروع به تعامل با ویژگی‌ای که به دسترسی API نیاز دارد، مجوز را از کاربر می‌خواهد.
اگر دامنه های YouTube را درخواست می کنید، از دکمه YouTube استفاده کنید.
اگر از خدمات بازی‌های Google Play استفاده می‌کنید، دستورالعمل‌های برندسازی خدمات بازی‌های Google Play را نیز ببینید.
استفاده از مارک‌های Google به روش‌هایی که صراحتاً توسط این سند پوشش داده نشده است، بدون رضایت کتبی قبلی از Google مجاز نیست (برای اطلاعات بیشتر به دستورالعمل‌های استفاده شخص ثالث از ویژگی‌های برند Google مراجعه کنید).