From e2cbac051ac13099d8d78f10743c21fa4b90a036 Mon Sep 17 00:00:00 2001 From: Cosmo Date: Thu, 2 Apr 2026 15:42:44 +0000 Subject: [PATCH] =?UTF-8?q?design:=20=D0=B0=D0=BD=D0=B0=D0=BB=D0=B8=D0=B7?= =?UTF-8?q?=20Ultrahuman=20Ring=20PRO=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D0=B4?= =?UTF-8?q?=D0=BE=D1=85=D0=BD=D0=BE=D0=B2=D0=B5=D0=BD=D0=B8=D1=8F=20Pulse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Дизайн-инспирация/Ultrahuman Ring PRO.md | 137 +++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 Дизайн-инспирация/Ultrahuman Ring PRO.md diff --git a/Дизайн-инспирация/Ultrahuman Ring PRO.md b/Дизайн-инспирация/Ultrahuman Ring PRO.md new file mode 100644 index 0000000..c7034f5 --- /dev/null +++ b/Дизайн-инспирация/Ultrahuman Ring PRO.md @@ -0,0 +1,137 @@ +# Ultrahuman Ring PRO — Анализ дизайна и UX + +> Источник: https://www.ultrahuman.com/global/ring-pro/ +> Сохранено: 2026-04-02 +> Цель: вдохновение для редизайна Pulse App + +--- + +## 🎨 Визуальный дизайн сайта + +### Общий стиль +- **Тёмная тема** как основная — почти чёрный фон (`#0a0a0a`, `#111`), текст белый +- **Акцентный цвет** — насыщенный тёмно-зелёный / teal (`#00c896` примерно), используется для иконок, индикаторов, меток состояния +- **Типографика** — крупные, жирные заголовки (видимо sans-serif, похоже на Inter/Neue Haas), огромный кегль на hero-секциях +- **Контраст** — очень высокий, метрики выделяются большими цифрами на тёмном фоне + +### Фотографии и визуалы +- Телефон в руке — реалистичные 3D-рендеры, не скриншоты +- Фоновые фото людей в движении — размытые, тёмные, атмосферные (оранжевые, синие градиенты) +- Каждая функция — отдельная «карточка» с реальным скриншотом приложения + фото/паттерн на фоне +- Использование градиентных blob-овалов как фоновых элементов (зелёные, синие, розовые свечения) + +### Компоненты +- **Таб-бар** внизу экрана телефона — горизонтальный, полупрозрачный тёмный фон, активный таб белый жирный +- **Карточки метрик** — скруглённые углы, плотный padding, маленький лейбл сверху + большое число +- **Индикаторы статуса** — цветные теги (зелёный «Excellent», красный «Needs attention») +- **Мини-графики** — sparkline прямо в карточке, тонкие линии +- **Прогресс-бар** — тонкий, цветной (зелёный/красный) + +--- + +## 📱 UX и структура приложения + +### Навигация +Четыре основных раздела в таб-баре: +| Таб | Содержимое | +|-----|-----------| +| **Sleep** | Sleep Index, стадии сна, REM/Deep/Light, детальный timeline | +| **Vitals** | HR, RHR, HRV, VO2 Max, Temp, Cardio Age | +| **PowerPlugs** | Маркетплейс плагинов (Women's Health, Respiratory, Heart) | +| **Longevity** | Ultra Age = Brain Age + Pulse Age + Blood Age | + +### Ключевые экраны + +#### Dashboard / Longevity +- Центральный элемент — **большое число** (возраст: 32, с маркером "+3 years older") +- Под ним — объяснение одной фразой: *"You're currently aging at a faster aging pace than expected for your age"* +- Contributors: три субметрики (Brain Age 32, Pulse Age 28, Blood Age 31) с иконками + +#### Sleep +- Score крупно (74), под ним timeline-график сна по стадиям +- Стадии: Awake, REM, Light Sleep, Deep Sleep — цветовая кодировка +- Мини-гистограмма активности по ночи + +#### Vitals +- Сетка карточек 2×n +- Каждая карточка: лейбл + значение + delta (`+2`) + статус (Within typical range) + мини-sparkline +- Метрики: Heart Rate, Resting HR, HRV, VO2 Max, Temp Deviation, Cardio Age + +#### PowerPlugs +- App Store-стиль: карточки с gradient-обложками +- Каждый плагин: иконка + название + категория + кнопка Get / Installed + +--- + +## 💡 Фичи для вдохновения в Pulse + +### Что можно взять напрямую + +| Идея | Где в Pulse | Сложность | +|------|------------|-----------| +| **Readiness Score как центральный элемент** — большое число, одна фраза-объяснение | Health Dashboard | Низкая — данные уже есть | +| **Contributors под скором** — разбивка на 3 субметрики (сон, HRV, RHR) | Health Dashboard | Низкая | +| **Цветовые статусы** — Excellent / Good / Needs attention | Везде | Низкая | +| **Sparkline в карточке** — мини-график прямо рядом с числом | Health, Финансы | Средняя | +| **Tab-bar снизу** — Sleep / Vitals / Habits / Finance | Главная навигация | Низкая | +| **Timeline сна** — гистограмма по часам с фазами | Sleep раздел | Средняя | +| **Delta значений** — `+2 bpm vs yesterday` рядом с числом | Все метрики | Низкая | + +### Концепции посложнее + +| Идея | Описание | Сложность | +|------|---------|-----------| +| **"Biological Age" аналог** | Индекс долгосрочного здоровья на основе сна + HRV + активности | Высокая | +| **PowerPlugs аналог** | Маркетплейс трекеров/модулей (привычки, финансы, здоровье) | Высокая | +| **AI-объяснения** (как Jade) | *"Low glymphatic clearance is slowing mental recovery"* — причина + рекомендация | Высокая | +| **Stress Rhythm** | Трекинг стресса по HRV в течение дня | Высокая (нет датчика) | + +--- + +## 🖌️ Дизайн-система для адаптации в Pulse + +### Цвета +``` +Фон: #0d0d0d — #111111 +Карточки: #1a1a1a — #1e1e1e +Акцент: #00c896 (teal/зелёный) — уже близко к нашему Deep Teal +Хорошо: #00c896 green +Внимание: #ff4d4d red +Нейтральный: #888888 gray +Текст: #ffffff primary, #aaaaaa secondary +``` + +### Типографика +- Заголовки: очень крупные (48px+), жирные, Inter или аналог +- Метрики: 32–48px, bold +- Лейблы: 10–12px, uppercase, letter-spacing +- Описание: 14px, regular, серый + +### Карточки +``` +border-radius: 16–20px +padding: 16–20px +background: rgba(255,255,255,0.05) или #1e1e1e +``` + +--- + +## 📋 Приоритетный план для Pulse + +**Фаза 1 (быстрые wins):** +1. Редизайн Health Dashboard — большой Readiness Score + 3 contributors +2. Добавить цветовые статусы к метрикам (Excellent / Needs attention) +3. Delta значений (`+2 vs yesterday`) везде + +**Фаза 2 (средний срок):** +4. Sparklines в карточках метрик +5. Timeline-график сна по фазам +6. Tab-bar навигация (Sleep / Vitals / Habits / Finance) + +**Фаза 3 (амбициозно):** +7. AI-интерпретации метрик (Cosmo объясняет что значит HRV = 45) +8. "Pulse Age" — агрегированный индекс здоровья + +--- + +*Сохранено Cosmo, 02.04.2026*