Перейти к содержанию

UX Guidelines для дыхательных упражнений

Рекомендации по дизайну анимаций, цветов, звуков и тактильной обратной связи

Содержание

  1. Классификация анимаций
  2. Цветовая психология
  3. Тактильная обратная связь
  4. Звуковой дизайн
  5. Timing и Easing
  6. Accessibility
  7. Рекомендации для CalmTrader

Классификация анимаций

Основные типы

Тип Визуал Лучше всего для Сложность
Expanding Circle Круг растёт/сжимается Простое дыхание, 4-7-8 Низкая
Square Path Точка по периметру квадрата Box Breathing Низкая
Flower Petal Лепестки расходятся Apple-style premium Средняя
Wave Синусоида движется Coherent Breathing Средняя
Progress Ring Кольцо заполняется Таймер фазы Низкая
Blob/Organic Органическая форма Расслабление Высокая
Particle System Частицы разлетаются Premium эффекты Высокая

Визуальные метафоры по фазам

ВДОХ (Inhale):
├── Расширение / рост
├── Движение вверх или наружу
├── Осветление цвета (opacity ↑)
└── Появление элементов

ЗАДЕРЖКА (Hold):
├── Статика или микро-пульсация
├── Фиксированный размер
└── Стабильный цвет

ВЫДОХ (Exhale):
├── Сжатие / уменьшение
├── Движение вниз или внутрь
├── Затемнение цвета (opacity ↓)
└── Исчезновение элементов

Принцип единого фокуса

  • Один главный элемент на экране во время сессии
  • Убрать навигацию, уведомления, всё лишнее
  • Фон: solid color или subtle gradient
  • Текстовые подсказки минимальны ("Вдох" / "Выдох")

Цветовая психология

Научные основы

Цвет напрямую влияет на физиологию: - Синий снижает пульс и кровяное давление - Зелёный ассоциируется с природой, снижает тревожность - Красный повышает возбуждение — избегать в relaxation apps

Рекомендуемые палитры

Для расслабления (основной режим)

Цвет HEX Применение
Deep Blue #1E3A5F Основной фон
Soft Teal #4A9B9B Акцентный круг
Light Cyan #7FDBFF Highlight при вдохе
Muted Purple #7B68EE Альтернативный accent

Для энергизации (утренние практики)

Цвет HEX Применение
Warm Orange #FF9F43 Энергизирующий accent
Soft Yellow #FFEAA7 Highlight
Coral #FF7675 С осторожностью

Правило 60-30-10

60% — Фон (тёмный или светлый нейтральный)
30% — Основной элемент (анимация)
10% — Акценты (текст, иконки, highlights)

Dark vs Light Mode

  • Dark Mode (по умолчанию): меньше напрягает глаза, лучше для вечерних сессий
  • Light Mode: опционально для дневного использования
  • Плавный переход между темами

Тактильная обратная связь

Паттерны Haptic Feedback

На основе Apple Watch Breathe и best practices:

Фаза iOS (UIImpactFeedbackGenerator) Android (VibrationEffect)
Начало вдоха .light (1 tap) EFFECT_TICK
Начало выдоха .light × 2 (2 taps) EFFECT_DOUBLE_CLICK
Завершение цикла .medium EFFECT_HEAVY_CLICK
Конец сессии .success Custom pattern

Telegram Mini App API

// Telegram WebApp haptic feedback
Telegram.WebApp.HapticFeedback.impactOccurred('light');   // Вдох
Telegram.WebApp.HapticFeedback.impactOccurred('medium');  // Выдох
Telegram.WebApp.HapticFeedback.notificationOccurred('success'); // Конец

Принципы

  1. Консистентность: один паттерн = одно действие во всём приложении
  2. Ненавязчивость: haptic должен помогать, не отвлекать
  3. Опциональность: возможность отключить в настройках
  4. Синхронизация: haptic точно в момент смены фазы (не раньше, не позже)

Звуковой дизайн

Типы аудио

Тип Описание Когда использовать
Ambient Фоновые звуки природы Во время сессии
Cue sounds Короткие звуки смены фазы Начало вдоха/выдоха
Voice guidance Голосовые инструкции Для новичков
Binaural beats Специальные частоты Premium функция

Best Practices

  • По умолчанию: только cue sounds или тишина
  • Громкость: раздельно для голоса и ambient
  • Fade in/out: плавное начало и конец звуков (300-500ms)
  • Частоты: низкие частоты (< 500 Hz) более успокаивающие

Рекомендуемые звуки

  • Мягкий "whoosh" для смены фазы
  • Тихий колокольчик для завершения
  • Ambient: дождь, океан, лес (опционально)

Timing и Easing

CSS Easing Functions

Функция CSS Применение
Ease-in-out ease-in-out Основная для дыхания
Smooth breath cubic-bezier(0.4, 0, 0.2, 1) Более органичное
Apple-style cubic-bezier(0.5, 0, 0.5, 1) Симметричное

Принципы timing

/* Длительность анимации = длительность фазы */
.inhale {
  animation: expand 4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anticipation: небольшая задержка перед сменой фазы */
.phase-transition {
  transition-delay: 0.1s;
}

Важные моменты

  1. Никаких резких переходов — всё плавно
  2. Anticipation (0.1-0.3s) перед сменой фазы
  3. Overshoot только для энергизирующих упражнений
  4. 60 FPS — обязательно для плавности

Timing по фазам (пример Box Breathing)

const boxBreathing = {
  inhale:    { duration: 4000, easing: 'ease-in-out' },
  holdIn:    { duration: 4000, easing: 'linear' },     // статика
  exhale:    { duration: 4000, easing: 'ease-in-out' },
  holdOut:   { duration: 4000, easing: 'linear' },     // статика
};

Accessibility

Визуальная доступность

  • Высокий контраст: WCAG AA минимум (4.5:1 для текста)
  • Крупные элементы: минимум 44×44px touch targets
  • Без мигания: частота < 3 Hz (избегать эпилептических триггеров)
  • Color-blind friendly: не полагаться только на цвет

Альтернативные каналы

  • Для слабовидящих: усиленный haptic + voice guidance
  • Для слабослышащих: визуальные cues без звука
  • Для всех: возможность выбрать предпочтительный канал

Настройки пользователя

interface AccessibilitySettings {
  visualFeedback: boolean;      // анимации
  hapticFeedback: boolean;      // вибрация
  audioFeedback: boolean;       // звуки
  voiceGuidance: boolean;       // голос
  highContrast: boolean;        // контрастная тема
  reducedMotion: boolean;       // упрощённые анимации
}

Рекомендации для CalmTrader

Приоритеты для MVP

  1. Визуал: CSS animations (circle + square path)
  2. Haptic: Telegram WebApp API
  3. Звук: отложить на v2
  4. Цвета: тёмная тема с синим/teal акцентом

Техническая реализация

// Единый интерфейс для визуализаций
interface BreathingVisualizer {
  technique: TechniqueName;

  // Состояние
  currentPhase: 'inhale' | 'holdIn' | 'exhale' | 'holdOut';
  progress: number;        // 0-1, прогресс внутри фазы
  cycleNumber: number;     // текущий цикл
  totalCycles: number;     // всего циклов

  // Callbacks
  onPhaseChange: (phase: Phase) => void;
  onCycleComplete: () => void;
  onSessionComplete: () => void;

  // Feedback channels
  enableHaptic: boolean;
  enableSound: boolean;
}

Цветовая схема для CalmTrader

:root {
  /* Background */
  --bg-primary: #0D1B2A;      /* Deep navy */
  --bg-secondary: #1B2838;    /* Lighter navy */

  /* Animation element */
  --accent-primary: #4A9B9B;  /* Teal */
  --accent-glow: #7FDBFF;     /* Cyan glow */

  /* Text */
  --text-primary: #E0E6ED;    /* Light gray */
  --text-secondary: #8892A0;  /* Muted gray */

  /* States */
  --inhale-color: #5DADE2;    /* Light blue */
  --exhale-color: #48C9B0;    /* Mint */
  --hold-color: #7B68EE;      /* Purple */
}

Haptic паттерны для CalmTrader

const hapticPatterns = {
  phaseStart: () => {
    Telegram.WebApp.HapticFeedback.impactOccurred('light');
  },

  cycleComplete: () => {
    Telegram.WebApp.HapticFeedback.impactOccurred('medium');
  },

  sessionComplete: () => {
    Telegram.WebApp.HapticFeedback.notificationOccurred('success');
  }
};

Чеклист перед релизом

  • Анимации работают на 60 FPS
  • Haptic синхронизирован с визуалом
  • Тёмная тема по умолчанию
  • Touch targets ≥ 44px
  • Контраст ≥ 4.5:1
  • Можно отключить haptic
  • Работает без звука
  • Тестирование на iOS и Android

Источники

Цветовая психология

  1. Color Psychology in UX Design
  2. The Psychology of Color in Marketing

Haptic Design

  1. Apple Human Interface Guidelines: Haptics
  2. Android Haptic Feedback Best Practices

Animation & Timing

  1. Material Design: Motion
  2. CSS Easing Functions
  3. The UX of Lottie Animations

Accessibility

  1. WCAG 2.1 Guidelines
  2. Inclusive Design Principles

Meditation Apps Analysis

  1. 60fps.design: Headspace
  2. UI Sources: Oak

История изменений

Версия Дата Изменения
1.0 2024-12-02 Первоначальная версия

Документ подготовлен для задачи A4A-72