Перейти до вмісту
Silka

Мобільність і спорт2026EN

MOTION

П'ять екранів на одному полотні 390 × 844 — де перша секунда відповідає «як минає день», а п'ятдесят тренувань лежать на один дотик глибше.

Відкрити живий сайт
  • Мобільний застосунок
  • Продуктовий інтерфейс
  • Графіки
  • Дизайн-система
Головний екран MOTION у рамці пристрою
Галузь
Мобільність і спорт
Тривалість
6 тижнів
Команда
1 дизайнер · 1 інженер
Платформи
Мобільний застосунок · Пошук маршрутів · Цілі · Веб-демо в рамці пристрою

01

Задача

Застосунки для активності ламаються в один із двох боків. Або число, заради якого його відкрили, поховане під дашбордом, або воно там єдине і з ним нічого не зробиш. MOTION мав відповісти «як минає день» у першу секунду й водночас тримати за цією відповіддю п'ятдесят тренувань, тридцять місць і дев'ять цілей.

І це застосунок для телефона, який живе в браузері. Усе намальовано на одному полотні 390 × 844, і втекти в десктопний макет немає куди: кожен список, шторка та графік мають працювати на ширині долоні — включно з тими місцями, де зазвичай проблему розв'язує ширша колонка.

Полотно
390 × 844, без десктопної версії
Контент
50 тренувань · 30 місць · 9 цілей
Головна складність
Спершу один погляд, глибина — під ним

02

Рішення

Головний екран відповідає і на цьому спиняється: дистанція за сьогодні, яку частку денної цілі вона закриває і зміна щодо минулого тижня. Чотири плитки, тижневий графік і три останні тренування читаються другими — і це свідоме рішення.

Глибина лежить на один дотик у чотирьох інших екранах, а деталі відкриваються шторкою, а не новою сторінкою: маршрут чи тренування не коштують вам місця в списку, який ви читали.

Усі цифри приходять з одного локального сховища. Тижнева сума на головній, 538 км в історії та прогрес тижневої цілі — це ті самі тренування, пораховані один раз. Саме це не дає застосунку сперечатися із самим собою в офлайні.

Головний екран
Одне число, потім усе інше
Глибина
Шторки, а не нові сторінки
Цифри
Одне сховище, один підрахунок

03

Архітектура

  1. L0
    Оболонка Vite + React390 × 844
  2. L1
    П'ять екранівГоловна → профіль
    ШторкиКеруються жестом
  3. L2
    Стан застосункуОдне сховище
  4. L3
    Похідні сумиТижні, серії, цілі
  5. L4
    Журнал тренувань50 записів
    Місця й маршрути30 записів
    Модель цілей9 активних
  6. 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
Полотно

Без окремої десктопної версії

Локальний
Стан

Відкривається з вашими даними, є мережа чи ні

Повністю вимикається
Анімація

У кожної є нерухомий стан

Телефонний застосунок, який поводиться як телефонний у вкладці браузера: відкривається на числі, заради якого прийшли, а все інше — за один дотик і в одному сховищі.

Історія тренувань MOTION за днями
Історія тренувань
Екран маршрутів і місць MOTION
Маршрути й місця
Екран цілей MOTION з прогресом
Цілі
MOTION на мобільному
Мобільна версія

Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.

Є продукт, який давно час зробити?Розкажіть про нього.

Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.