หลักเกณฑ์การใช้แบรนด์

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

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

ชิ้นงาน

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

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

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

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

ปุ่มดูใน Google Wallet

ปุ่มดูใน Google Wallet ใช้เพื่อ Deep Link ผู้ใช้ ไปยัง Wallet เพื่อดูบัตรหรือการ์ดที่บันทึกไว้ก่อนหน้านี้ ปุ่มนี้ ใช้ในแอป เว็บไซต์ หรืออีเมลได้

ปุ่มดูใน Google Wallet มีให้ใช้งานในรูปแบบ SVG และ PNG

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

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

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

ปุ่มที่แปลแล้ว

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

ปุ่มเพิ่มลงใน Google Wallet พร้อมใช้งานในภาษาแอลเบเนีย อาหรับ อาร์เมเนีย อาเซอร์ไบจาน บอสเนีย บัลแกเรีย คาตาลัน จีน (ฮ่องกง) จีน (ตัวเต็ม) โครเอเชีย เช็ก เดนมาร์ก ดัตช์ อังกฤษ (อินเดีย สิงคโปร์ แอฟริกาใต้ ออสเตรเลีย แคนาดา สหราชอาณาจักร สหรัฐอเมริกา) เอสโตเนีย ฟิลิปปินส์ ฟินแลนด์ ฝรั่งเศส (แคนาดา) ฝรั่งเศส (ฝรั่งเศส) จอร์เจีย เยอรมัน กรีก ฮีบรู ฮังการี ไอซ์แลนด์ อินโดนีเซีย อิตาลี ญี่ปุ่น คาซัค คีร์กีซ ลัตเวีย ลิทัวเนีย มาซิโดเนีย มาเลย์ นอร์เวย์ โปแลนด์ โปรตุเกส (บราซิล) โปรตุเกส (โปรตุเกส) โรมาเนีย รัสเซีย (เบลารุส) เซอร์เบีย สโลวัก สโลวีเนีย สเปน (ลาตินอเมริกา) สเปน (สเปน) สวีเดน ไทย ตุรกี ยูเครน อุซเบก และเวียดนาม

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

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

ประเทศ ชื่อ
เบลารุส Google Кошелек
บราซิล Carteira do Google
ชิลี Billetera de Google
เช็กเกีย Peněženka Google
กรีซ Πορτοφόλι Google
ฮ่องกง Google 錢包
ลิทัวเนีย Google Piniginė
โปแลนด์ Portfel Google
โปรตุเกส Carteira da Google
โรมาเนีย Portofel Google
สโลวาเกีย Peňaženka Google
ไต้หวัน Google 錢包
ตุรกี Google Cüzdan
สหรัฐอาหรับเอมิเรตส์ محفظة Google
ยูเครน Google Гаманець
สหรัฐอเมริกา (สเปน)
*ใช้ชื่อนี้ในสหรัฐอเมริกาหาก UI เป็นภาษาสเปน
Billetera de Google

ขนาด

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

รูปแบบ

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

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

พื้นที่ว่าง

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

ปุ่มเพิ่มลงใน Google Wallet ต้องมีพื้นที่ 8 dp ในทุกด้าน

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

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

ปุ่ม "เพิ่มไปยัง Google Wallet" ต้องมีความสูงอย่างน้อย 48 dp

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

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

แนวทางปฏิบัติแนะนำในการวางปุ่ม

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

บัตรโดยสาร

แสดงปุ่มเพิ่มลงใน Google Wallet บนหน้าจอแอปยืนยัน หน้าเว็บ หรืออีเมล เราขอแนะนำให้วางปุ่มเพิ่มลงใน 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

รูปภาพหลัก

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

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

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

หลักเกณฑ์ คำอธิบาย
ประเภทไฟล์ที่ต้องการ PNG
ขนาดที่แนะนำ

1032x336 พิกเซล

ใช้รูปภาพสี่เหลี่ยมผืนผ้าแนวกว้าง

ใช้รูปภาพที่มีพื้นหลังแบบสีเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

สัดส่วนภาพ 3:1 ขึ้นไป
ขนาดการแสดงผล

ความกว้างเต็มของบัตรและความสูงตามสัดส่วน

ขนาดจอแสดงผลควรใช้สัดส่วนภาพ 3:1 หรือกว้างกว่า

รูปภาพแบบเต็มความกว้าง

ฟิลด์ *.imageModulesData.mainImage ในคลาสหรือออบเจ็กต์ จะปรากฏเป็นรูปภาพแบบเต็มความกว้างในบัตร

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

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

หลักเกณฑ์ คำอธิบาย
ประเภทไฟล์ที่ต้องการ PNG
ขนาดขั้นต่ำ

กว้าง 1860 พิกเซล สูงได้หลายขนาด

ใช้รูปภาพสี่เหลี่ยมผืนผ้าแนวกว้าง

ใช้รูปภาพที่มีพื้นหลังแบบสีเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

สัดส่วนภาพ ตัวแปร
ขนาดการแสดงผล

ความกว้างเต็มของเทมเพลตและความสูงตามสัดส่วน

ขนาดจอแสดงผลควรใช้สัดส่วนภาพ 3:1 หรือกว้างกว่า
ใช้ชุดรูปแบบสีเดียวกับที่ใช้สำหรับโลโก้

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

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

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

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

หลักเกณฑ์ คำอธิบาย
ประเภทไฟล์ที่ต้องการ PNG
ความสูงสูงสุด

20 dp (ที่สัดส่วนภาพสูงสุด)

ขนาดที่แนะนำคือสูง 80 พิกเซล และกว้าง 80-780 พิกเซล หากมีรูปภาพ 2 รูป ซึ่งจะช่วยให้แสดงข้อมูลควบคู่กันได้

หากรูปภาพหนึ่งเป็นสี่เหลี่ยมจัตุรัสและอีกรูปภาพหนึ่งเป็นสี่เหลี่ยมผืนผ้า รูปภาพ ต้องมีขนาด 80x80 พิกเซลและ 780x80 พิกเซล

สัดส่วนภาพ

ไม่จำกัด สำหรับความสูงและความกว้างสูงสุด 20 dp ของรูปภาพเดี่ยว ให้ใช้สัดส่วนภาพ 20:1

หากต้องการให้มีรูปภาพเดียวเหนือบาร์โค้ด ให้ใช้ความกว้างเต็ม (ไม่รวมระยะห่างจากขอบ) รูปภาพต้องมีขนาด 1600x80 พิกเซล

ขนาดการแสดงผลสูงสุด (รูปภาพเดียว) สูง 20 dp และกว้าง 400 dp

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

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

หลักเกณฑ์ คำอธิบาย
ประเภทไฟล์ที่ต้องการ PNG
ความสูงสูงสุด

20 dp (ที่สัดส่วนภาพสูงสุด)

ขนาดที่แนะนำคือสูง 80 พิกเซลและกว้าง 80-1600 พิกเซล

หากเป็นสี่เหลี่ยมจัตุรัส ให้ใช้ขนาด 80x80 พิกเซล

หากเป็นสี่เหลี่ยมผืนผ้า ให้ใช้ขนาด 1600x80 พิกเซล

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

โมดูล

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

หลักเกณฑ์ คำอธิบาย
imageModulesData ใช้ imageModulesData เพียงรายการเดียวในชั้นเรียนหรือใน ออบเจ็กต์ที่คุณสร้าง
infoModuleData

ใช้ได้สูงสุด 2 infoModuleData ไม่ว่าจะในชั้นเรียนหรือใน ออบเจ็กต์ที่คุณสร้าง

infoModuleData อาจกำหนดข้อมูลเฉพาะบัญชีผู้ใช้ เช่น "ชื่อสมาชิก" และ "หมายเลขสมาชิก"

linksModuleData

ใช้ URI สูงสุด 4 รายการในชั้นเรียนหรือในออบเจ็กต์ที่คุณสร้างlinksModuleData

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

textModulesData

ใช้ฟิลด์ textModulesData ได้สูงสุด 2 รายการระหว่างคลาส กับออบเจ็กต์ที่คุณสร้าง

คุณอาจมี textModuleData URI ในคลาสที่ กำหนดรายละเอียดโปรแกรม และมีอีก textModulesData ใน ออบเจ็กต์ที่กำหนดรายละเอียดเฉพาะบัญชีผู้ใช้

infoModuleData

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

linksModuleData

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

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

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

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

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

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

การวางข้อมูลแพลตฟอร์มพาร์ทเนอร์

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