В этом документе приведены рекомендации по отображению кнопки «Войти через Google» на вашем веб-сайте или в приложении. Ваш веб-сайт или приложение должны следовать этим рекомендациям, чтобы завершить процесс проверки приложения.
Наши SDK Google Identity Services отображают кнопку «Войти через Google», которая всегда соответствует самым последним рекомендациям Google по брендингу. Это рекомендуемый способ отображения кнопки «Войти через Google» на вашем веб-сайте или в приложении. В тех случаях, когда вы не можете использовать опцию кнопки, отображаемую Google, вы можете визуализировать HTML-элемент кнопки , загрузить наши предварительно одобренные ресурсы брендинга или, при необходимости, создать собственную кнопку «Войти с помощью Google» .
Отображение элемента кнопки HTML
Мы предоставляем HTML-конфигуратор, который позволяет настроить внешний вид кнопки «Войти через Google». Затем вы можете загрузить фрагмент HTML и CSS, который отобразит кнопку на вашем веб-сайте.Создать элемент HTML-кнопки
Загрузите предварительно одобренные значки брендов
В качестве альтернативы использованию кнопки с собственным изображением вы можете загрузить предварительно одобренные кнопки «Войти с помощью Google» в форматах PNG и SVG для всех платформ.Предоставленные кнопки изображений доступны в стандартном режиме и режиме значков и включают следующие параметры стиля:
- Тема : Светлая, Нейтральная, Темная
- Форма: Прямоугольная, Таблетка
| Тема | Кнопки | Описание |
|---|---|---|
| Свет |  | Стандартный большой светлый прямоугольный элемент «Войти с помощью кнопки Google» |
| Темный |  | Стандартная темная тема в форме таблетки. Кнопка «Войти с помощью Google». |
Поддерживаемые режимы кнопок
| Свет |
|
|
| Темный |
|
|
| Нейтральный |
|
|
Создайте собственную кнопку «Войти с помощью Google»
Настоятельно рекомендуется использовать наши SDK Google Identity Services или любые другие варианты, описанные в предыдущих разделах, поскольку это позволяет пользователям Google легче идентифицировать бренд Google. Чем легче пользователям идентифицировать кнопку действия, тем больше вероятность, что они будут с ней взаимодействовать.
Однако если вам необходимо адаптировать кнопку в соответствии с дизайном вашего приложения, придерживайтесь следующих рекомендаций.
Размер
Вы можете масштабировать кнопку по мере необходимости для разных устройств и размеров экрана, но необходимо сохранить соотношение сторон, чтобы логотип Google не растягивался.
Текст
Чтобы побудить пользователей нажать кнопку, мы рекомендуем использовать текст призыва к действию «Войти через Google», «Зарегистрироваться через Google» или «Продолжить через Google». Пользователю должно быть ясно, что он входит в ваше приложение или регистрируется в нем, используя свои учетные данные Google, а не регистрируется или регистрируется для учетной записи Google в вашем приложении.
Цвет
Ниже показано состояние кнопок по умолчанию. Кнопка всегда должна иметь стандартный цвет Google «G».
| Тема | Пример | |
|---|---|---|
| Свет |  | Заливка: #FFFFFF Инсульт: #747775 | 1 пиксель | внутри Шрифт: #1F1F1F | Робото Средний | 14/20 |
| Темный | | Заливка: #131314 Ход: #8E918F | 1 пиксель | внутри Шрифт: #E3E3E3 | Робото Средний | 14/20 |
| Нейтральный |  | Заливка: #F2F2F2 Инсульт: Нет инсульта Шрифт: #1F1F1F | Робото Средний | 14/20 |
Шрифт
Шрифт кнопки — Roboto Medium, шрифт TrueType. Чтобы установить, сначала загрузите шрифт Roboto и разархивируйте пакет загрузки. На Mac просто дважды щелкните Roboto-Medium.ttf и нажмите «Установить шрифт». В Windows перетащите файл в папку «Мой компьютер» > «Windows» > «Шрифты».
Заполнение
| Андроид |  |
| iOS |  |
| Интернет (мобильный + настольный компьютер) |  |
| Ссылка |  |
Логотип Google на кнопке «Войти через Google»
Независимо от текста, вы не можете изменить размер или цвет логотипа Google «G». Это должна быть стандартная цветная версия на белом фоне. Если вам нужно создать собственный логотип Google нестандартного размера, начните с любого размера логотипа, включенного в пакет загрузки.
Неправильный дизайн кнопки.
 Делать Используйте рекомендации по дизайну Google Material 3 для границ кнопок и цветовой схемы. |  Не Используйте значок или логотип Google отдельно, без границы кнопки и без текста, обозначающего действие пользователя. |
 Делать Используйте цвет бренда Google для значка Google для темного, светлого и нейтрального режимов. |  Не Используйте монохромные версии Google «G» для кнопки. |
 Делать Выберите кнопку в правильном цветовом режиме для обеспечения доступности и равной заметности. |  Не Поместите стандартный цветной значок Google «G» на цветной фон, отличный от светлого, темного или нейтрального. |
 Делать Придерживайтесь буквы Google «G» с фиксированными отступами и размером. |  Не Создайте свой собственный значок для кнопки. |
 Делать При необходимости используйте Google «G» для кнопки действия. |  Не Используйте термин «Google» в кнопке для обозначения действия «Войти через Google». |
Войдите, используя рекомендации Google по брендингу
Войдите с помощью Google и других сторонних вариантов входа.
Кнопка «Войти через Google» должна отображаться как минимум на таком же видном месте, как и другие варианты входа в систему сторонних разработчиков. Например, кнопки должны быть примерно одинакового размера и иметь одинаковый визуальный вес.
Другие рекомендации
Если вы запрашиваете дополнительные области, делайте это с помощью добавочной авторизации ( Android , iOS , Интернет ), запрашивая авторизацию у пользователя только тогда, когда он начинает взаимодействовать с функцией, требующей доступа к API.
Если вы запрашиваете области YouTube, используйте кнопку YouTube .
Если вы используете игровые сервисы Google Play, ознакомьтесь также с рекомендациями по брендингу игровых сервисов Google Play .
Использование брендов Google способами, прямо не предусмотренными в этом документе, не допускается без предварительного письменного согласия Google (дополнительную информацию см. в Руководстве по использованию элементов бренда Google третьими лицами ).