Bu dokümanda, web sitenizde veya uygulamanızda Google ile Oturum Aç düğmesinin nasıl gösterileceğiyle ilgili yönergeler yer almaktadır. Web siteniz veya uygulamanız, uygulama doğrulama sürecini tamamlamak için bu yönergelere uymalıdır.
Google Identity Services SDK'larımız, her zaman en güncel Google markalaşma yönergelerine uygun bir Google ile oturum aç düğmesi oluşturur. Bu öğeler, web sitenizde veya uygulamanızda Google ile oturum açma düğmesini görüntülemenin önerilen yoludur. Google tarafından oluşturulan düğme seçeneğini kullanamadığınız durumlarda HTML düğme öğesi oluşturabilir, önceden onaylı marka öğelerimizi indirebilir veya dilerseniz özel bir Google ile oturum açma düğmesi oluşturabilirsiniz.
HTML düğme öğesini oluşturma
Google ile oturum açma düğmesinin görünümünü özelleştirmenize olanak tanıyan bir HTML yapılandırıcı sunuyoruz. Ardından, düğmeyi web sitenizde oluşturacak bir HTML ve CSS snippet'i indirebilirsiniz.HTML Düğmesi Öğesi Oluştur
Ön onaylı marka simgelerini indirme
Özel resim düğmesi kullanmaya alternatif olarak, tüm platformlar için PNG ve SVG biçimlerinde sunulan önceden onaylı Google ile oturum açma düğmelerimizi indirebilirsiniz.Sağlanan resim düğmeleri standart ve simge modlarında kullanılabilir ve aşağıdaki stil seçeneklerini içerir:
- Tema : Açık, Nötr, Koyu
- Şekil : Dikdörtgen, Yuvarlak
| Tema | Düğmeler | Açıklama |
|---|---|---|
| Açık renk |
|
Standart büyük açık temalı dikdörtgen Google ile oturum açma düğmesi |
| Kasvetli |
|
Standart koyu temalı hap şeklinde Google ile oturum aç düğmesi |
Desteklenen Düğme Modları
| Açık renk |
|
|
| Kasvetli |
|
|
| Normal |
|
|
Özel Google ile Oturum Açma düğmesi oluşturma
Google Kimlik Hizmetleri SDK'larımızın veya önceki bölümlerde ele alınan diğer seçeneklerden herhangi birinin kullanılması, Google kullanıcılarının Google markasını daha kolay tanımasını sağladığından önemle tavsiye edilir. Kullanıcıların bir işlem düğmesini ne kadar kolay tanımlayabildikleri, düğmeyle etkileşim kurma olasılıklarını etkiler.
Ancak düğmeyi uygulama tasarımınıza uyacak şekilde uyarlamanız gerekiyorsa aşağıdaki yönergelere uyun.
Boyut
Düğmeyi farklı cihazlar ve ekran boyutları için gerektiği şekilde ölçeklendirebilirsiniz ancak Google logosunun uzamaması için en boy oranını korumanız gerekir.
Metin
Kullanıcıları düğmeyi tıklamaya teşvik etmek için "Google ile oturum aç", "Google ile kaydol" veya "Google ile devam et" harekete geçirici mesaj metinlerini kullanmanızı öneririz. Kullanıcının, uygulamanızda oturum açtığını veya Google kimlik bilgileriyle uygulamanıza kaydolduğunu, uygulamanızda Google Hesabı'na kaydolmadığını açıkça belirtmeniz gerekir.
Renk
Düğmelerin varsayılan durumu aşağıda gösterilmektedir. Düğmede her zaman Google "G" simgesinin standart rengi bulunmalıdır.
| Tema | Örnek | |
|---|---|---|
| Açık renk |
|
Dolgu: #FFFFFF İnce çizgi: #747775 | 1 piksel | içte Yazı tipi: #1F1F1F | Roboto Medium | 14/20 |
| Kasvetli |
|
Dolgu: #131314 Çizim: #8E918F | 1 piksel | içe doğru Yazı tipi: #E3E3E3 | Roboto Medium | 14/20 |
| Normal |
|
Dolgu: #F2F2F2 Kenarlık: Kenarlık yok Yazı tipi: #1F1F1F | Roboto Medium | 14/20 |
Yazı tipi
Düğmenin yazı tipi, bir TrueType yazı tipi olan Roboto Medium'dur. Yüklemek için önce Roboto yazı tipini indirin ve indirme paketini açın. Mac'te Roboto-Medium.ttf'yi çift tıklayıp "Yazı Tipi Yükle"yi tıklamanız yeterlidir. Windows'da, dosyayı "Bilgisayarım" > "Windows" > "Yazı Tipleri" klasörüne sürükleyin.
Dolgu
| Yapay Zeka |
|
| iOS |
|
| Web (mobil + masaüstü) |
|
| Referans |
|
"Google ile oturum aç" düğmesindeki Google logosu
Metinden bağımsız olarak Google "G" logosunun boyutunu veya rengini değiştiremezsiniz. Standart renkli sürüm olmalı ve beyaz arka plan üzerinde gösterilmelidir. Kendi özel boyutlu Google logonuzu oluşturmanız gerekiyorsa indirme paketinde yer alan logo boyutlarından herhangi biriyle başlayın.
Yanlış düğme tasarımı
 Yapın Düğme sınırı ve renk şeması için Google Material 3 tasarım yönergelerini kullanın. |
 Yapılmasın Kullanıcı işlemini belirtmek için Google simgesini veya logosunu düğme sınırı ve metin olmadan tek başına kullanın. |
 Yapılması gerekenler Koyu, açık ve nötr modlar için Google simgesi olarak Google marka rengini kullanın. |
 Yapılmasın Düğme için Google "G" harfinin tek renkli sürümlerini kullanın. |
 Yapılması gerekenler Erişilebilirlik ve eşit belirginlik için doğru renk modunda bir düğme seçin. |
 Yapılmasın Standart renkli Google "G" simgesini açık, koyu veya nötr dışında renkli bir arka plana yerleştirin. |
 Yapılması gerekenler Sabit dolgu ve boyuta sahip Google "G"yi kullanın. |
 Yapılmasın Düğme için kendi simgenizi oluşturun. |
 Yapılması gerekenler Gerekirse işlem düğmesi için Google "G" simgesini tek başına kullanın. |
 Yapılmasın Google ile oturum açma işlemini temsil edecek şekilde düğmede tek başına "Google" terimini kullanın. |
Google ile oturum açma marka bilinci oluşturma ile ilgili en iyi uygulamalar
Google ile oturum açma ve diğer üçüncü taraf oturum açma seçenekleri
Google ile oturum açma düğmesi, diğer üçüncü taraf oturum açma seçenekleri kadar belirgin bir şekilde gösterilmelidir. Örneğin, düğmeler yaklaşık olarak aynı boyutta ve benzer görsel ağırlığa sahip olmalıdır.
Diğer Kurallar
Ek kapsamlar istiyorsanız bunu artımlı yetkilendirmeyle (Android, iOS, web) yapın. Kullanıcıdan yalnızca API erişimi gerektiren bir özellikle etkileşime geçmeye başladıklarında yetkilendirme isteğinde bulunun.
YouTube kapsamları için istek gönderiyorsanız YouTube düğmesi kullanın.
Google Play oyun hizmetlerini kullanıyorsanız Google Play oyun hizmetleri markalaşma yönergelerini de inceleyin.
Google markalarının, açıkça bu belgenin kapsamına girmeyen yollarla kullanılması için Google'dan önceden yazılı izin alınması gerekir (daha fazla bilgi için Google Marka Özelliklerinin Üçüncü Taraf Kullanım Kuralları'na bakın).