Создаем мобильные приложения (iOS и Android) под ключ
- Город
- Казань
- Опыт работы
- 11 лет
- На сайте с
- 2017 года
- Юридический статус
- Самозанятый
В приложениях доставки пользователь часто устаёт ещё до оформления. Мешают перегруженные главные экраны, мелкие фотографии, непрозрачная итоговая сумма с внезапными сборами и неясность, где сейчас заказ. Человек голоден и хочет решить быстро, поэтому каждое лишнее касание или непонятный экран мешает сделать заказ.
Цели проекта:
— показать весь путь пользователя: знакомство с приложением, поиск, выбор ресторана и блюда, корзина, оформление, отслеживание доставки, избранное и профиль;
— сделать выбор еды визуальным: главную роль должны играть фотографии блюд, а не текст;
— добиться прозрачности в корзине: количество, промокод, доставка и итог видны на одном экране;
— снять тревогу ожидания: статус заказа и местоположение курьера должны быть понятны с первого взгляда;
— собрать небольшую, но цельную дизайн-систему, чтобы интерфейс было легко развивать и передавать в разработку.
Ориентиры по стилю: светлый, «тёплый» интерфейс с сочным оранжевым акцентом, крупными скруглениями и большим количеством воздуха. Акцент на фото еды и понятной иерархии, без визуального шума.
Сценарии и структура.
Сначала я выделил основной сценарий «найти — выбрать — оплатить — дождаться» и вспомогательные: повторный заказ через избранное, управление адресами и оплатой в профиле, поиск по категориям в каталоге. По ним получилось 8 ключевых экранов: онбординг, главная, ресторан, корзина, отслеживание, избранное, профиль и каталог.
Главная как витрина.
Наверху адрес доставки, чтобы человек сразу видел, куда приедет заказ. Ниже поиск с отдельной кнопкой фильтров, баннер «Блюдо дня», плитки категорий и популярные рестораны поблизости. Карточки ресторанов показывают сразу всё нужное для решения: фото, кухню, рейтинг с количеством отзывов и время доставки.
Экран ресторана.
Большая обложка задаёт настроение, под ней ключевые параметры: рейтинг, время, условия бесплатной доставки. Меню разбито на вкладки «Меню / Отзывы / Инфо». Каждое блюдо идёт строкой с фото, составом и ценой, а круглая оранжевая кнопка «+» добавляет его в корзину в одно касание.
Прозрачная корзина.
Количество меняется прямо в списке, промокод выделен заметной плашкой. Подытог, доставка, сервисный сбор и итог стоят на одном экране без скрытых шагов. Главная кнопка «Оформить заказ» закреплена внизу и всегда под рукой.
Отслеживание.
Карта с маршрутом и меткой «Прибудет через 12 мин», под ней пошаговый статус: подтверждён → готовится → в пути → доставлен. Внизу карточка курьера с кнопками звонка и чата, чтобы связаться с ним в одно касание.
Визуальный язык.
Основной акцент — оранжевый #F26B1D, он ассоциируется с едой и аппетитом. Зелёный #2E9E4F отвечает за всё «положительное»: успешные статусы, промокоды, бонусы. Для категорий сделаны пастельные плитки разных цветов, чтобы их было легко различать. Шрифт — Manrope: он геометричный, дружелюбный и хорошо поддерживает кириллицу. Выбрал его вместо Poppins именно из-за кириллицы.
Дизайн-система в Figma.
Цвета вынесены в переменные (токены), повторяющиеся элементы сделаны компонентами со свойствами: карточка ресторана, строка меню, позиция корзины, элемент избранного, плитка категории, строка списка, основная кнопка, таб-бар с вариантами активной вкладки, набор иконок. Всё собрано на авто-лейауте, поэтому экраны легко менять, а разработчику — переносить в код.
Что удалось:
— основной сценарий заказа укладывается в три экрана: ресторан → корзина → отслеживание;
— фотографии блюд стали главным элементом интерфейса, поэтому выбор происходит быстрее и «на глаз»;
— в корзине итоговая сумма и все сборы видны сразу, без сюрпризов на последнем шаге;
— экран отслеживания отвечает на главный вопрос «где мой заказ?» без лишних действий;
— вместе с экранами собрана дизайн-система: токены цветов, типографика и библиотека компонентов с вариантами.
