Мобільність і спорт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
- Полотно
- Локальний
- Стан
- Повністю вимикається
- Анімація
Головна · історія · маршрути · цілі · профіль
Без окремої десктопної версії
Відкривається з вашими даними, є мережа чи ні
У кожної є нерухомий стан
Телефонний застосунок, який поводиться як телефонний у вкладці браузера: відкривається на числі, заради якого прийшли, а все інше — за один дотик і в одному сховищі.




Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.
Є продукт, який давно час зробити?Розкажіть про нього.
Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.