Дизайн-система и ключевые экраны

Тёплый, заботливый интерфейс для пациента и точный рабочий дашборд для врача. Web + PWA, единый визуальный язык.

🎨 Дизайн-система 📱 PWA для пациента 🩺 Веб-кабинет врача ♿ Доступность AA
Основа

Принципы дизайна

Человек приходит сюда в самый тревожный момент жизни. Интерфейс должен снижать тревогу, а не добавлять её.

🤲
Спокойствие прежде всего

Мягкие тона, воздух, округлые формы. Никаких резких красных тревог там, где можно поддержать.

👣
Один шаг за раз

В хаосе после диагноза показываем ровно следующее действие, а не всю систему сразу.

💬
Человеческий язык

Говорим как заботливый помощник, без канцелярита и пугающей терминологии.

30 секунд в день

Самоотчёт пациента — быстрый и лёгкий. Уважаем силы и время человека.

Дизайн-система · 01

Цветовая палитра

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

Глубокий синий
#1F3D63
Основной, действия
Синий тёмный
#152A48
Заголовки, hover
Золото
#CBA15E
Тёплый акцент, солнце
Золото глубокое
#B0822F
Забота, эмоция
Тёплый белый
#FCFAF6
Фон
Синий данных
#3E6391
Графики, врач
Песок
#D9B775
Светлый акцент
Красный флаг
#C5564B
Только клиника
Дизайн-система · 02

Типографика

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

Display / 42px / 800
Вы не одни на этом пути
H2 / 30px / 800
Маршрут пациента
H3 / 18px / 700
План на сегодня
Body / 16px / 400
Заполните самочувствие — это займёт меньше минуты и поможет врачу видеть вашу динамику.
Caption / 13px / 500
Данные с Apple Watch обновлены 12 минут назад
Дизайн-система · 03

Компоненты

Базовый набор UI-элементов в едином стиле — кнопки, бейджи статусов, индекс состояния и метрики.

Кнопки

Бейджи и статусы

● Стабильно● Нужно внимание▲ Красный флаг◆ Данные часов
Сон 7/10Энергия 4/10Питание 6/10

Индекс состояния

72состояние
😴 Сон
⚡ Энергия
🚶 Активность
🍎 Питание

Иконки-категории

🥗
🧘
😴
💊
🚶
💬

Округлые «подушки» 14px со спокойным фоном — узнаваемый язык категорий по всему продукту.

Приложение · Пациент (PWA)

Экраны пациента

Мобильное PWA-приложение: точка входа в самый тревожный момент. Главная задача — дать ощущение «я знаю, что делать дальше» и «меня сопровождают».

Доброе утро
Анна
🌿
Индекс состояния сегодня
72
Состояние стабильное.
Чуть меньше энергии, чем вчера 💚
Сейчас важно
✍️
Как вы себя чувствуете?
30 секунд · отметить день
🚶
2 410 / 4 000 шагов
🏠Главная
🗺️Маршрут
📚Знания
💬Люди
ГлавнаяИндекс + что важно сейчас
Ваш маршрут
РМЖ · Химиотерапия
🗺️
Диагностика
Завершено
Химиотерапия №3
Вы здесь · до 14 июля
Что делать сейчас
• Пить 1.8 л воды
• Следить за тошнотой
• Вопросы врачу — собрать список
Послеоперационный период
Впереди
Восстановление
🏠Главная
🗺️Маршрут
📚Знания
💬Люди
Маршрут пациентаДиагноз → стадия → лечение
Шаг 1 из 4 · 30 сек
Как самочувствие?
✍️
Уровень энергии сегодня
😔
😐
🙂
😊
🤩
Тошнота
НетЛёгкаяСильная
Боль

Можно пропустить и вернуться позже

Ежедневный самоотчётPROs · легко и быстро
Подобрано под ваш этап
Библиотека знаний
📚
ПИТАНИЕЧто можно есть во время химии
ПОБОЧКИКак справиться с тошнотой
ПСИХОЛОГИЯТревога — это нормально
АКТИВНОСТЬМожно ли заниматься спортом
🏠Главная
🗺️Маршрут
📚Знания
💬Люди
Библиотека знанийКонтент привязан к этапу
Среда, 24 июня
План на день
📋
Выполнено
3 из 5 задач 🎉
Пройти 4 000 шагов
Выпить 1.8 л воды
Урок по питанию
Заполнить самочувствие
Дыхательная практика 5 мин
🏠Главная
🗺️Маршрут
📚Знания
💬Люди
Персональный планАдаптируется под состояние
Сообщество · РМЖ
Вы не одни 💚
💬
М
Мария
2 ч назад · Химия №4

Девочки, на третьей химии стало легче с тошнотой. Имбирный чай реально помогает 🫶

💚 24💬 8 ответов
О
Ольга
5 ч назад

Прошла последнюю! Спасибо всем за поддержку этот год 🎗️

💚 116💬 31 ответ
🏠Главная
🗺️Маршрут
📚Знания
💬Люди
СообществоОстаются ради людей
Веб-кабинет · Врач и диспансер

Экраны врача

Не медицинская история болезни, а дашборд сопровождения между визитами. Система показывает только красные флаги — врач не тратит время на тех, у кого всё стабильно.

🔒 clinic.onkonavigator.ru / пациенты

Доктор Иванова

180 пациентов · 35 на химиотерапии · 22 после операции

180
Активных пациентов
3
Красных флага
6.8
Сред. индекс
82%
Приверженность
ПациентЭтапСостояниеВес (2 нед)Динамика
И
Иванов П.
Химия №3
Лечение▲ Риск−4 кг
С
Смирнова А.
После операции
Восстановление● Внимание−1 кг
К
Кузнецова М.
Химия №5
Лечение● Стабильно+0.5 кг
П
Петрова Е.
Наблюдение
Восстановление● Стабильно+1 кг
🔒 clinic.onkonavigator.ru / пациент / Иванов

Иванов П. · 58 лет

РМЖ-протокол · Химиотерапия №3 · цифровой двойник между визитами

▲ Красный флаг
Система подсветила риск
За 2 недели: сон −35%, шаги −50%, аппетит снижен, потеря веса 4 кг. Рекомендуется связаться с пациентом.
Вес · последние 14 дней
Сон / ночь
4.8 ч
−35%
Шаги / день
1 980
−50%
Самочувствие
3/10
аппетит снижен
Источник данных
⌚ Apple Watch
синхр. 12 мин назад

Без персональных данных в общих отчётах диспансера. Врач видит динамику, руководство — обезличенные агрегаты.

ОнкоНавигатор · Дизайн-концепт · Web + PWA
Тёплая забота для пациента · клиническая точность для врача