mirror of
https://gitverse.ru/kpa39l/yaru.nixg.ru.git
synced 2026-09-29 09:55:06 +00:00
140 lines
4.8 KiB
Markdown
140 lines
4.8 KiB
Markdown
# Дизайн документация
|
|
|
|
## Документы
|
|
|
|
| Документ | Описание | Статус |
|
|
|----------|----------|--------|
|
|
| [YARU Style](yaru-style.md) | Фирменный стиль: красная буква, короны, цвета | ✅ Готов |
|
|
| [Компоненты](components.md) | Svelte компоненты UI | 📝 План |
|
|
| [Макеты](layouts.md) | Макеты страниц | 📝 План |
|
|
|
|
---
|
|
|
|
## План раздела
|
|
|
|
- [ ] Логотип и фирменный стиль
|
|
- [ ] Цветовая палитра
|
|
- [ ] Типографика
|
|
- [ ] Дизайн-система компонентов
|
|
- [ ] Макеты основных страниц
|
|
- [ ] Анимации и переходы
|
|
|
|
---
|
|
|
|
## Логотип
|
|
|
|
### Концепция
|
|
- **Минимализм** — простой запоминающийся символ
|
|
- **Адаптивность** — работает с разными подзаголовками
|
|
- **Fediverse связь** — визуальная ассоциация с федеративными сетями
|
|
|
|
### Варианты
|
|
- [ ] Основной логотип (цветной)
|
|
- [ ] Монохромная версия
|
|
- [ ] Иконка для favicon/app
|
|
- [ ] Версия с подзаголовком (YARU Service/Revolution/Blog/Fediverse)
|
|
|
|
---
|
|
|
|
## Цветовая палитра
|
|
|
|
### Основная (требует утверждения)
|
|
|
|
| Цвет | HEX | Использование |
|
|
|------|-----|---------------|
|
|
| Primary | `# TBD` | Кнопки, ссылки, акценты |
|
|
| Secondary | `# TBD` | Вторичные элементы |
|
|
| Background | `# TBD` | Фон приложения |
|
|
| Surface | `# TBD` | Карточки, панели |
|
|
| Text Primary | `# TBD` | Основной текст |
|
|
| Text Secondary | `# TBD` | Вторичный текст |
|
|
| Success | `# TBD` | Положительные действия |
|
|
| Error | `# TBD` | Ошибки |
|
|
| Warning | `# TBD` | Предупреждения |
|
|
|
|
### Тёмная тема
|
|
- [ ] Определить цвета для тёмной темы
|
|
- [ ] Автоматическое переключение по системным настройкам
|
|
|
|
---
|
|
|
|
## Типографика
|
|
|
|
### Шрифты (требует выбора)
|
|
- [ ] Основной шрифт: **TBD** (Inter, Roboto, Open Sans?)
|
|
- [ ] Моноширинный: **TBD** (Fira Code, JetBrains Mono?)
|
|
- [ ] Поддержка кириллицы
|
|
|
|
### Иерархия
|
|
```
|
|
H1 — Заголовки страниц (32px)
|
|
H2 — Разделы (24px)
|
|
H3 — Подразделы (20px)
|
|
Body — Основной текст (16px)
|
|
Small — Вторичный текст (14px)
|
|
```
|
|
|
|
---
|
|
|
|
## Компоненты дизайн-системы
|
|
|
|
### Базовые компоненты
|
|
- [ ] Button (primary, secondary, outline, ghost)
|
|
- [ ] Input (text, textarea, password)
|
|
- [ ] Card (пост, профиль)
|
|
- [ ] Avatar (пользователь)
|
|
- [ ] Badge (теги, статусы)
|
|
- [ ] Modal (диалоги)
|
|
- [ ] Toast (уведомления)
|
|
- [ ] Spinner (загрузка)
|
|
- [ ] Dropdown (меню)
|
|
|
|
### Специфичные компоненты
|
|
- [ ] PostCard (пост с контентом, медиа, кармой)
|
|
- [ ] KarmaCounter (отображение кармы)
|
|
- [ ] FollowButton (подписка/отписка)
|
|
- [ ] Timeline (лента постов)
|
|
- [ ] Composer (создание поста)
|
|
|
|
---
|
|
|
|
## Макеты страниц
|
|
|
|
### Требуемые макеты
|
|
- [ ] Главная страница (лента)
|
|
- [ ] Профиль пользователя
|
|
- [ ] Создание поста
|
|
- [ ] Настройки
|
|
- [ ] Страница поста (детальный просмотр)
|
|
- [ ] Подписки/подписчики
|
|
- [ ] Поиск
|
|
- [ ] Landing page (для неавторизованных)
|
|
|
|
### Формат макетов
|
|
- [ ] Figma (предпочтительно)
|
|
- [ ] Или экспорты в PNG/SVG
|
|
- [ ] Mobile + Desktop версии
|
|
|
|
---
|
|
|
|
## Анимации и переходы
|
|
|
|
### Микроанимации
|
|
- [ ] Hover эффекты на кнопках
|
|
- [ ] Плавное появление постов в ленте
|
|
- [ ] Анимация лайка/репоста
|
|
- [ ] Индикатор загрузки
|
|
|
|
### Переходы между страницами
|
|
- [ ] Fade-in/fade-out
|
|
- [ ] Slide переходы для mobile
|
|
|
|
---
|
|
|
|
## Вопросы для обсуждения
|
|
|
|
- [ ] Есть ли предпочтения по цветовой схеме (тёплая/холодная)?
|
|
- [ ] Нужен ли готовый UI kit (Material, Chakra) или кастомный дизайн?
|
|
- [ ] Кто будет делать макеты (самостоятельно или заказывать)?
|
|
- [ ] Требуется ли brandbook документ?
|