UI/UX Guidelines
Раздел документации для UI/UX решений и архитектурных записей (ADR) по компонентам интерфейса.
Зачем это нужно
- Через 6 месяцев ты забудешь почему так сделал
- Новый разработчик захочет "улучшить" и сломает продуманный баланс
- При редизайне будет понятно что было осознанным решением, а что случайным
Когда документировать
| Ситуация | Документировать? |
|---|---|
| Два противоположных мнения сошлись к одному решению | Да |
| Решение требует понимания бизнес-контекста | Да |
| Trade-off между UX и техническими ограничениями | Да |
| Стандартный паттерн (кнопка, инпут) | Нет |
| Очевидное решение без альтернатив | Нет |
Формат ADR
Каждое значимое решение документируется в формате ADR:
# ADR: Название компонента/решения
## Контекст
Описание проблемы и ограничений
## Решения
### 1. Название решения
- **Проблема:** что решаем
- **Решение:** что выбрали
- **Альтернативы:** что отклонили и почему
- **Обоснование:** почему именно так
## Статус
Принято/Пересмотрено, дата
Frontend Project Structure
frontend/
├── src/
│ ├── components/ # UI components
│ │ ├── screens/ # Tab screens (Home, Cases, Profile, etc.)
│ │ ├── ui/ # Reusable UI (buttons, modals, skeletons)
│ │ └── onboarding/ # Onboarding guide
│ ├── hooks/ # Custom hooks (useUserProfile, useQuests, etc.)
│ ├── services/ # API clients (bootstrap, quests, cases, etc.)
│ ├── stores/ # Zustand stores (settings, hints, user)
│ ├── utils/ # Utilities (lastKnownBalance, AudioManager, etc.)
│ ├── providers/ # React providers (QueryProvider)
│ ├── types/ # TypeScript types
│ ├── config/ # Config files (banner, hints, tour)
│ └── App.tsx # Root component
└── public/
├── sounds/ # Sound effects (MP3)
└── images/ # Static images
Stack: React 18 + TypeScript, Vite, Tailwind CSS, TanStack Query v5, Zustand, React Router
Структура раздела
| Документ | Содержание |
|---|---|
| Design Principles | Базовые принципы дизайна для TMA |
| Theme Guide | Цвета, CSS variables, переключение тем |
| Animation System | Tailwind animations, keyframes, skeleton shimmer |
| Audio System | Звуковые эффекты, AudioManager, useAudio hook |
| Inventory Cards | ADR по карточкам инвентаря |
Связанные материалы
- Client-Side Storage — стратегия хранения данных
- Data Synchronization — синхронизация с backend
- Glossary — термины проекта
- Tier System — система редкости предметов