design: анализ Ultrahuman Ring PRO для вдохновения Pulse
This commit is contained in:
137
Дизайн-инспирация/Ultrahuman Ring PRO.md
Normal file
137
Дизайн-инспирация/Ultrahuman Ring PRO.md
Normal file
@@ -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*
|
||||
Reference in New Issue
Block a user