เอกสารนี้ระบุหลักเกณฑ์เกี่ยวกับวิธีแสดงปุ่มลงชื่อเข้าใช้ด้วย Google ในเว็บไซต์หรือแอป โดยเว็บไซต์หรือแอปต้องเป็นไปตามหลักเกณฑ์เหล่านี้เพื่อดำเนินการยืนยันแอปให้เสร็จสมบูรณ์
SDK บริการ Google Identity จะแสดงปุ่มลงชื่อเข้าใช้ด้วย Google ที่เป็นไปตามหลักเกณฑ์การใช้แบรนด์ล่าสุดของ Google เสมอ ซึ่งเป็นวิธีที่แนะนำในการแสดงปุ่มลงชื่อเข้าใช้ด้วย Google ในเว็บไซต์หรือแอป ในกรณีที่ไม่สามารถใช้ตัวเลือกปุ่มที่ Google แสดงผล ให้แสดงผลองค์ประกอบปุ่ม HTML ดาวน์โหลดเนื้อหาการสร้างแบรนด์ที่ได้รับอนุมัติล่วงหน้า หรือสร้างปุ่มลงชื่อเข้าใช้ด้วย Google ที่กำหนดเองก็ได้
แสดงผลองค์ประกอบปุ่ม HTML
เรามีตัวกำหนดค่า HTML ที่ให้คุณปรับแต่งรูปลักษณ์ของปุ่มลงชื่อเข้าใช้ด้วย Google ได้ จากนั้นคุณสามารถดาวน์โหลดข้อมูลโค้ด HTML และ CSS ที่จะแสดงปุ่มบนเว็บไซต์ได้สร้างองค์ประกอบปุ่ม HTML
ดาวน์โหลดไอคอนแบรนด์ที่อนุมัติล่วงหน้า
นอกจากการใช้ปุ่มรูปภาพที่กำหนดเองแล้ว คุณยังดาวน์โหลดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ที่ได้รับอนุมัติล่วงหน้าซึ่งมีให้ในรูปแบบ PNG และ SVG สำหรับทุกแพลตฟอร์มได้อีกด้วยปุ่มรูปภาพที่ให้ไว้มีให้ใช้ในโหมดมาตรฐานและโหมดไอคอน รวมถึงมีตัวเลือกรูปแบบดังต่อไปนี้
- ธีม : สว่าง สีกลาง มืด
- รูปทรง : สี่เหลี่ยมผืนผ้า, เม็ด
| ธีม | ปุ่ม | คำอธิบาย |
|---|---|---|
| สว่าง |
|
ปุ่มลงชื่อเข้าใช้ด้วย Google รูปสี่เหลี่ยมผืนผ้ามาตรฐานขนาดใหญ่ธีมสว่าง |
| มืด |
|
ปุ่มลงชื่อเข้าใช้ด้วย Google รูปยาธีมสีเข้มแบบมาตรฐาน |
โหมดปุ่มที่รองรับ
| สว่าง |
|
|
| มืด |
|
|
| เฉยๆ |
|
|
สร้างปุ่มลงชื่อเข้าใช้ด้วย Google ที่กำหนดเอง
ขอแนะนำอย่างยิ่งให้ใช้ Google Identity Services SDK หรือตัวเลือกอื่นๆ ที่กล่าวถึงในส่วนก่อนหน้านี้เนื่องจากช่วยให้ผู้ใช้ Google ระบุแบรนด์ Google ได้ง่ายขึ้น ยิ่งผู้ใช้ระบุปุ่มการทำงานได้ง่ายเท่าไหร่ ก็ยิ่งมีโอกาสโต้ตอบกับปุ่มได้มากขึ้นเท่านั้น
อย่างไรก็ตาม หากต้องปรับปุ่มให้ตรงกับการออกแบบแอป โปรดปฏิบัติตามหลักเกณฑ์ต่อไปนี้
ขนาด
คุณปรับขนาดปุ่มสำหรับอุปกรณ์และขนาดหน้าจอที่แตกต่างกันได้ตามต้องการ แต่ต้องรักษาอัตราส่วนไว้เพื่อไม่ให้โลโก้ Google ยืดออก
ข้อความ
หากต้องการกระตุ้นให้ผู้ใช้คลิกปุ่มดังกล่าว ขอแนะนำให้ใช้ข้อความกระตุ้นให้ดำเนินการ (Call-To-Action) "ลงชื่อเข้าใช้ด้วย Google" "ลงชื่อสมัครใช้ด้วย Google" หรือ "ดำเนินการต่อโดยใช้ Google" ผู้ใช้ต้องทราบอย่างชัดเจนว่ากำลังลงชื่อเข้าใช้แอปหรือลงชื่อสมัครใช้แอปด้วยข้อมูลเข้าสู่ระบบของ Google ไม่ได้ลงชื่อสมัครใช้หรือลงทะเบียนบัญชี Google ในแอปของคุณ
สี
สถานะเริ่มต้นของปุ่มมีดังต่อไปนี้ ปุ่มต้องมีสีมาตรฐานสำหรับ "G" ของ Google เสมอ
| ธีม | ตัวอย่าง | |
|---|---|---|
| สว่าง |
|
สีเติม: #FFFFFF เส้น: #747775 | 1px | ภายใน แบบอักษร: #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"
ระยะห่างจากขอบ
| Android |
|
| iOS |
|
| เว็บ (อุปกรณ์เคลื่อนที่ + เดสก์ท็อป) |
|
| ข้อมูลอ้างอิง |
|
โลโก้ Google ในปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
ไม่ว่าข้อความจะเป็นอย่างไรก็ตาม คุณจะเปลี่ยนขนาดหรือสีของโลโก้ "G" ของ Google ไม่ได้ โดยจะต้องเป็นเวอร์ชันสีมาตรฐานและปรากฏบนพื้นหลังสีขาว หากต้องการสร้างโลโก้ Google ในขนาดที่กำหนดเอง ให้เริ่มต้นด้วยโลโก้ขนาดใดก็ได้ที่รวมอยู่ในชุดการดาวน์โหลด
รูปแบบปุ่มที่ไม่ถูกต้อง
 ควรทำ ใช้หลักเกณฑ์การออกแบบ Google Material 3 สำหรับขอบเขตและรูปแบบสีของปุ่ม |
 ไม่ควรทำ ใช้ไอคอนหรือโลโก้ Google เพียงอย่างเดียวโดยไม่มีขอบเขตของปุ่มและไม่มีข้อความเพื่อบ่งชี้การดำเนินการของผู้ใช้ |
 ควรทำ ใช้สีแบรนด์ Google สําหรับไอคอน Google สําหรับโหมดมืด สว่าง และโหมดกลาง |
 ไม่ควรทำ ใช้ "G" ของ Google เวอร์ชันโมโนโครมสำหรับปุ่ม |
 ควรทำ เลือกปุ่มในโหมดสีที่เหมาะสมเพื่อการช่วยเหลือพิเศษและความโดดเด่นเท่าๆ กัน |
 ไม่ควรทำ ใส่ไอคอน "G" สีมาตรฐานบนพื้นหลังสีอื่นที่ไม่ใช่สว่าง มืด หรือกลาง |
 ควรทำ ใช้ "G" ของ Google ต่อไปโดยมีระยะห่างจากขอบและขนาดคงที่ |
 ไม่ควรทำ สร้างไอคอนของคุณเองสำหรับปุ่มนี้ |
 ควรทำ ใช้ตัว Google "G" เพียงอย่างเดียวสำหรับปุ่มการทำงาน หากจำเป็น |
 ไม่ควรทำ ใช้คำว่า "Google" ในปุ่มเพื่อแทนการทำงานของฟีเจอร์ลงชื่อเข้าใช้ด้วย Google |
แนวทางปฏิบัติแนะนำในการสร้างแบรนด์สำหรับการลงชื่อเข้าใช้ด้วย Google
ลงชื่อเข้าใช้ด้วย Google และตัวเลือกอื่นๆ ในการลงชื่อเข้าใช้ของบุคคลที่สาม
ปุ่มลงชื่อเข้าใช้ด้วย Google ควรจะแสดงอย่างโดดเด่นไม่ต่างจากตัวเลือกการลงชื่อเข้าใช้อื่นๆ ของบุคคลที่สาม เช่น ปุ่มควรมีขนาดเท่าๆ กันโดยประมาณและน้ำหนักของภาพใกล้เคียงกัน
หลักเกณฑ์อื่นๆ
หากคุณขอขอบเขตเพิ่มเติม ให้ดำเนินการดังกล่าวด้วยการให้สิทธิ์เพิ่มขึ้น (Android, iOS, เว็บ) การแสดงข้อความเตือนผู้ใช้เพื่อให้สิทธิ์เมื่อผู้ใช้เริ่มโต้ตอบกับฟีเจอร์ที่จำเป็นต้องเข้าถึง API เท่านั้น
หากขอขอบเขต YouTube ให้ใช้ ปุ่ม YouTube
หากคุณใช้บริการเกมของ Google Play โปรดดูหลักเกณฑ์การใช้แบรนด์ของบริการเกมของ Google Play ด้วย
ไม่อนุญาตให้ใช้แบรนด์ Google ในลักษณะที่ไม่ได้กล่าวถึงอย่างชัดเจนในเอกสารนี้หากไม่ได้รับความยินยอมเป็นลายลักษณ์อักษรล่วงหน้าจาก Google (ดูข้อมูลเพิ่มเติมในหลักเกณฑ์การใช้สิ่งแสดงความเป็นแบรนด์ของ Google โดยบุคคลที่สาม)