Атаев Маркет

Мобильное приложение
iOS и Android
Flutter

Разработка приложения доставки продуктов для «Атаев Маркет»

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

Каталог: разделы «Популярные товары», «Готовые решения», «Напитки» с цветными карточками. — Главная, каталог и карточка весового товара.

Главная: адрес, баннер «Свежая выпечка», «Готовые решения» с ценами и плашка заказа в пути. — Главная, каталог и карточка весового товара.

О приложении

Тип: мобильное приложение покупателя интернет-магазина продуктов
Платформы: iOS 14 и выше, Android 9.0 и выше; фронтенд на Flutter, бэкенд на PHP
Для кого: покупатели магазина, которым нужна доставка домой или самовывоз со склада
Ассортимент: 26 разделов каталога; ассортимент и остатки приходят из 1С
Получение: доставка курьером или самовывоз из пункта выдачи
Оплата: онлайн после сборки, картой или наличными курьеру

Цель проекта

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

Какие задачи решает приложение

01
У продуктов свои правила
Весовой товар продаётся в килограммах с шагом, наличие зависит от адреса и склада, а позиции без остатка в каталог не попадают.
02
Заказ без лишних шагов
Вход по номеру телефона и SMS-коду, корзина не теряется при регистрации, адреса хранятся в профиле.
03
Честная цена после сборки
Онлайн-оплата списывается, когда заказ собран: сборщик уже взвесил товар и, если нужно, согласовал замену с покупателем.
04
Один язык для дизайна и вёрстки
UI-кит описывает цвета и компоненты, а у каждой роли цвета есть значение для светлой и для тёмной темы.

Каталог продуктового магазина

Каталог в два уровня: раздел и подкатегория. Плитки важных подкатегорий выбирает администратор, поэтому витрину меняют в админ-панели.

Товары подгружаются по 20 штук при прокрутке. Кнопка «Купить» на карточке превращается в счётчик, а на нуле возвращается обратно. Поиск подсказывает с третьего символа и показывает пять первых совпадений.

У каждого раздела свой цвет подложки и своя иллюстрация. Карточки бывают трёх ширин: на треть экрана, на половину и на всю строку.

Результаты поиска «йогурт»: категория «Молочные продукты» и три товара с ценами. — Результаты поиска с категорией и товарами.

Карточки разделов каталога на одну, полторы и три ячейки. Иллюстрации категорий без фона, цвет подложки задаётся отдельно.

Подкатегория «Всё для маёвки»: поиск, фильтры, карточки товаров с ценой и кнопкой плюс. — Подкатегория: поиск по разделу, фильтры и счётчик на карточке.

Карточка весового товара «Фарш куриный»: фото, метка «Весовой», в наличии 3 кг, цена и кнопка добавления. — Карточка весового товара: цена, остаток в килограммах.

Весовой товар

Цена указана за килограмм, выбранный вес и итог позиции видны отдельно. Шаг веса задаётся в 1С.

1,5 кг2 штКупить

Счётчик из UI-кита: штуки и килограммы.

Корзина и мини-корзина

Корзина считает итог с доставкой и бонусами, а мини-корзина держит сумму перед глазами на любом экране каталога.

Корзина: йогурт, куры и филе со счётчиками, строки «Товары», «Бонусы», «Доставка» и сумма к оплате. — Корзина: счётчики, итог с бонусами и доставкой.

Корзина. Плюс и минус у каждой позиции, удаление и очистка с подтверждением. Если товар закончился, пока лежал в корзине, он помечается «Нет в наличии», а приложение предлагает подобрать замену в том же разделе.

Минимальная сумма. Если заказ меньше порога магазина, приложение показывает порог и текущую сумму и ведёт обратно в каталог.

Мини-корзина. Плашка над нижним меню на главной, в каталоге, поиске, карточке товара, избранном и профиле. В ней число единиц и сумма со скидками; при добавлении товара она коротко пульсирует, а в корзине и при оформлении прячется.

Мини-корзина: «В корзине 12 товаров», сумма 1 088 ₽ и кнопка «Открыть». — Мини-корзина из UI-кита: число товаров, сумма и переход в корзину.

Окно «Очистить корзину» с кнопками «Отменить» и «Ок». — Подтверждение очистки корзины.

Окно «Минимальная сумма заказа» с кнопкой «Добавить товары». — Предупреждение о минимальной сумме заказа.

Оформление и доставка

От адреса до курьера у двери: приложение ведёт покупателя по шагам и показывает статус заказа на каждом этапе.

Выбор адреса: поиск на карте, «Текущее местоположение» и «Самовывоз», карта с метками складов. — **Шаг 1**
Адрес или склад
При первом запуске покупатель указывает адрес, определяет его по геолокации или выбирает склад на карте. От выбора зависит наличие товаров.

Оформление заказа: доставка или самовывоз, адреса «Дом» и «Офис», дополнительные услуги и комментарий. — **Шаг 2**
Доставка или самовывоз
Адрес из сохранённых или новый, комментарий курьеру и дополнительные услуги, например подъём на этаж без лифта.

Способ оплаты: онлайн после сборки, картой курьеру, наличными курьеру и финальный расчёт. — **Шаг 3**
Способ оплаты
Онлайн после сборки, картой курьеру или наличными. Для наличных можно указать, с какой суммы нужна сдача.

Экран «Заказ оформлен»: номер, адрес, итог и кнопки «Следить за заказом» и «На главную». — **Шаг 4**
Заказ оформлен
Номер, адрес и сумма на одном экране, отсюда переход к карточке заказа и трекингу.

Путь заказа: карта с курьером, шаги «Заказ собран и оплачен онлайн», «Курьер забрал пакет со склада». — **Шаг 5**
Путь заказа
Сборка, оплата и курьер на карте. Если заказ ещё не передан в доставку, его можно отменить и указать причину.

Восемь статусов заказа

Новый
На сборке
Собран
В пути
Доставлен
Возврат
Отменён
Отказан

Если по адресу нет доставки, но рядом есть пункт выдачи, приложение сразу предлагает самовывоз.

Окно «Доставка недоступна» с кнопками «Выбрать самовывоз» и «Изменить адрес». — Доставки нет, самовывоз есть: приложение предлагает выбрать пункт выдачи.

Бонусы и лояльность

Баллы начисляются за покупки и списываются в счёт следующего заказа. Покупатель сам решает, тратить их или копить.

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

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

Блок «Скидки и бонусы»: промокод, галочка «Списать 135 бонусов», «Повторить последний заказ». — Блок «Скидки и бонусы» из UI-кита: промокод, списание бонусов, повтор заказа.

Скриншот для App Store «Возвращай кэшбэк. Получай и трать баллы!» с экраном акции. — Скриншот для App Store о кэшбэке.

Товары 18+

Проверка возраста идёт в три слоя. Ни один не заменяет другой: подтверждение в приложении декларативное, а документ смотрят при передаче заказа.

1
Метка в каталоге
Значок «18+» в углу карточки и превью. Раздел с такими товарами закрыт, пока покупатель не подтвердит возраст.
2
Подтверждение в приложении
Окно «Вам есть 18 лет?» при первом входе в раздел или первом добавлении в корзину. Ответ хранится 30 дней и спрашивается снова на новом устройстве.
3
Проверка при получении
В корзине предупреждение, при оформлении обязательная галочка. Заказ уходит в сборку и доставку с отметкой, и курьер проверяет документ.

Раздел 18+ закрыт до подтверждения возраста: карточки размыты, кнопка «Подтвердить возраст».

Окно «Вам есть 18 лет?» с кнопками «Да, мне есть 18» и «Нет».

Карточка товара с меткой «18+» и предупреждением о документе при получении.

Корзина с товарами 18+ и плашкой о документе, удостоверяющем личность.

Светлая и тёмная тема

Цвета заданы ролями: в UI-ките у каждой роли два значения, поэтому тёмная тема собирается из тех же компонентов без перерисовки экранов.

Каталог в тёмной теме: те же разделы и карточки на тёмном фоне. — Тёмная тема: каталог.

Роль	Где	Светлая	Тёмная
`bg`	фон экрана	#F6F6F2	#0F1411
`surface`	карточки и поля	#FFFFFF	#1A211C
`text`	основной текст	#191C1D	#ECF1ED
`text-muted`	подписи	#71717B	#A2AFA6
`accent`	кнопки и активные состояния	#28A745	#3FBF63
`accent-deep`	тёмный бренд и плашки	#166534	#2E9B52
`danger`	ошибки и отмена	#BA1A1A	#FF8A8A
`warn`	предупреждения	#D07E00	#E5A93D