Перейти к содержимому
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 на мобильном
Мобильная версия

Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.

Есть продукт, который давно пора сделать?Расскажите о нём.

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