Исследование визуализаций для дыхательных упражнений¶

Анализ существующих приложений и концепций визуализации

Содержание¶

Обзор приложений
Типы анимаций
Best Practices UX
Технические решения
Рекомендации для CalmTrader
Источники

Обзор приложений¶

1. Apple Watch Breathe¶

Визуализация: Flower Petal (цветок с лепестками)

Описание: - Набор кругов, образующих цветок - Количество лепестков = минуты сессии - Цветок расширяется на вдохе, сжимается на выдохе - Два цвета: зеленоватый и голубой с градиентом opacity - Нечётные круги — зелёные, чётные — голубые

Обратная связь: - Haptic feedback: 1 tap = вдох, 2 taps = выдох - Визуальная подсказка через анимацию

Сильные стороны: - Иконический, узнаваемый дизайн - Элегантная простота - Много open-source реплик (SwiftUI, CSS)

Источники: - CSS-Tricks: Recreating Apple Watch Breathe Animation - GitHub: BreatheReplica SwiftUI

2. Calm¶

Визуализация: Breathe Bubble (пульсирующий круг)

Описание: - Простой круг с кольцом вокруг - Круг растёт и сжимается синхронно с дыханием - Текст "breathe in" / "breathe out" появляется в центре - 6 типов дыхательных упражнений на выбор

Настройки: - Регулировка скорости - Выбор стиля дыхания - Доступно на веб: calm.com/breathe

Сильные стороны: - Максимальная простота - Работает в браузере - Легко воспроизвести

Источники: - Calm Breathe Web - CodePen: Calm Breathe Bubble CSS

3. Headspace¶

Визуализация: Animated Characters + Breathing Button

Описание: - Анимированные персонажи для объяснения техник - Кнопка play "дышит" — расширяется и сжимается как лёгкие - Вибрантные оранжевые и жёлтые цвета - Handcrafted иллюстрации

UX особенности: - Gamification с мгновенной обратной связью - Визуальные образы объясняют сложные концепции - Эмоционально-ориентированный дизайн

Сильные стороны: - Engaging для новичков - Award-winning графика и анимация - Делает медитацию доступной

Источники: - UI Sources: Headspace App - 60fps.design: Headspace Animations

4. Breathwrk¶

Визуализация: Circle + Multi-sensory Experience

Описание: - Круговые визуальные подсказки - Таймер внизу экрана - Color-coded категории (синий = сон) - Кастомизируемые визуалы

Multi-sensory: - Визуалы - Звуки (Grammy-winning DJ White Shadow) - Haptic vibrations (для вдоха/выдоха) - Голосовые коучи

Настройки Pro: - Все визуализации - Кастомная длительность - Выбор звуков и voiceovers

Сильные стороны: - Полная сенсорная экосистема - Богатая кастомизация - Профессиональный аудио-контент

Источники: - Breathwrk Official - App Store: Breathwrk

5. Oak¶

Визуализация: Animated Oak Tree + Minimal UI

Описание: - Три анимированных дыхательных упражнения - Прогресс показан через рост дуба - Кастомные иллюстрации (Sarah Kilcoyne) - Спокойная типографика

Дизайн-философия: - Вдохновлён архитектурой храмов и классической живописью - Минималистичный подход — фокус на практике - Светлая и тёмная темы

Настройки: - Фоновые звуки (опционально) - Отдельная громкость голоса и фона - Длительность 10-30 минут

Сильные стороны: - Простота и фокус - Красивые hand-made иллюстрации - Высокий рейтинг (4.8/5)

Источники: - Oak Official - UI Sources: Oak App

6. Othership¶

Визуализация: Music-driven + Guided Audio

Описание: - 500+ классов от топ-фасилитаторов - Музыкально-ориентированные сессии - Binaural beats для релаксации - 5 категорий: Up, Down, All-around, Body, Brain

Организация: - Сессии 0-10, 10-20, 20-30 минут - Не перегруженный интерфейс - Рекомендации на главной странице

Сильные стороны: - Богатая библиотека контента - Музыка снижает барьер входа - Streak и progress tracking

Источники: - Othership App

Типы анимаций¶

Классификация¶

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

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

ВДОХ (Inhale):
- Расширение формы
- Движение вверх/наружу
- Осветление цвета
- Появление элементов

ЗАДЕРЖКА (Hold):
- Статичное состояние
- Лёгкое "дыхание" / пульсация
- Фиксированный размер

ВЫДОХ (Exhale):
- Сжатие формы
- Движение вниз/внутрь
- Затемнение цвета
- Исчезновение элементов

Best Practices UX¶

1. Минимализм¶

Один фокусный элемент на экране
Убрать всё лишнее во время сессии
Чистый фон (solid color или subtle gradient)

2. Timing¶

Плавные transitions (ease-in-out)
Длительность анимации = длительность фазы
Anticipation перед сменой фазы (0.2-0.5 сек)

3. Обратная связь¶

Канал	Применение
Visual	Основной — анимация, цвет
Audio	Голос/звуки смены фазы
Haptic	Вибрация на мобильных
Text	Подсказки "Вдох"/"Выдох"

4. Цветовая палитра¶

Успокаивающие: синий, зелёный, фиолетовый
Энергизирующие: оранжевый, жёлтый (Headspace)
Нейтральные: серый, белый
Избегать: красный (ассоциация со стрессом)

5. Прогресс и мотивация¶

Показывать текущий цикл / общее количество
Таймер оставшегося времени
Streak tracking для habit formation
Визуализация достижений (растущее дерево в Oak)

Технические решения¶

CSS Animations¶

Плюсы: Простота, производительность, малый размер Минусы: Ограниченная сложность

/* Expanding Circle */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

.circle {
  animation: breathe 8s ease-in-out infinite;
}

Примеры: - CSS Only Box Breathing Visualizer - Breathing CSS Animation

JavaScript + CSS¶

Плюсы: Динамический timing, интерактивность Минусы: Больше кода

// Динамическое управление фазами
function setPhase(phase, duration) {
  element.style.transition = `transform ${duration}s ease-in-out`;
  element.classList.add(phase); // .inhale, .hold, .exhale
}

Примеры: - Interactive Breathing Exercise Web App

SVG Animations¶

Плюсы: Векторная графика, сложные формы Минусы: Сложнее в реализации

<animate attributeName="r" values="50;75;50" dur="8s" repeatCount="indefinite"/>

Lottie (After Effects → JSON)¶

Плюсы: Сложные анимации, малый размер, кросс-платформенность Минусы: Требует After Effects для создания

import lottie from 'lottie-web';
lottie.loadAnimation({
  container: element,
  path: 'breathing.json',
  loop: true
});

Canvas API¶

Плюсы: Полный контроль, particle effects Минусы: Сложность, производительность на слабых устройствах

Технические ресурсы¶

UI/UX анализ¶

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

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

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

Техника	Рекомендуемая визуализация	Сложность
Physiological Sigh	Два последовательных расширения круга + долгое сжатие	Средняя
Box Breathing	Точка движется по квадрату (4 стороны = 4 фазы)	Низкая
4-7-8 Breathing	Expanding circle с progress ring для каждой фазы	Средняя
Coherent Breathing	Wave animation или simple expanding circle	Низкая
Extended Exhale	Expanding circle с асимметричным timing	Низкая