Мобильная версия сайта

1. Шрифт на баннере не должен превышать высоту и ширину заглавной буквы «Ф» шрифта «Arial Bold» 36 pt для одной строки (т. е. высоту и ширину квадрата со сторонами 26 px); шрифт не более 25 pt (квадрат со сторонами 20 px) — для двух строк; шрифт не более 20 pt (квадрат со сторонами 15 px) — для трех строк.
2. Минимальный размер шрифта — 11 pt (в логотипах, сообщении, иллюстрациях, дисклеймерах). Исключение — фото упаковок, фото товаров и снимки экранов.

Расстояние от края баннера до текста должно быть не меньше 10 px.

Логотип или значок бренда, продукта, технологии должен занимать не больше 10% площади баннера.

Пример хорошего баннера в увеличенном виде:

Рамка может быть только по горизонтальным границам баннера.

Если нет белых элементов, которые пересекают край баннера, или цвет фона отличается от белого, то допускается отсутствие рамки.

Если есть белые элементы, которые пересекают край баннера, или цвет фона баннера белый, то необходимо добавить контрастную рамку 1 px по горизонтали (сверху и снизу). Наиболее подходящий цвет рамки — #dadada.

1. Баннер или его отдельные элементы не должны мигать, отвлекая пользователя от взаимодействия со страницей.
2. Допустимая частота смены элементов на баннере — не чаще одного раза в две секунды.

Обязательная правовая информация (например, название банка в ОПФ, сроки акции и т. д.) должна быть четко видна сразу, без взаимодействия пользователя с баннером. Подробнее смотрите в дополнительных рекомендациях.

Пример хорошего баннера в увеличенном виде:

1. Баннер не должен маскироваться под элементы пользовательского интерфейса — например, под системное окно Windows.
2. Баннер не должен содержать стандартные элементы пользовательского интерфейса (курсор, поисковая строка, различные кнопки и другие элементы), которые не выполняют соответствующие функции.
3. Не следует использовать желтый в элементах интерфейса, так как этот цвет используется в стандартных элементах дизайна страниц Яндекса. Допустимый желтый цвет — #f0e5ad и светлее.

Если на баннере необходима возрастная метка, то:

1. Возрастную метку нужно ставить в верхнем правом углу баннера.
2. Шрифт метки — «Arial regular» 12 pt.
3. Цвет метки — #dadada.
   Примечание.

   Если метка серого цвета не читается, например, из-за дробного фона (мелкие элементы по всей плоскости), под нее следует поставить белую подложку.

1. Максимальные размеры кнопки/бейджа: высота — 50px, ширина — 150 px.
2. Не рекомендуется использовать желтый цвет для кнопки, так как этот цвет используется в стандартных элементах дизайна страниц Яндекса. Допустимый желтый цвет — #f0e5ad и светлее.
3. К бейджу магазина приложений предъявляются такие же требования, как к логотипам.

90% отказов при прохождении модерации случаются из-за плохой читаемости шрифта.

1. Лучше отказаться от дробных координат при выравнивании шрифта в HTML5-исходниках, чтобы избежать эффекта «размытости» (требуется проверка во всех популярных браузерах).
2. Рекомендуется использовать векторные шрифты.
   Совет.

   Если использовать векторный шрифт невозможно, сохраните растровые текстовые блоки в максимально хорошем качестве (с учетом ограничений по размерам баннера).

3. В некоторых случаях шрифт в векторном формате также содержит эффект «размытости».

   Эффект может появиться по нескольким причинам:

   • Маленький размер

     

   • Сложная форма шрифта (например, с засечками)

     

   • Шрифт не адаптирован для использования в вебе или он изначально разработан для заголовков и крупных кеглей

     

   Решить проблему «размытости» шрифта, в том числе и в векторном формате, можно несколькими способами:

   • Увеличить кегль шрифта

     

   • Заменить шрифт на более простой

     

   • Использовать шрифт, адаптированный для веба и маленьких кеглей

     

Украшательство шрифтов и плашек (тень, обводка, объем) может усложнить восприятие сообщения.

1. Используйте не больше двух шрифтов и начертаний.
2. Используйте не больше трех цветов в шрифтах.

1. С артефактами из-за сжатия файла

   

2. С размытием или чрезмерной четкостью

   

Не пытайтесь вместить большое количество информации на узкий баннер. Придумайте короткую и понятную формулировку, чтобы сообщение считывалось моментально.

1. Не используйте маленькие изображения объектов с большим количеством мелких деталей.

   

2. Не используйте фотографию в качестве фона для баннера, если на ней много мелких деталей.

   

Текст должен быть контрастным и легко читаемым. Минимальный размер шрифта — 11 pt.

Возможные варианты оформления:

Автоскроллинг с возможностью ручной прокрутки

Обязательная информация (например, название банка в ОПФ, сроки акции и т. д.) должна быть видна без взаимодействия пользователя с баннером.

Разделение на кадры

Обязательная информация размещается отдельно на разных кадрах:

• сроки акции — на первых кадрах;
• остальная информация (обязательная для клиента) — размещается под плашкой «юридическая информация» и доступна по наведению курсора.

Внимание.

При показе кадр с обязательной информацией должен отображаться не менее трех секунд.

Фиксация на несколько секунд и управление паузой

Кадр с обязательной информацией (указаны названия банков в ОПФ) отображается не менее трех секунд. У пользователя должна быть возможность нажать на паузу и ознакомиться с остальной информацией. Если пользователь не нажал на паузу, анимация в баннере продолжается.

Фиксация и наведение курсора

Правовая информация отображается не менее трех секунд, а также доступна далее по наведению курсора.