با دستورالعمل های برندینگ گوگل وارد شوید

این سند دستورالعمل هایی را در مورد نحوه نمایش دکمه ورود با 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»، «ثبت‌نام با 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" بکشید.

لایه گذاری

اندروید 12px بالشتک سمت چپ قبل از نشان‌واره Google، 10px لایه سمت راست بعد از نشان‌واره Google و بال‌بندی سمت راست 12px بعد از متن ورود به سیستم با Google
iOS 16px صفحه سمت چپ قبل از نشان‌واره Google، 12px لایه سمت راست بعد از نشان‌واره Google و 16px لایه سمت راست بعد از متن ورود به سیستم با Google
وب (موبایل + دسکتاپ) 12px بالشتک سمت چپ قبل از نشان‌واره Google، 10px لایه سمت راست بعد از نشان‌واره Google و بال‌بندی سمت راست 12px بعد از متن ورود به سیستم با Google
ارجاع با مرجع padding دکمه Google وارد شوید

نشان‌واره گوگل در دکمه "ورود با گوگل"

صرف نظر از متن، نمی توانید اندازه یا رنگ لوگوی Google "G" را تغییر دهید. باید نسخه رنگی استاندارد باشد و روی پس‌زمینه سفید ظاهر شود. اگر می‌خواهید لوگوی Google با اندازه سفارشی خود را ایجاد کنید، با هر یک از اندازه‌های لوگوی موجود در بسته دانلود شروع کنید.

نماد Google G

طراحی دکمه نادرست

نمونه تصویر برندینگ granding dos and donts
انجام دادن

از دستورالعمل‌های طراحی Google Material 3 برای مرز دکمه و طرح رنگ استفاده کنید.

نمونه تصویر برندینگ granding dos and donts
نکن

از نماد یا لوگوی Google به تنهایی بدون مرز دکمه و بدون متن برای نشان دادن عملکرد کاربر استفاده کنید.

نمونه تصویر برندینگ granding dos and donts
انجام دادن

برای حالت‌های تاریک، روشن و خنثی از نماد رنگ برند Google برای Google استفاده کنید.

نمونه تصویر برندینگ granding dos and donts
نکن

از نسخه های تک رنگ Google "G" برای دکمه استفاده کنید.

نمونه تصویر برندینگ granding dos and donts
انجام دادن

دکمه را در حالت رنگ مناسب برای دسترسی و برجستگی یکسان انتخاب کنید.

نمونه تصویر برندینگ granding dos and donts
نکن

نماد رنگ استاندارد Google "G" را روی پس‌زمینه رنگی غیر از روشن، تاریک یا خنثی قرار دهید.

نمونه تصویر برندینگ granding dos and donts
انجام دادن

به Google "G" با بالشتک و اندازه ثابت بچسبید.

نمونه تصویر برندینگ granding dos and donts
نکن

نماد خود را برای دکمه ایجاد کنید.

نمونه تصویر برندینگ granding dos and donts
انجام دادن

در صورت نیاز از Google "G" به تنهایی برای دکمه اقدام استفاده کنید.

نمونه تصویر برندینگ granding dos and donts
نکن

از عبارت "Google" به خودی خود در دکمه برای نشان دادن عملکرد Sign in with Google استفاده کنید.

با بهترین روش های برندسازی گوگل وارد شوید

با Google و سایر گزینه های ورود به سیستم شخص ثالث وارد شوید

دکمه Sign in with Google باید حداقل به اندازه سایر گزینه های ورود به سیستم شخص ثالث برجسته نمایش داده شود. به عنوان مثال، دکمه ها باید تقریباً یک اندازه و وزن بصری مشابهی داشته باشند.

سایر رهنمودها

اگر دامنه‌های بیشتری درخواست می‌کنید، این کار را با مجوز افزایشی ( اندروید ، iOS ، وب ) انجام دهید، تنها زمانی که کاربر شروع به تعامل با ویژگی‌ای که به دسترسی API نیاز دارد، مجوز را از کاربر می‌خواهد.

اگر دامنه های YouTube را درخواست می کنید، از دکمه YouTube استفاده کنید.

اگر از خدمات بازی‌های Google Play استفاده می‌کنید، دستورالعمل‌های برندسازی خدمات بازی‌های Google Play را نیز ببینید.

استفاده از مارک‌های Google به روش‌هایی که صراحتاً توسط این سند پوشش داده نشده است، بدون رضایت کتبی قبلی از Google مجاز نیست (برای اطلاعات بیشتر به دستورالعمل‌های استفاده شخص ثالث از ویژگی‌های برند Google مراجعه کنید).