نظرة عامة
للحفاظ على توفير تجربة متّسقة للمستخدمين ومساعدتهم على اتّخاذ قرارات مدروسة، عليك عرض شاشة معلومات وشاشة منفصلة لخيار الفوترة إذا كنت توفّر نظام فوترة بديلاً داخل التطبيق إلى جانب نظام الفوترة في Google Play. يجب عرض صفحة المعلومات للمستخدمين مرة واحدة فقط عند بدء عملية شراء، بينما يجب عرض صفحة خيار الفوترة قبل كل عملية شراء. يجب تنفيذ الرسائل المخصّصة للمستخدمين ومواصفات واجهة المستخدم لكلتا الشاشتين وفقًا للإرشادات التالية.

معلومات للمستخدمين
تساعد شاشة المعلومات المستخدمين في فهم سياق التغيير وتوفّر معلومات إضافية لمساعدتهم في اتخاذ قرار مدروس.
وقت العرض
يجب عرض شاشة المعلومات للمستخدمين في بداية عملية الشراء الأولى بعد إضافة نظام فوترة بديل داخل التطبيق. لا يلزم عرض هذه الرسالة في عمليات الشراء اللاحقة التي يجريها المستخدم نفسه. عرض شاشة المعلومات فور اتّخاذ المستخدم إجراءً صريحًا لبدء عملية شراء
حالات عرض السعر
يجب أن يكون سعر الشراء واضحًا وظاهرًا للمستخدمين قبل عرض شاشة المعلومات أو شاشة خيار الفوترة.
كيفية العرض
يجب عرض شاشة المعلومات في ورقة أسفل الشاشة مشروطة. تشبه ورقة البيانات النموذجية التي تظهر في أسفل الشاشة مربّع الحوار النموذجي الذي يظهر بشكل متحرّك من أسفل الشاشة ويبقى مثبّتًا في الأسفل. ويكون هذا العنصر أعلى من جميع عناصر واجهة المستخدم على الشاشة الأساسية. يتم حجب الشاشة الأساسية خلف طبقة داكنة للإشارة إلى أنّها لن تستجيب لتفاعل المستخدم.
لمزيد من المعلومات حول التصميم والتنفيذ لأوراق البيانات السفلية المشروطة، يُرجى الرجوع إلى Google Material Design.
إجراءات المستخدم
يجب أن يتم تشغيل البطاقة السفلية عندما ينقر المستخدم على زر أو عنصر في واجهة المستخدم في تطبيقك يؤدي إلى بدء عملية شراء. يمكن للمستخدم اتّخاذ ثلاثة إجراءات محتملة من شاشة المعلومات:
متابعة
يؤدي النقر على الزر "متابعة" إلى إغلاق شاشة المعلومات وفتح شاشة اختيار الفوترة.
مزيد من المعلومات
يؤدي النقر على الزر "مزيد من المعلومات" إلى فتح مقالة في "مركز مساعدة Google" ضمن متصفّح ويب.
إغلاق
إذا أراد المستخدمون إغلاق ورقة البيانات السفلية والعودة إلى الشاشة الأساسية، يمكنهم إغلاق ورقة البيانات السفلية من خلال:
- النقر خارج حاوية البطاقة السفلية
- النقر على زر "الرجوع" في نظام Android
لا يلزم عرض شاشة المعلومات مرة أخرى بعد إغلاقها أو بعد أن ينقر المستخدم على "متابعة".
مثال: يتم عرض سعر الشراء بوضوح قبل أن يبدأ المستخدم عملية الشراء. يؤدي النقر على الزر "الانضمام الآن" إلى ظهور شاشة المعلومات.

مواصفات التصميم
تنقسم شاشة المعلومات إلى ثلاثة عناصر: العنوان والرسالة والأزرار. يجب توفُّر جميع المكوّنات الثلاثة، ويجب أن تحتوي على النص وعناصر واجهة المستخدم المحدّدة في هذه الإرشادات. لا تضمِّن أي نصوص أو صور إضافية في هذه الشاشة، ولكن يمكنك تضمين نصوص وصور إضافية في شاشات أخرى.

- العنوان
- رسالة
- الأزرار
- بطاقة سفلية
- الخلفية الشفافة
العنوان
| نص | التغييرات في خيارات إكمال الدفع |
| الخط | Roboto (تطبيق على جميع الخطوط) |
| حجم الخط | 18sp |
| لون الخط | #202124 |
رسالة
| النص 1 | لديك الآن خيارات إضافية متوفّرة عند الدفع، وذلك بسبب التغييرات الأخيرة على اللوائح التنظيمية في كوريا الجنوبية. سيحدِّد اختيارك ما يلي:
|
| حجم الخط | 14sp |
| ارتفاع السطر | 20 |
| لون الخط | #5F6368 |
| النص 2 | لا تحمي Google سوى عمليات الشراء التي تتم من خلال Google Play. لا تتوفّر ميزات Play، مثل بطاقات هدايا Play وبرنامج Play Points وعناصر التحكّم في الشراء وميزة إدارة الاشتراكات، إلا في حال اختيار Google Play عند الدفع. |
| حجم الخط | 12sp |
| ارتفاع السطر | 16 |
| لون الخط | #5F6368 |
زر 1
| نص | مزيد من المعلومات |
| محاذاة النص | تم التوسيط |
| حجم الخط | 14sp |
| كثافة الخط | متوسط |
| لون الخط | #01875F |
| لون الخلفية | #FFFFFF |
| الأبعاد | الارتفاع:36، العرض: تغيير الحجم ليناسب الحاوية |
| نصف قطر الزاوية | 4dp |
| المخطَّط | 1dp، #DADCE0 |
| رابط | روابط إلى مقالة المساعدة في Google Play |
زر 2
| نص | متابعة |
| محاذاة النص | تم التوسيط |
| حجم الخط | 14sp |
| كثافة الخط | متوسط |
| لون الخط | #FFFFFF |
| لون الخلفية | #01875F |
| الأبعاد | الارتفاع:36، العرض: تغيير الحجم ليناسب الحاوية |
| نصف قطر الزاوية | 4dp |
| رابط | روابط تؤدي إلى شاشة "خيارات الفوترة" |
بطاقة سفلية
| الأبعاد | الارتفاع: متغيّر، العرض: %100 |
| نصف قطر الزاوية | 8dp, 8dp, 0, 0 |
| خلفية | #FFFFFF |
| المساحة المتروكة الداخلية | اليسار:24dp، اليمين:24dp، الأعلى:32dp، الأسفل: 24dp |
| الارتفاع | 8dp |
أفقي
في العرض الأفقي، تكون ورقة البيانات السفلية أعرض من العرض العمودي، ولكنها تتّبع مواصفات التصميم والوظائف نفسها.

| بطاقة سفلية | العرض: 500 وحدة بكسل كحد أقصى، الحشو الداخلي: 24 وحدة بكسل |
| العنوان | مثل العرض العمودي |
| رسالة | مثل العرض العمودي |
| الأزرار | الارتفاع:36، العرض: تغيير الحجم ليناسب الحاوية |
شاشة "خيارات الفوترة"
تعرض شاشة "اختيار نظام الفوترة" خيارَين للدفع أمام المستخدمين لإكمال عملية الشراء. لمساعدة المستخدمين في اتّخاذ قرار مدروس، يعرض كل خيار من خيارات خدمة الفوترة أيضًا طرق الدفع المتاحة. وبعد أن يختار المستخدمون خدمة الفوترة التي يريدونها، سيتمكّنون من إكمال عملية الشراء من خلالها.
وقت العرض
إذا كان المستخدم قد شاهد شاشة المعلومات من قبل، يجب أن تظهر شاشة خيار الفوترة فور اتخاذ المستخدم إجراءً واضحًا لبدء عملية شراء.
كيفية العرض
يجب عرض شاشة "اختيار الفوترة" في ورقة نموذجية في أسفل الشاشة، ويجب أن تتّبع المواصفات نفسها المتّبعة في شاشة المعلومات.
تمثيل مرئي متساوٍ
يجب أن تظهر الأزرار الخاصة بخدمة الفوترة الإضافية داخل التطبيق وخدمة الفوترة في Google Play للمستخدم بطريقة عادلة ومتساوية. ويشمل ذلك، على سبيل المثال لا الحصر، التساوي في أحجام الأزرار، وحجم النص ونمطه، وأهداف النقر، وأحجام الرموز. يُرجى عدم إضافة أي نصوص أو صور أو تغييرات في الأنماط غير محدّدة في هذه الإرشادات.
مثال: يؤدي النقر على زر "الانضمام الآن" إلى فتح شاشة اختيار نظام الفوترة.

مواصفات التصميم
تتضمّن شاشة "خيارات الفوترة" أربعة عناصر مميّزة: العنوان والوصف وزر المطوّر وزر Google Play. يجب استخدام جميع المكوّنات، ويجب أن تحتوي على النص وعناصر واجهة المستخدم المحدّدة في هذه الإرشادات. يُرجى عدم تضمين أي نصوص أو صور إضافية على هذه الشاشة، ولكن يمكنك تضمين نصوص وصور إضافية على الشاشات الأخرى التي تملكها.
تتوفّر مواد العرض المرئية الخاصة بـ Google Play ورموز الدفع من خلال الروابط المقدَّمة أدناه.
مثال: في العرض العمودي، يجب أن يمتدّ ورقة البيانات السفلية على% 100 من إجمالي عرض الشاشة.

- العنوان
- الوصف
- زر المطوِّر
- زر Google Play
- بطاقة سفلية
- الخلفية الشفافة
العنوان
| نص | اختيار طريقة إكمال الدفع |
| الخط | Roboto (تطبيق على جميع الخطوط) |
| حجم الخط | 18sp |
| لون الخط | #202124 |
الوصف
| نص | يمكنك اختيار الجهة التي ستعمل على تأمين دفعتك ومعالجتها وتوفير خدمة العملاء. قد تختلف المزايا وطرق الدفع المتاحة. |
| حجم الخط | 14sp |
| لون الخط | #5F6368 |
| رابط نصي | مزيد من المعلومات |
| وجهة الرابط | الرابط |
| حجم الخط | 14sp |
| ديكور | تسطير |
| لون الخط | #5F6368 |
زر المطوِّر

- رمز التطبيق
- اسم التطبيق
- رموز طرق الدفع

- الحدّ الأقصى لعدد رموز طرق الدفع
- أسماء طرق الدفع بدلاً من الرموز
- العرض 360dp
- عرض 480 وحدة بكسل مستقلة الكثافة
رموز طرق الدفع
تغيير الحجم ليتناسب مع عرض الشاشة
حاوية الأزرار
| المخطَّط | نقطة واحدة، #DADCE0 |
| نصف قطر الزاوية | 4dp |
| المساحة المتروكة الداخلية | 16dp, 16dp, 16dp, 16dp, |
رمز التطبيق
| الأبعاد | الارتفاع: 24 وحدة بكسل مستقلة عن الكثافة، العرض: متغير |
العنوان
| نص | {App Name} |
| حجم الخط | 14sp |
| لون الخط | #202124 |
طرق الدفع
| الأبعاد | 32 وحدة بكسل مستقلة عن الكثافة × 20 وحدة بكسل مستقلة عن الكثافة |
| نصف قطر الزاوية | 2 |
| الكمية | 5 كحدّ أقصى، وإذا كان هناك أكثر من 5، سيتم عرض مؤشر إضافي |
| مؤشر إضافي | + المزيد (يتم الانتقال إلى السطر التالي على الشاشات الضيقة) |
| حجم الخط | 12sp |
| لون الخط | #5F6368 |
زر Google Play

- الرمز
- العنوان
- طرق الدفع المقبولة
- مؤشر إضافي
حاوية الأزرار
| المخطَّط | نقطة واحدة، #DADCE0 |
| نصف قطر الزاوية | 4dp |
| المساحة المتروكة الداخلية | 16dp, 16dp, 16dp, 16dp, |
رمز التطبيق
| مادة عرض الصورة | Google Play prism |
| الأبعاد | 24dp X 24dp |
العنوان
| نص | Google Play |
| حجم الخط | 14sp |
| لون الخط | #202124 |
طرق الدفع
| مادة عرض الصورة | الرابط |
| مؤشر إضافي | والمزيد |
| حجم الخط | 12sp |
| لون الخط | #5F6368 |
أفقي
مثال: في العرض الأفقي، يكون عرض ورقة البيانات السفلية أكبر من العرض العمودي، ولكنها تتّبع مواصفات التصميم والوظائف نفسها.

| بطاقة سفلية | العرض: 500 وحدة بكسل كحد أقصى، الحشو الداخلي: 24 وحدة بكسل |
| العنوان | مثل العرض العمودي |
| رسالة | مثل العرض العمودي |
| الأزرار | مثل العرض العمودي |