نظرة عامة
شعارك هو هويتك ومادة العرض التي تتميّز بقابلية للتكيف والتغيير. على جميع مورّدي خدمات الدفع تزويد Google بمجموعة من الشعارات لاستخدامها في مناطق مختلفة على منظومة Google المتكاملة. على سبيل المثال، تظهر هذه الشعارات في مختلف رحلات الدفع الخاصة بالمستخدم على Google Pay وGoogle Play حيث يحتاج المستخدم إلى اختيار طريقة استلام الدفعات (FOP). ويوضح الرسم التوضيحي أدناه مثل هذه الأمثلة:
قائمة المواصفات
بصفتك مورّدًا للدفع، عليك تزويد Google بأصول تفي بكل من المواصفات الخمسة الموضّحة أدناه. وتتحكم كل من المواصفات في الحجم ولوحة الألوان ومساحة الحدود والسمات الأخرى التي تساعد في توفير تجربة متنوعة وجذّابة ومتمحورة حول الإنسان في عمليات الدفع من Google. وتتطلّب كل مواصفات تنسيقَي ملف لإجمالي عشر مواد عرض صور مطلوبة.
في ما يلي قائمة بالمواصفات الخمس:
الاقتراحات والمتطلبات
اقتراحات
تضمن الاقتراحات التالية أن يكون شعارك واضحًا وواضحًا وقابلاً للتكيّف مع مجموعة مختلفة من أحجام الشاشات ومظاهر نظام التشغيل (مثل الوضع الفاتح والداكن).
- لضمان الوضوح والتفاصيل، استخدِم المساحة الكاملة لمواد العرض كي يتناسب شعارك مع الحدّ الأقصى للأبعاد المسموح بها.
- عند تصميم شعارك، يجب التفكير في الشكل الذي سيظهر به أمام الخلفيات الداكنة في المظهرَين الفاتح والداكن في نظامَي التشغيل Android وiOS. يمكنك الاطّلاع على الاعتبارات المتعلّقة بالمظهر الداكن للحصول على مزيد من التفاصيل.
المتطلّبات
بغض النظر عن مواصفات الشعار، فإنّ المتطلبات التالية هي مجموعة عامة من الإرشادات التي يجب أن تتقيّد بها جميع الشعارات:
- ضمِّن مربّع إحاطة شفافًا (شكل له أبعاد المواصفات نفسها) بدون أي " سُمك" أو مخطط تفصيلي.
- تأكَّد من أنّ الشعار الأحادي اللون يستخدم لونًا واحدًا فقط. يمكنك الاطّلاع على الاعتبارات المتعلّقة بالشعار الأحادي اللون للحصول على مزيد من المعلومات.
- يمكنك تصدير ملفاتك باستخدام أسماء ملفات تلتزم بالاصطلاح الوارد في كل من مواصفات الشعار.
اعتبارات المظهر الداكن
يدعم كل من أحدث إصدارين من Android وiOS المظهر الداكن الذي يستخدم لوحة ألوان أغمق لجميع الشاشات وطرق العرض والقوائم. تتوافق أيضًا تطبيقات Google Play وGoogle Pay الأصلية مع هذا المظهر، ما يؤدي إلى تعتيم واجهاتها عند تفعيلها. ألوان الشاشة الداكنة لها دلالات فيما يتعلق بكيفية اختيار ألوان شعارك والتصميم العام. قد تكون الشعارات المتعدّدة الألوان غير مقروءة جزئيًا أو كليًا عندما تصبح الخلفية داكنة في المظهر الداكن. انظر الرسم التوضيحي أدناه للاطّلاع على مثال:
في الرسم التوضيحي أعلاه، لاحظ كيف أن نص "Acme" الرمادي الغامق في شعار مصرف Acme يتلاش تقريبًا عندما تصبح الخلفية معتمة بمظهر داكن. يجب تجنُّب هذه الألوان الداكنة في الشعارات المتعدّدة الألوان عند تقديمها في نصّ مستقل. للحصول على قائمة بأفضل الممارسات المتعلّقة بتصميم شعارك في المظهر الداكن، يمكنك مراجعة تصميم شعار متعدّد الألوان للمظهر الداكن.
لمزيد من المعلومات حول وضع "المظهر الداكن"، يُرجى الانتقال إلى هذا الرابط.
تصميم شعارك متعدد الألوان لمظهر داكن
على الرغم من أنّ التعديلات والتعديلات الآلية التي أجراها فريق تجربة المستخدم في Google ستساعد في جعل شعاراتك تعمل بشكل أفضل في المظهر الداكن، إنّ اتّباع أفضل الممارسات أدناه سيساعد في تقليل عدد التغييرات المطلوبة والحفاظ على المظهر الأصلي لشعارك بشكل أفضل ويساعدك في دمجه بسلاسة مع أجزاء أخرى من الشاشة.
- استخدِم الألوان غير المشبعة، مثل الباستيل والظلال التي تجمع بين الرمادي والأبيض. تجنَّب استخدام الألوان المشبَّعة بالكامل.
- استخدم ألوان "تشغيل" مثل الأبيض وظلال مختلفة من اللون الأبيض.
- التقيّد بنِسب تباين مقبولة بين الشعار والمناطق المحيطة لمزيد من المعلومات حول نِسب التباين، يمكنك الانتقال إلى w3.org.
- تجنَّب استخدام الظلال لأنّه يصعب رؤيتها في الخلفيات الداكنة.
- اختبِر تصميم شعارك وجرِّبه باستخدام خلفيات داكنة.
نقاط يجب أخذها في الاعتبار عند استخدام الشعار الأحادي اللون
تلوين المظاهر الفاتحة والداكنة
يتم تلوين الشعارات أحادية اللون للحفاظ على نسب تباين الألوان المثالية مع الخلفيات المُحاطة. على سبيل المثال، لاحظ كيف يتغير لون الشعار أدناه اعتمادًا على ما إذا كان نظام التشغيل يستخدم المظهر الفاتح أو الداكن:
لمزيد من المعلومات حول نِسب التباين المقبولة وa11y، انتقل إلى w3.org.
الآثار المترتبة على تغيير حجم مواد العرض
تكبير الحجم
بما أنّه يجب تعديل شعاراتك لتتوافق مع مجموعة متنوعة من أحجام الشاشات وكثافة العرض، تحتاج Google إلى الحصول على أكبر حجم لمادة العرض المستخدَمة في تطبيقاتها ومواقعها الإلكترونية. على سبيل المثال، يجب استخدام مطلب 320 × 320 بكسل
لأنه أكبر حجم لعرض شعار Google Play. يجب تحديد حجم أي صورة أصغر حجمًا لتلائم تلك الأبعاد، وربما تمويه الصورة وتشويهها. يحدث هذا التمويه بشكل أساسي في تنسيقات الصور غير المتّجهة، مثل png. بالنظر إلى المثال أدناه الذي يتم فيه ضبط حجم
صورة أصغر على 320 × 320 بكسل. لاحظ تقطيعه وتعتيمه
بالحجم الأكبر:
تغيير الحجم
بالإضافة إلى ذلك، قد تقلّل Google حجم شعارك. على سبيل المثال، يمكن تغيير حجم مادة العرض بحجم 320 × 320 بكسل لتصبح 32 × 32 بكسل. قد يكون لهذا الحجم تأثير على تفاصيل أدقّ في تصميم الشعار الخاص بك، ويجب اختباره قبل إرسال مادة العرض إلى Google. لاحظ كيف يحتفظ الشعار الموضح أدناه بمظهره العام عند تصغيره إلى حجم أصغر:
قائمة المواصفات
تعرض القائمة أدناه تفاصيل كل من المواصفات الخمس لشعاراتك. ويجب أن تكون كل مواصفات بتنسيقَي ملفَّين: SVG وPNG.
مربّع ملوّن 320 × 320 بكسل
السمات المطلوبة
| إجمالي السمات | 320 × 320 بكسل |
| أبعاد الشعار | 320 × 320 بكسل |
| نسبة العرض إلى الارتفاع | 1:1 |
| مساحة متروكة | لا ينطبق |
| Border | لا ينطبق |
| لوحة الألوان | اللون الكامل بنموذج أحمر أخضر أزرق |
| لون الخلفية | transparent |
الملفات المطلوبة
| التنسيق | اصطلاح اسم الملف | مثال |
|---|---|---|
| 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 × 320 بكسل |
| أبعاد الشعار | 200 × 200 بكسل |
| نسبة العرض إلى الارتفاع | 1:1 |
| مساحة متروكة | 60 بكسل |
| Border | لا ينطبق |
| لوحة الألوان | اللون الكامل بنموذج أحمر أخضر أزرق |
| لون الخلفية | transparent |
الملفات المطلوبة
| التنسيق | اصطلاح اسم الملف | مثال |
|---|---|---|
| PNG | [brand]_320x320_color_padding.png | acmebank_320x320_color_padding.png |
| SVG | [brand]_320x320_color_padding.svg | acmebank_320x320_color_padding.svg |
مستطيل مستطيل ملون 1170 × 730 بكسل
السمات المطلوبة
| إجمالي السمات | 1170 × 730 بكسل |
| أبعاد الشعار | 1170 × 730 بكسل |
| نسبة العرض إلى الارتفاع | 8:5 |
| مساحة متروكة | لا ينطبق |
| Border | لا ينطبق |
| لوحة الألوان | اللون الكامل بنموذج أحمر أخضر أزرق |
| لون الخلفية | transparent |
الملفات المطلوبة
| التنسيق | اصطلاح اسم الملف | مثال |
|---|---|---|
| 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 × 730 بكسل |
| أبعاد الشعار | 970 × 530 بكسل |
| نسبة العرض إلى الارتفاع | 8:5 |
| مساحة متروكة | 100 بكسل |
| Border | لا ينطبق |
| لوحة الألوان | اللون الكامل بنموذج أحمر أخضر أزرق |
| لون الخلفية | transparent |
الملفات المطلوبة
| التنسيق | اصطلاح اسم الملف | مثال |
|---|---|---|
| PNG | [brand]_1170x730_color_padding.png | acmebank_1170x730_color_padding.png |
| SVG | [brand]_1170x730_color_padding.svg | acmebank_1170x730_color_padding.svg |
مربّع بلون واحد مقاس 320 × 320 بكسل
السمات المطلوبة
| إجمالي السمات | 320 × 320 بكسل |
| أبعاد الشعار | 320 × 320 بكسل |
| نسبة العرض إلى الارتفاع | 1:1 |
| مساحة متروكة | لا ينطبق |
| Border | لا ينطبق |
| لوحة الألوان | أسود (HEX #000000) |
| لون الخلفية | transparent |
الملفات المطلوبة
| التنسيق | اصطلاح اسم الملف | مثال |
|---|---|---|
| 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 × 320 بكسل |
| أبعاد الشعار | 200 × 200 بكسل |
| نسبة العرض إلى الارتفاع | 1:1 |
| مساحة متروكة | 60 بكسل |
| Border | لا ينطبق |
| لوحة الألوان | أسود (HEX #000000) |
| لون الخلفية | transparent |
الملفات المطلوبة
| التنسيق | اصطلاح اسم الملف | مثال |
|---|---|---|
| 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. إذا واجهت صعوبة في الوصول إلى النموذج أو استخدامه، اتصل بجهة اتصال التفاعل الفني أو جهة الاتصال الفنية المحدّدة لحسابك.