7.2 KiB
Ниже — инструкция для дизайн-агента, которая задаёт стиль, структуру и принципы интерфейса для твоего SPA. Она ориентирована на минимализм, читаемость данных и удовольствие от использования, а не на “перегруженный фитнес-дэшборд”.
🎯 Общая задача
Создать чистый, современный, минималистичный интерфейс для SPA-приложения бегуна, где пользователь:
- отслеживает свои старты (прошлые и будущие),
- видит прогресс и личные рекорды,
- сравнивает результаты,
- получает ощущение “контроля над своей беговой историей”.
🧭 Общая философия дизайна
1. “Спокойная сила”, а не “спортивная агрессия”
Не:
- кислотные цвета,
- перегруженные графики,
- “фитнес-клуб стиль 2015”.
Да:
- чистый интерфейс,
- воздух,
- акцент на данных,
- ощущение премиальности.
2. Минимум визуального шума
Каждый экран должен отвечать на вопрос:
“Что здесь главное?”
Если не ясно — убрать лишнее.
3. Данные — главный герой
Интерфейс не про “украшения”, а про:
- результаты,
- прогресс,
- сравнение,
- числа.
🎨 Визуальный стиль
Цвета
Основа:
- фон: светлый (#F7F8FA или близко)
- карточки: белые
- текст:
- основной: почти чёрный (#111)
- вторичный: серый (#666)
Акцент:
- 1 основной цвет:
- глубокий синий или изумрудный (например #2F6BFF или #1FA37A)
Дополнительно:
- PR / успех: мягкий зелёный
- предупреждения: нейтральный жёлтый
- ошибки: мягкий красный
❗ Никаких “радуг”.
Типографика
- современный sans-serif (Inter / SF Pro / аналог)
- крупные числа:
- результаты (время) — большие, жирные
- иерархия:
- H1 — экран
- H2 — блок
- body — данные
- caption — мета
Отступы и сетка
- много воздуха
- карточки с padding 16–24px
- равномерная вертикальная ритмика
- закругления: 12–16px
🧱 Основные экраны
1. Главный экран (Dashboard)
Цель:
дать быстрый ответ:
- что впереди
- где я сейчас
- какой прогресс
Блоки:
🔹 Ближайший старт
- название
- дата
- дистанция
- countdown (“через 12 дней”)
🔹 Последний результат
- время
- дистанция
- место
- дата
🔹 Личный рекорд
- по ключевой дистанции
- выделен визуально
🔹 Сезон
- количество стартов
- лучший результат
- краткая статистика
2. Календарь стартов
Два раздела:
- будущие
- прошедшие
Карточка старта:
- название
- дата
- дистанция
- статус:
- планирую
- зарегистрирован
- пробежал
Минимум кликов.
3. Карточка старта
- название
- дата
- дистанция
- время
- темп
- место (если есть)
- заметки (опционально)
4. Личные рекорды (PR)
- список дистанций:
- 5K
- 10K
- 21.1
- 42.2
Для каждой:
- лучшее время
- дата
- старт
5. Сравнение стартов (ВАЖНО)
Это ключевая фича.
UI:
таблица или карточки:
| Год | Время | Темп | Место |
|---|
Можно добавить:
- стрелки (лучше/хуже)
- визуальный прогресс
📊 Графики
Минимально и аккуратно:
- линия прогресса по дистанции
- без перегруза
- без 10 линий сразу
🧩 Компоненты
- карточки
- таблицы (очень аккуратно)
- фильтры
- переключатели (tabs)
- кнопки (primary / secondary)
🧠 UX принципы
1. Минимум кликов
Любая частая задача:
→ максимум 2–3 клика
2. Быстрое считывание
Пользователь должен за 2 секунды понять:
- что это
- где он
- что делать
3. Консистентность
- одинаковые карточки
- одинаковые статусы
- одинаковые действия
🧪 Для аналитики (важно)
Заложить:
- зоны кликов
- понятные CTA
- отсутствие “пустых зон”
🖼️ Использование изображений
Когда использовать:
- пустые состояния
- onboarding
- вдохновение
Когда НЕ использовать:
- в данных
- в списках стартов
- в результатах
Если генерировать изображения
Стиль:
- минимализм
- спорт без пафоса
- одиночный бегун
- город / парк
- мягкий свет
- утро / вечер
Пример prompt:
“minimalist photo of a runner jogging alone in a city park at sunrise, soft light, calm mood, no crowd, modern aesthetic”
🚫 Чего избегать
- перегруженных дашбордов
- 100 метрик сразу
- ярких кислотных цветов
- сложных графиков
- таблиц как в Excel
- лишних иконок
- “геймификации ради геймификации”
💡 Вдохновение (по духу)
Если бы нужно было описать стиль:
- как Notion, но для бегунов
- как Apple Fitness, но менее ярко
- как Strava, но более спокойно и чисто
🧭 Финальный ориентир
Интерфейс должен вызывать ощущение:
“Я контролирую свою беговую историю и прогресс”
а не:
“Я заполняю таблицу результатов”