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

نمای کلی

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

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

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

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

چه زمانی نمایش داده شود

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

چه زمانی قیمت نمایش داده شود

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

نحوه نمایش

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

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

اقدامات کاربر

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

ادامه

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

بیشتر بدانید

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

رد کردن

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

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

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

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

صفحه نمایش اطلاعات کاربر

مشخصات طراحی

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

صفحه گزینه‌های پرداخت که موقعیت اجزای مورد نیاز را نشان می‌دهد

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

عنوان

متن تغییرات در گزینه‌های پرداخت شما
فونت Roboto (برای همه فونت‌ها اعمال می‌شود)
اندازه فونت ۱۸ قاشق غذاخوری
رنگ فونت #۲۰۲۱۲۴

پیام

متن ۱ به دلیل تغییرات اخیر نظارتی در کره جنوبی، اکنون گزینه‌های بیشتری در هنگام پرداخت دارید. انتخاب شما تعیین‌کننده موارد زیر خواهد بود:
  • چه کسی خرید شما را تضمین می‌کند، پرداخت شما را پردازش می‌کند و هرگونه اطلاعات پرداخت را ذخیره می‌کند؟
  • چه کسی پشتیبانی مشتری را برای خرید ارائه می‌دهد؟
  • از کدام روش‌های پرداخت می‌توانید استفاده کنید
  • کدام مزایا با خرید شما در دسترس است
اندازه فونت ۱۴ قاشق غذاخوری
ارتفاع خط ۲۰
رنگ فونت #5F6368
متن ۲ فقط خریدهایی که از طریق گوگل پلی انجام می‌شوند توسط گوگل ایمن هستند. ویژگی‌های پلی مانند کارت‌های هدیه پلی، امتیازهای پلی، کنترل خرید و مدیریت اشتراک فقط زمانی در دسترس هستند که هنگام پرداخت، گوگل پلی را انتخاب کنید.
اندازه فونت ۱۲ قاشق غذاخوری
ارتفاع خط ۱۶
رنگ فونت #5F6368

دکمه ۱

متن بیشتر بدانید
ترازبندی متن متمرکز
اندازه فونت ۱۴ قاشق غذاخوری
وزن فونت متوسط
رنگ فونت #01875F
رنگ پس زمینه #ففففف
ابعاد ارتفاع: ۳۶، عرض: مقیاس‌بندی بر اساس ظرف
شعاع گوشه 4dp
طرح کلی 1dp، #DADCE0
پیوند لینک به مقاله راهنمای گوگل پلی

دکمه ۲

متن ادامه
ترازبندی متن متمرکز
اندازه فونت ۱۴ قاشق غذاخوری
وزن فونت متوسط
رنگ فونت #ففففف
رنگ پس زمینه #01875F
ابعاد ارتفاع: ۳۶، عرض: مقیاس‌بندی بر اساس ظرف
شعاع گوشه 4dp
پیوند پیوندها به صفحه انتخاب صورتحساب

ورق پایین

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

منظره

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

صفحه گزینه‌های پرداخت در حالت افقی

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

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

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

چه زمانی نمایش داده شود

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

نحوه نمایش

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

نمایش بصری برابر

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

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

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

مشخصات طراحی

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

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

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

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

  1. عنوان
  2. توضیحات
  3. دکمه توسعه‌دهنده
  4. دکمه گوگل پلی
  5. ورق پایین
  6. اسکریم پس‌زمینه

عنوان

متن نحوه تسویه حساب را انتخاب کنید
فونت Roboto (برای همه فونت‌ها اعمال می‌شود)
اندازه فونت ۱۸ قاشق غذاخوری
رنگ فونت #۲۰۲۱۲۴

توضیحات

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

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

الزامات رابط کاربری برای یک دکمه توسعه‌دهنده

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

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

    آیکون‌های روش پرداخت

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

  4. عرض ۳۶۰dp
  5. عرض ۴۸۰dp

ظرف دکمه‌ای

طرح کلی ۱pt، #DADCE0
شعاع گوشه 4dp
بالشتک داخلی ۱۶dp، ۱۶dp، ۱۶dp، ۱۶dp،

آیکون برنامه

ابعاد ارتفاع: 24dp، عرض: متغیر

عنوان

متن {نام برنامه}
اندازه فونت ۱۴ قاشق غذاخوری
رنگ فونت #۲۰۲۱۲۴

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

ابعاد ۳۲dp در ۲۰dp
شعاع گوشه ۲
مقدار حداکثر ۵، اگر >۵ موجود باشد، نشانگر اضافی را نمایش می‌دهد
نشانگر اضافی + موارد بیشتر (در صفحات باریک به خط بعدی می‌رود)
اندازه فونت ۱۲ قاشق غذاخوری
رنگ فونت #5F6368

دکمه گوگل پلی

دکمه گوگل پلی

  1. آیکون
  2. عنوان
  3. روش‌های پرداخت پذیرفته‌شده
  4. نشانگر اضافی

ظرف دکمه‌ای

طرح کلی ۱pt، #DADCE0
شعاع گوشه 4dp
بالشتک داخلی ۱۶dp، ۱۶dp، ۱۶dp، ۱۶dp،

آیکون برنامه

تصویر دارایی منشور گوگل پلی
ابعاد ۲۴dp در ۲۴dp

عنوان

متن گوگل پلی
اندازه فونت ۱۴ قاشق غذاخوری
رنگ فونت #۲۰۲۱۲۴

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

تصویر دارایی پیوند
نشانگر اضافی +بیشتر
اندازه فونت ۱۲ قاشق غذاخوری
رنگ فونت #5F6368

منظره

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

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

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