Макет проверяют на большом экране, а смотрят с ладони. Разбираем, как подобрать размер шрифта и контраст, чтобы слайд работал в мобильной выдаче.
Подавляющая часть покупателей смотрит карточки с телефона. В выдаче изображение показывается размером с иконку, в карточке — на ширину экрана, и лишь в зуме приближается к тому, что видел дизайнер.
Значит проверять макет нужно в двух размерах: превью и экран телефона. Всё, что не читается в первом, для выдачи не существует.
Из этого следует и правило вёрстки: макет собирают, глядя на уменьшенную копию, а не только на полноэкранный вид.
Второй важный факт про мобильную выдачу — скорость листания. Палец проходит экран за доли секунды, и слайд конкурирует не с соседней карточкой, а с самим движением. Прочитаться должно первое слово, остальное покупатель дочитает уже внутри карточки.
Отсюда же следует, что самый ценный элемент слайда — не текст, а сам товар. Графика лишь помогает его понять, и если она мешает разглядеть вещь, слайд работает против карточки.
Стоит помнить и про порядок: первый слайд после фотографий видят почти все, пятый — единицы. Самое важное сообщение ставят первым, а не приберегают на потом.
Универсальной цифры в пикселях нет — она зависит от размера макета. Работает пропорция: главная фраза занимает по высоте примерно десятую часть слайда.
Практический тест проще формулы: уменьшите макет до ширины пары сантиметров и попробуйте прочитать. Если не выходит — увеличивайте, пока не выйдет.
Ещё один ориентир — расстояние: слайд читают с вытянутой руки, а не с двадцати сантиметров, как макет в редакторе.
Полезный ориентир для вёрстки: главная надпись занимает по высоте примерно десятую часть слайда. Меньше — теряется в превью, больше — начинает конкурировать с товаром.
Второй и третий уровни текста делают заметно мельче главного, но не меньше половины его высоты. Три близких по размеру кегля на одном слайде читаются как каша — иерархия должна быть очевидной.
Заголовок и подпись стоит проверять отдельно: подпись мельче в полтора-два раза, но не мельче того размера, при котором она исчезает в превью — иначе её просто нет смысла набирать.
Шрифт лучше брать один на всю линейку и различать уровни весом, а не гарнитурой: жирное начертание для заголовка и обычное для подписи читаются лучше двух разных шрифтов.
Тонкий светлый шрифт на светлом фото исчезает первым. Помогают плашка под текстом, затемнение части кадра или размещение надписи на однородном участке фона.
Проверять контраст стоит при выключенной подсветке на максимуме: покупатель часто смотрит карточки на улице, а не в идеальных условиях.
Тонкие шрифты с засечками теряются первыми — для слайдов надёжнее плотные рубленые начертания.
Проверять контраст надёжнее не глазом, а обесцвечиванием: переведите макет в чёрно-белый режим. Если надпись перестала читаться, значит она держалась только на цвете, а не на разнице яркости.
Осторожнее и с фирменными цветами: светло-серый или пастельный корпоративный оттенок на белом фоне красив в презентации и нечитаем в выдаче.
Помогает и обводка самой плашки: тонкая рамка отделяет её от фото на любом фоне и стоит дешевле подбора цвета под каждый кадр.
Крупный кегль ограничивает объём — и это хорошо. На слайд помещается одна фраза и короткое пояснение, а всё лишнее уезжает в описание.
Если текст не влезает, правильный ход — сократить формулировку, а не уменьшить шрифт.
Хорошее правило — не больше семи слов в главной фразе. Всё, что длиннее, покупатель в выдаче не дочитает, а внутри карточки прочтёт в описании.
Если информации объективно много, её разносят по нескольким слайдам, а не сжимают на одном. Два понятных слайда всегда лучше одного перегруженного.
Полезно писать в утвердительной форме и без вводных слов: «не просвечивает» читается быстрее, чем «ткань достаточно плотная и не просвечивает».
Цифры почти всегда работают лучше прилагательных: «плотность 240 г/м²» и «выдерживает 120 кг» покупатель считывает мгновенно, а «высокое качество» пропускает.
Края слайда могут обрезаться при кадрировании под разные витрины. Текст лучше держать внутри условной рамки, отступив от краёв.
Особенно это касается нижней части: там площадки иногда накладывают собственные элементы интерфейса.
Стоит помнить и о тёмной теме приложения: белая плашка выглядит в ней иначе, чем на светлом фоне браузера.
Безопасный отступ удобно заложить в шаблон направляющими: тогда вёрстка не выходит за границы автоматически, и проверять каждый макет вручную не нужно.
Отдельно проверьте квадратный кроп: часть витрин обрезает вертикальный слайд до квадрата, и текст, стоявший внизу, исчезает целиком.
И проверьте, как макет выглядит в квадратной миниатюре ленты рекомендаций: там обрезка часто иная, чем в основной выдаче.
Соберите слайды в один экран, уменьшите до размера превью и посмотрите с расстояния вытянутой руки — так вы увидите то же, что покупатель.
И откройте выдачу конкурентов рядом: если ваш слайд теряется на их фоне, дело почти всегда в кегле и контрасте, а не в идее.
Полезно собрать эталонный слайд линейки и сверять с ним остальные: так кегль и контраст не «плывут» от карточки к карточке.
Полезно проверить макет и на чужом телефоне — с другой диагональю, другой цветопередачей и другой яркостью. Собственный экран за месяц работы перестаёт быть объективным.
И оценивайте слайды партией: пять карточек рядом покажут разнобой в кегле и контрасте, которого не видно на одном макете.
Такая проверка занимает минуту на партию и снимает большинство правок, которые иначе всплывают уже после публикации.
И сверяйте слайды с фотографиями галереи: если графика по стилю выпадает, карточка выглядит собранной из двух разных источников.
Мы используем файлы cookie, Яндекс Метрику и чат поддержки Jivo, чтобы сайт работал корректно и мы понимали, какие страницы полезны. Нажмите «Только необходимые» — и аналитика с чатом на вашем устройстве отключатся. Подробнее — в политике использования cookie и политике обработки персональных данных.