Bu dokümanda, web sitenizde veya uygulamanızda Google ile oturum açma düğmesinin nasıl gösterileceğine dair yönergeler verilmektedir. Uygulama doğrulama sürecini tamamlamak için web siteniz veya uygulamanız bu yönergelere uymalıdır.
Google Kimlik Hizmetleri 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üğme öğesi oluşturma
Ö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, Hap
| 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 şeklindeki Google ile oturum açma düğmesi |
Desteklenen Düğme Modları
| Açık renk |
|
|
| Kasvetli |
|
|
| Normal |
|
|
Özel Google ile oturum açma düğmesi oluşturma
Google kullanıcılarının Google markasını daha kolay tanımlamasını sağladığından Google Kimlik Hizmetleri SDK'larımızı veya önceki bölümlerde ele alınan diğer seçeneklerden herhangi birini kullanmanız ö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 gibi ö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üğme yazı tipi, TrueType yazı tipi olan Roboto Medium'dur. Yüklemek için önce Roboto yazı tipini indirin ve indirilen paketin sıkıştırmasını açın. Mac'te Roboto-Medium.ttf dosyasını çift tıklayıp "Yazı Tipi Yükle"yi tıklamanız yeterlidir. Windows'ta 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 boyutunuzda Google logosu oluşturmanız gerekiyorsa indirme paketinde yer alan logo boyutlarından herhangi biriyle başlayın.
Yanlış düğme tasarımı
 Yapılması gerekenler 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 bir renkli arka plana yerleştirin. |
 Yapılması gerekenler Sabit dolgu ve boyuta sahip Google "G" simgesini 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 etmek için düğmede "Google" terimini tek başına 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 olmalı ve benzer görsel ağırlığa sahip olmalıdır.
Diğer yönergeler
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).