337 lines
7.2 KiB
Markdown
337 lines
7.2 KiB
Markdown
Ниже — инструкция для дизайн-агента, которая задаёт стиль, структуру и принципы интерфейса для твоего 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, но более спокойно и чисто
|
||
|
||
---
|
||
|
||
# 🧭 Финальный ориентир
|
||
|
||
Интерфейс должен вызывать ощущение:
|
||
|
||
> “Я контролирую свою беговую историю и прогресс”
|
||
|
||
а не:
|
||
|
||
> “Я заполняю таблицу результатов”
|
||
|
||
---
|
||
|