Design Specification

Версия: 1.1
Дата: 31.03.2026
Адресат: UI/UX дизайнер
Связанные документы: Дизайн-система, Product Spec

Контекст

Lumo — не фитнес-трекер. Это спутник жизни для людей, которым важна эффективность. Дизайн должен транслировать: спокойную уверенность, премиальность без кричащей роскоши, невидимую технологию.

Продуктовая логика и структура экранов описана в Product Spec. Токены, цвета, типографика, компоненты — в Дизайн-система. Этот документ — о характере и ключевых решениях, которые задают опыт.

1. Характер дизайна

Одна фраза: минимализм с глубиной.

Меньше элементов — больше пространства каждому
Данные — герои, UI — невидимый контекст
Liquid Glass (Apple) как базовый визуальный язык: полупрозрачность, размытие, глубина вместо плоских поверхностей
Тёмная тема как основная (не опциональная) — светлой темы нет
Никаких декоративных линий, разделителей, иконок-заглушек

Ориентиры: приложение Health на iOS 26, Oura (тёмная версия), приложение Фото на iOS 26 (Liquid Glass навигация).

2. Главный экран — динамический фон и композиционные зоны

Концепция

Фон — не просто фотография, это пространственная сцена, в которую встроен интерфейс. UI не лежит поверх фона — он существует внутри него. Каждый элемент экрана занимает своё “географическое” место в пейзаже: небо, вершина, склон, предгорье.

Фон меняется в зависимости от времени суток — как динамические обои macOS/iOS.

Три состояния фона

Состояние	Время	Образ
Утро	06:00–11:00	Холодный рассвет, первый свет. Синево-серая гамма, чёткий горизонт. Тихо и ясно.
День	11:00–19:00	Полуденный или послеполудневый свет. Нейтральная тёплая гамма. Пространство и активность.
Вечер	19:00–06:00	Глубокая ночь или закат. Тёмно-синий, почти чёрный с тёплыми акцентами. Тишина.

Требования к изображениям

Высокое разрешение: минимум 1290×2796px (iPhone 15 Pro Max native)
Контент: природные сцены — горы, вода, небо, лес. Без людей, без техники
Фотографии должны быть специально скомпонованы под UI, а не выбраны случайно:
- Верхняя треть: открытое небо (светлее) — зона для metric-чипов
- ~35–55% высоты: пик или линия горизонта — зона для Readiness
- ~50–75% высоты: корпус склона с читаемой поверхностью — зона для рекомендации
- Нижняя четверть: тёмный передний план — зона для metric-карточек
Нижняя часть достаточно тёмная для белых текстов и glass-карточек
Переход между состояниями: плавный crossfade (~2–3 секунды)
Хранение: 3 базовых изображения, встроенных в приложение. В будущем — сезонные наборы

Пространственная композиция экрана (горный пример)

┌─────────────────────────────────────┐
│  ☁  SKY  ZONE  ☁                   │  ← небо: Quick Glance strip
│  · 8 214  · 7ч 20м  · 58мс  · 98% ·│    четыре значения, floating chips
│                                     │
│                    ★ 84             │  ← вершина горы: Readiness score
│                  ╱╲                 │    тонкий arc по форме силуэта
│                ╱    ╲  хорошо      │  ← склон: Recovery вписан в рельеф
│              ╱        ╲            │
│            ╱  [реком.]  ╲          │  ← тело горы: recommendation card
│          ╱_______________╲         │
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │  ← предгорье: metric cards
└─────────────────────────────────────┘

Glass-слой поверх фона

Все карточки и блоки рендерятся через backdrop-blur + полупрозрачная подложка. Фото “просвечивает” сквозь карточки. Степень прозрачности и blur варьируются по зонам — элементы в sky-зоне более прозрачны, карточки внизу плотнее.

3. Quick Glance Strip — мгновенный обзор метрик

Располагается в sky-зоне, выше Readiness. Это первое, что видит пользователь при открытии приложения — он не должен скроллить, чтобы получить картину дня.

Формат

Горизонтальная строка из 4 pill-чипов, равномерно распределённых по ширине экрана. Каждый чип — одно ключевое значение.

·  8 214 шаг  ·   7ч 20м   ·   58мс   ·   98%  ·

Дизайн чипов

Фон: surface-container-highest при 20–25% opacity — почти невидимая подложка, небо проступает насквозь
Без backdrop-blur на самих чипах (чтобы не “разрезать” небо) — blur только если небо очень светлое и текст не читается
Разделитель между чипами: тонкая точка · или вертикальная риска при 15% opacity
Типографика: label-sm (Inter) для значения + единица измерения, без заголовков метрик — только цифры
Цвет: белый 90% для значения, белый 45% для единицы
Tap на чип — push в детальный экран этой метрики

Набор метрик в чипах

По приоритету (отображаются первые 4 из доступных):

Шаги (с иконкой-шагами или без)
Сон (ч+мин)
HRV (мс)
SpO2 (%)

4. Блок Readiness + Recovery — интеграция с пейзажем

Занимает зону вершины/пика — визуально и буквально. Это не карточка. Это часть ландшафта.

Readiness

Крупная цифра (hero-размер, Manrope) — располагается у пика, как высотная отметка на карте
/100 — значительно меньше, рядом, белый 45%
Подпись зоны под цифрой: “Оптимально” / “Хорошо” / “Восстановление” / “Отдых” — label-md, Inter, белый 60%
Визуальное выражение score: тонкая светящаяся дуга, которая повторяет силуэт горного хребта — от левого края до правого, заполненность дуги = значение score. Дуга не круговая, она следует рельефу конкретного фото. Реализация: SVG-маска или Canvas, прозрачная к блюру фона. Цвет дуги: primary (#8ff5ff) при opacity 60–80%, с мягким glow (box-shadow 0 0 12px #8ff5ff40)
Дуга-индикатор не должна конкурировать с горой — она её подчёркивает

Recovery

Располагается ниже Readiness, на “склоне” — смещён чуть в сторону от центра, не прямо под score
Формат: текстовая зона (“Хорошо”) + компактный горизонтальный индикатор-риска (не круговой)
Типографика: title-sm для зоны, label-sm для “Recovery” как подпись
Визуальный вес в 3–4 раза меньше, чем у Readiness — подчинённый элемент

5. Карточка рекомендации — вписана в пейзаж

Располагается на “теле” горы — в зоне склона, ниже Readiness/Recovery.

Концепция

Карточка не должна ощущаться как прямоугольник, наклеенный поверх фотографии. Она должна быть горной дымкой — почти растворённой в пейзаже. Текст читается, но контейнер почти невидим.

Дизайн

Ширина: full-width минус spacing-4 с каждой стороны
Скругление: roundedness-xl
Фон: очень низкая плотность — surface-container-highest при 15–20% opacity + backdrop-blur: 28px. Это даёт эффект горного тумана, а не стеклянной плитки
Ghost Border при 10% opacity — едва заметно, только спецвыделение
Без иконки — только текст. Лаконичный текст рекомендации — он сам является визуальным элементом
Типографика: body-md (Inter), белый 95%
Выделенный action внутри текста: cyan #8ff5ff, как ссылка — не кнопка, не болд
Тон: спокойный, без восклицательных знаков

Адаптация к времени суток

Время	Фон	Карточка
Утро	Синево-серый рассвет	blur сильнее (32px), opacity 18% — карточка как утренняя дымка
День	Тёплый свет	blur средний (24px), opacity 22% — чуть плотнее для контраста
Вечер	Тёмно-синяя ночь	blur мягкий (20px), opacity 28% — тёплый оттенок подложки (#1a1625 при 28%)

Пример текста:

Ваша готовность сегодня оптимальна. Рекомендуем высокоинтенсивную тренировку до 18:00.

6. Карточки метрик — индивидуальный дизайн

Нет универсальной анатомии. Каждая карточка спроектирована под свою метрику так, чтобы максимально полезно и точно передавать суть данных. Общие правила:

Ширина: full-width минус spacing-4
Скругление: roundedness-xl
Фон: surface-container-highest при 40–50% opacity + backdrop-blur: 20px
Ghost Border при 15% opacity — опционально
Tap — вся карточка, навигация через push

6.1 Карточка Сна

Данные сна нелинейны и многомерны — значит, карточка должна это отражать.

Дизайн:

┌──────────────────────────────────────────┐
│  7:20           82                       │
│  часов сна      Sleep Score              │
│                                          │
│  ▓▓▓░░░▒▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░  │
│  Deep  REM      Light           Awake    │
└──────────────────────────────────────────┘

Верхняя строка: два героя — часы сна слева (Manrope display-sm) и Sleep Score справа (Manrope title-lg)
Нижний элемент: мини-гипнограмма — тонкая цветовая полоска во всю ширину карточки (высота ~6px), разбитая на фазы. Deep = глубокий фиолетовый, REM = cyan dim, Light = серо-синий, Awake = белый 30%. Это самый честный визуальный конспект ночи
Под полоской — четыре метки фаз без значений, просто ориентиры. label-xs, белый 40%
Без иконок сна, без луны, без облаков

6.2 Карточка Активности

Активность — это прогресс к цели. Значит, нужен прогрессивный индикатор как герой.

Дизайн:

┌──────────────────────────────────────────┐
│  ◕  8 214    438 ккал                    │
│     шагов    активных                   │
│  ▓▓▓▓▓▓▓▓▓░░░  82% цели                │
└──────────────────────────────────────────┘

Слева: незамкнутая дуга прогресса (~270°, как часы без нижнего сегмента). Внутри — только количество шагов крупно. Дуга заполнена на N% от дневной цели. Цвет заполнения: primary с glow. Трек: белый 12%
Справа: активные калории и активные минуты — стопкой, title-md и body-sm
Нижняя строка: тонкий горизонтальный индикатор “X% цели” — отдельно от дуги, для тех кто сразу хочет процент
Дуга — небольшая (44×44pt или 52×52pt), не доминирует, но структурирует карточку

6.3 Карточка Стресса

Стресс — это временно́й паттерн. Главное — не текущее значение, а как день прошёл.

Дизайн:

┌──────────────────────────────────────────┐
│  Спокойно           HRV  58 мс           │
│                                          │
│  ░▒▒▒▓▓▓▓▒▒░░░░░░░░ ← сейчас            │
│  0:00                              23:59 │
└──────────────────────────────────────────┘

Верхняя строка: текущий уровень стресса словом (“Спокойно” / “Умеренный” / “Высокий”) — слева, крупно (title-md). HRV как вторичная цифра — справа
Главный элемент: горизонтальный timeline от 00:00 до 23:59. Заполнен от начала дня до текущего момента. Сегменты окрашены по уровню стресса: зелёный dim = низкий, жёлтый dim = умеренный, тёплый красный dim = высокий. Маркер “сейчас” — тонкая белая вертикальная черта с мягким glow
Timeline-полоска: высота ~8px, скругления roundedness-full
Временны́е метки: только 0:00 и 23:59, label-xs, белый 35%

6.4 Карточка Циклов

Цикл — органичный процесс, не технический. Карточка должна быть мягкой и нейтральной по визуальному языку.

Дизайн:

┌──────────────────────────────────────────┐
│  ◐  День 18     Лютеальная фаза          │
│                                          │
│     Темп. 36.4°C  +0.2° от baseline     │
└──────────────────────────────────────────┘

Слева: фаза луны (символ или кастомная иконка) — визуальная метафора цикличности. Меняется по фазе цикла (новолуние = менструация, убывающая = лютеальная и т.д.)
Центр: “День N” крупно (title-md), название фазы под ним (body-sm, белый 60%)
Нижняя строка: базальная температура + дельта от baseline. Дельта цветом: тёплый — повышена, нейтральный — норма
Без прогресс-кольца, без числовых шкал — только контекст

7. Навигация

Таббар

Предпочтительно — без таббара. Навигация между разделами через другой паттерн (свайп, жест, меню).

Если таббар необходим: выполнить в стиле Liquid Glass — плавающий, полупрозрачный, с backdrop-blur, без жёстких границ. Референс: “Фото” / “Health” на iOS 18.

Навигация внутри метрик — Push

Tap на карточку → push transition (стандартный iOS push, слайд справа налево)
Back-свайп от левого края — стандартное поведение iOS, не переопределять
Никаких sheet/modal для детальных экранов метрик — только push
Фильтры день/неделя/месяц: pill-chips в верхней части детального экрана
Слой 0 (сырые данные): отдельная секция внизу детального экрана, визуально приглушённая

8. Детальные экраны метрик

Каждая метрика Слоя 1 имеет детальный экран.

Фон: тёмный, без динамического фото — чтобы не конкурировать с графиками
Фильтр день/неделя/месяц: переключатель сверху, при переключении — анимированная смена данных
Слой 0 в конце экрана: заголовок “Источники данных”, приглушённые цифры в сетке

8.1 Сон

Гипнограмма (таймлайн фаз) — цветовая кодировка: Deep = фиолетовый dim, REM = cyan dim, Light = серо-синий, Awake = белый 25%
При неделе/месяце: Sleep Score как линейный график
Круговая диаграмма распределения фаз — на усмотрение дизайнера

8.2 Активность

День: почасовой столбчатый график, прогресс к цели
Неделя/месяц: Activity Score по дням

8.3 Циклы

Без фильтра день/неделя/месяц — только по циклу
Визуальный язык: Apple Health Cycle Tracking как референс
График температуры с пунктирным baseline

8.4 Стресс

День: timeline стресса (цветовая шкала на временной оси)
Неделя: средний уровень по дням

9. Графики и чарты — Liquid Glass

Все визуализации данных выполняются в стиле жидкого стекла. Это не косметика — это системное решение, которое интегрирует чарты в общий визуальный язык.

Принципы

Контейнер чарта: glass-карточка с backdrop-blur: 20px и surface-container-highest при 35% — чарт “плавает” в пространстве, а не сидит на непрозрачном фоне
Нет фоновых сеток и осей — только минимально необходимые подписи значений
Всё что можно — полупрозрачно. Треки, заполнения, подложки — всегда с opacity, никогда 100%

Линейные графики (Sleep Score, HRV, Activity Score)

Линия: 2px, primary (#8ff5ff) или secondary (#ac89ff), opacity 90%
Glow под линией: filter: drop-shadow(0 0 6px #8ff5ff60)
Area fill под линией: градиент от primary при 20% до прозрачного — создаёт ощущение светящегося шлейфа
Точки данных: маленькие (4pt), только при hover/tap, не по умолчанию

Столбчатые графики (Activity по часам, Stress по дням)

Каждый столбец: roundedness-full сверху, glass-подложка
Заполненная часть: primary или тематический цвет при 60–70% opacity
Трек (пустая часть): surface-variant при 20% opacity
Активный столбец (текущий час/день): primary при 85% + glow

Гипнограмма (таймлайн фаз сна)

Весь таймлайн — горизонтальный glass-контейнер с backdrop-blur
Каждая фаза — сегмент внутри контейнера, окрашенный glass-цветом фазы
Границы между фазами: не линии, а мягкий переход через opacity
Высота таймлайна: 28–32px на детальном экране

Прогресс-дуги (Activity, Readiness)

Трек: surface-variant при 15%
Заполнение: градиент primary → secondary, opacity 80%
Glow конечной точки: box-shadow: 0 0 10px #8ff5ff80

Timeline стресса

Полоска: glass-контейнер, roundedness-full
Сегменты: цвет по уровню стресса, каждый сегмент semi-transparent с backdrop-blur поверх фона
Эффект: полоска выглядит как светящийся индикатор, а не как плоская шкала

10. Onboarding

Минималистичный — минимум экранов
Сбор данных профиля: пол, возраст, рост/вес, цели сна, цели шагов
Состояние до baseline (первые 14 дней): пустые состояния для Readiness/Recovery — без пугающих нулей. Нейтральный текст: “Накапливаем ваши данные. Персональные индексы появятся через N дней”
Стиль пустых состояний: тёмный фон, крупная приглушённая типографика, никаких иллюстраций с персонажами

11. Что не делать

Не использовать красный цвет для алертов и предупреждений — только нейтральный тон
Не использовать плоские непрозрачные подложки для карточек
Не использовать стандартные иконки SF Symbols без кастомизации
Не перегружать экраны данными — если сомневаешься, убирай
Не использовать анимации ради анимаций — только там, где они добавляют смысл
Не делать светлую тему
Не использовать sheet/modal для перехода в детальные экраны метрик — только push
Не выбирать фоновые фотографии без учёта зонирования экрана — фото должно быть скомпоновано под UI

Версия: 1.1
Последнее обновление: 31.03.2026