Плашки в приложении

Для выделения продукта в каталоге мобильного приложения мы используем цветные плашки с коротким текстовым сообщением. Плашки помогают в навигации по каталогу и привлекают внимание к особым позициям в меню. Шаблон плашек в Figma можно скачать вот тут.

Например зелёная плашка «Без мяса» указывает на особый продукт, подходящий для людей, которые не употребляют мясо

Стиль

Стиль плашки — это её форма, цвет, а так же тон высказывания, заключенного в плашку. Рассмотрим подробнее эти составляющие стиля.

Форма плашек и их размер по высоте одинаковы во всём каталоге. Изменяется только длина, она зависит от размера содержимого.

Скругление углов плашки 110 рх, высота плашки 220 рх — форма «таблетка»

Цвет плашек основан на паттернах рынка и психологии цвета, всего в палитре пять цветовых стилей.

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

Текст в плашке «Новинка» — существительное

Также текст в плашке делаем по возможности короче, чтобы клиент мог мгновенно воспринять информацию.

Да

Нет

Типы плашек

В зависимости от типа, плашки используются во всех категориях продуктов или только в каких-то определённых. Рассмотрим все типы плашек и области их применения.

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

Плашка «Новинка» используется, когда продукт в меню новый. Цвет — cinnabar.

Плашка «Обновили» используется, когда хотим сообщить, что рецепт продукта изменили. Цвет — cinnabar.

Плашка «Хит» используется, когда хотим подчеркнуть, что продукт пользуется популярностью. Цвет — golden.

Плашки гастрономических предпочтений пока имеют только один вид — «Без мяса». Используется только для продуктов в категории «Пицца» и «Закуски».

Плашка «Без мяса» используется, когда хотим сообщить, что в составе продукта нет мяса. Цвет — herbal.

Плашки целевых аудиторий содержит пока один вид плашки — «Детям». Эта группа плашек используется если продукт предназначен для узкой аудитории.

Плашка «Детям» используется, когда целевая аудитория продукта — дети. Цвет — magenta.

Плашки для комбо содержит шесть видов плашек — «Выгодно», «На одного», «На двоих», «до 19%», «до 20%», «до 22%». Плашки этой группы используются только в категории «Комбо».

Плашка используется, когда есть выгода на набор продуктов. Цвет — Blue-lilac.

Плашка используется, когда выгода на набор больше 15%. Цвет — Blue-lilac.

Размещение

Все плашки, кроме плашек для комбо, размещаем в верхнем правом углу с отступами 110 px cверху и справа.

Плашки на карточке товара стоят вверху справа

Плашки для комбо размещаем по центру.

Плашки категории «Комбо» на карточке товара стоят вверху по центру

На одном продукте может размещается только одна плашка.

Читать далее: