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

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

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

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

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

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

• ธีม : สว่าง กลาง มืด
• รูปร่าง : สี่เหลี่ยมผืนผ้า, สี่เหลี่ยมผืนยา

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

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

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

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

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

ขนาด

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

ข้อความ

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

สี

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

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

แบบอักษร

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

Padding

Android
iOS
เว็บ (อุปกรณ์เคลื่อนที่ + เดสก์ท็อป)
ข้อมูลอ้างอิง

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

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

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

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

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

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

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

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

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

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

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

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