cinnabarflower/mnemo_cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mnemo_cards/mnemo_cards_web_v2/DESIGN_ADAPTATION_PLAN.md
Dmitry 9414005e2a stuff
2025-11-11 02:55:41 +03:00

23 KiB
Raw Blame History

План адаптации дизайна веб-приложения mnemo_cards_web_v2

Цель: Адаптировать дизайн веб-приложения mnemo_cards_web_v2, чтобы он был визуально похож на мобильное приложение mnemo_cards.

Дата создания: 19 октября 2025
Статус: План

📊 Анализ текущего состояния

Мобильное приложение (mnemo_cards)

Ключевые особенности дизайна:

  1. Цветовая схема:

    • Черно-белая основа (black/white primary)
    • Кастомные акцентные цвета: peach, golden, green
    • Специальные цвета: progressBlue, menuBlue, backgroundBlue, borderGray
    • Использует MaterialColor для создания палитр

  2. Типографика:

    • Шрифт: Nunito
    • Все тексты жирные: FontWeight.w700 для всех стилей
    • Использует flutter_screenutil для адаптивных размеров

  3. Карточки паков:

    • Горизонтальная компоновка (Row)
    • Изображение слева (квадратное, равно высоте карточки)
    • Информация справа (title, subtitle, количество карточек)
    • Граница с цветом пака (border: Border.all(color: pack.color))
    • Скругленные углы (12.0)
    • Прозрачный фон карточки
    • Высота: ~110.h

  4. UI компоненты:

    • RefreshIndicator с кастомным цветом
    • Простые границы и минималистичный дизайн
    • Иконки из webp файлов
    • Loading состояния с изображениями (cerdo/luna)

  5. Профиль:

    • UserStatistics виджет со списком слов
    • Прогресс-бары для каждого слова
    • SimpleTile компоненты с Divider'ами
    • Золотой цвет для выученных слов

Веб-приложение (mnemo_cards_web_v2)

Текущий дизайн:

  1. Цветовая схема:

    • Material 3 с синим seedColor
    • Стандартная палитра Material
    • Отсутствуют кастомные акцентные цвета

  2. Типографика:

    • Шрифт: Nunito ✅
    • Стандартные весы шрифтов Material

  3. Карточки паков:

    • Вертикальная компоновка (Column)
    • Изображение сверху (AspectRatio 16:9)
    • Информация снизу
    • Стандартные Material Card с elevation
    • Hero анимация ✅

  4. UI компоненты:

    • Material 3 компоненты
    • Shimmer loading states ✅
    • Современный responsive дизайн ✅

  5. Профиль:

    • Продвинутый дизайн со статистикой
    • StatsCard компоненты
    • SimpleChart для графиков
    • Settings card с темной темой

🎯 Этапы адаптации

Этап 1: Обновление цветовой схемы и темизации

Приоритет: 🔴 Высокий
Время: 2-3 часа
Сложность: Средняя

Задачи:

  1. Создать файл с цветовыми константами (lib/presentation/theme/app_colors.dart):

    // Точные цвета из мобильного приложения
const Color peach = Color(0xffffc994);
const Color golden = Color(0xffffea00);
const Color green = Color(0xff3d5309);
const Color greenAccent = Color(0xff688d11);
const Color black = Color(0xff000000);
const Color white = Color(0xffffffff);
const Color progressBlue = Color(0xff8CCBFF);
const Color menuBlue = Color(0xff99C4E9);
const Color backgroundBlue = Color(0xFFf0f0f0);
const Color testBlue = Color(0xffD0EAFF);
const Color borderGray = Color(0xffABABAB);

  2. Обновить app_theme.dart:

    • Изменить ColorScheme на черно-белую основу
    • Светлая тема:
      • primary: MaterialColor(0xFF000000, colorMap)
      • surface: white
      • onSurface: black
      • secondary: green
    • Темная тема:
      • primary: MaterialColor(0xFFFFFFFF, whiteColorMap)
      • surface: black
      • onSurface: white
      • secondary: lightBlue

  3. Обновить TextTheme:

    • Установить FontWeight.w700 для всех стилей текста
    • Сохранить Nunito шрифт

  4. Обновить компонентные темы:

    • AppBarTheme: иконки с primary цветом
    • CardTheme: скругление 12.0, минимальная elevation
    • ButtonTheme: жирные тексты

Файлы для изменения:

  • ✏️ lib/presentation/theme/app_theme.dart
  • ➕ lib/presentation/theme/app_colors.dart

Этап 2: Адаптация карточек паков (PackCard)

Приоритет: 🔴 Высокий
Время: 3-4 часа
Сложность: Высокая

Задачи:

  1. Изменить компоновку PackCard на горизонтальную:

    • Изменить Column на Row
    • Левая часть: квадратное изображение (height = width)
    • Правая часть: информация о паке

  2. Обновить стиль карточки:

    • Удалить elevation из Card
    • Добавить Border.all с цветом пака
    • Сделать фон прозрачным или белым
    • Скругление: 12.0

  3. Добавить парсинг цвета пака:

    • Использовать pack.color?.asColor из мобильного приложения
    • Создать extension для ColorDto

  4. Обновить информацию в карточке:

    • Жирный большой заголовок
    • Subtitle светлее
    • Иконка карточек с количеством
    • Индикатор загрузки (опционально)

  5. Адаптировать высоту:

    • Фиксированная высота ~110-120px
    • Квадратное изображение слева

Файлы для изменения:

  • ✏️ lib/presentation/widgets/pack_card.dart
  • ➕ lib/utils/color_extension.dart (для парсинга цветов)

Визуальный пример:

┌─────────────────────────────────────────┐
│ ┌─────┐                                │
│ │     │  Pack Title (bold, large)      │
│ │ IMG │  Pack Subtitle (light)         │
│ │     │  🃏 42 cards                    │
│ └─────┘                                │
└─────────────────────────────────────────┘

Этап 3: Адаптация HomePage (список паков)

Приоритет: 🟡 Средний
Время: 2 часа
Сложность: Низкая

Задачи:

  1. Изменить layout с GridView на ListView:

    • Вертикальный список карточек
    • Padding: 8.0

  2. Обновить RefreshIndicator:

    • Кастомные цвета (использовать цвет первого пака или primary)
    • displacement: 20

  3. Обновить Loading состояние:

    • Опционально: добавить изображение (cerdo/luna) вместо shimmer
    • Или оставить shimmer, но адаптировать под горизонтальную карточку

  4. Обновить Search bar:

    • Сделать более минималистичным
    • Убрать излишнюю стилизацию

Файлы для изменения:

  • ✏️ lib/presentation/pages/home/home_page.dart
  • ✏️ lib/presentation/widgets/loading/pack_card_shimmer.dart

Этап 4: Адаптация GamesPage и GameCard

Приоритет: 🟡 Средний
Время: 2-3 часа
Сложность: Средняя

Задачи:

  1. Обновить GameCard под стиль мобильного:

    • Возможно также сделать горизонтальную компоновку
    • Или оставить вертикальную, но обновить стили
    • Добавить границы с цветом игры
    • Использовать кастомные цвета

  2. Обновить GamesPage:

    • Изменить layout (Grid или List в зависимости от выбора)
    • Обновить RefreshIndicator
    • Адаптировать Loading состояния

  3. Обновить shimmer для GameCard

Файлы для изменения:

  • ✏️ lib/presentation/widgets/game_card.dart
  • ✏️ lib/presentation/pages/games/games_page.dart
  • ✏️ lib/presentation/widgets/loading/game_card_shimmer.dart

Этап 5: Адаптация ProfilePage

Приоритет: 🟢 Низкий
Время: 3-4 часа
Сложность: Средняя

Задачи:

  1. Упростить дизайн профиля:

    • Убрать или упростить статистические карточки
    • Добавить UserStatistics компонент (или его аналог)
    • Использовать SimpleTile стиль с Divider'ами

  2. Обновить статистику:

    • Показывать список изученных слов с прогрессом
    • Использовать HorizontalProgressWidget
    • Золотой цвет для выученных слов

  3. Обновить Settings секцию:

    • Более простой стиль с dividers
    • Минималистичные иконки

  4. Обновить logout кнопку:

    • Более простой стиль

Файлы для изменения:

  • ✏️ lib/presentation/pages/profile/profile_page.dart
  • ✏️ lib/presentation/widgets/stats_card.dart (упростить или удалить)
  • ➕ lib/presentation/widgets/simple_tile.dart (создать)
  • ➕ lib/presentation/widgets/horizontal_progress.dart (создать)

Этап 6: Адаптация PackDetailsPage

Приоритет: 🟢 Низкий
Время: 2 часа
Сложность: Низкая

Задачи:

  1. Упростить дизайн деталей пака:

    • Убрать излишнюю стилизацию
    • Использовать границы вместо elevation
    • Адаптировать под минималистичный стиль

  2. Обновить список карточек:

    • Более простой стиль ListTile
    • Границы вместо карточек

Файлы для изменения:

  • ✏️ lib/presentation/pages/pack_details/pack_details_page.dart

Этап 7: Адаптация общих компонентов

Приоритет: 🟡 Средний
Время: 2-3 часа
Сложность: Низкая

Задачи:

  1. Обновить MainShell (нижняя навигация):

    • Адаптировать стили под новую тему
    • Проверить цвета иконок

  2. Обновить AuthPage:

    • Упростить дизайн кнопок
    • Использовать новую цветовую схему

  3. Обновить ErrorView и LoadingView:

    • Адаптировать под новую тему
    • Опционально: добавить кастомные изображения для ошибок

  4. Создать общие утилиты:

    • ColorExtension для парсинга ColorDto
    • Дополнительные helper'ы

Файлы для изменения:

  • ✏️ lib/presentation/widgets/main_shell.dart
  • ✏️ lib/presentation/pages/auth/auth_page.dart
  • ✏️ lib/presentation/widgets/error_view.dart
  • ✏️ lib/presentation/widgets/loading_view.dart
  • ➕ lib/utils/color_extension.dart

Этап 8: Адаптация для responsive дизайна

Приоритет: 🟢 Низкий
Время: 2-3 часа
Сложность: Средняя

Задачи:

  1. Обновить Responsive утилиты:

    • Адаптировать под новые размеры карточек
    • Убедиться, что горизонтальные карточки хорошо смотрятся на разных экранах

  2. Тестирование на разных разрешениях:

    • Mobile (узкий экран)
    • Tablet (средний экран)
    • Desktop (широкий экран)

  3. Адаптация максимальной ширины контента:

    • Убедиться, что карточки не слишком широкие на больших экранах

Файлы для изменения:

  • ✏️ lib/utils/responsive.dart
  • ✏️ Все страницы с использованием responsive логики

Этап 9: Финальная полировка и тестирование

Приоритет: 🔴 Высокий
Время: 2-3 часа
Сложность: Низкая

Задачи:

  1. Проверка консистентности:

    • Все цвета соответствуют мобильному приложению
    • Все шрифты жирные где нужно
    • Все границы используют правильные цвета

  2. Темная тема:

    • Проверить, что темная тема работает корректно
    • Адаптировать все компоненты под темную тему

  3. Accessibility:

    • Проверить контрастность цветов
    • Обновить Semantics labels если нужно

  4. Тестирование:

    • Визуальное тестирование всех экранов
    • Проверка анимаций и переходов
    • Unit тесты для новых компонентов

  5. Документация:

    • Обновить README с информацией о дизайне
    • Создать DESIGN_GUIDE.md с примерами компонентов

Файлы для проверки:

  • Все обновленные файлы
  • Тесты

📁 Структура новых файлов

lib/
├── presentation/
│   ├── theme/
│   │   ├── app_theme.dart          ✏️ Обновить
│   │   └── app_colors.dart         ➕ Создать
│   ├── widgets/
│   │   ├── pack_card.dart          ✏️ Полностью переделать
│   │   ├── game_card.dart          ✏️ Обновить
│   │   ├── simple_tile.dart        ➕ Создать
│   │   ├── horizontal_progress.dart ➕ Создать
│   │   └── loading/
│   │       ├── pack_card_shimmer.dart ✏️ Обновить под горизонтальную карточку
│   │       └── game_card_shimmer.dart ✏️ Обновить
│   └── pages/
│       ├── home/
│       │   └── home_page.dart      ✏️ Изменить layout
│       ├── games/
│       │   └── games_page.dart     ✏️ Обновить стили
│       ├── profile/
│       │   └── profile_page.dart   ✏️ Упростить дизайн
│       └── pack_details/
│           └── pack_details_page.dart ✏️ Упростить
├── utils/
│   └── color_extension.dart        ➕ Создать
└── assets/                         ➕ Опционально
    └── images/
        ├── cerdo.webp              ➕ Копировать из мобильного
        └── luna.webp               ➕ Копировать из мобильного

🎨 Ключевые изменения дизайна

До и После:

1. Цветовая схема

До: Material 3 синяя палитра
После: Черно-белая основа с акцентными цветами (golden, green, peach)

2. Карточки паков

До: Вертикальные карточки с изображением 16:9 сверху
После: Горизонтальные карточки с квадратным изображением слева и границей цвета пака

3. Типографика

До: Стандартные веса шрифтов Material
После: Все тексты жирные (FontWeight.w700)

4. UI компоненты

До: Material 3 elevation, стандартные карточки
После: Минималистичный дизайн с границами, без elevation

5. Профиль

До: Продвинутая статистика с графиками и карточками
После: Простой список слов с прогрессом, SimpleTile компоненты

⚠️ Важные замечания

  1. Сохранить функциональность:

    • Все существующие функции должны работать
    • Hero анимации сохранить
    • RefreshIndicator сохранить

  2. Responsive дизайн:

    • Убедиться, что горизонтальные карточки хорошо смотрятся на всех экранах
    • На очень узких экранах возможно нужно адаптировать размеры

  3. Тестирование:

    • Обновить тесты для новых компонентов
    • Проверить, что старые тесты проходят

  4. Темная тема:

    • Особое внимание к темной теме
    • Проверить контрастность

  5. Assets:

    • Возможно понадобится скопировать иконки из мобильного приложения
    • Добавить cerdo.webp и luna.webp для loading состояний

📊 Приоритизация этапов

Критический путь (начать с этого):

  1. Этап 1: Цветовая схема и темизация
  2. Этап 2: Адаптация PackCard (самое заметное изменение)
  3. Этап 3: Адаптация HomePage

Средний приоритет:

  1. Этап 4: GamesPage и GameCard
  2. Этап 7: Общие компоненты
  3. Этап 5: ProfilePage

Низкий приоритет (можно отложить):

  1. Этап 6: PackDetailsPage
  2. Этап 8: Responsive адаптация
  3. Этап 9: Финальная полировка

🚀 Порядок выполнения

День 1 (4-5 часов):

  • Этап 1: Цветовая схема (2-3 часа)
  • Этап 2: PackCard начать (2 часа)

День 2 (4-5 часов):

  • Этап 2: PackCard завершить (2 часа)
  • Этап 3: HomePage (2 часа)
  • Тестирование (1 час)

День 3 (4-5 часов):

  • Этап 4: GamesPage (2-3 часа)
  • Этап 7: Общие компоненты (2 часа)

День 4 (3-4 часа):

  • Этап 5: ProfilePage (3 часа)
  • Этап 6: PackDetailsPage (1 час)

День 5 (2-3 часа):

  • Этап 8: Responsive (2 часа)
  • Этап 9: Финальная полировка (1 час)

Общее время: 17-22 часа работы

📝 Чек-лист выполнения

Этап 1: Цветовая схема

  • Создан app_colors.dart с константами
  • Обновлен app_theme.dart (светлая тема)
  • Обновлен app_theme.dart (темная тема)
  • Все тексты жирные (FontWeight.w700)
  • Проверено на обоих темах

Этап 2: PackCard

  • Изменена компоновка на горизонтальную
  • Добавлена граница с цветом пака
  • Создан ColorExtension для парсинга
  • Обновлена информация в карточке
  • Hero анимация работает

Этап 3: HomePage

  • Изменен GridView на ListView
  • Обновлен RefreshIndicator
  • Обновлен PackCardShimmer
  • Проверена прокрутка и загрузка

Этап 4: GamesPage

  • Обновлен GameCard
  • Обновлен GamesPage layout
  • Обновлен GameCardShimmer
  • Проверена функциональность

Этап 5: ProfilePage

  • Упрощен дизайн
  • Создан SimpleTile компонент
  • Создан HorizontalProgress (опционально)
  • Обновлена статистика

Этап 6: PackDetailsPage

  • Упрощен дизайн
  • Обновлен список карточек
  • Проверена функциональность

Этап 7: Общие компоненты

  • Обновлен MainShell
  • Обновлен AuthPage
  • Обновлены ErrorView/LoadingView
  • Созданы утилиты

Этап 8: Responsive

  • Проверено на mobile
  • Проверено на tablet
  • Проверено на desktop
  • Адаптированы размеры

Этап 9: Финальная полировка

  • Проверена консистентность
  • Проверена темная тема
  • Проверена accessibility
  • Все тесты проходят
  • Обновлена документация

🎯 Ожидаемый результат

После выполнения всех этапов веб-приложение mnemo_cards_web_v2 будет визуально похоже на мобильное приложение mnemo_cards:

  • ✅ Идентичная цветовая схема (черно-белая с акцентами)
  • ✅ Жирные шрифты Nunito
  • ✅ Горизонтальные карточки паков с границами
  • ✅ Минималистичный дизайн без лишних elevation
  • ✅ Упрощенный профиль со статистикой
  • ✅ Консистентный UI на всех экранах
  • ✅ Работающая темная тема
  • ✅ Сохраненная функциональность (авторизация, навигация, загрузка данных)

Автор плана: AI Assistant
Дата: 19 октября 2025
Версия: 1.0