Мобильность и спорт2026EN
MOTION
Пять экранов на одном холсте 390 × 844 — где первая секунда отвечает «как проходит день», а пятьдесят тренировок лежат на одно касание глубже.
- Мобильное приложение
- Продуктовый интерфейс
- Графики
- Дизайн-система

- Отрасль
- Мобильность и спорт
- Длительность
- 6 недель
- Команда
- 1 дизайнер · 1 инженер
- Платформы
- Мобильное приложение · Поиск маршрутов · Цели · Веб-демо в рамке устройства
01
Задача
Приложения для активности ломаются в одну из двух сторон. Либо число, ради которого его открыли, погребено под дашбордом, либо оно там единственное и с ним ничего нельзя сделать. MOTION должен был ответить «как проходит день» в первую секунду и при этом держать за этим ответом пятьдесят тренировок, тридцать мест и девять целей.
И это приложение для телефона, которое живёт в браузере. Всё нарисовано на одном холсте 390 × 844, и убежать в десктопный макет некуда: каждый список, шторка и график должны работать на ширине ладони — включая те места, где обычно проблему решает более широкая колонка.
- Холст
- 390 × 844, без десктопной версии
- Контент
- 50 тренировок · 30 мест · 9 целей
- Главная сложность
- Сначала один взгляд, глубина — под ним
02
Решение
Главный экран отвечает и на этом останавливается: дистанция за сегодня, какую долю дневной цели она закрывает и изменение к прошлой неделе. Четыре плитки, недельный график и три последние тренировки читаются вторыми — это решено намеренно.
Глубина лежит на одно касание в четырёх остальных экранах, а детали открываются шторкой, а не новой страницей: маршрут или тренировка не стоят вам места в списке, который вы читали.
Все цифры приходят из одного локального хранилища. Недельная сумма на главной, 538 км в истории и прогресс недельной цели — это одни и те же тренировки, посчитанные один раз. Именно это не даёт приложению спорить с самим собой в офлайне.
- Главный экран
- Одно число, потом всё остальное
- Глубина
- Шторки, а не новые страницы
- Цифры
- Одно хранилище, один подсчёт
03
Архитектура
- L0Оболочка Vite + React390 × 844
- L1Пять экрановГлавная → профильШторкиУправляются жестом
- L2Состояние приложенияОдно хранилище
- L3Производные суммыНедели, серии, цели
- L4Журнал тренировок50 записейМеста и маршруты30 записейМодель целей9 активных
- L5Память устройстваОфлайн-первыйСистемные настройкиТема · reduced motion
Связи (11)
- Оболочка Vite + React → Пять экранов
- Оболочка Vite + React → Шторки
- Пять экранов → Состояние приложения
- Шторки → Состояние приложения
- Состояние приложения → Производные суммы
- Производные суммы → Журнал тренировок
- Производные суммы → Модель целей
- Состояние приложения → Места и маршруты
- Журнал тренировок → Память устройства · сохранение
- Модель целей → Память устройства
- Оболочка Vite + React → Системные настройки · тема и анимация
04
UX
Навигация — панель из пяти пунктов в зоне большого пальца, и приложение открывается на том экране, ради которого в него возвращаются. Фильтры в истории, поиске и целях — это чипы, а не меню: меню стоит двух касаний, чтобы показать то, что чип говорит сразу.
Недельный график — не только картинка. У каждого столбца есть своя фраза: «Четверг: 12,4 километра за 3 поездки», — так что та же информация существует и для скринридера, и для того, кто не может на глаз оценить высоту столбца.
- Досягаемость
- Пять пунктов на высоте пальца
- Фильтры
- Чипы, а не меню
- Графики
- Каждый столбец читается фразой
05
UI
Почти монохром с единственным кислотно-лаймовым акцентом, который отмечает прогресс и главное действие и больше ничего — кольцо цели, активную вкладку, кнопку «Start ride». Когда акцент значит «это ваш прогресс», он не может заодно значить украшение.
Типографика — это числа: дистанция набрана крупно, единица мелко рядом, так что 12.4 KM читается одним замером, а не числом и словом. Светлая и тёмная темы спроектированы парой, а не выведены одна из другой.
06
Разработка
Состояние живёт локально. Тренировки, сохранённые места и прогресс целей лежат в одном хранилище, которое сохраняется на устройство, поэтому приложение открывается уже с вашими данными, а не ждёт ответа сети.
Графики — Recharts на токенах приложения, а не на дефолтах библиотеки, а линии маршрутов рисует Framer Motion: карточка маршрута анимирует собственный путь вместо того, чтобы грузить тайл карты.
У каждой анимации есть неподвижное состояние. При prefers-reduced-motion шторки, кольцо прогресса и нарисованные маршруты мгновенно оказываются в конечном положении, а не выключаются в пустоту.
07
Что он умеет
Активность за сегодня
Дистанция против дневной цели с кольцом прогресса и изменением к прошлой неделе.
Недельный график
Семь дней дистанции и поездок, каждый столбец продублирован фразой.
История тренировок
Пятьдесят записей по дням с фильтрами по поездкам, бегу и прогулкам; дистанция и время в каждой строке.
Поиск маршрутов
Тридцать маршрутов и мест с фильтрами по кофе, паркам, ресторанам и видам, у каждого рейтинг, дистанция, время и район.
Анимированные маршруты
Карточки маршрутов рисуют собственную линию, а не подгружают тайл карты.
Цели
Девять активных целей на день, неделю и месяц — с остатком и сроком по каждой.
Шторки
Детали открываются перетаскиваемой шторкой, поэтому место в списке за ней не теряется.
Профиль
Серия, суммы за месяц и за всё время, единицы, тема, уведомления и сброс локальных данных.
08
Интеграции и стек
Интеграции
- Память устройства
- Системная тема
- Настройка reduced motion
Фронтенд
- React
- TypeScript
- Vite
- Tailwind CSS
Анимация и графики
- Framer Motion
- Recharts
Состояние
- Локальное хранилище
- Сохраняемый журнал тренировок
09
Чем это закончилось
- 5
- Экранов
- 390 × 844
- Холст
- Локальное
- Состояние
- Полностью отключаемая
- Анимация
Главная · история · маршруты · цели · профиль
Без отдельной десктопной версии
Открывается с вашими данными, есть сеть или нет
У каждой есть неподвижное состояние
Телефонное приложение, которое ведёт себя как телефонное во вкладке браузера: открывается на числе, ради которого пришли, а всё остальное — в одном касании и одном хранилище.




Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.
Есть продукт, который давно пора сделать?Расскажите о нём.
Опишите, что должно измениться в вашем бизнесе. Мы разберёмся, что для этого действительно нужно — даже если нужно меньше, чем кажется.