หลักเกณฑ์ UX ฉบับชั่วคราวสำหรับระบบการเรียกเก็บเงินระบบอื่นสำหรับการซื้อในแอป

ภาพรวม

คุณต้องแสดงหน้าจอข้อมูลและหน้าจอตัวเลือกการเรียกเก็บเงินแยกต่างหากหากเสนอระบบการเรียกเก็บเงินในแอปทางเลือกนอกเหนือจากของ Google Play เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่สอดคล้องกันและช่วยให้ผู้ใช้มีข้อมูลประกอบการตัดสินใจ หน้าจอข้อมูลจะต้องแสดงต่อผู้ใช้แต่ละรายเฉพาะครั้งแรกที่ผู้ใช้เริ่มทำการซื้อ ส่วนหน้าจอตัวเลือกการเรียกเก็บเงินควรแสดงก่อนการซื้อทุกครั้ง ข้อความที่แสดงต่อผู้ใช้และข้อกำหนด UI สำหรับทั้ง 2 หน้าจอควร นำไปใช้ตามหลักเกณฑ์ต่อไปนี้

ข้อมูลสำหรับผู้ใช้

หน้าจอข้อมูลจะช่วยให้ผู้ใช้เข้าใจบริบทของการเปลี่ยนแปลงและ ให้ข้อมูลเพิ่มเติมเพื่อช่วยให้ผู้ใช้มีข้อมูลประกอบการตัดสินใจ

เวลาที่แสดง

หน้าจอข้อมูลควรแสดงต่อผู้ใช้เมื่อเริ่มการซื้อครั้งแรกหลังจากที่คุณเพิ่มระบบการเรียกเก็บเงินสำหรับการซื้อในแอประบบอื่น ข้อความนี้ ไม่จำเป็นต้องแสดงในการซื้อครั้งต่อๆ ไปของผู้ใช้รายเดียวกัน แสดงหน้าจอข้อมูลทันทีหลังจากที่ผู้ใช้ดำเนินการอย่างชัดเจน เพื่อเริ่มการซื้อ

เวลาที่แสดงราคา

ผู้ใช้ควรมองเห็นราคาซื้อได้อย่างชัดเจนก่อนที่จะเห็นหน้าจอข้อมูลหรือหน้าจอตัวเลือกการเรียกเก็บเงิน

วิธีแสดง

หน้าจอข้อมูลควรแสดงในชีตด้านล่างแบบโมดัล แผ่นชีตด้านล่างแบบโมดอลคล้ายกับกล่องโต้ตอบแบบโมดอลที่เคลื่อนไหวขึ้นมาจากด้านล่างของหน้าจอและปักหมุดไว้ที่ด้านล่าง โดยจะอยู่เหนือองค์ประกอบ UI ทั้งหมด บนหน้าจอพื้นฐาน หน้าจอที่อยู่ด้านล่างจะถูกบดบังด้วย ดาร์กสกริมเพื่อระบุว่าหน้าจอดังกล่าวจะไม่ตอบสนองต่อการโต้ตอบของผู้ใช้

ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบและการใช้งาน แผ่นล่างแบบโมดัลได้ที่ Material Design ของ Google

การดำเนินการของผู้ใช้

ควรทริกเกอร์ Bottom Sheet เมื่อผู้ใช้แตะปุ่มหรือองค์ประกอบ UI อื่นๆ ในแอปที่เริ่มการซื้อ ผู้ใช้สามารถดำเนินการได้ 3 อย่างจากหน้าจอข้อมูล

ดำเนินการต่อ

การแตะปุ่ม "ต่อไป" จะปิดหน้าจอข้อมูลและเปิด หน้าจอตัวเลือกการเรียกเก็บเงิน

ดูข้อมูลเพิ่มเติม

การแตะปุ่ม "ดูข้อมูลเพิ่มเติม" จะเปิดบทความในศูนย์ช่วยเหลือของ Google ใน เว็บเบราว์เซอร์

ปิด

หากผู้ใช้ต้องการปิด Bottom Sheet และกลับไปยังหน้าจอพื้นฐาน ผู้ใช้สามารถปิด Bottom Sheet ได้โดยทำดังนี้

• การแตะนอกคอนเทนเนอร์ของ Bottom Sheet
• การแตะปุ่ม "กลับ" ของระบบ Android

ไม่จำเป็นต้องแสดงหน้าจอข้อมูลอีกครั้งหลังจากที่ปิดไปแล้วหรือหลังจากที่ผู้ใช้แตะ "ต่อไป"

ตัวอย่าง: ราคาซื้อจะแสดงอย่างชัดเจนก่อนที่ผู้ใช้จะเริ่ม การซื้อ การแตะปุ่ม "เข้าร่วมเลย" จะทําให้หน้าจอข้อมูลปรากฏขึ้น

ข้อกำหนดการออกแบบ

หน้าจอข้อมูลแบ่งออกเป็น 3 องค์ประกอบ ได้แก่ ชื่อ ข้อความ และปุ่ม โดยต้องมีคอมโพเนนต์ทั้ง 3 รายการและต้องมีข้อความและองค์ประกอบ UI ที่ตรงกัน ตามที่กำหนดไว้ในหลักเกณฑ์เหล่านี้ อย่าใส่ข้อความหรือรูปภาพเพิ่มเติมในหน้าจอนี้ แต่คุณสามารถใส่ข้อความและรูปภาพเพิ่มเติมในหน้าจออื่นๆ ได้

1. ชื่อ
2. ข้อความ
3. ปุ่ม
4. Bottom Sheet
5. ฉากหลัง

ชื่อ

ข้อความ

ปุ่ม 1

ปุ่ม 2

Bottom Sheet

แนวนอน

ในมุมมองแนวนอน Bottom Sheet จะกว้างกว่าในมุมมองแนวตั้ง แต่ นอกเหนือจากนั้นจะเป็นไปตามข้อกำหนดการออกแบบและฟังก์ชันการทำงานเดียวกัน

หน้าจอตัวเลือกการเรียกเก็บเงิน

หน้าจอตัวเลือกการเรียกเก็บเงินจะแสดงตัวเลือกขั้นตอนการชำระเงิน 2 รายการให้ผู้ใช้ทำการซื้อให้เสร็จสมบูรณ์ ตัวเลือกบริการเรียกเก็บเงินแต่ละรายการจะแสดงรูปแบบการชำระเงินที่ใช้ได้ด้วย เพื่อช่วยให้ผู้ใช้มีข้อมูลประกอบการตัดสินใจ เมื่อผู้ใช้เลือกแล้ว ผู้ใช้จะดำเนินการซื้อให้เสร็จสมบูรณ์ ผ่านบริการเรียกเก็บเงินนั้นต่อไป

เวลาที่แสดง

หากผู้ใช้เห็นหน้าจอข้อมูลแล้ว หน้าจอตัวเลือกการเรียกเก็บเงิน ควรปรากฏขึ้นทันทีหลังจากที่ผู้ใช้ดำเนินการอย่างชัดเจน เพื่อเริ่มการซื้อ

วิธีแสดง

หน้าจอตัวเลือกการเรียกเก็บเงินควรแสดงใน Bottom Sheet แบบโมดัลและ เป็นไปตามข้อกำหนดเดียวกันกับหน้าจอข้อมูล

การนำเสนอภาพอย่างเท่าเทียม

ปุ่มสำหรับบริการการเรียกเก็บเงินเพิ่มเติมสำหรับการซื้อในแอปและบริการการเรียกเก็บเงินของ Google Play ควรแสดงอย่างเท่าเทียมกันและยุติธรรม ซึ่งรวมถึงแต่ไม่จำกัดเพียงขนาดปุ่มที่เท่ากัน ขนาด/รูปแบบข้อความ เป้าหมายการแตะ และขนาดไอคอน โปรดอย่าเพิ่มข้อความ รูปภาพ หรือการเปลี่ยนแปลงสไตล์เพิ่มเติมที่ไม่ได้กำหนดไว้ในหลักเกณฑ์เหล่านี้

ตัวอย่างเช่น การแตะปุ่ม "เข้าร่วมเลย" จะทริกเกอร์หน้าจอตัวเลือกการเรียกเก็บเงิน

ข้อกำหนดการออกแบบ

หน้าจอตัวเลือกการเรียกเก็บเงินมีองค์ประกอบที่แตกต่างกัน 4 อย่าง ได้แก่ ชื่อ คำอธิบาย ปุ่มนักพัฒนาแอป และปุ่ม Google Play ควรใช้คอมโพเนนต์ทั้งหมด และควรมีข้อความและองค์ประกอบ UI ที่ตรงกันทุกประการตามที่กำหนดไว้ในหลักเกณฑ์เหล่านี้ เราขอให้คุณอย่าใส่ข้อความหรือรูปภาพเพิ่มเติมในหน้าจอนี้ แต่คุณสามารถใส่ข้อความและรูปภาพเพิ่มเติมในหน้าจออื่นๆ ที่คุณเป็นเจ้าของได้

ชิ้นงานภาพสำหรับ Google Play และไอคอนการชำระเงินมีให้บริการผ่านลิงก์ที่ระบุไว้ด้านล่าง

ตัวอย่าง: ในมุมมองแนวตั้ง ชีตด้านล่างควรครอบคลุมความกว้างของหน้าจอทั้งหมด 100%

1. ชื่อ
2. คำอธิบาย
3. ปุ่มนักพัฒนาแอป
4. ปุ่ม Google Play
5. Bottom Sheet
6. ฉากหลัง

ชื่อ

คำอธิบาย

ปุ่มนักพัฒนาแอป

1. ไอคอนแอป
2. ชื่อแอป
3. ไอคอนวิธีการชำระเงิน

ไอคอนวิธีการชำระเงิน

1. จำนวนไอคอนวิธีการชำระเงินสูงสุด
2. ชื่อวิธีการชำระเงินแทนไอคอน

ปรับขนาดให้พอดีกับความกว้างของหน้าจอ

3. ความกว้าง 360dp
4. ความกว้าง 480dp

คอนเทนเนอร์ปุ่ม

ไอคอนแอป

ชื่อ

วิธีการชำระเงิน

ปุ่ม Google Play

1. ไอคอน
2. ชื่อ
3. วิธีการชำระเงินที่ยอมรับ
4. ตัวบ่งชี้เพิ่มเติม

คอนเทนเนอร์ปุ่ม

ไอคอนแอป

ชื่อ

วิธีการชำระเงิน

แนวนอน

ตัวอย่าง: ในมุมมองแนวนอน Bottom Sheet จะกว้างกว่าในมุมมองแนวตั้ง แต่จะใช้ข้อกำหนดการออกแบบและฟังก์ชันการทำงานเดียวกัน