نظرة عامة
يتيح البرنامج التجريبي لميزة "الفوترة حسب اختيار المستخدم" للمطوّرين المشاركين تجربة توفير خيار نظام فوترة بديل إلى جانب نظام الفوترة في Google Play. تم تصميم هذا البرنامج لمساعدتنا في التعرّف على جدوى توفير هذا الحل للمستخدمين. تهدف إرشادات تجربة المستخدم هذه إلى الحفاظ على توفير تجربة متّسقة للمستخدمين ومساعدتهم على اتّخاذ قرارات مدروسة.
يجب عرض شاشة معلومات وشاشة منفصلة لخيار الفوترة إذا كنت مشاركًا في البرنامج التجريبي. يجب عرض شاشة المعلومات للمستخدمين عند بدء عملية شراء لأول مرة فقط، بينما يجب عرض شاشة خيار الفوترة قبل كل عملية شراء. يجب تنفيذ الرسائل المخصّصة للمستخدمين ومواصفات واجهة المستخدم لكلتا الشاشتين وفقًا للإرشادات التالية.
![]() تطبيق المطوّر |
![]() شاشة المعلومات للمستخدمين |
![]() شاشة اختيار الفوترة |
اختيار البلد واللغة
اختَر بلد المستخدمين ولغتهم للاطّلاع على سلاسل نصوص واجهة المستخدم ذات الصلة في مواصفات التصميم أدناه.
معلومات للمستخدمين
تساعد شاشة المعلومات المستخدمين على فهم سياق التغيير وتوفّر معلومات إضافية لمساعدتهم في اتخاذ قرار مدروس.
حالات العرض
يجب عرض شاشة المعلومات للمستخدمين في بداية عملية الشراء الأولى بعد إضافة نظام فوترة بديل. ولا يلزم عرض هذه الرسالة عند إجراء عمليات شراء لاحقة من قِبل المستخدم نفسه. عرض شاشة المعلومات مباشرةً بعد أن يتّخذ المستخدم إجراءً واضحًا لبدء عملية شراء
حالات عرض السعر
يجب أن يكون سعر الشراء واضحًا وظاهرًا للمستخدمين قبل عرض شاشة المعلومات أو شاشة خيار الفوترة.
كيفية العرض
يجب عرض شاشة المعلومات في ورقة أسفل الشاشة مشروطة. تشبه البطاقة السفلية المقيِّدة مربّع الحوار المقيِّد الذي يظهر بشكل متحرك من أسفل الشاشة ويبقى مثبّتًا في الأسفل. ويتم عرضه فوق جميع عناصر واجهة المستخدم على الشاشة الأساسية. يتم حجب الشاشة الأساسية خلف طبقة داكنة للإشارة إلى أنّها لن تستجيب لتفاعل المستخدم.
يمكنك الرجوع إلى Google Material Design للحصول على مزيد من المعلومات حول التصميم و التنفيذ للأوراق السفلية المشروطة.
إجراءات المستخدم
يجب أن يتم تشغيل البطاقة السفلية عندما ينقر المستخدم على زر أو عنصر آخر من عناصر واجهة المستخدم في تطبيقك يؤدي إلى بدء عملية شراء. يمكن للمستخدم اتّخاذ ثلاثة إجراءات محتملة من شاشة المعلومات:
متابعة
يؤدي النقر على زر "متابعة" إلى إغلاق شاشة المعلومات وفتح شاشة خيار الفوترة.
مزيد من المعلومات
يؤدي النقر على الزر "مزيد من المعلومات" إلى فتح مقالة في "مركز مساعدة Google" ضمن متصفّح ويب.
إغلاق
إذا أراد المستخدمون إغلاق ورقة البيانات السفلية والرجوع إلى الشاشة الأساسية، يمكنهم إغلاق ورقة البيانات السفلية من خلال:
- النقر خارج حاوية البطاقة السفلية
- النقر على زر "الرجوع" في نظام Android
لا يلزم عرض شاشة المعلومات مرة أخرى بعد إغلاقها أو بعد أن ينقر المستخدم على "متابعة".
مثال: عندما ينقر المستخدم على زر الشراء في تطبيقك، سيؤدي الزر إلى تشغيل شاشة المعلومات.
مواصفات التصميم
تنقسم شاشة المعلومات إلى ثلاثة مكوّنات: العنوان والرسالة والأزرار. يجب توفُّر جميع المكوّنات الثلاثة، ويجب أن تتضمّن النص وعناصر واجهة المستخدم المحدّدة في هذه الإرشادات. لا تضِف أي نصوص أو صور إضافية على هذه الشاشة، ولكن يمكنك إضافة نصوص وصور إضافية على شاشات أخرى.
- العنوان
- النص 1
- النص 2
- الأزرار
- البطاقة السفلية
- الخلفية الشفافة
العنوان
نص |
اختيار البلد واللغة
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
الخط | Roboto (تطبيق على جميع الخطوط) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
حجم الخط | 18sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
لون الخط | #202124 |
النص 1
تُستخدَم لتمييز النقاط الرئيسية التي تُعتبر معلومات مهمة.
نص |
اختيار البلد واللغة
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
حجم الخط | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ارتفاع السطر | 20 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
لون الخط | #5F6368 |
النص 2
تُستخدَم لعرض معلومات ثانوية ذات أولوية منخفضة.
نص |
اختيار البلد واللغة
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
حجم الخط | 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 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
رابط نصي |
اختيار البلد واللغة
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
وجهة الرابط | روابط إلى مساعدة Google Play | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
حجم الخط | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
زخرفة | تسطير | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
لون الخط | #5F6368 |
زر المطوِّر
- رمز التطبيق
- اسم التطبيق
- رموز طرق الدفع
- مؤشر إضافي
- الحدّ الأقصى لعدد رموز طرق الدفع
- عرض 360 وحدة بكسل مستقلة عن الكثافة
- عرض 480 وحدة بكسل مستقلة الكثافة
رموز طرق الدفع
تغيير الحجم ليتناسب مع عرض الشاشة
حاوية الأزرار
تصميم مخطَّط | نقطة واحدة، #DADCE0 |
نصف قطر الزاوية | 4dp |
المساحة المتروكة الداخلية | 16dp, 16dp, 16dp, 16dp |
رمز التطبيق
الأبعاد | الارتفاع: 24 وحدة بكسل مستقلة عن الكثافة، العرض: متغير |
العنوان
نص | {App Name} |
حجم الخط | 14sp |
لون الخط | #202124 |
طُرق الدفع
الأبعاد | الارتفاع: 32 وحدة بكسل مستقلة عن الكثافة، العرض: 20 وحدة بكسل مستقلة عن الكثافة | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
نصف قطر الزاوية | 2dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
الكمية | 5 كحد أقصى، وإذا كان هناك أكثر من 5، سيظهر مؤشر إضافي | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
مؤشر إضافي |
اختيار البلد واللغة
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
حجم الخط | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
لون الخط | #5F6368 |
زر Google Play
- رمز
- العنوان
- طرق الدفع المقبولة
- مؤشر إضافي
حاوية الأزرار
تصميم مخطَّط | نقطة واحدة، #DADCE0 |
نصف قطر الزاوية | 4dp |
المساحة المتروكة الداخلية | 16dp, 16dp, 16dp, 16dp |
رمز التطبيق
مادة عرض الصورة | Google Play prism |
الأبعاد | الارتفاع: 24dp، العرض: 24dp |
العنوان
نص | Google Play |
حجم الخط | 14sp |
لون الخط | #202124 |
طُرق الدفع
مادة عرض الصورة | الرابط | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
مؤشر إضافي |
اختيار البلد واللغة
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
حجم الخط | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
لون الخط | #5F6368 |
أفقي
مثال: في العرض الأفقي، يكون ورقة البيانات السفلية أعرض من العرض العمودي، ولكنها تتبع مواصفات التصميم والوظائف نفسها.
البطاقة السفلية | العرض: 500 وحدة بكسل كحد أقصى، الحشو الداخلي: 24 وحدة بكسل |
العنوان | مثل العرض العمودي |
رسالة | مثل العرض العمودي |
الأزرار | مثل العرض العمودي |
لمزيد من التفاصيل حول البرنامج التجريبي لميزة الفوترة حسب اختيار المستخدم والأسئلة الشائعة، يُرجى الانتقال إلى مركز المساعدة.