7.5 KiB
7.5 KiB
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):
- Редизайн Health Dashboard — большой Readiness Score + 3 contributors
- Добавить цветовые статусы к метрикам (Excellent / Needs attention)
- 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