# FoodAI — Дизайн экранов (Wireframe-описания) ## Навигация Приложение использует нижнюю панель навигации (Bottom Tab Bar) с 5 вкладками: ``` ┌─────────────────────────────────────┐ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` Иконки вкладок: домик, корзина, календарь, книга, аватар. Активная вкладка подсвечивается акцентным цветом. Над иконкой «Продукты» может отображаться badge с количеством продуктов с истекающим сроком. --- ## 0. Онбординг (первый запуск) Пошаговый процесс при первом запуске. Знакомит пользователя с приложением и собирает данные для персонализации. ### Шаг 1 — Приветствие (2–3 карточки, свайп) ``` ┌─────────────────────────────────────┐ │ │ │ [Иллюстрация] │ │ │ │ Управляйте питанием │ │ с помощью камеры │ │ │ │ Сфотографируйте чек или │ │ продукты — мы распознаем │ │ их и подберём рецепты │ │ │ │ ● ○ ○ │ │ │ │ ┌───────────────────────────────┐ │ │ │ Далее │ │ │ └───────────────────────────────┘ │ │ │ │ Пропустить │ │ │ └─────────────────────────────────────┘ ``` ### Шаг 2 — Параметры тела ``` ┌─────────────────────────────────────┐ │ Расскажите о себе │ ├─────────────────────────────────────┤ │ │ │ Пол │ │ [Мужской] [Женский] │ │ │ │ Возраст │ │ ┌──────────────────────────┐ │ │ │ 28 │ │ │ └──────────────────────────┘ │ │ │ │ Рост (см) │ │ ┌──────────────────────────┐ │ │ │ 178 │ │ │ └──────────────────────────┘ │ │ │ │ Вес (кг) │ │ ┌──────────────────────────┐ │ │ │ 75 │ │ │ └──────────────────────────┘ │ │ │ │ Уровень активности │ │ [Низкая] [Средняя●] [Высокая] │ │ │ │ ┌───────────────────────────────┐ │ │ │ Далее │ │ │ └───────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Шаг 3 — Цель и расчёт ``` ┌─────────────────────────────────────┐ │ Ваша цель │ ├─────────────────────────────────────┤ │ │ │ ┌───────────────────────────────┐ │ │ │ ○ Похудение │ │ │ │ Дефицит калорий │ │ │ ├───────────────────────────────┤ │ │ │ ● Поддержание веса │ │ │ │ Сбалансированное питание │ │ │ ├───────────────────────────────┤ │ │ │ ○ Набор массы │ │ │ │ Профицит калорий │ │ │ └───────────────────────────────┘ │ │ │ │ Ваша рекомендуемая норма: │ │ ┌───────────────────────────────┐ │ │ │ 2 100 ккал/день │ │ │ │ Б: 120г · Ж: 70г · У: 260г │ │ │ └───────────────────────────────┘ │ │ │ │ ┌───────────────────────────────┐ │ │ │ Далее │ │ │ └───────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Шаг 4 — Ограничения и предпочтения кухонь ``` ┌─────────────────────────────────────┐ │ Ограничения в питании │ ├─────────────────────────────────────┤ │ │ │ Есть ли аллергии или ограничения? │ │ (можно выбрать несколько) │ │ │ │ [ ] Вегетарианство │ │ [ ] Без глютена │ │ [ ] Без лактозы │ │ [✓] Без орехов │ │ [ ] Халяль │ │ [ ] Кошерное │ │ │ │ Какая кухня вам нравится? │ │ (выберите 1–3) │ │ │ │ [Русская✓] [Азиатская✓] [Европ.] │ │ [Средизем.] [Американ.] [Кавказ.] │ │ │ │ ┌───────────────────────────────┐ │ │ │ Далее │ │ │ └───────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Шаг 5 — Добавить первые продукты ``` ┌─────────────────────────────────────┐ │ Добавьте ваши продукты │ ├─────────────────────────────────────┤ │ │ │ [Иллюстрация: │ │ холодильник] │ │ │ │ Сфотографируйте содержимое │ │ холодильника или чек из магазина, │ │ и мы подберём рецепты │ │ │ │ ┌───────────────────────────────┐ │ │ │ 📷 Сфотографировать продукты │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 🧾 Сканировать чек │ │ │ └───────────────────────────────┘ │ │ │ │ Пропустить │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Навигация:** «Далее» и «Пропустить» на каждом шаге. Индикатор прогресса (точки или прогресс-бар). - **Шаг 2:** все поля необязательны, но при пропуске рекомендуемая калорийность не рассчитывается (предлагается средняя 2000 ккал). - **Шаг 3:** норма пересчитывается при смене цели (формула Миффлина-Сан Жеора + коэффициент активности + поправка на цель). - **Шаг 4:** предпочтения кухонь влияют на будущие рекомендации, ограничения — на фильтрацию рецептов. - **Шаг 5:** при выборе фото/чека — переход к экрану камеры, затем к экрану корректировки распознанных продуктов, затем — к переходному экрану «Составить меню?». При «Пропустить» — переход на главный экран. - **Повторный запуск:** онбординг показывается один раз. Все данные можно изменить позже в Профиле. --- ## 1. Главный экран (Главная) Точка входа в приложение. Сводка текущего дня, рекомендации и быстрый доступ к ключевым действиям. ``` ┌─────────────────────────────────────┐ │ FoodAI [аватар] │ │ Привет, Алексей! │ ├─────────────────────────────────────┤ │ │ │ ┌───────────────────────────────┐ │ │ │ Калории сегодня │ │ │ │ │ │ │ │ ◯◯◯◯◯◯◯◯◯ │ │ │ │ (круговой прогресс-бар) │ │ │ │ │ │ │ │ 1 240 / 2 100 ккал │ │ │ │ │ │ │ │ Б: 68/120г Ж: 45/70г У: 150/260г │ │ └───────────────────────────────┘ │ │ │ │ Быстрые действия │ │ ┌─────────┐ ┌─────────┐ ┌───────┐ │ │ │ [📷] │ │ [📷] │ │ [🔍] │ │ │ │ Скан. │ │ Распозн.│ │ Найти │ │ │ │ чека │ │ еду │ │рецепт │ │ │ └─────────┘ └─────────┘ └───────┘ │ │ │ │ Рекомендуем приготовить │ │ ┌──────────┐ ┌──────────┐ → │ │ │ [фото] │ │ [фото] │ │ │ │ Стир-фрай│ │ Омлет с │ │ │ │ с курицей│ │ овощами │ │ │ │ 350 ккал │ │ 240 ккал │ │ │ │ Курица │ │ Яйца │ │ │ │ истекает ⚠│ │ истекают⚠│ │ │ └──────────┘ └──────────┘ │ │ │ │ Сегодня в меню │ │ ┌───────────────────────────────┐ │ │ │ Завтрак 320 ккал │ │ │ │ Овсянка с ягодами [✓] │ │ │ ├───────────────────────────────┤ │ │ │ Обед 540 ккал │ │ │ │ Куриная грудка с рисом [✓] │ │ │ ├───────────────────────────────┤ │ │ │ Ужин — ккал │ │ │ │ Не запланирован │ │ │ │ [+ Подобрать блюдо] │ │ │ ├───────────────────────────────┤ │ │ │ Перекус 180 ккал │ │ │ │ Греческий йогурт [✓] │ │ │ └───────────────────────────────┘ │ │ │ │ Готовили недавно │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │[фото] │ │[фото] │ │[фото] │ │ │ │Карбон. │ │Цезарь │ │Борщ │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │ Скоро испортятся │ │ ┌───────────────────────────────┐ │ │ │ ⚠ Молоко — осталось 2 дня │ │ │ │ ⚠ Куриное филе — завтра │ │ │ └───────────────────────────────┘ │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Пустое состояние главного экрана (новый пользователь) ``` ┌─────────────────────────────────────┐ │ FoodAI [аватар] │ │ Привет! │ ├─────────────────────────────────────┤ │ │ │ [Иллюстрация] │ │ │ │ Начните с добавления продуктов, │ │ чтобы мы подобрали рецепты │ │ и составили меню для вас │ │ │ │ ┌───────────────────────────────┐ │ │ │ 📷 Сфотографировать продукты │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 🧾 Сканировать чек │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 🔍 Посмотреть рецепты │ │ │ └───────────────────────────────┘ │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** название приложения слева, аватар пользователя справа (тап — переход в профиль). Приветствие с именем пользователя. - **Карточка калорий:** круговой прогресс-бар, показывающий отношение потреблённых калорий к цели. Под ним — три мини-прогресс-бара для БЖУ. Тап по карточке — переход в дневник питания. Если калории превышены — прогресс-бар красный. - **Быстрые действия:** три кнопки в ряд, оформленные как квадратные карточки с иконкой и подписью. «Сканировать чек» — открывает камеру в режиме сканирования чека. «Распознать еду» — открывает камеру в режиме распознавания блюда/продуктов. «Найти рецепт» — переход в каталог рецептов. - **Рекомендуем приготовить:** горизонтальная карусель из 3–5 карточек рецептов. Алгоритм приоритизации: (1) рецепты из продуктов с истекающим сроком, (2) рецепты, полностью покрываемые запасами, (3) рецепты по предпочтениям кухни пользователя. На карточке — пометка, какой продукт нужно использовать. Тап — переход в карточку рецепта. Секция не показывается, если нет продуктов в запасах. - **Сегодня в меню:** список запланированных приёмов пищи. Каждый пункт — название приёма, название блюда, калорийность. Чекбокс справа — отметка «съедено» (данные добавляются в дневник). Если приём пищи не запланирован — кнопка «+ Подобрать блюдо» (открывает каталог рецептов с предустановленным фильтром по типу приёма и остатку калорий на день). Тап по блюду — переход в карточку рецепта. - **Готовили недавно:** горизонтальный ряд из 3–5 последних приготовленных рецептов для быстрого повтора. Тап — переход в карточку рецепта. Секция не показывается, если нет истории. - **Скоро испортятся:** предупреждения о продуктах с истекающим сроком. Показываются только при наличии таких продуктов. Тап — переход на экран «Мои продукты» с фильтром по сроку. - **Пустое состояние:** для нового пользователя без продуктов и меню — мотивирующий экран с основными действиями для старта. --- ## 2. Мои продукты Учёт всех имеющихся продуктов. Добавление через фото, чек или вручную. ``` ┌─────────────────────────────────────┐ │ Мои продукты [+ ▾] [···] │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ 🔍 Поиск продуктов... │ │ │ └─────────────────────────────────┘ │ │ │ │ [Все] [Истекает срок] [Молочные] [Мясо] [Овощи]..│ │ │ │ Молочные продукты │ │ ┌───────────────────────────────┐ │ │ │ 🥛 Молоко 2.5% │ │ │ │ 1 л · осталось 2 дня ⚠ │ │ │ ├───────────────────────────────┤ │ │ │ 🧀 Сыр Гауда │ │ │ │ 300 г · осталось 10 дней │ │ │ ├───────────────────────────────┤ │ │ │ 🫙 Йогурт греческий │ │ │ │ 2 шт · осталось 5 дней │ │ │ └───────────────────────────────┘ │ │ │ │ Мясо и птица │ │ ┌───────────────────────────────┐ │ │ │ 🍗 Куриное филе │ │ │ │ 500 г · осталось 1 день ⚠ │ │ │ ├───────────────────────────────┤ │ │ │ 🥩 Говядина │ │ │ │ 400 г · осталось 13 дней │ │ │ └───────────────────────────────┘ │ │ │ │ Овощи и фрукты │ │ ┌───────────────────────────────┐ │ │ │ 🥕 Морковь │ │ │ │ 5 шт · без срока │ │ │ ├───────────────────────────────┤ │ │ │ 🍅 Помидоры │ │ │ │ 4 шт · осталось 4 дня │ │ │ └───────────────────────────────┘ │ │ │ │ ... │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Выпадающее меню добавления [+ ▾] ``` ┌───────────────────────┐ │ 📷 Сфотографировать │ │ продукты │ ├───────────────────────┤ │ 🧾 Сканировать чек │ ├───────────────────────┤ │ ✏️ Добавить вручную │ └───────────────────────┘ ``` ### Контекстное меню экрана [···] ``` ┌─────────────────────────────┐ │ 🔄 Очистить и перезаполнить │ ├─────────────────────────────┤ │ ⚙️ Сроки хранения по │ │ умолчанию │ ├─────────────────────────────┤ │ 🗑 Удалить все просроченные │ └─────────────────────────────┘ ``` ### Экран редактирования продукта (тап по элементу) ``` ┌─────────────────────────────────────┐ │ [✕] Редактирование продукта │ ├─────────────────────────────────────┤ │ │ │ Название │ │ ┌───────────────────────────────┐ │ │ │ Молоко 2.5% │ │ │ └───────────────────────────────┘ │ │ │ │ Количество Единица │ │ ┌─────────────────┐ ┌─────────┐ │ │ │ 1 │ │ л ▾ │ │ │ └─────────────────┘ └─────────┘ │ │ │ │ Категория │ │ ┌───────────────────────────────┐ │ │ │ Молочные продукты ▾ │ │ │ └───────────────────────────────┘ │ │ │ │ Срок хранения (дней после покупки) │ │ ┌───────────────────────────────┐ │ │ │ 5 │ │ │ └───────────────────────────────┘ │ │ Добавлено: 13.02.2026 │ │ Годен до: 18.02.2026 (2 дня) │ │ │ │ ┌───────────────────────────────┐ │ │ │ Сохранить │ │ │ └───────────────────────────────┘ │ │ │ │ [Использовано частично] │ │ [Удалить продукт] │ │ │ └─────────────────────────────────────┘ ``` ### Модальное окно «Использовано частично» ``` ┌───────────────────────────────────┐ │ Сколько осталось? │ ├───────────────────────────────────┤ │ │ │ Было: 1 л │ │ │ │ Осталось: │ │ ┌─────────────────┐ ┌───────┐ │ │ │ 0.5 │ │ л ▾ │ │ │ └─────────────────┘ └───────┘ │ │ │ │ ┌───────────────────────────┐ │ │ │ Сохранить │ │ │ └───────────────────────────┘ │ └───────────────────────────────────┘ ``` ### Подтверждение «Очистить и перезаполнить» ``` ┌───────────────────────────────────┐ │ Очистить все продукты? │ ├───────────────────────────────────┤ │ │ │ Все текущие продукты будут │ │ удалены. После этого вы сможете │ │ добавить продукты заново. │ │ │ │ ┌───────────────────────────────┐ │ │ │ Очистить и сфотографировать │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ Очистить и сканировать чек │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ Просто очистить │ │ │ └───────────────────────────────┘ │ │ │ │ Отмена │ │ │ └───────────────────────────────────┘ ``` ### Пустое состояние ``` ┌─────────────────────────────────────┐ │ Мои продукты [+ ▾] │ ├─────────────────────────────────────┤ │ │ │ │ │ [Иллюстрация: │ │ пустой холодильник] │ │ │ │ У вас пока нет продуктов │ │ │ │ Сфотографируйте холодильник │ │ или сканируйте чек, чтобы │ │ добавить первые продукты │ │ │ │ ┌───────────────────────────────┐ │ │ │ 📷 Сфотографировать продукты │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 🧾 Сканировать чек │ │ │ └───────────────────────────────┘ │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** заголовок «Мои продукты», кнопка «+» с выпадающим меню добавления, кнопка «···» с контекстным меню экрана. - **Строка поиска:** фильтрация списка продуктов по названию. - **Горизонтальный ряд фильтров:** скроллируемые chip-кнопки — «Все», «Истекает срок», категории продуктов. Chip «Истекает срок» выделен предупреждающим цветом при наличии таких продуктов. - **Список продуктов:** сгруппирован по категориям с заголовками-разделителями. Каждый элемент — иконка/эмодзи категории, название, количество с единицей измерения, оставшийся срок хранения («осталось X дней»). Значок ⚠ — срок истекает в ближайшие 3 дня. Для продуктов без срока (крупы, макароны) — «без срока». - **Модель срока годности:** используется «период хранения после покупки» вместо фиксированной даты. При добавлении продукта автоматически подставляется срок по умолчанию для категории (молоко — 5 дней, курица — 3 дня, и т.д.). Пользователь может скорректировать период для конкретного продукта. Дата окончания вычисляется: дата добавления + период хранения. Значения по умолчанию настраиваются в профиле. - **Свайп по элементу влево:** открывает кнопки «Изменить» и «Удалить». - **Тап по элементу:** открывает экран редактирования продукта с полями: название, количество, единица измерения (г/кг/мл/л/шт/пучок/упаковка), категория, период хранения. Отображается дата добавления и вычисленная дата окончания. Кнопка «Использовано частично» — открывает модальное окно для указания оставшегося количества. Кнопка «Удалить продукт» — удаляет с подтверждением. - **Очистить и перезаполнить:** удаляет все продукты и сразу предлагает способ добавления заново (фото, чек или ручной ввод). Требует подтверждения. После фото/чека — стандартный флоу распознавания с корректировкой. - **Сроки хранения по умолчанию:** переход к экрану настроек сроков (списком по категориям: молочные — 5 дней, мясо — 3 дня, и т.д.). Можно изменить значения. - **Удалить все просроченные:** удаляет все продукты с истёкшим сроком (с подтверждением). - **Дубликаты:** при добавлении продукта, который уже есть в списке, система показывает диалог: «Молоко 2.5% уже есть (1 л, осталось 2 дня). Объединить количество или добавить отдельно?» --- ## 3. Экран камеры (Сканирование чека) Открывается при выборе «Сканировать чек». ``` ┌─────────────────────────────────────┐ │ [✕] Сканирование чека │ ├─────────────────────────────────────┤ │ │ │ │ │ ┌───────────────────┐ │ │ │ │ │ │ │ │ │ │ │ Область камеры │ │ │ │ │ │ │ │ Наведите камеру │ │ │ │ на чек │ │ │ │ │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ │ │ ┌──────────┐ │ │ │ ◉ │ │ │ │ Снять │ │ │ └──────────┘ │ │ │ │ [🖼 Из галереи] │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** кнопка закрытия «✕» слева, заголовок по центру. - **Видоискатель:** занимает основную часть экрана. Рамка-подсказка для позиционирования чека. - **Кнопка съёмки:** крупная круглая кнопка внизу по центру. - **Кнопка «Из галереи»:** выбор уже сделанного фото из галереи телефона. - После съёмки — экран загрузки с анимацией AI-распознавания, затем переход к экрану результатов. - **Ошибка распознавания:** если фото слишком размытое или чек не читаем — сообщение «Не удалось распознать чек. Попробуйте сфотографировать ещё раз или добавьте продукты вручную» с кнопками «Переснять» и «Ввести вручную». --- ## 4. Результат распознавания чека / фото продуктов Общий экран для результатов распознавания чека и фото продуктов. Каждый продукт можно детально скорректировать. ``` ┌─────────────────────────────────────┐ │ [←] Распознанные продукты │ ├─────────────────────────────────────┤ │ │ │ Найдено 6 продуктов │ │ │ │ ┌───────────────────────────────┐ │ │ │ [✓] Молоко 2.5% │ │ │ │ 1 [л ▾] · Молочные │ │ │ │ Хранение: 5 дн. [✎] │ │ │ ├───────────────────────────────┤ │ │ │ [✓] Куриное филе │ │ │ │ 500 [г ▾] · Мясо │ │ │ │ Хранение: 3 дн. [✎] │ │ │ ├───────────────────────────────┤ │ │ │ [✓] Помидоры │ │ │ │ 4 [шт ▾] · Овощи │ │ │ │ Хранение: 7 дн. [✎] │ │ │ ├───────────────────────────────┤ │ │ │ [✓] Рис Басмати │ │ │ │ 800 [г ▾] · Крупы │ │ │ │ Хранение: без срока [✎] │ │ │ ├───────────────────────────────┤ │ │ │ [✓] Сыр Гауда │ │ │ │ 300 [г ▾] · Молочные │ │ │ │ Хранение: 14 дн. [✎] │ │ │ ├───────────────────────────────┤ │ │ │ [?] Неизвестный товар → 49₽ │ │ │ │ Нажмите, чтобы указать │ │ │ └───────────────────────────────┘ │ │ │ │ ⚠ Молоко 2.5% уже есть в запасах │ │ (1 л, осталось 2 дня) │ │ [Объединить] [Добавить отдельно] │ │ │ │ + Добавить продукт вручную │ │ + Сделать ещё фото │ │ │ │ ┌───────────────────────────────┐ │ │ │ Добавить в мои продукты │ │ │ └───────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Инлайн-редактирование продукта (тап по [✎] или по строке) ``` ┌───────────────────────────────────┐ │ Редактировать │ ├───────────────────────────────────┤ │ │ │ Название │ │ ┌───────────────────────────────┐ │ │ │ Молоко 2.5% │ │ │ └───────────────────────────────┘ │ │ │ │ Количество Единица │ │ ┌────────────────┐ ┌───────────┐ │ │ │ 1 │ │ л ▾ │ │ │ └────────────────┘ └───────────┘ │ │ │ │ Категория │ │ ┌───────────────────────────────┐ │ │ │ Молочные продукты ▾ │ │ │ └───────────────────────────────┘ │ │ │ │ Хранение (дней после покупки) │ │ ┌───────────────────────────────┐ │ │ │ 5 │ │ │ └───────────────────────────────┘ │ │ │ │ ┌───────────────────────────────┐ │ │ │ Сохранить │ │ │ └───────────────────────────────┘ │ │ │ │ [Удалить из списка] │ │ │ └───────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** кнопка «Назад», заголовок. - **Счётчик:** «Найдено N продуктов» — сколько позиций распознано. - **Список продуктов:** каждый элемент содержит: - Чекбокс — для включения/исключения из добавления (по умолчанию вкл). - Название — редактируемое поле (тап → inline edit или bottom sheet). - Количество и единица измерения — рядом, оба редактируемые. Единица — выпадающий список (г, кг, мл, л, шт, пучок, упаковка). Система подставляет наиболее вероятную единицу по категории. - Категория — автоматически определённая, можно сменить. - Период хранения — автоподставлен по категории, можно скорректировать. Для крупных категорий (крупы, макароны, специи) — «без срока». - Кнопка «✎» — открывает bottom sheet с полной формой редактирования. - **Нераспознанные товары:** отмечены значком «?». Тап — открывает форму ручного ввода. Если из чека — рядом отображается цена для подсказки. - **Предупреждение о дубликатах:** если распознанный продукт уже есть в запасах — жёлтое предупреждение с вариантами: «Объединить» (прибавить количество к существующему), «Добавить отдельно» (новая позиция). - **«+ Добавить продукт вручную»:** добавляет пустую строку для ручного ввода. - **«+ Сделать ещё фото»:** открывает камеру для дополнительного снимка (несколько полок, второй чек). Результаты добавляются в текущий список. - **CTA-кнопка «Добавить в мои продукты»:** добавляет все отмеченные продукты в запасы. После подтверждения — переход к переходному экрану «Составить меню?» (а не возврат на «Мои продукты»). --- ## 5. Переходный экран «Составить меню?» Появляется после добавления продуктов (чек/фото). Плавный переход к составлению меню. ``` ┌─────────────────────────────────────┐ │ │ │ ✅ 6 продуктов добавлено │ │ │ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ [Иллюстрация: повар │ │ │ │ с тарелками] │ │ │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ Составить меню из ваших продуктов? │ │ │ │ На какой период? │ │ [На день] [На неделю●] │ │ │ │ Какая кухня? │ │ [Любая●] [Русская] [Азиатская] │ │ [Европейская] [Средиземноморская] │ │ │ │ Сложность │ │ [Попроще●] [Средняя] [Посложнее] │ │ │ │ ┌───────────────────────────────┐ │ │ │ Составить меню │ │ │ └───────────────────────────────┘ │ │ │ │ Пропустить │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Подтверждение:** сообщение об успешном добавлении продуктов. - **Период:** выбор chip-кнопкой. «На день» — меню на сегодня. «На неделю» — на ближайшие 7 дней. - **Кухня:** chip-кнопки с множественным выбором. «Любая» — выбрано по умолчанию. Остальные варианты отсортированы по предпочтениям из профиля. - **Сложность:** три уровня. Влияет на время приготовления и количество шагов в рецептах. - **«Составить меню»:** генерирует меню с учётом параметров и переходит на экран Меню с результатом (см. п.8, автогенерация). - **«Пропустить»:** переход на экран «Мои продукты» (стандартное поведение). - Экран НЕ показывается при добавлении продукта вручную — только при массовом добавлении через фото/чек. --- ## 6. Экран камеры (Распознавание еды) Открывается при выборе «Распознать еду» — для определения блюда и калорийности по фото. ``` ┌─────────────────────────────────────┐ │ [✕] Распознать еду │ ├─────────────────────────────────────┤ │ │ │ ┌───────────────────┐ │ │ │ │ │ │ │ │ │ │ │ Область камеры │ │ │ │ │ │ │ │ Сфотографируйте │ │ │ │ блюдо или │ │ │ │ продукты │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ Режим: │ │ [ Готовое блюдо ] [ Продукты ] │ │ │ │ ┌──────────┐ │ │ │ ◉ │ │ │ │ Снять │ │ │ └──────────┘ │ │ │ │ [🖼 Из галереи] │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - Аналогично экрану сканирования чека, но с переключателем режима. - **Режим «Готовое блюдо»:** после съёмки приложение определяет блюдо и показывает его калорийность (переход к экрану результата распознавания блюда). - **Режим «Продукты»:** после съёмки приложение определяет продукты на фото и предлагает добавить их в запасы (переход к экрану корректировки, аналогичному п.4). Поддерживает мультифото (кнопка «+ Сделать ещё фото» на экране результатов). - **Ошибка распознавания:** «Не удалось определить блюдо/продукты. Попробуйте ещё раз или введите вручную» с кнопками «Переснять» и «Ввести вручную». --- ## 7. Результат распознавания блюда Отображается после фотографирования готового блюда. ``` ┌─────────────────────────────────────┐ │ [←] Результат │ ├─────────────────────────────────────┤ │ │ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ [Фото сделанное юзером] │ │ │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ Паста Карбонара │ │ ~450 г │ │ │ │ ┌───────────────────────────────┐ │ │ │ 580 ккал │ │ │ │ │ │ │ │ Б: 24 г Ж: 28 г У: 56 г │ │ │ └───────────────────────────────┘ │ │ │ │ Это верно? │ │ ┌────────────┐ ┌──────────────┐ │ │ │ Да, верно │ │ Нет, это... │ │ │ └────────────┘ └──────────────┘ │ │ │ │ Размер порции │ │ ○──────────────●───────────○ │ │ 0.5x [1x] 1.5x 2x │ │ 290 ккал 580 870 1160 │ │ │ │ Приём пищи: │ │ [Завтр.] [Обед●] [Ужин] [Перекус] │ │ │ │ ┌───────────────────────────────┐ │ │ │ Записать в дневник питания │ │ │ └───────────────────────────────┘ │ │ │ │ Похожие рецепты: │ │ ┌─────────┐ ┌─────────┐ │ │ │ [фото] │ │ [фото] │ → │ │ │ Карбон. │ │ Карбон. │ │ │ │ классич.│ │ с бекон.│ │ │ │ 520ккал │ │ 610ккал │ │ │ └─────────┘ └─────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Фото:** сделанный пользователем снимок блюда. - **Название и вес:** определённое приложением название блюда и приблизительный вес порции. - **Карточка калорийности:** калории и БЖУ крупным шрифтом. - **Подтверждение:** «Да, верно» — подтверждает распознавание. «Нет, это...» — открывает поиск по названию блюда для ручной корректировки. После выбора — калорийность пересчитывается. - **Размер порции:** слайдер от 0.5x до 2x с шагом 0.25. Калорийность и БЖУ пересчитываются при перемещении. Показывается числовое значение калорий для выбранного множителя. - **Приём пищи:** chip-кнопки. Предвыбран ближайший по времени приём (до 10:00 — завтрак, 10:00–14:00 — обед, 14:00–17:00 — перекус, после 17:00 — ужин). - **CTA-кнопка «Записать в дневник питания»:** добавляет блюдо в дневник выбранного дня и приёма пищи. - **Похожие рецепты:** горизонтальная карусель карточек рецептов. Тап — переход в карточку рецепта. Полезно, если пользователь захочет приготовить это блюдо сам. --- ## 8. Меню (Планирование) Календарное представление запланированных приёмов пищи. ``` ┌─────────────────────────────────────┐ │ Меню [⚡▾] [Список пок.]│ ├─────────────────────────────────────┤ │ │ │ ◁ 15 – 21 февраля 2026 ▷ │ │ │ │ Пн Вт Ср Чт Пт Сб Вс │ │ 16 17 18 19 20 21 22 │ │ ● ● ● ○ ○ ○ ○ │ │ │ │ ─── Понедельник, 16 февраля ─────── │ │ │ │ Итого: 1 840 / 2 100 ккал │ │ ████████████████████░░░░ 88% │ │ │ │ Завтрак 320 ккал │ │ ┌───────────────────────────────┐ │ │ │ [фото] Овсянка с ягодами │ │ │ │ и мёдом [···] │ │ │ └───────────────────────────────┘ │ │ │ │ Обед 640 ккал │ │ ┌───────────────────────────────┐ │ │ │ [фото] Куриная грудка │ │ │ │ с рисом и овощами │ │ │ │ [···] │ │ │ └───────────────────────────────┘ │ │ │ │ Ужин │ │ ┌───────────────────────────────┐ │ │ │ + Подобрать блюдо │ │ │ │ Осталось 880 ккал на день │ │ │ │ Рекомендуем: ужин из курицы │ │ │ │ и овощей (срок курицы ⚠) │ │ │ └───────────────────────────────┘ │ │ │ │ Перекус 300 ккал │ │ ┌───────────────────────────────┐ │ │ │ [фото] Греческий йогурт │ │ │ │ с гранолой [···] │ │ │ └───────────────────────────────┘ │ │ │ │ [+ Добавить приём пищи] │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Кнопка автогенерации [⚡▾] ``` ┌───────────────────────────────┐ │ ⚡ Сгенерировать меню │ ├───────────────────────────────┤ │ 📋 Из шаблона │ ├───────────────────────────────┤ │ 🕐 Из истории меню │ ├───────────────────────────────┤ │ 💾 Сохранить как шаблон │ └───────────────────────────────┘ ``` ### Экран автогенерации меню ``` ┌─────────────────────────────────────┐ │ [←] Генерация меню │ ├─────────────────────────────────────┤ │ │ │ Период │ │ [Сегодня] [Неделя●] [2 недели] │ │ │ │ Кухня (можно несколько) │ │ [Любая] [Русская✓] [Азиатская✓] │ │ [Европ.] [Средизем.] [Кавказская] │ │ │ │ Сложность │ │ [Попроще] [Средняя●] [Посложнее] │ │ │ │ Учитывать мои продукты │ │ [Вкл ●] [Выкл] │ │ │ │ Калорий в день │ │ ┌───────────────────────────────┐ │ │ │ 2 100 (рекомендуемая) │ │ │ └───────────────────────────────┘ │ │ │ │ ┌───────────────────────────────┐ │ │ │ Сгенерировать │ │ │ └───────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Контекстное меню блюда [···] ``` ┌───────────────────────┐ │ 📖 Открыть рецепт │ ├───────────────────────┤ │ 🔄 Заменить блюдо │ ├───────────────────────┤ │ 📅 Перенести на др. │ │ день │ ├───────────────────────┤ │ 🗑 Убрать из меню │ └───────────────────────┘ ``` ### Пустое состояние ``` ┌───────────────────────────────────┐ │ │ │ [Иллюстрация: календарь] │ │ │ │ Меню пока не составлено │ │ │ │ ┌─────────────────────────────┐ │ │ │ ⚡ Сгенерировать на неделю │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ + Добавить блюда вручную │ │ │ └─────────────────────────────┘ │ │ │ └───────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** заголовок «Меню», кнопка «⚡» — автогенерация и шаблоны, кнопка «Список покупок» — переход к автоматически сформированному списку. - **Навигация по неделям:** стрелки влево/вправо для переключения между неделями. - **Дни недели:** горизонтальный ряд с датами. Точка под датой — есть запланированные блюда. Тап по дню — прокрутка к содержимому этого дня. - **Суммарная калорийность дня:** прогресс-бар с числами. Если превышена цель — красный. - **Приёмы пищи:** разделены заголовками (Завтрак, Обед, Ужин, Перекус). Каждое блюдо — карточка с миниатюрой фото и названием. Кнопка «···» — контекстное меню. - **Пустые слоты:** вместо пустой строки — подсказка с рекомендацией: «+ Подобрать блюдо · Осталось N ккал на день» и контекстная рекомендация (если есть продукты с истекающим сроком). Тап — переход в каталог рецептов с фильтрами: тип приёма пищи + остаток калорий + продукты с истекающим сроком. - **Long press по блюду:** активирует drag-and-drop для перетаскивания между приёмами пищи и днями. - **«+ Добавить приём пищи»:** добавляет дополнительный слот (второй перекус и т.д.). - **«Заменить блюдо»:** открывает каталог рецептов с предустановленными фильтрами (тот же тип приёма пищи, похожая калорийность). - **Автогенерация:** экран с параметрами. После генерации — отображается сгенерированное меню, каждое блюдо можно заменить или сгенерировать заново (кнопка «Перегенерировать»). - **Шаблоны:** сохранение текущего меню как шаблона с названием. Загрузка шаблона — перезаписывает меню на выбранный период. - **История:** список прошлых меню по неделям. Тап — подгружает меню на текущую неделю. --- ## 9. AI-рекомендации рецептов Персонализированные рецепты, сгенерированные Gemini на основе продуктов пользователя, цели и предпочтений. Статического каталога нет — каждый запрос даёт новую подборку. ``` ┌─────────────────────────────────────┐ │ Рецепты [🔄] │ ├─────────────────────────────────────┤ │ │ │ Для вас сегодня │ │ На основе ваших продуктов │ │ │ │ ┌─────────────────────────────┐ │ │ │ [фото блюда] │ │ │ │ │ │ │ │ Куриная грудка с овощами │ │ │ │ ≈ 420 ккал · 35 мин · Лёгко│ │ │ │ Б: 48г Ж: 12г У: 18г │ │ │ │ [♡] │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ [фото блюда] │ │ │ │ │ │ │ │ Рисовый суп с яйцом │ │ │ │ ≈ 310 ккал · 20 мин · Лёгко│ │ │ │ Б: 18г Ж: 8г У: 42г │ │ │ │ [♡] │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ [фото блюда] │ │ │ │ │ │ │ │ Морковный суп-пюре │ │ │ │ ≈ 180 ккал · 25 мин · Лёгко│ │ │ │ Б: 4г Ж: 7г У: 26г │ │ │ │ [♡] │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ + ещё 2 рецепта │ │ │ └─────────────────────────────┘ │ │ │ │ Сохранённые рецепты │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │[фото] │ │[фото] │ │[фото] │ │ │ │Карбон. │ │Борщ │ │Цезарь │ │ │ │♡ saved │ │♡ saved │ │♡ saved │ │ │ └────────┘ └────────┘ └────────┘ │ │ [Все сохранённые →] │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Скелетон при загрузке (2–4 сек) ``` ┌─────────────────────────────────────┐ │ Рецепты │ ├─────────────────────────────────────┤ │ │ │ Подбираем рецепты... │ │ │ │ ┌─────────────────────────────┐ │ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ ░░░░░░░░ ░░░░░ ░░░░░░░░ │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ ░░░░░░░░ ░░░░░ ░░░░░░░░ │ │ │ └─────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Кнопка [🔄] «Обновить»:** принудительная перегенерация рекомендаций. Gemini + Pexels вызываются заново. Skeleton показывается на время генерации (2–4 сек). - **Карточка рецепта:** фото (Pexels), название, приблизительное КБЖУ (помечено «≈»), время приготовления, сложность. Тап → карточка рецепта. - **Кнопка [♡]:** сохранить рецепт. Рецепт записывается в `saved_recipes`. Иконка заполняется, haptic feedback. - **Секция «Сохранённые рецепты»:** горизонтальный ряд последних сохранённых. Кнопка «Все сохранённые →» переходит на экран всех сохранённых. Не показывается, если нет сохранённых. - **Автоматическая генерация:** при открытии вкладки (если с последней генерации прошло > 30 мин или изменились продукты). - **КБЖУ «≈»:** пиктограмма «~» перед числами; тап → tooltip «Приблизительно, рассчитано AI». --- ## 10. Карточка рецепта Детальная информация о рецепте. ``` ┌─────────────────────────────────────┐ │ [←] [♡] [⤴] │ ├─────────────────────────────────────┤ │ │ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ [Фото блюда] │ │ │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ Паста Карбонара │ │ ★★★★☆ 4.6 (128 отзывов) │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ 30 мин │ │Средняя │ │ Европ. │ │ │ │ Время │ │Сложн. │ │ Кухня │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │ ┌───────────────────────────────┐ │ │ │ 580 ккал на порцию │ │ │ │ Б: 24г · Ж: 28г · У: 56г │ │ │ └───────────────────────────────┘ │ │ │ │ Порций: [-] 2 [+] │ │ │ │ Ингредиенты │ │ ┌───────────────────────────────┐ │ │ │ ✅ Спагетти 200 г │ │ │ │ ✅ Бекон/панчетта 150 г │ │ │ │ ✅ Яйца 3 шт │ │ │ │ ✅ Пармезан 80 г │ │ │ │ 🔄 Пекорино 40 г │ │ │ │ → Замена: Пармезан (есть) │ │ │ │ ✅ Чёрный перец по вкусу │ │ │ └───────────────────────────────┘ │ │ Всё есть (с учётом замены) │ │ │ │ Описание │ │ Классическое итальянское блюдо │ │ из Рима. Настоящая карбонара │ │ готовится без сливок — только │ │ яйца, сыр и бекон. │ │ │ │ ┌───────────────────────────────┐ │ │ │ 🍳 Начать готовить │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 📅 Добавить в меню │ │ │ └───────────────────────────────┘ │ │ │ │ Отзывы (128) [Написать] │ │ ┌───────────────────────────────┐ │ │ │ Мария ★★★★★ │ │ │ │ Отличный рецепт! Готовила │ │ │ │ уже 3 раза, всегда получается.│ │ │ │ 2 дня назад │ │ │ ├───────────────────────────────┤ │ │ │ Дмитрий ★★★★☆ │ │ │ │ Вкусно, но сложно с яичной │ │ │ │ смесью — первый раз свернул. │ │ │ │ 1 неделю назад │ │ │ └───────────────────────────────┘ │ │ [Показать все отзывы →] │ │ │ └─────────────────────────────────────┘ ``` ### Модальное окно «Добавить в меню» ``` ┌───────────────────────────────────┐ │ Добавить в меню │ ├───────────────────────────────────┤ │ │ │ День: │ │ [Пн 16] [Вт 17] [Ср 18] ... │ │ │ │ Приём пищи: │ │ ○ Завтрак │ │ ○ Обед │ │ ● Ужин │ │ ○ Перекус │ │ │ │ ┌───────────────────────────────┐ │ │ │ Добавить │ │ │ └───────────────────────────────┘ │ └───────────────────────────────────┘ ``` ### Модальное окно «Написать отзыв» ``` ┌───────────────────────────────────┐ │ Ваш отзыв [Отправить] │ ├───────────────────────────────────┤ │ │ │ Оценка: │ │ ★ ★ ★ ★ ☆ │ │ │ │ ┌───────────────────────────────┐ │ │ │ Напишите ваш отзыв... │ │ │ │ │ │ │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ [📷 Добавить фото] │ │ │ └───────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** кнопка «Назад», кнопка «В избранное» (♡ / ♥), кнопка «Поделиться» (⤴). - **Фото блюда:** крупное фото в верхней части, может быть каруселью из нескольких фото. - **Рейтинг:** звёзды, средняя оценка, количество отзывов. Тап — скролл к секции отзывов. - **Метаинформация:** три chip-блока — время приготовления, сложность, тип кухни. - **Калорийность:** карточка с калориями и БЖУ на одну порцию. - **Регулятор порций:** «−» и «+» изменяют количество порций. Вес ингредиентов и калорийность пересчитываются пропорционально. - **Ингредиенты с заменами:** список с отметками наличия: ✅ — есть в запасах, ❌ — нет в запасах, 🔄 — нет, но есть замена. Для ингредиентов с заменой — под основным продуктом строка «→ Замена: [продукт] (есть/нет)». Список возможных замен формируется системой (пекорино → пармезан, сливки → сметана и т.д.). Итог: «Всё есть», «Всё есть (с учётом замены)», «Не хватает: N продуктов» + кнопка «Добавить в список покупок». - **Описание:** текстовое описание рецепта. - **CTA-кнопка «Начать готовить»:** основная, акцентного цвета. Переход в режим пошаговой готовки. - **Кнопка «Добавить в меню»:** открывает модальное окно выбора дня и приёма пищи. - **Отзывы:** последние 2–3 отзыва. Каждый — имя, звёзды, текст, дата. Кнопка «Написать» — открывает модальное окно. «Показать все отзывы» — переход к полному списку. --- ## 11. Режим готовки Пошаговый интерфейс для приготовления блюда с таймерами. ``` ┌─────────────────────────────────────┐ │ [✕] Паста Карбонара Шаг 3 из 7 │ ├─────────────────────────────────────┤ │ │ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ [Фото / иллюстрация │ │ │ │ текущего шага] │ │ │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ Отварите спагетти │ │ │ │ Вскипятите большую кастрюлю воды, │ │ посолите. Опустите спагетти и │ │ варите согласно инструкции на │ │ упаковке (обычно 8–10 минут) │ │ до состояния аль денте. │ │ │ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ ⏱ 10:00 │ │ │ │ │ │ │ │ [ Запустить таймер ] │ │ │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ │ │ │ │ ┌──────────┐ ┌─────────────┐ │ │ │ ◁ Назад │ │ Далее ▷ │ │ │ └──────────┘ └─────────────┘ │ │ │ │ ● ● ● ○ ○ ○ ○ (индикатор шагов) │ │ │ │ ┌───────────────────────────────────┐│ │ │ Активные таймеры: ││ │ │ ⏱ Бульон: 34:12 [⏸] ││ │ │ ⏱ Спагетти: 08:45 [⏸] ││ │ └───────────────────────────────────┘│ └─────────────────────────────────────┘ ``` ### Состояние таймера (запущен) ``` ┌───────────────────────────────┐ │ │ │ ⏱ 07:23 │ │ (обратный отсчёт) │ │ │ │ [ ⏸ Пауза ] [ ■ Стоп ] │ │ │ └───────────────────────────────┘ ``` ### Уведомление о завершении таймера ``` ┌─────────────────────────────────────┐ │ │ │ ┌───────────────────────────────┐ │ │ │ ✅ Спагетти готовы! │ │ │ │ │ │ │ │ Таймер «10 мин» завершён. │ │ │ │ │ │ │ │ [ Понятно ] │ │ │ └───────────────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` ### Экран завершения готовки (последний шаг → «Готово!») ``` ┌─────────────────────────────────────┐ │ Приятного аппетита! │ ├─────────────────────────────────────┤ │ │ │ [Иллюстрация] │ │ │ │ Паста Карбонара готова! │ │ 580 ккал · 2 порции │ │ │ │ ┌───────────────────────────────┐ │ │ │ 📝 Записать в дневник │ │ │ └───────────────────────────────┘ │ │ │ │ Сколько порций вы съели? │ │ [-] 1 [+] │ │ │ │ ┌───────────────────────────────┐ │ │ │ ★ Оценить рецепт │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 📷 Поделиться фото │ │ │ └───────────────────────────────┘ │ │ │ │ [Закрыть] │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** кнопка закрытия «✕» (с подтверждением «Прервать готовку?»), название рецепта, текущий шаг из общего числа. - **Фото/иллюстрация:** визуальная подсказка для текущего шага. Занимает верхнюю треть экрана. - **Заголовок шага:** крупный жирный текст — краткое действие. - **Описание шага:** подробная инструкция. Крупный шрифт для удобства чтения на кухне. - **Блок таймера:** отображается только на шагах, где требуется ожидание. Показывает предустановленное время. Кнопка «Запустить таймер» — запускает обратный отсчёт. После запуска — кнопки «Пауза» и «Стоп». Таймер продолжает работать при переходе к другим шагам. - **Навигация между шагами:** кнопки «Назад» и «Далее». Свайп влево/вправо для переключения. Точечный индикатор прогресса. - **Панель активных таймеров:** фиксирована внизу экрана. Показывает все запущенные таймеры с оставшимся временем. Каждый таймер можно поставить на паузу. При завершении — push-уведомление + звуковой сигнал + модальное окно поверх текущего шага. - **Экран не гаснет:** активен режим keep-screen-on. - **Экран завершения:** после последнего шага кнопка «Далее» заменяется на «Готово!». По нажатию — экран завершения с действиями: - «Записать в дневник» — добавляет блюдо в дневник. Можно выбрать количество съеденных порций. - «Оценить рецепт» — открывает модалку отзыва. - «Поделиться фото» — открывает камеру для фото результата, затем — системное меню «Поделиться». - Ингредиенты автоматически списываются из запасов (если продукты были в списке «Мои продукты»). --- ## 12. Дневник питания Учёт съеденного за день с подсчётом калорий и БЖУ. ``` ┌─────────────────────────────────────┐ │ Дневник питания │ ├─────────────────────────────────────┤ │ │ │ ◁ 15 февраля 2026 ▷ │ │ │ │ ┌───────────────────────────────┐ │ │ │ 1 420 / 2 100 │ │ │ │ ◯◯◯◯◯◯◯◯◯◯◯◯◯◯ │ │ │ │ (круговой прогресс) │ │ │ │ │ │ │ │ Б: 82/120г Ж: 51/70г У: 178/260г │ │ │ ████████░░ ███████░░ █████████░ │ │ └───────────────────────────────┘ │ │ │ │ Завтрак 320 ккал │ │ ┌───────────────────────────────┐ │ │ │ Овсянка с ягодами │ │ │ │ 1 порц. · 320 ккал │ │ │ │ Б:12 Ж:8 У:52 [···] │ │ │ └───────────────────────────────┘ │ │ │ │ Обед 640 ккал │ │ ┌───────────────────────────────┐ │ │ │ Куриная грудка с рисом │ │ │ │ 1 порц. · 640 ккал │ │ │ │ Б:45 Ж:18 У:72 [···] │ │ │ └───────────────────────────────┘ │ │ │ │ Перекус 280 ккал │ │ ┌───────────────────────────────┐ │ │ │ Йогурт греческий │ │ │ │ 1 порц. · 180 ккал │ │ │ │ Б:15 Ж:10 У:12 [···] │ │ │ ├───────────────────────────────┤ │ │ │ Банан │ │ │ │ 100 ккал │ │ │ │ Б:1 Ж:0 У:26 [···] │ │ │ └───────────────────────────────┘ │ │ │ │ Ужин │ │ ┌───────────────────────────────┐ │ │ │ + Добавить приём пищи │ │ │ └───────────────────────────────┘ │ │ │ │ Вода: 💧💧💧💧💧○○○ 5/8 стаканов │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Модальное окно «Добавить приём пищи» ``` ┌───────────────────────────────────┐ │ Добавить │ ├───────────────────────────────────┤ │ │ │ ┌───────────────────────────────┐ │ │ │ 📷 Сфотографировать блюдо │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 📅 Из сегодняшнего меню │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 📖 Из каталога рецептов │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ ⭐ Из избранного │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ 🔍 Быстрый поиск продукта │ │ │ └───────────────────────────────┘ │ │ ┌───────────────────────────────┐ │ │ │ ✏️ Ввести вручную │ │ │ └───────────────────────────────┘ │ │ │ └───────────────────────────────────┘ ``` ### Модальное окно «Указать порцию» (при добавлении из рецепта) ``` ┌───────────────────────────────────┐ │ Сколько вы съели? │ ├───────────────────────────────────┤ │ │ │ Паста Карбонара │ │ 1 порция = 580 ккал │ │ │ │ Количество порций: │ │ ○──────────●──────────○ │ │ 0.5 [1] 1.5 2 │ │ │ │ = 580 ккал │ │ Б: 24г · Ж: 28г · У: 56г │ │ │ │ ┌───────────────────────────────┐ │ │ │ Добавить │ │ │ └───────────────────────────────┘ │ └───────────────────────────────────┘ ``` ### Элементы и поведение - **Навигация по дням:** стрелки влево/вправо, тап по дате — открывает календарь. - **Карточка итогов:** круговой прогресс калорий, три линейных прогресс-бара для БЖУ. Если калории превышены — красный прогресс-бар. - **Приёмы пищи:** разделены по типу (Завтрак, Обед, Ужин, Перекус). Каждая запись — название блюда, количество порций, калории, БЖУ. Кнопка «···» — редактировать порцию, удалить запись (с отменой через toast). Пустой приём — кнопка «+ Добавить». - **«+ Добавить приём пищи»:** открывает модальное окно с вариантами добавления: - «Сфотографировать блюдо» — камера → распознавание → результат. - «Из сегодняшнего меню» — список блюд из меню на сегодня. - «Из каталога рецептов» — переход в каталог. - «Из избранного» — список избранных рецептов. - **«Быстрый поиск продукта»** — строка поиска по базе отдельных продуктов (банан, хлеб, кофе с молоком и т.д.) для быстрого добавления без рецепта. - «Ввести вручную» — форма: название, калории, БЖУ (необязательно). - **Указание порции:** при добавлении блюда из рецепта — модальное окно со слайдером от 0.5 до 3 порций. Калории и БЖУ пересчитываются. - **Трекер воды:** ряд из 8 значков стаканов. Тап по пустому — отмечает выпитый стакан. Тап по заполненному — снимает отметку. Количество стаканов (норма) настраивается в профиле. - Дневник доступен из главного экрана через тап по карточке калорий. --- ## 13. Статистика Графики и аналитика питания за период. ``` ┌─────────────────────────────────────┐ │ Статистика │ ├─────────────────────────────────────┤ │ │ │ [Неделя] [Месяц] [3 месяца] │ │ │ │ Калории │ │ ┌───────────────────────────────┐ │ │ │ 2500 ┤ │ │ │ │ ┤ ╭─╮ │ │ │ │ 2100 ┤─ ─ ─ ┤ ├─╮─ ─ (цель) │ │ │ │ ┤ ╭─╮ │ │ │ ╭─╮ │ │ │ │ 1500 ┤╭─┤ ├─┤ │ ├─┤ ├─╮ │ │ │ │ ┤│ │ │ │ │ │ │ │ │ │ │ │ │ 0 ┤┴─┴─┴─┴─┴─┴─┴─┴─┘ │ │ │ │ Пн Вт Ср Чт Пт Сб Вс │ │ │ └───────────────────────────────┘ │ │ │ │ Среднее: 1 920 ккал/день │ │ Цель: 2 100 ккал/день │ │ │ │ БЖУ (среднее за период) │ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ ██████████████████████ │ │ │ │ Б: 28% Ж: 32% У: 40% │ │ │ │ │ │ │ │ Рекомендация: │ │ │ │ Б: 30% Ж: 25% У: 45% │ │ │ └───────────────────────────────┘ │ │ │ │ Тренды │ │ ┌───────────────────────────────┐ │ │ │ ↓ Калории: -5% к прошл. нед. │ │ │ │ ↑ Белок: +12% к прошл. нед. │ │ │ │ → Жиры: без изменений │ │ │ └───────────────────────────────┘ │ │ │ │ Самые частые блюда │ │ ┌───────────────────────────────┐ │ │ │ 1. Овсянка с ягодами — 5 раз │ │ │ │ 2. Куриная грудка — 4 раза │ │ │ │ 3. Греческий йогурт — 4 раза │ │ │ └───────────────────────────────┘ │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Переключатель периода:** chip-кнопки — «Неделя», «Месяц», «3 месяца». - **График калорий:** столбчатая диаграмма. Пунктирная линия — цель. Столбцы выше цели выделены предупреждающим цветом. Тап по столбцу — показывает точное значение за день. - **Средние значения:** числовые показатели — среднее потребление и цель. - **Диаграмма БЖУ:** горизонтальный stacked bar. Показывает фактическое соотношение. Под ним — рекомендуемое соотношение для сравнения. - **Тренды:** карточка с краткой аналитикой — изменения к предыдущему периоду. Стрелки вверх/вниз/вправо с цветовой кодировкой (зелёный — улучшение, красный — ухудшение, серый — без изменений). - **Самые частые блюда:** рейтинг блюд за период. Тап — переход в карточку рецепта. - Экран доступен из главного экрана через тап по прогресс-бару или из профиля. - **Пустое состояние:** «Пока недостаточно данных для статистики. Записывайте приёмы пищи, и мы покажем аналитику» (показывается, если записей менее 3 дней). --- ## 14. Список покупок Автоматически формируемый и вручную редактируемый список покупок. ``` ┌─────────────────────────────────────┐ │ [←] Список покупок [···] │ ├─────────────────────────────────────┤ │ │ │ На основе меню: 16–22 февраля │ │ │ │ Молочные продукты │ │ ┌───────────────────────────────┐ │ │ │ [ ] Пекорино 40 г │ │ │ │ [ ] Сливки 20% 200 мл │ │ │ │ [✓] Молоко 2.5% 1 л │ │ │ └───────────────────────────────┘ │ │ │ │ Мясо и рыба │ │ ┌───────────────────────────────┐ │ │ │ [ ] Лосось 400 г │ │ │ │ [ ] Бекон/панчетта 300 г │ │ │ └───────────────────────────────┘ │ │ │ │ Овощи и фрукты │ │ ┌───────────────────────────────┐ │ │ │ [ ] Авокадо 2 шт │ │ │ │ [ ] Лайм 3 шт │ │ │ │ [ ] Кинза 1 пуч. │ │ │ │ [✓] Лук репчатый 3 шт │ │ │ └───────────────────────────────┘ │ │ │ │ Добавлено вручную │ │ ┌───────────────────────────────┐ │ │ │ [ ] Хлеб │ │ │ │ [ ] Вода 5л │ │ │ └───────────────────────────────┘ │ │ │ │ [+ Добавить продукт] │ │ │ │ Итого: 12 позиций (4 куплено) │ │ │ └─────────────────────────────────────┘ ``` ### Контекстное меню [···] ``` ┌───────────────────────────────────┐ │ 🗑 Очистить купленные │ ├───────────────────────────────────┤ │ 📤 Поделиться списком │ ├───────────────────────────────────┤ │ 🔄 Пересчитать из меню │ └───────────────────────────────────┘ ``` ### Элементы и поведение - **Шапка:** кнопка «Назад», заголовок, кнопка «···» с контекстным меню. - **Подзаголовок:** указание, на основе какого периода меню сформирован список. - **Группировка:** продукты сгруппированы по категориям. Отдельная секция «Добавлено вручную» — для позиций, добавленных пользователем. - **Чекбоксы:** тап — отмечает продукт как купленный. Купленные элементы перечёркиваются и сдвигаются вниз группы. - **Свайп влево:** удалить позицию. - **Тап по элементу:** редактирование (название, количество). - **«+ Добавить продукт»:** ручное добавление позиции. - **Итоговая строка:** общее количество позиций и сколько уже куплено. - **«Очистить купленные»:** удаляет все отмеченные позиции. - **«Поделиться списком»:** формирует текстовый список и открывает системное меню «Поделиться» (мессенджеры, заметки и т.д.). - **«Пересчитать из меню»:** заново формирует список на основе текущего меню и запасов (с подтверждением, если есть ручные позиции). --- ## 15. Профиль Персональные настройки, цели и параметры пользователя. ``` ┌─────────────────────────────────────┐ │ Профиль │ ├─────────────────────────────────────┤ │ │ │ ┌──────────┐ │ │ │ [Аватар] │ │ │ └──────────┘ │ │ Алексей Иванов │ │ │ │ Мои параметры │ │ ┌───────────────────────────────┐ │ │ │ Рост 178 см │ │ │ │ Вес 75 кг │ │ │ │ Возраст 28 лет │ │ │ │ Пол Мужской │ │ │ │ Активность Средняя │ │ │ └───────────────────────────────┘ │ │ │ │ Цель │ │ ┌───────────────────────────────┐ │ │ │ ● Поддержание веса │ │ │ │ ○ Похудение │ │ │ │ ○ Набор массы │ │ │ └───────────────────────────────┘ │ │ │ │ Рекомендуемая норма: 2 100 ккал │ │ Б: 120г · Ж: 70г · У: 260г │ │ │ │ Ограничения и предпочтения │ │ ┌───────────────────────────────┐ │ │ │ [ ] Вегетарианство │ │ │ │ [ ] Без глютена │ │ │ │ [ ] Без лактозы │ │ │ │ [✓] Без орехов (аллергия) │ │ │ │ [ ] Халяль │ │ │ │ [ ] Кошерное │ │ │ └───────────────────────────────┘ │ │ │ │ Любимые кухни │ │ ┌───────────────────────────────┐ │ │ │ [Русская✓] [Азиатская✓] │ │ │ │ [Европ.] [Средизем.] [Кавк.] │ │ │ └───────────────────────────────┘ │ │ │ │ ┌───────────────────────────────┐ │ │ │ 📊 Статистика │ │ │ ├───────────────────────────────┤ │ │ │ 📖 Избранные рецепты │ │ │ ├───────────────────────────────┤ │ │ │ 📝 Мои отзывы │ │ │ ├───────────────────────────────┤ │ │ │ ⏱ Сроки хранения продуктов │ │ │ ├───────────────────────────────┤ │ │ │ ⚙️ Настройки приложения │ │ │ ├───────────────────────────────┤ │ │ │ ❓ Помощь │ │ │ └───────────────────────────────┘ │ │ │ │ Версия 1.0.0 │ │ │ ├─────────────────────────────────────┤ │ [Главная] [Продукты] [Меню] [Рецепты] [Профиль] │ └─────────────────────────────────────┘ ``` ### Экран «Сроки хранения продуктов» ``` ┌─────────────────────────────────────┐ │ [←] Сроки хранения по умолчанию │ ├─────────────────────────────────────┤ │ │ │ Укажите, сколько дней после │ │ покупки хранятся продукты │ │ каждой категории │ │ │ │ ┌───────────────────────────────┐ │ │ │ Молочные продукты [5] дн. │ │ │ │ Мясо и птица [3] дн. │ │ │ │ Рыба и морепродукты [2] дн. │ │ │ │ Овощи и фрукты [7] дн. │ │ │ │ Хлеб и выпечка [3] дн. │ │ │ │ Яйца [14] дн. │ │ │ │ Крупы и макароны [без срока] │ │ │ Консервы [без срока] │ │ │ Специи [без срока] │ │ │ Замороженные [30] дн. │ │ │ └───────────────────────────────┘ │ │ │ │ Значения будут подставляться │ │ при добавлении новых продуктов. │ │ Для каждого продукта срок можно │ │ скорректировать индивидуально. │ │ │ └─────────────────────────────────────┘ ``` ### Элементы и поведение - **Аватар и имя:** фото пользователя (тап — смена фото), имя под ним. - **Мои параметры:** карточка с физическими данными. Тап по любому полю — редактирование. Используются для расчёта нормы калорий. - **Цель:** radio-кнопки. Смена цели пересчитывает рекомендуемую калорийность. - **Рекомендуемая норма:** автоматически рассчитанные калории и БЖУ на основе параметров и цели. Формула Миффлина-Сан Жеора. - **Ограничения и предпочтения:** чекбоксы. Влияют на фильтрацию рецептов — рецепты с запрещёнными ингредиентами помечаются предупреждением или скрываются. - **Любимые кухни:** chip-кнопки. Влияют на порядок и приоритет рекомендаций. - **Сроки хранения продуктов:** экран с настройками периодов хранения по категориям. Каждая категория — редактируемое числовое поле. Значения используются как умолчания при добавлении новых продуктов. - **Список ссылок:** переходы на экраны статистики, избранных рецептов, отзывов, настроек, помощи. - **Настройки приложения (отдельный экран):** уведомления (типы и время), тема (светлая/тёмная/системная), единицы измерения, норма воды (стаканов в день), язык, экспорт данных, удаление аккаунта. --- ## Общие паттерны UI ### Навигация - **Bottom Tab Bar** — 5 вкладок, всегда видна (кроме режима готовки, камеры и онбординга). - **Stack navigation** внутри каждой вкладки — с кнопкой «Назад» в шапке. - **Модальные окна (bottom sheets)** — для фильтров, выбора, подтверждений. ### Жесты - **Свайп влево** по элементам списков — действия (редактировать, удалить). - **Long press** — drag-and-drop в меню. - **Pull to refresh** — обновление данных на списках. ### Обратная связь - **Toast/snackbar** — при успешных действиях (продукт добавлен, блюдо записано в дневник). Для необратимых действий (удалить запись из дневника) — toast с кнопкой «Отменить» (5 секунд). - **Скелетоны (shimmer)** — при загрузке контента. - **Анимация AI-распознавания** — при обработке фото. Текст: «Распознаём...» с анимированным индикатором. Среднее время — 3–5 сек. ### Пустые состояния Каждый экран со списком данных имеет пустое состояние: - **Иллюстрация** — лёгкий рисунок по теме экрана. - **Текст** — что здесь будет отображаться и как начать. - **CTA-кнопка** — основное действие для начала работы. ### Состояния ошибок - **Нет сети:** баннер вверху экрана «Нет подключения к интернету». Кэшированные данные (продукты, меню, дневник) доступны оффлайн. Действия, требующие сети (распознавание фото, загрузка рецептов), показывают модалку с предложением повторить позже. - **Ошибка распознавания:** «Не удалось распознать. Попробуйте ещё раз» + «Ввести вручную» как fallback. - **Ошибка сервера:** «Что-то пошло не так» + «Повторить». ### Цветовая система - **Акцентный цвет** — для CTA-кнопок и активных элементов. - **Зелёный** — в пределах нормы, продукт в наличии, ингредиент есть. - **Жёлтый/оранжевый** — предупреждение (скоро истечёт срок, калории приближаются к лимиту, есть замена ингредиента). - **Красный** — превышение нормы, истёкший срок, отсутствующий ингредиент без замены. ### Типографика - **Заголовки** — жирные, крупные. - **Тело текста** — стандартный размер, с достаточным межстрочным интервалом. - **В режиме готовки** — увеличенный шрифт для комфортного чтения на расстоянии. ### Уведомления - **Срок годности:** «Молоко 2.5% — осталось 1 день. Используйте в рецепте?» (с ссылкой на рекомендации). Утром за 1 день и за 3 дня до истечения. - **Таймер готовки:** звуковой сигнал + push «Таймер завершён: [название шага]». - **Напоминание о приёме пищи:** «Время обеда! В меню: Куриная грудка с рисом» (если настроено). - **Трекер воды:** вечернее напоминание «Вы выпили 5 из 8 стаканов воды сегодня» (если настроено).