หลักเกณฑ์การใช้แบรนด์สำหรับการลงชื่อเข้าใช้ด้วย Google

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

SDK บริการระบุตัวตนของ Google จะแสดงผลปุ่มลงชื่อเข้าใช้ด้วย Google ที่เป็นไปตามหลักเกณฑ์การใช้แบรนด์ Google ฉบับล่าสุดเสมอ ตัวเลือกเหล่านี้เป็นวิธีที่เราแนะนำในการแสดงปุ่มลงชื่อเข้าใช้ด้วย Google ในเว็บไซต์หรือแอปของคุณ ในกรณีที่ใช้ตัวเลือกปุ่มที่ Google แสดงผลไม่ได้ คุณสามารถแสดงผลองค์ประกอบปุ่ม HTML, ดาวน์โหลดชิ้นงานการสร้างแบรนด์ที่ได้รับอนุมัติล่วงหน้า หรือสร้างปุ่มลงชื่อเข้าใช้ด้วย Google ที่กำหนดเองก็ได้

แสดงผลองค์ประกอบปุ่ม HTML

เรามีเครื่องมือกำหนดค่า HTML ที่ช่วยให้คุณปรับแต่งลักษณะที่ปรากฏของปุ่มลงชื่อเข้าใช้ด้วย Google ได้ จากนั้นคุณสามารถดาวน์โหลดข้อมูลโค้ด HTML และ CSS ที่จะแสดงผลปุ่มในเว็บไซต์

สร้างองค์ประกอบปุ่ม HTML

  
  

ดาวน์โหลดไอคอนแบรนด์ที่ได้รับอนุมัติล่วงหน้า

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

ปุ่มรูปภาพที่ระบุมีให้บริการในโหมดมาตรฐานและโหมดไอคอน และมีตัวเลือกสไตล์ต่อไปนี้

  • ธีม : สว่าง กลาง มืด
  • รูปร่าง : สี่เหลี่ยมผืนผ้า ทรงเม็ดยา
ตัวอย่าง 2 รายการมีดังนี้
ธีม ปุ่ม คำอธิบาย
สว่าง ตัวอย่างปุ่มลงชื่อเข้าใช้ด้วย Google สี่เหลี่ยมผืนผ้าขนาดใหญ่มาตรฐานในธีมสว่าง ปุ่มลงชื่อเข้าใช้ด้วย Google สี่เหลี่ยมผืนผ้าขนาดใหญ่มาตรฐานสำหรับธีมสว่าง
มืด ตัวอย่างปุ่มลงชื่อเข้าใช้ด้วย Google รูปเม็ดยาสีดํามาตรฐาน ปุ่มลงชื่อเข้าใช้ด้วย Google รูปเม็ดยาสีดํามาตรฐาน
ดาวน์โหลดไอคอนแบรนด์ที่อนุมัติล่วงหน้า

โหมดปุ่มที่รองรับ

สว่าง

ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงกลมในธีมสว่าง

ปุ่มลงชื่อเข้าใช้ด้วย Google สี่เหลี่ยมจัตุรัสในธีมสว่าง

ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงเม็ดยาในธีมสว่าง

ปุ่มลงชื่อเข้าใช้ด้วย Google สี่เหลี่ยมผืนผ้าสำหรับธีมสว่าง

มืด

ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงกลมในธีมมืด

ปุ่มลงชื่อเข้าใช้ด้วย Google สี่เหลี่ยมจัตุรัสในธีมมืด

ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงเม็ดยาในธีมมืด

ปุ่มลงชื่อเข้าใช้ด้วย Google รูปสี่เหลี่ยมผืนผ้าในธีมมืด

เฉยๆ

ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงกลมในธีมกลางๆ

ปุ่มลงชื่อเข้าใช้ด้วย Google สี่เหลี่ยมจัตุรัสธีมกลางๆ

ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงเม็ดยาในธีมกลางๆ

ปุ่มลงชื่อเข้าใช้ด้วย Google สี่เหลี่ยมผืนผ้าธีมกลางๆ

สร้างปุ่มลงชื่อเข้าใช้ด้วย Google ที่กําหนดเอง

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

อย่างไรก็ตาม หากต้องการปรับปุ่มให้เข้ากับการออกแบบแอป โปรดปฏิบัติตามหลักเกณฑ์ต่อไปนี้

ขนาด

คุณสามารถปรับขนาดปุ่มได้ตามต้องการสำหรับอุปกรณ์และหน้าจอขนาดต่างๆ แต่ต้องรักษาสัดส่วนภาพไว้เพื่อไม่ให้โลโก้ Google ยืดออก

ข้อความ

เราขอแนะนำให้ใช้ข้อความคำกระตุ้นให้ดำเนินการ (Call-To-Action) ต่อไปนี้เพื่อกระตุ้นให้ผู้ใช้คลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google" "ลงชื่อสมัครใช้ด้วย Google" หรือ "ดำเนินการต่อด้วย Google" ผู้ใช้ควรทราบว่าตนกําลังลงชื่อเข้าใช้แอปหรือลงชื่อสมัครใช้แอปด้วยข้อมูลเข้าสู่ระบบ Google ไม่ใช่การลงชื่อสมัครใช้หรือลงทะเบียนบัญชี Google ในแอป

สี

สถานะเริ่มต้นของปุ่มแสดงอยู่ด้านล่าง ปุ่มต้องมีสีมาตรฐานสำหรับ "G" ของ Google เสมอ

ธีม ตัวอย่าง
สว่าง ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงเม็ดยาในธีมสว่าง เติม: #FFFFFF
เส้นขอบ: #747775 | 1 พิกเซล | ด้านใน
แบบอักษร: #1F1F1F | Roboto Medium | 14/20
มืด ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงเม็ดยาในธีมมืด เติม: #131314
เส้นขอบ: #8E918F | 1 พิกเซล | ด้านใน
แบบอักษร: #E3E3E3 | Roboto Medium | 14/20
เฉยๆ ปุ่มลงชื่อเข้าใช้ด้วย Google รูปทรงเม็ดยาในธีมกลางๆ พื้น: #F2F2F2
เส้นขอบ: ไม่มีเส้นขอบ
แบบอักษร: #1F1F1F | Roboto Medium | 14/20

แบบอักษร

แบบอักษรของปุ่มคือ Roboto Medium ซึ่งเป็นแบบอักษร TrueType วิธีติดตั้งคือก่อนอื่น ให้ดาวน์โหลดแบบอักษร Roboto แล้วแตกไฟล์กลุ่มที่ดาวน์โหลด ใน Mac ให้ดับเบิลคลิก Roboto-Medium.ttf แล้วคลิก "ติดตั้งแบบอักษร" ใน Windows ให้ลากไฟล์ไปยังโฟลเดอร์ "My Computer" > "Windows" > "Fonts"

Padding

Android ระยะห่างจากขอบซ้าย 12 พิกเซลก่อนโลโก้ Google, ระยะห่างจากขอบขวา 10 พิกเซลหลังโลโก้ Google และระยะห่างจากขอบขวา 12 พิกเซลหลังข้อความลงชื่อเข้าใช้ด้วย Google
iOS ระยะห่างจากขอบซ้าย 16 พิกเซลก่อนโลโก้ Google, ระยะห่างจากขอบขวา 12 พิกเซลหลังโลโก้ Google และระยะห่างจากขอบขวา 16 พิกเซลหลังข้อความลงชื่อเข้าใช้ด้วย Google
เว็บ (อุปกรณ์เคลื่อนที่ + เดสก์ท็อป) ระยะห่างจากขอบซ้าย 12 พิกเซลก่อนโลโก้ Google, ระยะห่างจากขอบขวา 10 พิกเซลหลังโลโก้ Google และระยะห่างจากขอบขวา 12 พิกเซลหลังข้อความลงชื่อเข้าใช้ด้วย Google
ข้อมูลอ้างอิง ข้อมูลอ้างอิงระยะห่างจากขอบของปุ่มลงชื่อเข้าใช้ด้วย Google

โลโก้ Google ในปุ่ม "ลงชื่อเข้าใช้ด้วย Google"

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

ไอคอน Google G

การออกแบบปุ่มไม่ถูกต้อง

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

ใช้หลักเกณฑ์การออกแบบ Google Material 3 สำหรับขอบเขตและรูปแบบสีของปุ่ม

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

ใช้ไอคอนหรือโลโก้ Google เพียงอย่างเดียวโดยไม่มีขอบเขตของปุ่มและไม่มีข้อความเพื่อบ่งบอกการดำเนินการของผู้ใช้

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

ใช้สีของแบรนด์ Google สำหรับไอคอน Google ในโหมดมืด โหมดสว่าง และโหมดกลางๆ

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

ใช้ตัวอักษร "G" ของ Google เวอร์ชันโมโนโครมสำหรับปุ่ม

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

เลือกปุ่มในโหมดสีที่เหมาะสมสำหรับการช่วยเหลือพิเศษและความโดดเด่นที่เท่าเทียม

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

วางไอคอน "G" ของ Google สีมาตรฐานบนพื้นหลังสีอื่นที่ไม่ใช่สีอ่อน สีเข้ม หรือสีกลาง

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

ใช้ "G" ของ Google ที่มีระยะห่างจากขอบและขนาดคงที่

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

สร้างไอคอนของคุณเองสำหรับปุ่ม

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

ใช้ "G" ของ Google เพียงอย่างเดียวสำหรับปุ่มดำเนินการ หากจำเป็น

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

ใช้คำว่า "Google" เพียงอย่างเดียวในปุ่มเพื่อแสดงการดําเนินการของฟีเจอร์ลงชื่อเข้าใช้ด้วย Google

แนวทางปฏิบัติแนะนำเกี่ยวกับการสร้างแบรนด์ของฟีเจอร์ลงชื่อเข้าใช้ด้วย Google

ฟีเจอร์ลงชื่อเข้าใช้ด้วย Google และตัวเลือกการลงชื่อเข้าใช้ของบุคคลที่สามอื่นๆ

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

หลักเกณฑ์อื่นๆ

หากขอขอบเขตเพิ่มเติม ให้ขอด้วยการให้สิทธิ์แบบเพิ่มทีละรายการ (Android, iOS, เว็บ) โดยแจ้งให้ผู้ใช้ให้สิทธิ์ก็ต่อเมื่อเริ่มโต้ตอบกับฟีเจอร์ที่ต้องใช้สิทธิ์เข้าถึง API

หากขอขอบเขต YouTube ให้ใช้ ปุ่ม YouTube

หากคุณใช้บริการเกมของ Google Play โปรดดูหลักเกณฑ์การใช้แบรนด์บริการเกมของ Google Play ด้วย

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