Приложение для доставки еды: готовый каркас экранов

Что это и для кого

Доставка — редкий случай, когда заказчик и разработчик вроде бы говорят об одном и том же: все пользовались доставкой, все представляют, как она выглядит. Из-за этого разговор и уходит в песок. «Как в Яндекс Еде» — это тысячи человеко-месяцев и три приложения: клиентское, курьерское и рабочее место кухни. Спорить надо не о сходстве, а о том, какие пять-семь экранов вам действительно нужны в первой версии.

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

Кому пригодится: владельцу заведения — понять объём работ до того, как за них платить; дарк-китчену и небольшой сети — договориться внутри команды, что именно заказываем; заказчику разработки — выдать студии предметное задание вместо ссылки на конкурента.

Из каких экранов состоит каркас

Ниже — то, что реально лежит в шаблоне. Пицца, паста и «Цезарь» в нём — заглушки, которые заменяются на ваше меню за несколько минут.

1. 1 Меню

   Поле «Поиск блюда», блок «Популярное сегодня» — горизонтальная лента из трёх карточек с местом под фото и ценой: «Пицца „Маргарита“ · от 590 ₽», «Паста карбонара · 480 ₽», «Салат „Цезарь“ · 390 ₽». Ниже «Всё меню» — обычный список строками с весом и размером («от 590 ₽ · 35 см», «480 ₽ · 320 г»). Внизу кнопка «Корзина · 2 позиции» — та самая, которая в приложениях доставки висит поверх всего и напоминает, что заказ не оформлен.

   Любая карточка и любая строка открывают экран «Блюдо».

2. 2 Блюдо

   Стрелка «назад», название в шапке, крупное место под фото, лента из трёх фотографий, цена, состав и время приготовления. Дальше выбор размера тремя кнопками (25, 35, 45 см) — это в каркасе единственный вариант выбора, и он же образец для ваших модификаторов. Внизу — «Добавить в корзину».

   Кнопка ведёт в «Корзину».

3. 3 Корзина

   Две позиции строками с количеством и знаками «−» и «＋». Ниже разделитель и денежная часть: «Доставка — бесплатно», «Итого — 1 070 ₽». Отдельным блоком «Адрес доставки» с полем ввода. Внизу «Оформить заказ».

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

4. 4 Статус заказа

   Номер заказа в шапке, крупный статус «Готовим» и человеческое объяснение под ним: «Курьер заберёт заказ примерно через 15 минут. Мы напишем, когда он выедет». Блок «Что дальше» двумя строками: «Курьер в пути · покажем на карте», «Оценить заказ · после доставки». Внизу подсказка, что состав заказа и чек лежат в профиле.

   Это единственный экран, который клиент открывает по десять раз за полчаса. Формулировки на нём важнее, чем на всех остальных.

5. 5 Профиль

   Аватар, имя, телефон и три пункта: «Мои адреса · дом, работа», «История заказов · 12 заказов», «Способы оплаты · карта •• 4242». История заказов ведёт на «Статус заказа» — так в макете показано, что старый заказ открывается той же карточкой.

На трёх экранах — «Меню», «Статус заказа», «Профиль» — внизу живёт меню из трёх пунктов: Меню, Заказы, Профиль. На «Блюде» и в «Корзине» его нет: это глубина, там вместо меню стрелка «назад». Так устроены и iOS, и Android; каркас лучше не перестраивать, пока не появится причина.

Переходы между экранами

Переходы уже проставлены — по ним разработчик читает логику, а вы в режиме «▶ Просмотр» листаете макет как приложение. В отличие от каркаса записи, здесь все переходы обычные: заказ еды — это дорога вперёд, всплывающих окон в ней нет.

Семь вещей, которые в доставке забывают

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

1. Зона доставки и минимальная сумма. Что видит человек, который живёт на два квартала дальше? Отказ должен быть на экране адреса, а не после оформления. И минимальная сумма: подсказка «до бесплатной доставки не хватает 300 ₽» — это отдельная строка в корзине и отдельная логика.
2. Стоп-лист. Блюдо закончилось. Что с ним в меню — исчезает, гаснет, помечается «сегодня нет»? А если оно уже лежит в корзине? Это самый частый пропущенный экран в доставке, и он же самый обидный: клиент оформил заказ, а половину привезти нельзя.
3. Часы работы кухни и предзаказ. Приложение, которое в три ночи бодро принимает заказ, — источник скандалов. Нужны и закрытое состояние меню, и, возможно, «заказать на завтра к 13:00».
4. Модификаторы. «Без лука», «добавить сыр +80 ₽», «острота», «соус на выбор». В каркасе есть только размер тремя кнопками. Если у вас пиццерия — модификаторов будет много, они меняют цену, и это заметная часть работы.
5. Самовывоз. Формально «просто переключатель», фактически — вторая ветка корзины: адрес не нужен, зато нужны выбор точки и время готовности, доставка обнуляется, статусы другие («Готов к выдаче» вместо «Курьер в пути»).
6. Полный набор статусов. В каркасе один — «Готовим». В жизни: принят, оплачен, готовим, передан курьеру, в пути, доставлен, отменён, а ещё отдельно «оплата не прошла». Каждый статус — это текст, который читает клиент; напишите их сами, никто не сделает это лучше вас.
7. Мелочи, которые становятся задачами. Подъезд, этаж, домофон и комментарий курьеру. Приборы и сдача с наличных. Промокод и что показать, если он не сработал. Кнопка «повторить заказ» — самая любимая у постоянных клиентов и почти всегда забытая.

Что поправить под себя за десять минут

Порядок, который работает: сначала меню, потом деньги, потом всё остальное. Тексты правятся прямо на макете — двойное нажатие по надписи.

1. Свои блюда. Три в ленте «Популярное» и три в списке «Всё меню» — этого достаточно: студии нужен образец строки, а не весь ваш прайс.
2. Цены и вес. Подписи вида «480 ₽ · 320 г» — под свой формат: где-то важен вес, где-то размер, где-то состав в одну строку.
3. Условия доставки в корзине. «Доставка — бесплатно» замените на своё правило одной фразой: «199 ₽, бесплатно от 1 500 ₽». Это самая читаемая строка во всём приложении.
4. Категории. Если у вас пицца, суши и напитки, добавьте над лентой строку категорий — блок с кнопками уже есть на экране «Блюдо», скопируйте его.
5. Размер → ваш модификатор. Три кнопки «25 / 35 / 45 см» превращаются в «Острота», «Тесто», «Соус» — по образцу.
6. Тексты статуса. «Готовим» и объяснение под ним — напишите так, как сказали бы клиенту по телефону. Это и есть тон вашего приложения.
7. Пункты нижнего меню. Три — хороший минимум. «Акции» добавляйте, только если за ними будет отдельный раздел, а не одна картинка.

Дальше — то, что займёт ещё час, но окупится на оценке: скопируйте «Меню» и сделайте из копии состояние «кухня закрыта», а из «Корзины» — пустую корзину. Два экрана состояний снимают у студии больше вопросов, чем страница текста.

Чего в каркасе нет намеренно

Шаблон держит одну мысль — путь заказа. Всё, что к ней прилипает, вынесено в отдельные наборы, чтобы каркас не превратился в двадцать экранов, которые никто не дочитает.

• Вход, регистрация, код из СМС. Отдельный набор «Онбординг и вход» — шесть экранов, которые рисуются заново почти в каждом заказе.
• Оплата. В наборе «Оплата и состояния»: способы оплаты, успех, отказ и три состояния экрана — пусто, загрузка, нет сети. В реальном приложении этот кусок встаёт между «Оформить заказ» и статусом.
• Карта с курьером. Ближайший каркас — «Карта и заказ машины»: карта, поиск машины, поездка. Карта в приложении — всегда отдельный разговор о сроке и о том, чья она.
• Приложение курьера и экран кухни — другие приложения с другой логикой. Ближайший каркас — «Приложение полевого сотрудника».

И то, чего Maketa не делает вообще, — чтобы не было недопонимания: не пишет код, не собирает приложение для App Store и RuStore, не подключает оплату и не принимает заказы. Это конструктор макетов; работающее приложение по нему делает разработчик.

Чек-лист: что приложить к макету, отдавая студии

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

• Сколько точек и одно ли меню на все; кто и как его меняет.
• Зона доставки, стоимость и минимальная сумма — правилом, а не «как обычно».
• Есть ли самовывоз и предзаказ на другое время.
• Модификаторы: какие бывают, влияют ли на цену.
• Оплата: карта, СБП, наличные курьеру — и кто принимает платежи (нужны касса и 54-ФЗ).
• Куда падает заказ: экран на кухне, письмо, ваша учётная система, iiko или r_keeper — назовите систему.
• Нужны ли приложение курьера и рабочее место кухни в первой версии.
• Платформы: iOS, Android, обе; нужна ли веб-версия для заказа по ссылке.

Развёрнутая структура задания — в разборе «Что должно быть в ТЗ на приложение»; там же готовый шаблон файлом.

Частые вопросы

Это готовое приложение для доставки еды? Его можно запустить в своём кафе?

Нет. Это макет экранов: по нему можно ходить как по приложению, но заказы он не принимает и на кухню ничего не передаёт. Чтобы приложение заработало, его пишет разработчик — макет для этого и нужен.

Сколько это стоит?

Редактор, шаблоны, ссылка для просмотра и замечания по ссылке — бесплатно и без ограничения по числу макетов. Платный в Maketa только ИИ-помощник (разбор скриншота, генерация экрана, советы в чате) — он не обязателен, всё на этой странице делается руками.

Можно ли на этом каркасе показать доставку не еды?

Да, и это частый случай: цветы, продукты, аптека, зоотовары. Путь тот же — витрина, карточка, корзина, статус. Меняются только слова и, возможно, набор модификаторов. Для магазина без доставки ближе каркас «Интернет-магазин» с каталогом и фильтрами.

Нужна ли регистрация?

Чтобы открыть каркас и править — нет. Аккаунт понадобится, только когда захотите сохранить макет за собой и поделиться ссылкой, чтобы он не потерялся вместе с вкладкой.

Чем это отличается от Figma?

Figma — инструмент дизайнера, и она предполагает, что дизайнер у вас есть. Здесь экраны собираются из готовых блоков без навыков, а результат — не картинка, а ссылка, по которой заказчик и разработчик листают экраны и пишут замечания прямо поверх. Подробное сравнение — на странице Maketa или Figma.