Sonaura · Design System · V3

V3 — на чём построен минимализм

Витринная подача канона V3-минимализма. Источник текста — v3-minimalism-guide.md; при расхождении правит канон.

Текст ниже — канонический документ стиля V3, управляющий источник принципов минимализма (принят DK 2026-06-21 как язык всего приложения; перечни V3 в DESIGN-GUIDE и DESIGN — производные от канона и ссылаются на него). Общий фундамент для переработки V3 (первая попытка отклонена за «криптоплитки» — бессистемное удаление). Читают агенты-проектировщики и критик-валидатор Фазы 1. Цель V3 — стильный современный минимализм как дисциплина внимания, а не вычитание смысла.
Часть A

Концепция: UX-минимализм 2026

Базовый тезис. Минимализм — это дисциплина внимания, а не дефицит элементов. Убирается не информация, а шум, дублирование и декор. «Меньше» — про отвлекающие факторы, не про смысл. Если после «упрощения» пользователю приходится догадываться — это поломка, а не минимализм.

Принципы

1

Намеренная сдержанность

Вычитаем шум (рамки, тени, разделители, повторы, декор-иконки), не смысл. Критерий: «без элемента понятность сохраняется/растёт?» — если падает, остаётся.

2

Ясная визуальная иерархия

Размером, насыщенностью, положением, воздухом; не линиями и плашками.

3

Воздух как структура

Негативное пространство группирует и направляет; служит контенту, не «чистоте».

4

Типографический ритм

Мало ступеней размера, выверенные интервалы; типографика заменяет декор.

5

Один фокус на экране

Одна задача, один очевидный следующий шаг; вторичное тише, но доступно.

6

Цвет = акцент

Нейтральная база, бирюза точечно (действие/состояние/точка); «акцентно всё» = «не акцентно ничто».

7

Прогрессивное раскрытие со вкусом

Сначала суть, детали по запросу; свёрнутый слой понятен сам по себе.

8

Сдержанная анимация

Объясняет переходы, быстрая, функциональная; не украшение.

9

Content-first (Rams «less but better»)

Финальный фильтр: стало понятнее/лучше — или просто меньше?

Антипаттерны — стоп-лист
Криптоплитки (однословные ярлыки вместо фактов) Иконки без подписи / вместо текста Пустые экраны ради пустоты Бессистемное вычитание контента Мнимая иерархия (плоскость без приоритетов) Загадочность вместо лаконичности Скрытие базовой функции в раскрытии Акцент-инфляция / декор-цвет Анимация-украшение Эстетика поверх задачи

Причина отклонения первой попытки V3 — криптоплитки: «навык / регулярность / путь / норма».

Тест на отличие минимализма от поломки V3

«Поймёт ли пользователь смысл КАЖДОГО элемента без объяснения, и стало ли понятнее, чем было?»

Настоящий минимализм: меньше элементов, столько же или больше понятности.

Часть B

Рекомендации проектировщику

Следовать дословно.

✓ DO
  1. Один фокус на экран (одна главная кнопка; опросник — один вопрос/экран).
  2. Иерархия размером, не рамками (главный элемент ≈1.6×+ от body; без линий-разделителей).
  3. Вопрос/тезис = сам заголовок крупным шрифтом; подтекст минимальный, только если снимает неоднозначность.
  4. Воздух направленный, не равномерный (micro vs macro; группировать связанное).
  5. Карточки выбора сдержанные, но с явным аффордансом (граница/заливка, понятная подпись, тап ≥44px).
  6. Цвет = смысл точечно (бирюза #2BB4C6 — единственный акцент).
  7. Статусные цвета с фиксированным смыслом (закрепить один раз).
  8. Иконки — только С подписью и с функцией (не замена тексту).
  9. Прогрессивное раскрытие глубины, не сути.
  10. Gradual onboarding (3–5 обязательных шагов; остальное позже).
  11. Типографический ритм.
  12. Моушн сохраняет контекст.
✕ DON'T
  • Однословные криптоплитки
  • Иконки без подписи
  • Пустые экраны ради пустоты
  • Бессистемное вычитание
  • Мнимая иерархия
  • Загадочность вместо лаконичности
  • Скрытие базовой функции
  • Акцент-инфляция
  • Потеря аффорданса (flat-ловушка)
  • Эстетика поверх задачи

«Минимизируй подачу, не смысл»

МОЖНО убирать (шум)НЕЛЬЗЯ (смысл)
Обрамление (рамки / тени / разделители / плашки) Суть вопроса / действия
Дубли Понятность каждого элемента
Длинноты → короче (не криптично) Контекст, снимающий неоднозначность
Декор-иконки Безопасность / Tier-1 (показывать явно)
Редкие опции → в раскрытие / позже Аффорданс
Глубину (обоснования / тренды) → за тап Видимый следующий шаг

Брендовые приметы стильного V3 Sonaura

  • Спокойствие как ощущение — бирюза точечно на slate, много воздуха, ничего не мигает.
  • Голос Sona — проводник, не система — тёплый, на «ты», человеческий.
  • Без геймификации.
  • Премиальность через дисциплину — один язык цвета, агрессивная типо-иерархия, единый набор компонентов.
  • Иконка тёплая, но с функцией и подписью.
  • Тёмный фон — только где оправдан функцией.

По типам экранов

Видео-интро

Один фокус (плеер) + крупный заголовок-обещание + одна кнопка; под видео одна строка сути.

Опросник-шкала

Вопрос = крупный заголовок; варианты — сдержанные карточки с подписью, тап ≥44; выбранное — бирюза; подписи концов шкалы словами, не иконками.

Гейты-тогглы

Формулировка словами что включается; вкл/выкл явно (цвет+позиция); Tier-1 явно, не прятать.

Итог

Одно доминирующее (результат крупно), вторичное тише; каждый факт — фразой, не плиткой; детали за тап.

Мост

Одна мысль крупно + один воздух + одна кнопка; тёплая фраза Sona; мягкий переход.

Якорь имени экрана и шкала заголовков

  • Имя экрана = якорь .screen-anchor размером --fs-h2 — умеренный заголовок-ориентир «где я нахожусь», а не доминанта экрана.
  • Самый крупный кегль --fs-display зарезервирован за «главной мыслью» экрана — единственный смысловой пик (вопрос опросника, результат, ключевой тезис моста). Служебное имя экрана его не занимает.
  • Один экран — один пик --fs-display: имя экрана и главная мысль не конкурируют размером.

Сквозной критерий приёмки V3

Меньше шума, та же/большая понятность, один фокус, бирюза только как акцент-смысл, каждый элемент проходит тест «понятен без объяснения». Любой «нет» — фикс до показа DK.

Часть C

Референсы и примеры

Конкретика к Частям A–B: реальные экраны лидеров healthtech/wellness, примеры «хорошо/плохо» по нашим типам экранов и worked-разбор переделки «На что настроиться».

Таблица референсов

ПриложениеЭкран / паттернЧто на экранеПочему стильный минимализмИсточник
Oura Today-таб 3 крупных числа (Sleep/Readiness/Activity) сверху + одна карточка-инсайт «daily highlight» + Timeline Голой цифры нет: под числом baseline + «top contributors» за разворотом ouraring.com/blog/new-oura-app-experience
Oura Vitals-таб Список метрик, у каждой baseline + разворот деталей по стрелке Один экран = одна функция; глубина под тапом liveworksleep.com/oura-app-features
WHOOP Recovery Тёмная панель; главный сигнал — цвет Recovery (зел/жёлт/красн) «Тихий» минимализм: нет нагов/анимаций, pull-модель vertu.com/guides/whoop-vs-oura
Apple Watch Кольца Activity 3 кольца Move/Exercise/Stand Анти-референс: чисто, но давит (награды, толкает) — контраст pull-модели medium.com/design-bootcamp
Headspace Онбординг Минимум текста, щедрый воздух, крупная иллюстрация-персонаж «Каждый цвет/форма намеренны»; −38% отвала через снятие трения raw.studio/blog/how-headspace-designs-for-mindfulness
Headspace Урок-экраны Округлые персонажи, сплошные цвета, метафоры (пар/звёзды) Тепло через форму, не декор uiland.design/screens/headspace
Balance Home + плеер Одна следующая сессия крупно; в плеере контролы исчезают Одна сущность/экран + воздух + цветокод типов onno.studio/Balance-Meditation-App-Design
Levels Zone Review Один Zone Score 1–10 крупно как вердикт Сложная биометрия свёрнута в одну оценку support.levels.com/article/32-zone-scores
Flo Дизайн-система 14 типо-стилей, мало тинтов, семантические токены Минимализм системный — дисциплина палитры medium.com/flo-health/flo-design-system-part-1
Noom Опросник-слайдеры Слайдер между двумя словесными якорями, тонкий сдвиг фона Шкала без чисел: 2 якоря + визуальная обратная связь revenuecat.com — Noom teardown
Noom Экран-итог Дата цели крупно + «We've helped 3,627,436» + график траектории Одна доминанта + число-доверие + график-переформулировка revenuecat.com — Noom teardown
Noom Интерстициал «Calculating your plan» = пауза + обучающий факт; «That's an important first step» Переходный экран несёт смысл, не спиннер revenuecat.com — Noom teardown

Хорошо / плохо по типам наших экранов

Видео-интро
✓ хорошо

Один фокус-плеер: крупный заголовок-обещание (≈1.7× body) → плеер во всю ширину → одна строка сути тише → одна кнопка «Дальше» бирюзой.

✕ плохо

Под видео список «что узнаете» + таймкоды + соц-доказательство (фокус размыт).

Опросник-шкала
✓ хорошо

Вопрос = крупный заголовок; шкала со словесными якорями («Совсем не беспокоит» … «Невыносимо»), размечать больше точек (не только концы), выбранное — бирюза, «Вопрос 4 из 10», под чувствительным — строка-причина.

✕ плохо

Голая 0–10 только с краями + 3 вопроса на экране + регистрация до прохождения.

Гейты-тогглы
✓ хорошо

Строка-смысл словами («Напоминания о практике вечером») + тоггл, вкл = бирюза+позиция; Tier-1 явно; вся карточка тап ≥44px.

✕ плохо

Однословные ярлыки-тогглы («Звук»/«Путь»/«Норма») + плоский серый тоггл (flat-ловушка).

Итог
✓ хорошо

Одна доминирующая метрика 2–3× крупнее (правило 40-30-20-10: 40% — главное крупно, 30% — 2-3 вторичных, 20% — тренд, 10% — навигация); плотность 3:1 (глаз тянется туда, где плотно); каждый факт фразой, детали за тап (как Oura).

✕ плохо

4–6 равновеликих плиток-метрик в сетке без доминанты.

Мост
✓ хорошо

Одна мысль крупно + воздух + одна кнопка + тёплая фраза Sona; при расчёте — пауза + обучающий факт (Noom).

✕ плохо

Голый спиннер ИЛИ плотный абзац в три мысли на «переходном» экране.

Разбор кейса: переделка «На что настроиться» (expectations)

Было — отклонено
навыкрегулярностьпутьнорма

4 факта схлопнули в криптоплитки — ребус, смысл утрачен, каждый элемент непонятен без объяснения (провал теста Части A).

Стало — главная мысль + 4 живых факта

Это путь, а не кнопка.Облегчение приходит как навык — от практики, не от одного сеанса.

  • Это навык, который тренируется — мозг учится не цепляться за звук.
  • Работает регулярность, не интенсивность — 10 минут в день важнее часа раз в неделю.
  • Будет неровно — и это нормально — хорошие и трудные дни чередуются.
  • Ты не один в этом — Sona рядом на каждом шаге.
Я готов начать

Главная мысль — ≈1.8–2.0× body, верхний якорь, ~40% высоты + воздух. Факты — живыми фразами, вертикальный stack, 1.0–1.1× body, macro-воздух 24–28px между ними, без рамок/разделителей, бирюзовый маркер-точка слева (единственный акцент). Внизу — одна кнопка «Я готов начать» бирюзой.

Альтернатива «одна мысль + раскрытие»

Только главная мысль крупно + строка-ссылка «Что меня ждёт →», за тапом — те же 4 факта (раскрытие глубины, не сути; свёрнутый слой понятен сам по себе).

Почему это минимализм, а не вычитание

Элементов меньше (ушли рамки/плашки/декор), понятность та же/выше — каждый факт читается без расшифровки; иерархия размером и воздухом, не линиями (как Oura Today); «голого ярлыка не бывает», как «голой цифры не бывает» у Oura/Levels; бирюза только акцентом. Это «less but better»: убрали шум подачи, сохранили все 4 смысла.