Требования к дизайну виджетов

Из этой статьи вы узнаете:

• какие виды виджетов мы предлагаем,
• как разместить несколько OAuth в одном виджете,
• какие формулировки использовать в виджетах,
• какие стили применять,
• какие размеры задавать,
• в каких контекстах использовать виджеты.

Виды виджетов

Есть два типа виджетов: кнопка и кнопка-иконка.

Виджет в виде кнопки

Кнопка с черным текстом на белом фоне или с белым текстом на прозрачном фоне. Применяется, если подключен только один OAuth в виджете. Пример виджета «Одноклассники» c разными скруглениями Пример виджета «VK ID» c разными скруглениями Пример виджета «Mail» c разными скруглениями

Виджет в виде кнопки-иконки

Кнопка-иконка на белом или прозрачном фоне с обводкой. Применяется, если подключены два и более OAuth в виджете. Пример кнопки-иконки

Несколько OAuth в одном виджете

Отображение OAuth внутри виджета зависит от их количества: при подключении двух и более OAuth кнопка превращается в кнопку-иконку. Также в зависимости от количества OAuth меняется размер кнопки-иконки. Ниже представлены примеры отображения.

Формулировки

Текст используется только для виджета с одним OAuth. Используйте только предложенные варианты. Изменять текст внутри виджета запрещено.

Стили

Настраивать стили необходимо только в том случае, если вы хотите стилизовать кнопку авторизации в соответствии с вашей дизайн-системой. Если вы используете стандартную кнопку из SDK, ничего изменять не нужно.

Шрифты

Используйте шрифты, представленные ниже, или системные шрифты мобильной платформы. Следите, чтобы размер шрифта и высота кнопки были соразмерны.

Цвета

Мы предлагаем два варианта кнопки:

• с черным текстом на белом фоне: текст внутри кнопки — #000000, цвет фона — #FFFFFF;
• с черным текстом на прозрачном фоне: текст внутри кнопки — #000000;

Разрешено убирать обводку или использовать заливку нейтрального цвета.

Скругление

Кнопки можно скруглять в соответствии со стилистикой вашей дизайн-системы.

Тени

Добавлять тени к кнопкам запрещено.

Размеры

Вы можете настроить высоту и ширину кнопки в соответствии с рекомендациями ниже.

Высота

Рекомендованная высота — от 32 до 56px. Используйте одинаковые отступы для логотипа и фото пользователя внутри кнопки. В кнопке с полностью скругленными краями логотип должен быть смещен вправо на 2 px. Маленькая кнопка:

• Размер — 32–40рх;
• Шрифт — 14pt;
• Логотип — 24pt;
• Отступы — 4-7px.

Средняя кнопка:

• Размер — 40–48рх;
• Шрифт — 16pt;
• Логотип — 28pt;
• Отступы — 6-9px.

Большая кнопка:

• Размер — 48–56рх;
• Шрифт — 17pt;
• Логотип — 28pt;
• Отступы — 10-14px.

Ширина

Ширина зависит от контейнера, в который помещается кнопка. Минимум: При уменьшении ширины следите, чтобы центральный контейнер с текстом не заходил за границы иконки — в этом случае виджет превращается в кнопку-иконку. Минимум для виджета с двумя и более OAuth: Уменьшать ширину виджета можно до тех пор, пока Button Icon остается квадратной. Максимум:

Адаптивность

Если есть данные о пользователе, кнопка-иконка One Tap изменяется от логотипа к фото и обратно.

Контексты

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

После формы входа

Используется в дополнение к вашей собственной форме авторизации. Виджет необходимо визуально отделить от формы: в виджете с одним OAuth используйте «или», а с несколькими — «или с помощью».

Интеграция в кнопку One Tap

Виджет может встраиваться в One Tap Button. От этой формы его необходимо визуально отделять так же, как от формы входа.

Интеграция в шторку авторизации

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