دستورالعمل‌های Interim UX برای سیستم‌های صورت‌حساب درون‌برنامه جایگزین

نمای کلی

برای حفظ تجربه کاربری هماهنگ و کمک به کاربران برای انتخاب آگاهانه، اگر سیستم صورت‌حساب درون‌برنامه جایگزین Google Play را ارائه می‌دهید، باید صفحه اطلاعات و صفحه انتخاب صورت‌حساب جداگانه‌ای را نمایش دهید. صفحه اطلاعات فقط باید اولین باری که کاربر خریدی را شروع می‌کند به او نشان داده شود، درحالی‌که صفحه انتخاب صورت‌حساب باید قبل‌از هر خرید نشان داده شود. پیام‌های سَمت کاربر و مشخصات واسط کاربر برای هر دو صفحه باید طبق رهنمودهای زیر پیاده‌سازی شود.

رهنمودهای میانای کاربر برای صفحه اطلاعات و صفحه انتخاب صورت‌حساب

اطلاعات برای کاربران

صفحه اطلاعات به کاربران کمک می‌کند تا بافت تغییر را درک کنند و اطلاعات بیشتری به آن‌ها می‌دهد تا بتوانند انتخابی آگاهانه داشته باشند.

زمان نمایش

صفحه اطلاعات باید در شروع اولین خرید کاربران پس‌از افزودن سیستم صورت‌حساب درون‌برنامه جایگزین به آن‌ها نشان داده شود. این پیام نباید در خریدهای بعدی همان کاربر نمایش داده شود. صفحه اطلاعات را بلافاصله پس‌از اینکه کاربر اقدام صریحی برای شروع خرید انجام داد نمایش دهید.

زمان نمایش قیمت

قیمت خرید باید قبل‌از اینکه صفحه اطلاعات یا صفحه انتخاب صورت‌حساب به کاربران نشان داده شود، برای آن‌ها قابل‌مشاهده و واضح باشد.

نحوه نمایش دادن

صفحه اطلاعات باید در برگه پایین وجهی نمایش داده شود. برگه پایین مُدال شبیه به کادر گفتگوی مُدال است که از پایین صفحه پویانمایی می‌شود و به پایین سنجاق می‌شود. این دکمه بالاتر از همه عناصر میانای کاربر در صفحه زیرین قرار دارد. صفحه زیرین پشت یک پرده تیره پنهان می‌شود تا نشان دهد که به تعامل کاربر پاسخ نخواهد داد.

برای اطلاعات بیشتر درباره طراحی و پیاده‌سازی برگه‌های پایین مدال، به Google Material Design مراجعه کنید.

کنش‌های کاربر

برگه پایین باید زمانی فعال شود که کاربر روی دکمه یا عنصر میانای کاربر دیگری در برنامه شما که خرید را آغاز می‌کند، تک‌ضرب بزند. کاربر می‌تواند سه کنش احتمالی را از صفحه اطلاعات انجام دهد:

ادامه

با تک‌ضرب زدن روی دکمه «ادامه»، صفحه اطلاعات بسته می‌شود و صفحه انتخاب صورت‌حساب راه‌اندازی می‌شود.

بیشتر بدانید

با تک‌ضرب زدن روی دکمه «بیشتر بدانید»، مقاله «مرکز راهنمایی Google» در مرورگر وب راه‌اندازی می‌شود.

بستن

اگر کاربران بخواهند برگه پایین را ببندند و به صفحه زیرین برگردند، می‌توانند برگه پایین را با انجام کارهای زیر ببندند:

  • تک‌ضرب زدن خارج از محفظه برگ زیرین
  • تک‌ضرب زدن روی دکمه «برگشت» سیستم Android

پس‌از بسته شدن صفحه اطلاعات یا پس‌از اینکه کاربر روی «ادامه» تک‌ضرب زده است، لازم نیست صفحه اطلاعات دوباره نمایش داده شود.

مثال: قیمت خرید به‌طور واضح قبل‌از اینکه کاربر خرید را شروع کند نمایش داده می‌شود. با تک‌ضرب زدن روی دکمه «اکنون بپیوندید»، صفحه اطلاعات راه‌اندازی می‌شود.

صفحه اطلاعات کاربر

مشخصات طراحی

صفحه اطلاعات به سه بخش تقسیم می‌شود: عنوان، پیام، و دکمه‌ها. هر سه مؤلفه الزامی است و باید دقیقاً حاوی نوشتار و عناصر میانای کاربر تعریف‌شده در این دستورالعمل‌ها باشد. هیچ نوشتار یا تصویر دیگری در این صفحه اضافه نکنید، اما می‌توانید نوشتار و تصویر اضافی در صفحه‌های دیگر اضافه کنید.

صفحه گزینه‌های تسویه‌حساب که موقعیت مؤلفه‌های الزامی را نشان می‌دهد

  1. عنوان
  2. پیام
  3. دکمه‌ها
  4. برگ زیرین
  5. پرده پس‌زمینه

عنوان

نوشتار تغییرات در گزینه‌های تسویه‌حساب
قلم Roboto (اعمال برای همه قلم‌ها)
اندازه قلم ‫۱۸sp
رنگ قلم #202124

پیام

نوشتار ۱ به‌دلیل تغییرات نظارتی اخیر در کره جنوبی، اکنون گزینه‌های بیشتری هنگام تسویه‌حساب دراختیار دارید. موارد زیر به‌انتخاب شما تعیین خواهد شد:
  • مسئول امنیت خرید، پردازش پرداخت، و ذخیره‌سازی اطلاعات پرداخت
  • مسئول ارائه پشتیبانی مشتری برای خرید
  • روش‌های پرداخت قابل‌استفاده
  • مزایای دردسترس درهنگام خرید
اندازه قلم ‫۱۴ پیکسل مستقل از مقیاس
ارتفاع خط 20
رنگ قلم #5F6368
نوشتار ۲ فقط خریدهای انجام‌شده ازطریق Google Play تحت حفاظت Google قرار می‌گیرند. ویژگی‌های Play (مثلاً کارت‌های هدیه Play، «امتیازهای Play»، و مدیریت اشتراک) تنها درصورتی دردسترس هستند که Google Play را هنگام تسویه‌حساب انتخاب کرده باشید.
اندازه قلم ‫۱۲sp
ارتفاع خط 16
رنگ قلم #5F6368

دکمه ۱

نوشتار بیشتر بدانید
تراز نوشتار متمرکز
اندازه قلم ‫۱۴ پیکسل مستقل از مقیاس
سیاهی قلم متوسط
رنگ قلم #01875F
رنگ پس‌زمینه #FFFFFF
ابعاد ارتفاع:۳۶، عرض: مقیاس به محتوا
شعاع گوشه ‫۴ پیکسل مستقل از تراکم
خطوط خارجی 1dp, #DADCE0
پیوند پیوندها به مقاله راهنمای Google Play

دکمه ۲

نوشتار ادامه
تراز نوشتار متمرکز
اندازه قلم ‫۱۴ پیکسل مستقل از مقیاس
سیاهی قلم متوسط
رنگ قلم #FFFFFF
رنگ پس‌زمینه #01875F
ابعاد ارتفاع:۳۶، عرض: مقیاس به محتوا
شعاع گوشه ‫۴ پیکسل مستقل از تراکم
پیوند پیوندها به صفحه «انتخاب صورت‌حساب»

برگ زیرین

ابعاد ارتفاع: متغیر، عرض: ۱۰۰٪
شعاع گوشه 8dp, 8dp, 0, 0
پس‌زمینه #FFFFFF
لایه‌گذاری داخلی چپ:۲۴ پیکسل مستقل از تراکم، راست:۲۴ پیکسل مستقل از تراکم، بالا:۳۲ پیکسل مستقل از تراکم، پایین: ۲۴ پیکسل مستقل از تراکم
ارتفاع ‫۸ پیکسل مستقل از تراکم

منظره

در نمای افقی، برگه پایین عریض‌تر از نمای عمودی است، اما درغیراین‌صورت از همان مشخصات طراحی و عملکرد پیروی می‌کند.

صفحه گزینه‌های تسویه‌حساب در حالت افقی

برگ زیرین عرض: حداکثر ۵۰۰dp، حاشیه داخلی: ۲۴dp
عنوان مشابه نمای عمودی
پیام مشابه نمای عمودی
دکمه‌ها ارتفاع:۳۶، عرض: مقیاس به محتوا

صفحه انتخاب روش صدور صورت‌حساب

صفحه انتخاب صورت‌حساب دو گزینه تسویه‌حساب برای تکمیل خرید به کاربران ارائه می‌دهد. برای کمک به کاربران در تصمیم‌گیری آگاهانه، هر گزینه سرویس صورت‌حساب روش‌های پرداخت دردسترس را نیز نمایش می‌دهد. وقتی کاربران انتخابشان را انجام دهند، خریدشان را ازطریق آن سرویس صورت‌حساب تکمیل خواهند کرد.

زمان نمایش

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

نحوه نمایش دادن

صفحه «انتخاب صورت‌حساب» باید در برگه پایین وجهی نمایش داده شود و از همان مشخصات صفحه اطلاعات پیروی کند.

نمایش دیداری برابر

دکمه‌های سرویس صورت‌حساب درون‌برنامه اضافی و سرویس صورت‌حساب Google Play باید به‌طور عادلانه و برابر نمایش داده شوند. این شامل، اما نه محدود به، یکسان بودن اندازه دکمه، اندازه/ سبک نوشتار، هدف‌های تک‌ضرب، و اندازه‌های نماد می‌شود. لطفاً هیچ نوشتار، تصویر، یا تغییر سبک دیگری که در این دستورالعمل‌ها تعریف نشده است اضافه نکنید.

مثال: ضربه زدن روی دکمه «اکنون بپیوندید» صفحه انتخاب صورت‌حساب را راه‌اندازی می‌کند.

صفحه انتخاب صورت‌حساب با نمایش برابر برای هر گزینه صورت‌حساب

مشخصات طراحی

صفحه انتخاب صورت‌حساب چهار مؤلفه متمایز دارد: عنوان، شرح، دکمه توسعه‌دهنده، و دکمه Google Play. همه مؤلفه‌ها باید استفاده شوند و باید دقیقاً حاوی نوشتار و عناصر میانای کاربر تعریف‌شده در این دستورالعمل‌ها باشند. از شما می‌خواهیم که هیچ نوشتار یا تصویر دیگری در این صفحه اضافه نکنید، اما می‌توانید نوشتار و تصویر دیگری در صفحه‌های دیگری که متعلق به شما است اضافه کنید.

دارایی‌های دیداری برای Google Play و نمادهای پرداخت ازطریق پیوندهای ارائه‌شده در زیر دردسترس است.

مثال: در نمای عمودی، برگه پایین باید ۱۰۰٪ کل عرض صفحه‌نمایش را پوشش دهد.

برگ زیرین که موقعیت عناصر الزامی را نشان می‌دهد

  1. عنوان
  2. شرح
  3. دکمه توسعه‌دهنده
  4. دکمه Google Play
  5. برگ زیرین
  6. پرده پس‌زمینه

عنوان

نوشتار نحوه تسویه‌حساب را انتخاب کنید
قلم Roboto (اعمال برای همه قلم‌ها)
اندازه قلم ‫۱۸sp
رنگ قلم #202124

شرح

نوشتار انتخاب کنید چه کسی امنیت و پردازش پرداخت شما را برعهده خواهد داشت و خدمات مشتری را ارائه خواهد کرد. مزایا و روش‌های پرداخت دردسترس ممکن است متفاوت باشند.
اندازه قلم ‫۱۴ پیکسل مستقل از مقیاس
رنگ قلم #5F6368
پیوند نوشتاری بیشتر بدانید
مقصد پیوند پیوند
اندازه قلم ‫۱۴sp
تزئینات زیرخط
رنگ قلم #5F6368

دکمه توسعه‌دهنده

ui requirements for a developer button

  1. نماد برنامه
  2. نام برنامه
  3. نمادهای روش پرداخت

گزینه‌های بیشتر برای دکمه توسعه‌دهنده

    نمادهای روش پرداخت

  1. حداکثر تعداد نمادهای روش پرداخت
  2. نام روش‌های پرداخت به‌جای نمادها
  3. مقیاس‌بندی براساس عرض صفحه‌نمایش

  4. عرض ۳۶۰dp
  5. عرض ۴۸۰ پیکسل مستقل از تراکم

محفظه دکمه

خطوط خارجی 1pt, #DADCE0
شعاع گوشه ‫۴ پیکسل مستقل از تراکم
لایه‌گذاری داخلی 16dp, 16dp, 16dp, 16dp,

نماد برنامه

ابعاد ارتفاع: ۲۴ پیکسل مستقل از تراکم، عرض: متغیر

عنوان

نوشتار {App Name}
اندازه قلم ‫۱۴ پیکسل مستقل از مقیاس
رنگ قلم #202124

روش‌های پرداخت

ابعاد ‫۳۲ پیکسل مستقل از تراکم × ۲۰ پیکسل مستقل از تراکم
شعاع گوشه 2
تعداد حداکثر ۵، اگر >۵ دردسترس بود، نشانگر اضافی نمایش داده شود
نشانگر اضافی + more (wraps to next line on narrow screens)
اندازه قلم ‫۱۲sp
رنگ قلم #5F6368

دکمه Google Play

دکمه Google Play

  1. نماد
  2. عنوان
  3. روش‌های پرداخت موردقبول
  4. نشانگر اضافی

محفظه دکمه

خطوط خارجی 1pt, #DADCE0
شعاع گوشه ‫۴ پیکسل مستقل از تراکم
لایه‌گذاری داخلی 16dp, 16dp, 16dp, 16dp,

نماد برنامه

دارایی تصویر منشور Google Play
ابعاد ‫۲۴ پیکسل مستقل از تراکم × ۲۴ پیکسل مستقل از تراکم

عنوان

نوشتار Google Play
اندازه قلم ‫۱۴ پیکسل مستقل از مقیاس
رنگ قلم #202124

روش‌های پرداخت

دارایی تصویر پیوند
نشانگر اضافی ‫+ موارد دیگر
اندازه قلم ‫۱۲sp
رنگ قلم #5F6368

منظره

مثال: در نمای افقی، برگه پایین عریض‌تر از نمای عمودی است، اما درغیراین‌صورت از همان مشخصات طراحی و عملکرد پیروی می‌کند.

برگه زیرین در حالت افقی

برگ زیرین عرض: حداکثر ۵۰۰dp، حاشیه داخلی: ۲۴dp
عنوان مشابه نمای عمودی
پیام مشابه نمای عمودی
دکمه‌ها مشابه نمای عمودی