Войдите, используя Руководство по брендингу Google.

В этом документе приведены рекомендации по отображению кнопки «Войти через Google» на вашем веб-сайте или в приложении. Ваш веб-сайт или приложение должны следовать этим рекомендациям, чтобы завершить процесс проверки приложения.

Наши SDK Google Identity Services отображают кнопку «Войти через Google», которая всегда соответствует самым последним рекомендациям Google по брендингу. Это рекомендуемый способ отображения кнопки «Войти через Google» на вашем веб-сайте или в приложении. В тех случаях, когда вы не можете использовать опцию кнопки, отображаемую Google, вы можете визуализировать HTML-элемент кнопки , загрузить наши предварительно одобренные ресурсы брендинга или, при необходимости, создать собственную кнопку «Войти с помощью Google» .

Отображение элемента кнопки HTML

Мы предоставляем HTML-конфигуратор, который позволяет настроить внешний вид кнопки «Войти через Google». Затем вы можете загрузить фрагмент HTML и CSS, который отобразит кнопку на вашем веб-сайте.

Создать элемент HTML-кнопки

  
  

Загрузите предварительно одобренные значки брендов

В качестве альтернативы использованию кнопки с собственным изображением вы можете загрузить предварительно одобренные кнопки «Войти с помощью Google» в форматах PNG и SVG для всех платформ.

Предоставленные кнопки изображений доступны в стандартном режиме и режиме значков и включают следующие параметры стиля:

  • Тема : Светлая, Нейтральная, Темная
  • Форма: Прямоугольная, Таблетка
Ниже приведены два примера:
Тема Кнопки Описание
Свет Стандартный большой светлый прямоугольный образец кнопки «Войти с помощью Google» Стандартный большой светлый прямоугольный элемент «Войти с помощью кнопки Google»
Темный Стандартная таблетка в темной тематике, пример кнопки «Войти с помощью Google» Стандартная темная тема в форме таблетки. Кнопка «Войти с помощью Google».
Загрузите предварительно одобренные значки брендов

Поддерживаемые режимы кнопок

Свет

светлая тема круглой формы, кнопка «Войти с помощью Google»

Светлая квадратная форма, кнопка «Войти с помощью Google»

светлая тема в форме таблетки, кнопка «Войти с помощью Google»

светлый тематический прямоугольник в форме кнопки «Войти с помощью Google»

Темный

темная тема круглой формы, кнопка «Войти с помощью Google»

Темная тема квадратной формы Кнопка «Войти с помощью Google»

Темная тема в форме таблетки Кнопка «Войти с помощью Google»

Темная тема в форме прямоугольника, кнопка «Войти с помощью Google»

Нейтральный

нейтральная тема, круглая форма, кнопка «Войти с помощью Google»

нейтральная тематическая квадратная форма, кнопка «Войти с помощью Google»

нейтральная тема в форме таблетки, кнопка «Войти с помощью Google»

нейтральная тематическая прямоугольная кнопка «Войти с помощью Google»

Создайте собственную кнопку «Войти с помощью Google»

Настоятельно рекомендуется использовать наши SDK Google Identity Services или любые другие варианты, описанные в предыдущих разделах, поскольку это позволяет пользователям Google легче идентифицировать бренд Google. Чем легче пользователям идентифицировать кнопку действия, тем больше вероятность, что они будут с ней взаимодействовать.

Однако если вам необходимо адаптировать кнопку в соответствии с дизайном вашего приложения, придерживайтесь следующих рекомендаций.

Размер

Вы можете масштабировать кнопку по мере необходимости для разных устройств и размеров экрана, но необходимо сохранить соотношение сторон, чтобы логотип Google не растягивался.

Текст

Чтобы побудить пользователей нажать кнопку, мы рекомендуем использовать текст призыва к действию «Войти через Google», «Зарегистрироваться через Google» или «Продолжить через Google». Пользователю должно быть ясно, что он входит в ваше приложение или регистрируется в нем, используя свои учетные данные Google, а не регистрируется или регистрируется для учетной записи Google в вашем приложении.

Цвет

Ниже показано состояние кнопок по умолчанию. Кнопка всегда должна иметь стандартный цвет Google «G».

Тема Пример
Свет светлая тема в форме таблетки, кнопка «Войти с помощью Google» Заливка: #FFFFFF
Инсульт: #747775 | 1 пиксель | внутри
Шрифт: #1F1F1F | Робото Средний | 14/20
Темный Темная тема в форме таблетки Кнопка «Войти с помощью Google» Заливка: #131314
Ход: #8E918F | 1 пиксель | внутри
Шрифт: #E3E3E3 | Робото Средний | 14/20
Нейтральный нейтральная тема в форме таблетки, кнопка «Войти с помощью Google» Заливка: #F2F2F2
Инсульт: Нет инсульта
Шрифт: #1F1F1F | Робото Средний | 14/20

Шрифт

Шрифт кнопки — Roboto Medium, шрифт TrueType. Чтобы установить, сначала загрузите шрифт Roboto и разархивируйте пакет загрузки. На Mac просто дважды щелкните Roboto-Medium.ttf и нажмите «Установить шрифт». В Windows перетащите файл в папку «Мой компьютер» > «Windows» > «Шрифты».

Заполнение

Андроид Отступ 12 пикселей слева перед логотипом Google, отступ 10 пикселей справа после логотипа Google и отступ 12 пикселей справа после текста «Войти через Google».
iOS Отступ 16 пикселей слева перед логотипом Google, отступ 12 пикселей справа после логотипа Google и отступ 16 пикселей справа после текста «Войти через Google».
Интернет (мобильный + настольный компьютер) Отступ 12 пикселей слева перед логотипом Google, отступ 10 пикселей справа после логотипа Google и отступ 12 пикселей справа после текста «Войти через Google».
Ссылка Войдите в систему, используя ссылку на заполнение кнопок Google.

Логотип Google на кнопке «Войти через Google»

Независимо от текста, вы не можете изменить размер или цвет логотипа Google «G». Это должна быть стандартная цветная версия на белом фоне. Если вам нужно создать собственный логотип Google нестандартного размера, начните с любого размера логотипа, включенного в пакет загрузки.

Значок Google G

Неправильный дизайн кнопки.

Пример изображения «что нужно и чего нельзя делать в брендинге»
Делать

Используйте рекомендации по дизайну 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 третьими лицами ).