Skip to content

DESIGN_GUIDE.md

Latest commit

 

History

History
228 lines (179 loc) · 8.2 KB

DESIGN_GUIDE.md

File metadata and controls

228 lines (179 loc) · 8.2 KB
Raw

Руководство по дизайну чата

🎨 Обзор дизайна

Чат использует современный дизайн с градиентами, blur эффектами и плавными анимациями. Дизайн автоматически применяется при загрузке приложения.

🎯 Принципы дизайна

1. Современный дизайн

  • Цветовая палитра: Темные оттенки с акцентами индиго и фиолетового
  • Типографика: Inter font с четкой иерархией
  • Анимации: Плавные переходы и микроанимации
  • Эффекты: Backdrop blur, градиенты, тени

2. Современный дизайн

  • Цветовая палитра: Темные оттенки с акцентами индиго и фиолетового
  • Типографика: Inter font с четкой иерархией
  • Анимации: Плавные переходы и микроанимации
  • Эффекты: Backdrop blur, градиенты, тени

🎨 Цветовая система

Современный дизайн

/* Основные цвета */
--bg-primary: #0f0f23;      /* Основной фон */
--bg-secondary: #1a1a2e;    /* Вторичный фон */
--bg-tertiary: #16213e;     /* Третичный фон */
--bg-elevated: #242846;     /* Приподнятые элементы */

/* Текст */
--text-primary: #ffffff;    /* Основной текст */
--text-secondary: #b8b8d1;  /* Вторичный текст */
--text-muted: #8b8ba7;      /* Приглушенный текст */

/* Акценты */
--accent-primary: #6366f1;  /* Основной акцент (индиго) */
--accent-secondary: #8b5cf6; /* Вторичный акцент (фиолетовый) */
--accent-success: #10b981;  /* Успех (зеленый) */
--accent-warning: #f59e0b;  /* Предупреждение (желтый) */
--accent-danger: #ef4444;   /* Ошибка (красный) */

Современный дизайн (основной)

/* Основные цвета */
--bg-primary: #0f0f23;      /* Основной фон */
--bg-secondary: #1a1a2e;    /* Вторичный фон */
--bg-tertiary: #16213e;     /* Третичный фон */
--bg-elevated: #242846;     /* Приподнятые элементы */

/* Текст */
--text-primary: #ffffff;    /* Основной текст */
--text-secondary: #b8b8d1;  /* Вторичный текст */
--text-muted: #8b8ba7;      /* Приглушенный текст */

/* Акценты */
--accent-primary: #6366f1;  /* Основной акцент (индиго) */
--accent-secondary: #8b5cf6; /* Вторичный акцент (фиолетовый) */
--accent-success: #10b981;  /* Успех (зеленый) */
--accent-warning: #f59e0b;  /* Предупреждение (желтый) */
--accent-danger: #ef4444;   /* Ошибка (красный) */

📐 Система отступов

Современный дизайн

--space-xs: 0.25rem;   /* 4px */
--space-sm: 0.5rem;    /* 8px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-2xl: 3rem;     /* 48px */

Современный дизайн

Использует систему отступов на основе rem (4px, 8px, 16px, 24px, 32px, 48px)

🔄 Анимации и переходы

Современный дизайн

--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;

Современный дизайн

--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;

🎭 Компоненты

1. Заголовок чата

  • Градиентный фон с blur эффектом
  • Анимированные кнопки с hover эффектами
  • Переключатель тем

2. Сообщения

  • Закругленные пузыри с градиентами
  • Hover эффекты с подъемом
  • Анимации появления и удаления

3. Панель каналов

  • Полупрозрачный фон с анимациями
  • Hover эффекты с сдвигом
  • Кнопка разворачивания всегда видна

4. Поле ввода

  • Закругленные углы с фокусными эффектами
  • Анимированная кнопка отправки
  • Shimmer эффект при hover

📱 Адаптивность

Breakpoints

  • 768px: Планшеты
  • 480px: Мобильные устройства

Мобильные особенности

  • Скрытие заголовка на маленьких экранах
  • Уменьшение отступов
  • Адаптация размеров кнопок
  • Оптимизация панели каналов

🎨 Особенности современного дизайна

1. Backdrop Blur

backdrop-filter: blur(20px);

2. Градиенты

background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));

3. Микроанимации

  • Пульсация статуса подключения
  • Shimmer эффект в уведомлениях
  • Bounce анимация кнопки прокрутки

4. Тени

--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

🔧 Автоматическое применение темы

Компонент ModernThemeProvider

  • Автоматически применяет современную тему при загрузке
  • Сохранение выбора в localStorage
  • Динамическая загрузка CSS файлов

Использование

<ModernThemeProvider>
  <App />
</ModernThemeProvider>

📊 Статус подключения

Компонент ConnectionStatus

  • Индикатор состояния подключения
  • Время последнего сообщения
  • Анимированные точки статуса

Использование

<ConnectionStatus 
  isConnected={true} 
  lastMessageTime={new Date()} 
/>

🎯 Доступность

Цветовой контраст

  • Минимальный контраст 4.5:1 для текста
  • Индикаторы состояния для цветовых различий

Фокус

  • Видимые фокусные индикаторы
  • Логическая навигация с клавиатуры

Скринридеры

  • Семантическая разметка
  • ARIA атрибуты где необходимо

🚀 Производительность

Оптимизации

  • CSS переменные для быстрого переключения тем
  • Минимальные перерисовки
  • Оптимизированные анимации

Загрузка

  • Ленивая загрузка стилей
  • Кэширование в localStorage
  • Минимальный размер CSS

📝 Рекомендации по использованию

Для разработчиков

  1. Используйте CSS переменные для консистентности
  2. Тестируйте на разных размерах экранов
  3. Проверяйте доступность
  4. Оптимизируйте анимации

Для дизайнеров

  1. Следуйте установленной цветовой палитре
  2. Используйте систему отступов
  3. Добавляйте микроанимации осмысленно
  4. Тестируйте контрастность

🔮 Будущие улучшения

Планируемые функции

  • Темная/светлая тема
  • Кастомизация цветов
  • Дополнительные анимации
  • Улучшенная типографика
  • Темы для праздников