Готовим хиро-блок для меню в приложении

Разбираемся, как правильно сделать хиро-блоки для меню в приложении. В видео подробная инструкция с примерами на 20 минут. Ниже — саммари текстом.

Как все устроено

Хиро — это блоки с продуктом в меню приложения, вот как они выглядят.

Хиро-блок состоит из двух главных частей: картинки с продуктом и плашки с текстом.

Нижняя часть, где отображается текст, создаётся автоматически на стороне приложения.

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

Размеры картинки с продуктом всегда одинаковые, для мобильной версии 351×306 пикселей, для декстопа — 233×233 пикселя. В первой версии гайда объясняем все на примере картинки для мобильной версии.

Хиро по форме и наполнению могут быть очень разными — разберём в деталях, как их делать.

Фон и цвет

Фон картинки с продуктом готовим сами, фон для плашки с текстом определяется автоматически на стороне приложения — но на его отображение можно повлиять.

Фон для продукта. Продукт может быть на текстурном или однотонном фоне. Чаще всего мы используем фото.

Если фото нет, делаем однородный фон. Для обычных хиро без коллабораций выбираем цвет по категории продукта: серый для напитков, розовый для десертов, коричневый — для всего остального.

Фон плашки с текстом. Определяется автоматически на стороне приложения по нижнему пикселю картинки с продуктом. Поэтому от нижнего края картинки отступаем полоску в 2 пикселя и заливаем её однотонным цветом — этот цвет и станет фоном плашки с текстом.

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

Проверяем контрастность фона на сайте get-color.ru. Максимальная яркость цвета — 0,83 единицы.

Не берем для фона цвета тегов.

Тогда они сливаются с фоном — и картинка выглядит некрасиво.

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

Чтобы сделать градиент, берем цвет нижнего пикселя и растягиваем его от плашки вверх минимум на 30 пикселей.

Следим за тем, чтобы градиент подходил по цвету к картинке с продуктом и не был слишком резким. Растяжку можно увеличить, если хочется, 30 px — это минимальная высота. Главное, чтобы градиент не заходил на сам продукт.

Верхняя форма блока

Есть два вида верхних форм: прямоугольная арка и овальная.

Высоту арок можно регулировать, при этом сам продукт сохраняет свои пропорции и расположение. Края продукта могут как бы «вылетать» за пределы арок.

Прямоугольная арка. Форма со скруглением по бокам в 24 единицы. Диапазон высоты 180–306 пикселей.

Овальная арка. Скругление 200 единиц, диапазон высоты 243–306 пикселей.

Вылеты и обрез

Вылеты. Продукт и другие объекты могут «вылетать» за пределы арок. Рекомендуем делать такие вылеты — так хиро выглядит интереснее.

Следим за размером продукта и не делаем его слишком маленьким.

И вот как это выглядит в интерфейсе приложения.

Никогда не делаем «вылеты» из фотографий с фоном.

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

На макете может быть не заметно, что объекты вышли за пределы максимальной высоты. А в интерфейсе приложения картинка некрасиво обрезается.

Обрезы можно и даже нужно делать — вот несколько правил, чтобы они смотрелись хорошо.

Обрез. Продукты можно показывать целиком или увеличивать и обрезать. Здесь нужно следить за местом обреза и не кропать продукт «в воздухе». Место обреза должно совпадать с границами блока.

Логотипы, текст, объекты

Мы не ставим текст на фото с продуктом. Исключение — логотипы. Это часть каллоборации, плюс логотипы не нужно переводить и адаптировать.

Если делаем промо для коллаборации — размещаем на картинке логотип партнёра. Кроме продукта и логотипа можно добавить ещё 3–4 небольших объекта-атрибута кампании.

Когда всё готово, проверяем картинку по чек-листу ниже и выгружаем.

Чек-лист