بررسی اجمالی
لوگوی شما هویت شما و پایان ناپذیرترین و سازگارترین دارایی شماست. همه فروشندگان پرداخت موظفند مجموعه‌ای از آرم‌ها را برای استفاده در مناطق مختلف در سراسر اکوسیستم Google به Google ارائه دهند. به عنوان مثال، این نشان‌ها در سفرهای مختلف پرداخت کاربر در Google Pay و Google Play نمایش داده می‌شوند که در آن کاربر باید یک فرم پرداخت (FOP) را انتخاب کند. تصویر زیر چنین نمونه هایی را نشان می دهد:
لیست مشخصات
به‌عنوان یک فروشنده پرداخت، دارایی‌هایی را به Google ارائه می‌دهید که هر یک از پنج مشخصات تعریف شده در زیر را برآورده می‌کنند. هر مشخصات اندازه، پالت رنگ، لایه حاشیه و سایر ویژگی‌هایی را کنترل می‌کند که به ارائه تجربه‌ای همه‌کاره، جذاب و انسان محور در جریان‌های پرداخت Google کمک می‌کند. هر مشخصات به دو فرمت فایل برای مجموع ده دارایی تصویر مورد نیاز نیاز دارد.
لیستی از پنج مشخصات در زیر نشان داده شده است:
توصیه ها و الزامات
توصیه ها
توصیه‌های زیر تضمین می‌کنند که لوگوی شما واضح، واضح و قابل انطباق با مجموعه‌ای از اندازه‌های صفحه نمایش و تم‌های سیستم‌عامل (مانند حالت روشن و تاریک) است.
- برای وضوح و جزئیات، از فضای کامل دارایی استفاده کنید تا لوگوی شما با حداکثر ابعاد مجاز مطابقت داشته باشد.
- هنگام طراحی لوگوی خود، در نظر داشته باشید که در تم های روشن و تیره اندروید و iOS در مقابل پس زمینه های تیره تر چگونه به نظر می رسد. برای جزئیات بیشتر به ملاحظات تم تیره مراجعه کنید.
الزامات
صرف نظر از مشخصات لوگو، الزامات زیر مجموعه ای از دستورالعمل های کلی است که همه آرم ها باید از آنها پیروی کنند:
- یک جعبه مرزی شفاف (شکلی با ابعاد مشابه با ابعاد مشخصات) بدون "سکته" یا طرح کلی قرار دهید.
- اطمینان حاصل کنید که لوگوی تک رنگ شما فقط از یک رنگ استفاده می کند. برای اطلاعات بیشتر به ملاحظات لوگوی تک رنگ مراجعه کنید.
- فایل های خود را با نام فایل هایی صادر کنید که مطابق با قرارداد در هر مشخصات لوگو هستند.
ملاحظات تم تاریک
هر دو آخرین نسخه اندروید و iOS از یک تم تیره پشتیبانی می‌کنند که از پالت رنگ تیره‌تری برای همه صفحه‌ها، نماها و منوها استفاده می‌کند. برنامه‌های بومی Google Play و Google Pay Android نیز از این طرح زمینه پشتیبانی می‌کنند و در صورت فعال شدن طرح زمینه، رابط‌های خود را تیره می‌کنند. رنگ های تیره تر صفحه نمایش پیامدهایی در مورد نحوه انتخاب رنگ های لوگو و طراحی کلی شما دارد. زمانی که پس‌زمینه در یک تم تیره تیره می‌شود، ممکن است لوگوهای چند رنگ تا حدی یا کاملاً ناخوانا باشند. برای مثال تصویر زیر را ببینید:
در تصویر بالا توجه داشته باشید که چگونه متن "Acme" خاکستری تیره در لوگوی Acme Bank تقریباً وقتی پس زمینه در تم تیره تیره می شود ناپدید می شود. از چنین رنگ های تیره ای در لوگوهای چند رنگ شما زمانی که به صورت متن مستقل ارائه می شوند باید اجتناب شود. برای فهرستی از بهترین روش‌ها در مورد طراحی لوگوی خود در تم تیره، به طراحی لوگوی چند رنگ برای تم تیره مراجعه کنید.
برای اطلاعات بیشتر در مورد تم تیره، به اینجا بروید.
طراحی لوگوی چند رنگ خود برای تم تیره
اگرچه تنظیمات برنامه‌ریزی و بهینه‌سازی‌های تیم UX Google به بهترین عملکرد لوگوی شما در تم تیره کمک می‌کند، پیروی از بهترین روش‌های زیر کمک می‌کند تا تعداد تغییرات مورد نیاز را به حداقل برسانید، ظاهر اصلی لوگوی خود را بهتر حفظ کنید، و کمک می‌کند تا به آرامی با سایر قسمت‌ها ترکیب شود. از صفحه نمایش
- از رنگ‌های غیراشباع مانند پاستل و سایه‌هایی که خاکستری و سفید دارند استفاده کنید. از استفاده از رنگ های کاملا اشباع شده خودداری کنید.
- از رنگ های "روشن" مانند سفید و سایه های مختلف سفید استفاده کنید.
- نسبت کنتراست قابل قبول بین لوگوی خود و مناطق اطراف را رعایت کنید. برای اطلاعات بیشتر در مورد نسبت کنتراست به w3.org مراجعه کنید.
- از سایه ها اجتناب کنید زیرا در پس زمینه های تاریک به سختی دیده می شوند.
- طراحی لوگوی خود را با پس زمینه تیره آزمایش و آزمایش کنید.
ملاحظات لوگوی تک رنگ
رنگ آمیزی در تم های روشن و تاریک
لوگوهای تک رنگ برای حفظ نسبت کنتراست رنگ ایده آل با پس زمینه های اطراف رنگ آمیزی شده اند. به عنوان مثال، توجه داشته باشید که چگونه لوگوی زیر بسته به اینکه سیستم عامل از تم روشن یا تیره استفاده می کند، رنگ تغییر می کند:
برای اطلاعات بیشتر در مورد نسبت کنتراست قابل قبول و a11y به w3.org مراجعه کنید.
پیامدهای تغییر اندازه دارایی
افزایش اندازه
از آنجایی که نشان‌واره‌های شما باید با مجموعه‌ای از اندازه‌های صفحه و تراکم نمایش تطبیق داده شوند، Google باید بزرگترین اندازه دارایی را که در برنامه‌ها و وب‌سایت‌هایش استفاده می‌شود، به دست آورد. برای مثال، 320 x 320px مورد نیاز است زیرا بزرگترین اندازه نمایش لوگوی Google Play است. هر تصویر کوچک‌تری باید اندازه‌ای داشته باشد تا متناسب با آن ابعاد باشد و به طور بالقوه تصویر را محو و مخدوش کند. این تاری عمدتاً در قالب‌های تصویر غیر برداری مانند png رخ می‌دهد. مثال زیر را در نظر بگیرید که در آن یک تصویر کوچکتر تا 320 x 320 پیکسل اندازه دارد. به پیکسل و تاری آن در اندازه بزرگتر توجه کنید:
کاهش اندازه
علاوه بر این، گوگل ممکن است لوگوی شما را کوچک کند. به عنوان مثال، یک دارایی با ابعاد 320×320 پیکسل ممکن است به 32×32 پیکسل کاهش یابد. این کوچک‌سازی ممکن است بر جزئیات دقیق‌تر طراحی لوگوی شما تأثیر بگذارد و باید قبل از ارسال دارایی‌تان به Google آزمایش شود. توجه داشته باشید که چگونه لوگوی نشان داده شده در زیر ظاهر کلی خود را هنگامی که به اندازه کوچکتر کوچکتر می شود حفظ می کند:
لیست مشخصات
لیست زیر هر یک از پنج مشخصات لوگوی شما را شرح می دهد. هر مشخصات باید در دو فرمت فایل باشد: SVG و PNG .
مربع رنگی 320 x 320 پیکسل
ویژگی های مورد نیاز
| مجموع ابعاد | 320 x 320 پیکسل |
| ابعاد لوگو | 320 x 320 پیکسل |
| نسبت ابعاد | 1:1 |
| لایه گذاری | هیچ یک |
| مرز | هیچ یک |
| پالت رنگ | رنگ RGB کامل |
| رنگ پس زمینه | شفاف |
فایل های مورد نیاز
| قالب | قرارداد نام فایل | مثال |
|---|---|---|
| PNG | [brand]_320x320_color_no_padding.png | acmebank_320x320_color_no_padding.png |
| SVG | [brand]_320x320_color_no_padding.svg | acmebank_320x320_color_no_padding.svg |
مربع رنگی 320 × 320 پیکسل با پد
ویژگی های مورد نیاز
| مجموع ابعاد | 320 x 320 پیکسل |
| ابعاد لوگو | 200 در 200 پیکسل |
| نسبت ابعاد | 1:1 |
| لایه گذاری | 60 پیکسل |
| مرز | هیچ یک |
| پالت رنگ | رنگ RGB کامل |
| رنگ پس زمینه | شفاف |
فایل های مورد نیاز
| قالب | قرارداد نام فایل | مثال |
|---|---|---|
| PNG | [brand]_320x320_color_padding.png | acmebank_320x320_color_padding.png |
| SVG | [brand]_320x320_color_padding.svg | acmebank_320x320_color_padding.svg |
مستطیل مستطیلی رنگی 1170 x 730
ویژگی های مورد نیاز
| مجموع ابعاد | 1170 x 730 پیکسل |
| ابعاد لوگو | 1170 x 730 پیکسل |
| نسبت ابعاد | 8:5 |
| لایه گذاری | هیچ یک |
| مرز | هیچ یک |
| پالت رنگ | رنگ RGB کامل |
| رنگ پس زمینه | شفاف |
فایل های مورد نیاز
| قالب | قرارداد نام فایل | مثال |
|---|---|---|
| PNG | [brand]_1170x730_color_no_padding.png | acmebank_1170x730_color_no_padding.png |
| SVG | [brand]_1170x730_color_no_padding.svg | acmebank_1170x730_color_no_padding.svg |
مستطیل مستطیلی رنگی 1170 × 730 پیکسل با بالشتک
ویژگی های مورد نیاز
| مجموع ابعاد | 1170 x 730 پیکسل |
| ابعاد لوگو | 970 x 530 پیکسل |
| نسبت ابعاد | 8:5 |
| لایه گذاری | 100 پیکسل |
| مرز | هیچ یک |
| پالت رنگ | رنگ RGB کامل |
| رنگ پس زمینه | شفاف |
فایل های مورد نیاز
| قالب | قرارداد نام فایل | مثال |
|---|---|---|
| PNG | [brand]_1170x730_color_padding.png | acmebank_1170x730_color_padding.png |
| SVG | [brand]_1170x730_color_padding.svg | acmebank_1170x730_color_padding.svg |
مربع تک رنگ 320 x 320px
ویژگی های مورد نیاز
| مجموع ابعاد | 320 x 320 پیکسل |
| ابعاد لوگو | 320 x 320 پیکسل |
| نسبت ابعاد | 1:1 |
| لایه گذاری | هیچ یک |
| مرز | هیچ یک |
| پالت رنگ | مشکی (HEX #000000) |
| رنگ پس زمینه | شفاف |
فایل های مورد نیاز
| قالب | قرارداد نام فایل | مثال |
|---|---|---|
| PNG | [brand]_320x320_single_color_no_padding.png | acmebank_320x320_single_color_no_padding.png |
| SVG | [brand]_320x320_single_color_no_padding.svg | acmebank_320x320_single_color_no_padding.svg |
مربع تک رنگ 320 × 320 پیکسل با بالشتک
ویژگی های مورد نیاز
| مجموع ابعاد | 320 x 320 پیکسل |
| ابعاد لوگو | 200 در 200 پیکسل |
| نسبت ابعاد | 1:1 |
| لایه گذاری | 60 پیکسل |
| مرز | هیچ یک |
| پالت رنگ | مشکی (HEX #000000) |
| رنگ پس زمینه | شفاف |
فایل های مورد نیاز
| قالب | قرارداد نام فایل | مثال |
|---|---|---|
| PNG | [brand]_320x320_single_color_padding.png | acmebank_320x320_single_color_padding.png |
| SVG | [brand]_320x320_single_color_padding.svg | acmebank_320x320_single_color_padding.svg |
در حال آپلود لوگوهای شما
دارایی های لوگوی خود را با استفاده از بارگذاری GSP - LOGOs آپلود کنید. اگر در دسترسی به فرم یا استفاده از آن مشکل دارید، با تماس با بخش فنی یا نقطه تماس فنی اختصاص داده شده به حساب خود تماس بگیرید.