หลักเกณฑ์ของแบรนด์

หากคุณกําลังพัฒนาสําหรับผู้ใช้ในรัสเซีย โปรดใช้ปุ่ม "บันทึกลงในโทรศัพท์" เนื่องจาก Google Wallet ไม่ได้ให้บริการในประเทศเหล่านี้ โปรดดู ชิ้นงานและหลักเกณฑ์ที่เกี่ยวข้อง หากคุณกําลังพัฒนาสําหรับผู้ใช้ที่ไม่ได้อยู่ใน RU โปรดอัปเดตปุ่มเพิ่มลงใน Google Wallet โดยการดาวน์โหลดเนื้อหาด้านล่าง

เอกสารส่วนนี้ออกแบบมาเพื่อช่วยคุณสร้างรูปภาพและองค์ประกอบอินเทอร์เฟซผู้ใช้อื่นๆ เพื่อให้ดูดีในแอป Google Wallet

ปุ่มเพิ่มลงใน Google Wallet

ปุ่มเพิ่มลงใน Google Wallet จะใช้ทุกครั้งที่คุณแนะนําให้ผู้ใช้บันทึกบัตรหรือบัตรจากแอปหรือเว็บไซต์ไปยัง Wallet ปุ่มเพิ่มลงใน Google Wallet ต้องเรียกใช้โฟลว์ Google Wallet API แบบใดแบบหนึ่ง ขั้นตอนเหล่านี้จะแสดงแอป Google Wallet ที่ผู้ใช้สามารถทําตามวิธีการบันทึกบัตรลงในอุปกรณ์ Android และบัญชี Google ปุ่มนี้ใช้ได้ในแอป เว็บไซต์ หรืออีเมล

ชิ้นงาน

ปุ่มเพิ่มลงใน Google Wallet พร้อมใช้งานในรูปแบบ Android XML, SVG และ PNG

ดาวน์โหลดชิ้นงาน - Android XML ดาวน์โหลดชิ้นงาน - SVG ดาวน์โหลดชิ้นงาน - PNG

ปุ่มเพิ่มลงใน Google Wallet ทั้งหมดที่แสดงในเว็บไซต์ แอป หรือการสื่อสารทางอีเมลต้องเป็นไปตามหลักเกณฑ์การใช้แบรนด์ซึ่งระบุไว้ในหน้านี้ ตัวอย่างของหลักเกณฑ์เหล่านี้รวมถึงแต่ไม่จํากัดเพียงรายการต่อไปนี้

• ขนาดเมื่อเทียบกับปุ่มหรือองค์ประกอบอื่นๆ ที่คล้ายกันของหน้าเว็บ
• ห้ามปรับแต่งรูปร่างและสีของปุ่ม
• พื้นที่ว่าง

ปุ่มที่แปลเป็นภาษาท้องถิ่น

ปุ่ม Google Wallet ที่แปลแล้วพร้อมให้ใช้งานในทุกตลาดที่ใช้ Wallet ได้ หากคุณกําลังพัฒนาสําหรับผู้ใช้ในตลาดเหล่านี้ ให้ใช้ปุ่มที่ลิงก์ด้านบนเสมอ อย่าสร้างปุ่มเพิ่มลงใน Google Wallet ในเวอร์ชันของคุณเอง หากปุ่มเวอร์ชันที่แปลแล้วไม่พร้อมใช้งานในตลาด ให้ใช้ปุ่มเวอร์ชันภาษาอังกฤษ

เพิ่มลงใน Google Wallet มีอยู่ในแอลเบเนีย, อาหรับ, อาร์เมเนีย, อาเซอร์ไบจาน, บอสเนีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย, รัสเซีย

ชื่อที่แปลแล้ว

เพื่อความชัดเจนสําหรับผู้ใช้ ชื่อผลิตภัณฑ์ Google Wallet จะได้รับการแปลในตลาดบางแห่ง หากคุณจะพัฒนาผู้ใช้ในประเทศเหล่านี้ ให้ใช้ชื่อที่แปลแล้วสําหรับเว็บ อีเมล และพิมพ์เสมอ อย่าสร้างคําว่า "Google Wallet" เวอร์ชันแปลของคุณเอง หากตลาดของคุณไม่อยู่ในรายการด้านล่าง ให้ใช้ "Google Wallet" เป็นภาษาอังกฤษ

ประเทศ	ชื่อ
เบลารุส	Google Кошелек
บราซิล	Carteira do Google
ชิลี	Billetera de Google
เช็กเกีย	Peněčenka Google
กรีซ	Ποддοдсжнgoogle
ฮ่องกง	Google 錢包
ลิทัวเนีย	Google Piniginunsubscribe
โปแลนด์	Portfel Google
โปรตุเกส	Carteira da Google
โรมาเนีย	Portofel Google
สโลวาเกีย	Google Pe Peaačenka
ไต้หวัน	Google 錢包
ตุรกี	Google ซูดาน
สหรัฐอาหรับเอมิเรตส์	محفرة Google
ยูเครน	Google Čаманець
สหรัฐอเมริกา (สเปน) *ใช้ชื่อนี้ในสหรัฐอเมริกาหาก UI ของคุณเป็นภาษาสเปน	Billetera de Google

ขนาด

ปรับความสูงและความกว้างของปุ่มเพิ่มลงใน Google Wallet ให้พอดีกับเลย์เอาต์ของคุณ หากมีปุ่มอื่นๆ ในหน้าเว็บ ปุ่มเพิ่มลงใน Google Wallet ต้องเท่ากับหรือมีขนาดใหญ่กว่า อย่าทําให้ปุ่มเพิ่มลงใน Google Wallet เล็กกว่าปุ่มอื่นๆ

มีรูปแบบ

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

เสียงหลัก	ย่อ
ใช้ปุ่มหลักบนพื้นหลังสีขาวและสว่าง	ใช้ปุ่มแบบย่อหากพื้นที่ว่างหลักหรือเต็มความกว้างไม่เพียงพอ

พื้นที่ว่าง

ต้องมีพื้นที่ว่างขั้นต่ํา 8 dp ในทุกๆ ด้านของปุ่มเพิ่มลงใน Google Wallet เสมอ ตรวจสอบว่าพื้นที่โปร่งใสไม่มีตัวแบ่งกราฟิกหรือข้อความ

ความสูงขั้นต่ำ

ปุ่มเพิ่มลงใน Google Wallet ทั้งหมดต้องมีความสูงขั้นต่ํา 48 dp

สิ่งที่ควรและไม่ควรทํา

สิ่งที่ควรทํา	สิ่งที่ไม่ควรทํา
ควรทํา: ใช้เฉพาะปุ่มเพิ่มลงใน Google Wallet จาก Google	อย่า: สร้างปุ่มเพิ่มลงใน Google Wallet ของคุณเองหรือเปลี่ยนแบบอักษร สี รัศมีปุ่ม หรือระยะห่างจากขอบภายในปุ่มไม่ว่าในลักษณะใดก็ตาม
ควร: ใช้ปุ่มรูปแบบเดียวกันทั่วทั้งเว็บไซต์	ไม่ควร: ทําให้ปุ่มเพิ่มลงใน Google Wallet เล็กกว่าปุ่มอื่นๆ
ควร: ตรวจสอบว่าขนาดของปุ่มเพิ่มลงใน Google Wallet มีขนาดเท่ากับหรือใหญ่กว่าปุ่มอื่นๆ	ไม่ควร: เปลี่ยนสีของปุ่ม
ควร: คงอัตราส่วนปุ่มให้เหมือนเดิมเมื่อปรับขนาดปุ่มเพิ่มลงใน Google Wallet	ไม่ควรทํา: ปรับขนาดปุ่มให้อิสระ
ควร: ใช้ปุ่มเวอร์ชันที่แปลแล้วที่ระบุ	ไม่ควร: สร้างปุ่มเวอร์ชันที่แปลแล้วของคุณเอง

แนวทางปฏิบัติแนะนําสําหรับตําแหน่งปุ่ม

แสดงปุ่มเพิ่มลงใน Google Wallet ในหน้าจอยืนยันแอป หน้าเว็บ หรืออีเมล ดูแนวทางปฏิบัติแนะนําต่อไปนี้เพื่อเป็นแนวทางในการออกแบบ UI

บัตรสะสมคะแนน บัตรของขวัญ ข้อเสนอ

แสดงปุ่มเพิ่มลงใน Google Wallet บนหน้าจอยืนยัน นอกจากนี้ยังแสดงปุ่มบนเว็บไซต์หรือแอป หรือใส่ไว้ในปุ่มที่เกี่ยวข้องได้ด้วย

   

การใช้ชื่อผลิตภัณฑ์ Google Wallet ในข้อความ

คุณใช้ข้อความเพื่อระบุผู้ใช้ว่าได้บันทึกบัตรสะสมคะแนนไว้ในอุปกรณ์แล้ว

ทําให้ตัวอักษร "G" และ "W" เป็นตัวพิมพ์ใหญ่

ใช้ตัวพิมพ์ใหญ่ "G" และตัวพิมพ์ใหญ่ "W" เสมอ ตามด้วยตัวพิมพ์เล็กเพื่ออ้างถึง Google Wallet อย่าใช้ชื่อเต็มว่า "Google Wallet" เว้นแต่จะจับคู่กับรูปแบบการพิมพ์ใน UI ของคุณ

อย่าใช้ตัวย่อของ Google Wallet

เขียนคําว่า "Google" และ "Wallet" เสมอ

ปรับแต่งสไตล์ใน UI

ตั้งค่า "Google Wallet" ในรูปแบบแบบอักษรและแบบอักษรเดียวกันกับข้อความที่เหลือใน UI ห้ามเลียนแบบรูปแบบการพิมพ์ของ Google

ใช้ "Google Wallet" เวอร์ชันแปลเสมอ

เขียน "Google Wallet" เสมอในสําเนาที่แปลแล้วที่แปล

การออกแบบ

ใช้ช่อง height และ size ของแท็ก HTML g:savetoandroidpay เพื่อแก้ไขความสูงและความกว้างของปุ่มเพิ่มลงใน Google Wallet ใช้ข้อกําหนด textsize=large เพื่อเพิ่มขนาดข้อความและปุ่มอย่างมากสําหรับการติดตั้งใช้งานบนอุปกรณ์เคลื่อนที่หรือเคสที่มีข้อกําหนด UI พิเศษ

ใช้ theme เพื่อตั้งค่าสีของปุ่ม ตารางต่อไปนี้จะแสดงให้เห็นว่าการตั้งค่าเหล่านี้ส่งผลต่อปุ่มเพิ่มลงใน Google Wallet อย่างไร

หมายเหตุ: เราเลิกใช้งานแอตทริบิวต์ text แล้ว ปุ่มนี้จะแสดงผลแบบเดียวกันไม่ว่าจะเป็นแนวตั้งแบบใดแบบหนึ่ง

โลโก้

Google Wallet มาสก์โลโก้เป็นรูปทรงกลม

หลักเกณฑ์รูปภาพโลโก้

รายการต่อไปนี้คือรายการคําแนะนําอินเทอร์เฟซผู้ใช้สําหรับรูปภาพโลโก้

หลักเกณฑ์	คำอธิบาย
ประเภทไฟล์ที่ต้องการ	PNG
ขนาดขั้นต่ำ	660 x 660 พิกเซล
สัดส่วนภาพ	1:1
สัดส่วนภาพงานศิลปะ	1:1
ขนาดพิกเซลจริง	ปรับขนาดเป็นขนาดอุปกรณ์
หน้ากากทรงกลมโลโก้	โลโก้จะมาสก์เพื่อให้พอดีกับการออกแบบวงกลม ตรวจสอบว่าโลโก้อยู่ภายในพื้นที่ปลอดภัย อย่ามาสก์โลโก้ล่วงหน้า วางโลโก้ในสี่เหลี่ยมจัตุรัสที่มีสีพื้นหลังแบบเต็ม โลโก้ต้องมีระยะขอบ 15% เพื่อไม่ให้ถูกตัดออกเมื่อมาสก์

สีพื้นหลังบัตร

คุณตั้งค่าสีพื้นหลังด้วยช่อง hexBackgroundColor ได้ หากคุณไม่ได้กําหนดค่า อัลกอริทึมจะวิเคราะห์โลโก้ ค้นหาสีที่โดดเด่น และใช้สีสําหรับสีพื้นหลัง

รูปภาพหลัก

ช่อง class.heroImage จะปรากฏเป็นแบนเนอร์ขนาดเต็มความกว้างตรงส่วนเนื้อหาของการ์ด

หลักเกณฑ์รูปภาพหลัก

รายการคําแนะนําในอินเทอร์เฟซผู้ใช้สําหรับรูปภาพหลักมีดังนี้

หลักเกณฑ์	คำอธิบาย
ประเภทไฟล์ที่ต้องการ	PNG
ขนาดที่แนะนำ	1032x336 พิกเซล ใช้รูปภาพสี่เหลี่ยมผืนผ้าใหญ่ ใช้ภาพที่มีพื้นหลังเป็นสีเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด
สัดส่วนภาพ	3:1 ขึ้นไป
ขนาดการแสดงผล	ความกว้างเต็มของการ์ดและความสูงตามสัดส่วน

ภาพขนาดเต็มความกว้าง

ช่อง *.imageModulesData.mainImage ในชั้นเรียนหรือออบเจ็กต์จะปรากฏเป็นรูปภาพขนาดเต็มความกว้างในบัตรผ่าน

หลักเกณฑ์เกี่ยวกับรูปภาพขนาดเต็มความกว้าง

ต่อไปนี้คือรายการคําแนะนําอินเทอร์เฟซผู้ใช้สําหรับรูปภาพขนาดเต็มความกว้าง

หลักเกณฑ์	คำอธิบาย
ประเภทไฟล์ที่ต้องการ	PNG
ขนาดขั้นต่ำ	กว้าง 1860 พิกเซลตัวแปรสูง ใช้รูปภาพสี่เหลี่ยมผืนผ้าใหญ่ ใช้ภาพที่มีพื้นหลังเป็นสีเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด
สัดส่วนภาพ	ตัวแปร
ขนาดการแสดงผล	ความกว้างของเทมเพลตแบบเต็ม และความสูงตามสัดส่วน
ใช้รูปแบบสีเดียวกับที่ใช้สําหรับโลโก้

รูปภาพบาร์โค้ด

บางประเภทธุรกิจอนุญาตให้ใช้รูปภาพด้านบนและด้านล่างของบาร์โค้ด

รูปภาพเหนือบาร์โค้ด

รายการต่อไปนี้คือรายการคําแนะนําอินเทอร์เฟซผู้ใช้สําหรับรูปภาพที่อยู่เหนือบาร์โค้ด

หลักเกณฑ์	คำอธิบาย
ประเภทไฟล์ที่ต้องการ	PNG
ความสูงสูงสุด	20 dp (ในอัตราส่วนสูงสุด) ขนาดที่แนะนําคือ สูง 80 x กว้าง 80-780 พิกเซล หากมีรูปภาพ 2 รูป ซึ่งช่วยให้การทํางานแบบเทียบหน้าต่อหน้าได้ หากรูปภาพหนึ่งเป็นสี่เหลี่ยมจัตุรัส ส่วนอีกรูปเป็นสี่เหลี่ยมผืนผ้า รูปภาพจะต้องมีขนาด 80x80 พิกเซลและ 780x80 พิกเซล
สัดส่วนภาพ	ไม่จํากัด ใช้ความสูง 20:1 dp และความกว้างของรูปภาพเดียวโดยใช้สัดส่วนภาพ 20:1 หากต้องการเพียงรูปภาพเดียวเหนือบาร์โค้ด ให้ใช้ความกว้างเต็ม (ไม่รวมระยะห่างจากขอบ) รูปภาพต้องมีขนาด 1600x80 พิกเซล
ขนาดการแสดงผลสูงสุด (รูปภาพเดียว)	สูง 20 dp และกว้าง 400 dp

รูปภาพใต้บาร์โค้ด

รายการต่อไปนี้คือรายการคําแนะนําอินเทอร์เฟซผู้ใช้สําหรับรูปภาพด้านล่างบาร์โค้ด

หลักเกณฑ์	คำอธิบาย
ประเภทไฟล์ที่ต้องการ	PNG
ความสูงสูงสุด	20 dp (ในอัตราส่วนสูงสุด) ขนาดที่แนะนําคือ สูง 80 x กว้าง 80-1600 พิกเซล หากเป็นสี่เหลี่ยมจัตุรัสขนาด 80x80 พิกเซล หากเป็นสี่เหลี่ยมผืนผ้าขนาด 1600x80 พิกเซล
อัตราส่วนที่ไม่จํากัด ใช้อัตราส่วน 20:1 สําหรับความสูงและความกว้างสูงสุด 20 dp	หากต้องการเป็นรูปภาพขนาดเต็มความกว้าง (ยกเว้นระยะห่างจากขอบ) รูปภาพต้องมีขนาด 1600x80 พิกเซล
ขนาดการแสดงผลสูงสุดคือ 20 dp และกว้าง 400 dp

โมดูล

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

หลักเกณฑ์	คำอธิบาย
imageModulesData	ใช้ imageModulesData เพียงรายการเดียวในชั้นเรียนหรือในออบเจ็กต์ที่คุณสร้าง
infoModuleData	ใช้ infoModuleData ได้สูงสุด 2 รายการในชั้นเรียนหรือในออบเจ็กต์ที่คุณสร้าง infoModuleData อาจกําหนดข้อมูลเฉพาะบัญชีผู้ใช้ เช่น "ชื่อสมาชิก" และ "การเป็นสมาชิก"
linksModuleData	ใช้ URI ของ linksModuleData ได้สูงสุด 4 รายการในชั้นเรียนหรือในออบเจ็กต์ที่คุณสร้าง คุณอาจมี URI linksModuleData 2 รายการในชั้นเรียน โดย 1 รายการเป็น URI ของเว็บไซต์และอีก 1 รายการเป็นหมายเลขโทรศัพท์สําหรับศูนย์ช่วยเหลือ URI linksModuleData 2 รายการในออบเจ็กต์อาจกําหนด URI ที่เจาะจงบัญชีผู้ใช้และสถานที่ใกล้เคียง
textModulesData	ใช้ช่อง textModulesData สูงสุด 2 ช่องระหว่างชั้นเรียนและออบเจ็กต์ที่คุณสร้าง คุณอาจมี URI textModuleData ในชั้นเรียน ซึ่งกําหนดรายละเอียดโปรแกรม และ textModulesData อีกรายการหนึ่งในออบเจ็กต์ที่กําหนดรายละเอียดเฉพาะบัญชีผู้ใช้

infoModuleData

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

หมายเหตุ: เราจะใช้เพียงคอลัมน์เดียวในการแสดงโมดูลข้อมูล

linksModuleData

โมดูลลิงก์มี URI ไปยังหน้าเว็บ หมายเลขโทรศัพท์ และที่อยู่อีเมล ต่อไปนี้คือรายการคําแนะนําอินเทอร์เฟซผู้ใช้สําหรับโมดูลลิงก์

หลักเกณฑ์	ตัวอย่างการตั้งค่า	รูปภาพตัวอย่าง
ใช้คํานําหน้า http: เมื่อคุณกําหนด URI ให้เว็บไซต์หรือสถานที่ตั้งใน Google Maps คํานําหน้านี้จะช่วยให้ผู้บริโภคแตะลิงก์และไปที่เว็บไซต์หรือดูตําแหน่งใน Google Maps ได้ คํานําหน้านี้ยังรวมถึงไอคอนของลิงก์หรือแผนที่หน้าคําอธิบายในบัตรด้วย	'uri': 'http://maps.google.com/?q=google'
	'uri': 'http://developer.google.com/wallet/'
ใช้คํานําหน้า tel: เมื่อกําหนดหมายเลขโทรศัพท์ คํานําหน้านี้ช่วยให้ผู้บริโภคแตะลิงก์เพื่อโทรหาหมายเลขได้ คํานําหน้านี้ยังสร้างไอคอนโทรศัพท์ด้านหน้าของคําอธิบายข้อความบนการ์ดด้วย	'uri': 'tel:[phone]'
ใช้คํานําหน้า mailto: เมื่อคุณกําหนดอีเมล คํานําหน้านี้จะช่วยให้ผู้บริโภคแตะลิงก์เพื่อส่งอีเมลไปยังที่อยู่ได้ คํานําหน้านี้ยังสร้างไอคอนอีเมลหน้าคําอธิบายข้อความบนการ์ดด้วย	'uri': 'mailto:[e-mail]'

ส่วนหัว ป้ายกํากับ และชื่อ

เขียนส่วนหัว ป้ายกํากับ และชื่อโดยใช้ตัวพิมพ์ใหญ่ขึ้นต้นเพื่อให้แต่ละคําขึ้นต้นด้วยอักษรตัวพิมพ์ใหญ่

นโยบายเนื้อหา

เนื้อหาของแต่ละช่องในบัตรต้องเป็นไปตาม นโยบายเนื้อหาการชําระเงิน เนื้อหาของเว็บไซต์ที่คุณอ้างอิงในชั้นเรียนจะต้องเป็นไปตามนโยบายเหล่านี้ด้วย

ตําแหน่งข้อมูลแพลตฟอร์มของพาร์ทเนอร์

โปรดตรวจสอบว่าได้ใส่ Deep Link หรือเว็บไซต์ของแอปลงในพร็อพเพอร์ตี้หรือออบเจ็กต์ linksModuleData.* ของ Pass เพื่อดูแลให้แอปหรือเว็บไซต์ที่เชื่อมโยงกับฟีเจอร์มากมายของ Pass Pass ใช้งานได้ ซึ่งช่วยให้ผู้ใช้ไปยังแพลตฟอร์มจากบัตร ซึ่งจะปรากฏใน Google Wallet ดูวิธีแสดงผลได้ที่ส่วนการออกแบบของประเภทธุรกิจ Pass

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