เอกสารนี้แสดงหลักเกณฑ์เกี่ยวกับวิธีแสดงปุ่มลงชื่อเข้าใช้ด้วย Google ในเว็บไซต์หรือแอปของคุณ เว็บไซต์หรือแอปต้องเป็นไปตามหลักเกณฑ์เหล่านี้เพื่อดำเนินการตามกระบวนการยืนยันแอปให้เสร็จสมบูรณ์
SDK บริการระบุตัวตนของ Google จะแสดงผลปุ่มลงชื่อเข้าใช้ด้วย Google ที่เป็นไปตามหลักเกณฑ์การใช้แบรนด์ Google ฉบับล่าสุดเสมอ ตัวเลือกเหล่านี้เป็นวิธีที่เราแนะนำในการแสดงปุ่มลงชื่อเข้าใช้ด้วย Google ในเว็บไซต์หรือแอปของคุณ ในกรณีที่ใช้ตัวเลือกปุ่มที่ Google แสดงผลไม่ได้ คุณสามารถแสดงผลองค์ประกอบปุ่ม HTML, ดาวน์โหลดชิ้นงานการสร้างแบรนด์ที่ได้รับอนุมัติล่วงหน้า หรือสร้างปุ่มลงชื่อเข้าใช้ด้วย Google ที่กำหนดเองก็ได้
แสดงผลองค์ประกอบปุ่ม HTML
เรามีเครื่องมือกำหนดค่า HTML ที่ช่วยให้คุณปรับแต่งลักษณะที่ปรากฏของปุ่มลงชื่อเข้าใช้ด้วย Google ได้ จากนั้นคุณสามารถดาวน์โหลดข้อมูลโค้ด HTML และ CSS ที่จะแสดงผลปุ่มในเว็บไซต์สร้างองค์ประกอบปุ่ม HTML
ดาวน์โหลดไอคอนแบรนด์ที่ได้รับอนุมัติล่วงหน้า
นอกจากการใช้ปุ่มรูปภาพที่กําหนดเองแล้ว คุณยังดาวน์โหลดปุ่มลงชื่อเข้าใช้ด้วย Google ที่อนุมัติล่วงหน้าของเราซึ่งมีให้ในรูปแบบ PNG และ SVG สําหรับทุกแพลตฟอร์มได้ด้วยปุ่มรูปภาพที่ระบุมีให้บริการในโหมดมาตรฐานและโหมดไอคอน และมีตัวเลือกสไตล์ต่อไปนี้
- ธีม : สว่าง กลาง มืด
- รูปร่าง : สี่เหลี่ยมผืนผ้า ทรงเม็ดยา
ธีม | ปุ่ม | คำอธิบาย |
---|---|---|
สว่าง | ปุ่มลงชื่อเข้าใช้ด้วย 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 | 1 พิกเซล | ด้านใน แบบอักษร: #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 ในโหมดมืด โหมดสว่าง และโหมดกลางๆ |
สิ่งที่ไม่ควรทำ ใช้ตัวอักษร "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 โดยบุคคลที่สาม)