Перейти к содержимому
Все работы

HEALTHTECH · 2023

Clinio

Онлайн-консультации с врачами: от записи на приём до заключения в медицинской карте.

Результат

  • Платформа запущена с нуля с кабинетами пациента и врача.
  • В продукт вошли онлайн-консультации, медкарта, чаты, вопросы врачам, рекомендации, закрытый клуб и консилиумы.
  • Передал функции в разработку и участвовал в их тестировании и доработке.

Clinio

Интерактивное демо — можно переключать экраны и пробовать действия.

Задача

Нужно было спроектировать сервис с кабинетами пациента и врача. Их работа связана данными консультации: пациент готовится к приёму, врач изучает анамнез и составляет заключение. Я связал подготовку и результат приёма: бот передаёт ответы врачу заранее, а заключение и рекомендации остаются в медкарте пациента.

01

Вопрос и доступ к медкарте

Для ответа врачу может понадобиться история пациента. Я связал вопрос с медкартой, сохранив отдельное разрешение на доступ. Врач может учитывать медицинские данные в ответе, а пациент определяет, открывать ли их в этом вопросе.

Подготовка вопроса проходит через четыре шага: содержание, сведения о пациенте, условия публикации и документы. После отправки доступны дополнения, загрузка материалов, выбор полезных ответов и отзыв врачу. Ожидание оплаты и закрытие вопроса показаны отдельно.

Обзор раздела

02

Разные записи в медицинской карте

Консультация, результат анализа и запись о прививке требуют разных деталей. Поэтому я выделил типы записей в медкарте и предусмотрел для них отдельные страницы. Заключения и рекомендации сохраняются здесь после приёма, а показатели анализов можно смотреть в динамике.

В медкарте семь типов записей: консультации, анализы, обследования, направления, выписки, справки и прививки. Для них показаны списки, детали и доступные формы добавления; основные данные пациента редактируются отдельно.

Все записи и основные показатели

03

Консультация со стороны пациента

У пациента собственный путь: выбрать специалиста, подготовить обращение, подтвердить контакт и оплатить консультацию. После оплаты открывается чат. Бот уточняет сведения перед ответом врача; документы, ответ и рекомендации остаются рядом с обсуждением. Завершение, жалоба и отмена предусмотрены отдельными состояниями.

Только спросить · форма

04

Заключение по консультации

Для заключения врачу нужны вопрос и сведения о пациенте. Я включил их в работу с выбранной консультацией, рядом с редактором заключения. Врач изучает анамнез и документы, затем передаёт пациенту ответ, рекомендации и направления на анализы или обследования.

Рекомендации связываются с выбранными врачами, клиниками, услугами и лекарствами. Выбор клиники продолжается выбором специалиста; выбранные позиции возвращаются в заключение.

Обзор раздела

05

Закрытый клуб врачей

Профиль для пациентов и общение с коллегами рассчитаны на разных читателей. Поэтому я отделил закрытый клуб от кабинета консультаций. В клубе есть собственный профиль автора, публикации и монетизация контента; доступ к сообществу запрашивается отдельно.

В клубном профиле собраны опыт, образование, научные работы, награды и документы. Заявка на доступ, лента, редактор публикации и материалы автора показаны самостоятельными экранами.

Доступ в закрытый клуб

06

Обсуждение и заключения консилиума

Участники консилиума обсуждают один случай, при этом каждый врач готовит своё заключение. Я разделил общий чат и персональные выводы: обсуждение помогает сопоставить гипотезы, а организатор получает заключения от каждого участника.

При создании организатор задаёт тему, число мест и приглашает коллег. Входящие приглашения, заявки на участие, архив и полученные заключения имеют отдельные представления для организатора и участника.

Обзор раздела

07

Баланс и способы оплаты

В кабинете собраны баланс, СКоины, сохранённые карты и история операций. Пополнение проходит через выбор суммы и способа оплаты. Привязка и удаление карты, а также заявка на вывод оформлены отдельными действиями.

Баланс, карты и транзакции

08

Аккаунт, профиль и условия работы

Настройки разделяют данные аккаунта, профессиональные сведения, условия приёмов и два профиля врача — публичный и клубный. Врач задаёт расписание, отпуск, цены и доступные форматы обращения. Контакты и уведомления настраиваются отдельно от информации, которую видят пациенты и коллеги.

Данные аккаунта

09

Статистика специалиста

В кабинете специалиста заявки на консультацию, записи на приём, отзывы и просмотры профиля показаны отдельными группами. Просмотры сравниваются с предыдущей неделей и месяцем. В этой демонстрации структура раннего макета перенесена в текущую оболочку кабинета.

Статистика специалиста

10

Главная и выбор врача

Формат консультации меняет следующий шаг: запись в клинику требует времени приёма, а вопрос адресуется выбранному врачу. Я сохранил эти варианты рядом с профилем специалиста. Перед отправкой вопроса пациент отдельно выбирает доступ к медкарте и анонимность.

Главная страница

Каталог врачей и форматы обращения

Профиль врача и запись доступны в демо в начале кейса.

11

Компоненты для двух кабинетов

В разных сценариях повторяются подтверждение действий и ввод данных. Я вынес кнопки и поля в компоненты, а общие значения — в токены. Правила их применения заданы для кабинетов врача и пациента, чтобы каждую новую форму не приходилось собирать заново.

01 / Устройство токенов

От компонента к исходному значению

Свойство компонента ссылается на семантическую роль. Роль задаёт назначение, а примитив хранит цвет или размер.

Палитра исходной библиотеки

34 переменные · Figma
content/blackbox#121836
content/dracula#097670
content/shutterIsland#2A3F7F
content/doctorwho#127D49
content/founder#DEB100
content/bunker#B44646
content/batman#3C415C
content/obsession#FC6FC3
content/jobs#03669B
content/jango#6EC277
content/attackontitan#EBC83E
content/zodiac#DE8CFB
content/arrival#70748B
content/getknives#9C8CFB
content/legend#42AEDC
content/strange#8CA4FB
content/cosmopolis#FDAC62
content/lost#FFFFFF
bg/prestige#DDDEDF
bg/backtofuture#F0F0F0
bg/oppenheimer#FAFAFB
bg/cityz#06BFB5
bg/starwars#E6F9F8
bg/supernatural#F3FCFB
bg/squidgame#CDE8F7
bg/hungergames#E6F4FB
bg/jumanji#F2F9FD
bg/lordotrings#E1F9ED
bg/greenbook#F2FDF8
bg/flash#FEF5D0
bg/dune#FFFCF3
bg/aloneathome#FFEEEE
bg/kingsman#FFF7F7
bg/hobbit#FFFFFF

Размерные токены

14 значений · модуль 4 × 4 px
x00 px
x14 px
x28 px
x312 px
x416 px
x520 px
x624 px
x832 px
x1144 px
x1352 px
x1456 px
x1560 px
x1768 px
x25100 px

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

ComponentSemanticPrimitiveHEX / value

Цветовые примитивы

17 значений
color.white#FFFFFF
color.teal.500#06BFB5
color.teal.700#06BFB5
color.teal.800#097670
color.teal.900#35D8CF
color.teal.50#E6F9F8
color.teal.100#C5EEEC
color.slate.900#121836
color.slate.600#70748B
color.slate.100#F0F0F0
color.slate.150#EEF0F3
color.slate.200#E3E7ED
color.purple.500#DE8CFB
color.green.400#127D49
color.green.50#F2FDF8
color.red.400#B44646
color.red.50#FFEEEE

Привязки кнопок

Component → Semantic → Primitive
button.primary.background
surface.actionОсновное действие
color.teal.700#06BFB5
button.primary.label
text.on-actionТекст на основной кнопке
color.white#FFFFFF
button.secondary.background
surface.action.subtleВторичное действие
color.teal.50#E6F9F8
button.secondary.label
text.actionСсылки и текстовые действия
color.teal.800#097670
button.tertiary.label
text.actionСсылки и текстовые действия
color.teal.800#097670
button.focus.border
border.focusФокус клавиатуры
color.purple.500#DE8CFB
button.radius
control.radiusСкругление контейнера
radius.control12px
button.gap
control.gapМежду иконкой и подписью
space.28px
button.label.weight
control.label.weightНачертание действия
font.bold700
button.disabled.opacity
control.disabled.opacityНедоступный компонент
opacity.disabled.32

Привязки полей

Component → Semantic → Primitive
input.background
surface.subtleПоля и вторичные области
color.slate.100#F0F0F0
input.label
text.secondaryПодписи и подсказки
color.slate.600#70748B
input.focus.border
border.focusФокус клавиатуры
color.purple.500#DE8CFB
input.positive.border
border.positiveВалидное значение
color.green.400#127D49
input.positive.background
surface.positiveФон валидного поля
color.green.50#F2FDF8
input.negative.border
border.negativeОшибка значения
color.red.400#B44646
input.negative.background
surface.negativeФон поля с ошибкой
color.red.50#FFEEEE
input.disabled.background
surface.subtleПоля и вторичные области
color.slate.100#F0F0F0
input.radius
control.radiusСкругление контейнера
radius.control12px
input.padding
control.paddingВнутренние поля
space.416px
input.disabled.opacity
control.disabled.opacityНедоступный компонент
opacity.disabled.32
input.focus.width
control.focus.widthТолщина границы фокуса
border.focus.width2px

Общие семантические роли

Поверхности, состояния, ритм
surface.canvasКарточки и формыcolor.white#FFFFFF
surface.action.hoverНаведение на действиеcolor.teal.900#35D8CF
surface.action.subtle.hoverНаведение на вторичноеcolor.teal.100#C5EEEC
surface.disabledНедоступное полеcolor.slate.150#EEF0F3
text.primaryЗаголовки и основной текстcolor.slate.900#121836
border.defaultГраницы областейcolor.slate.200#E3E7ED
section.gapМежду группами формыspace.624px

Семейства и состояния сверены с библиотекой Clinio. Имена связей и HEX-коды описывают эту кодовую реализацию; шкалы размеров и шрифта раскрыты в разделе «Типографика и ритм».

02 / Типографика и ритм

Шрифт и геометрия

Шрифт / исходная библиотека

Manrope

АаMedium · 500
АаSemiBold · 600
АаBold · 700
heading.page · 32/48

Консультации и приёмы

heading.section · 24/36

Заключение врача

body.large · 18/24

Вопрос пациента

body.default · 14/20

Документы перед консультацией

В исходнике line-height рассчитывается с коэффициентом ×1.5 и приводится к ритму: пример 18 × 1.5 = 27 → 24.

Геометрия / кодовая демонстрация

Ритм и размеры

Базовый шаг · 4 px

4space.18space.212space.316space.424space.632space.8
size.x11
44px
size.x14
56px
size.x17
68px
size.icon
20px
radius.control
12px
radius.chip
4px
border.thin
1px
border.focus.width
2px
opacity.disabled
.32
font.family
Manrope
font.medium
500
font.semibold
600
font.bold
700

Текстовые стили из Figma

10 стилей · Manrope
СтильРазмер / строкаВесОбразец
headers/alexandria36 / 40600Аа
headers/landmarks32 / 26600Аа
headers/amatory24 / 28600Аа
headers/quenn20 / 24600Аа
text/attila16 / 24500Аа
subtext/adept14 / 20600Аа
subtext/abel14 / 20700Аа
controls/radiohead14 / 20700Аа
controls/zimmer16 / 24700Аа
controls/paterlini20 / 28700Аа

В таблице — фактические text styles файла. Учебная таблица на холсте задаёт другие высоты строк для заголовков: 36/54, 32/48, 24/36 и 20/30. Примеры выше сохраняют шкалу кодовой демонстрации.

Inset / внутреннее поле

space.4 → control.padding → кнопка и поле

Gap / расстояние

space.2 → control.gap → иконка и подпись

Stack / вертикальный ритм

space.6 → section.gap → группы формы

Typography / составной токен

Семейство + вес + размер + высота строки.

03 / Кнопки

Действия и состояния

Размер компонента
Анатомия / x14

Контейнер, иконка, подпись

height · 56 px
padding · 16icon · 24 / gap · 8radius · 12

Иконка занимает отдельный слот. Подпись остаётся по центру; состояния не меняют размер кнопки.

Спецификация реализации

Три размера

РазмерВысотаТекстПоля ↔Иконка
x114414/201220
x145616/241624
x176820/282028
Начертание
Manrope · Bold 700
Граница / радиус
focus 2 px / 12 px
Между слотами
space.2 · 8 px
Ширина
По содержимому / Fill
Enable → Hover

Меняется поверхность. Подпись, размер и положение сохраняются.

Focus

Фиолетовая граница обозначает фокус. Клавиатура: Tab, Enter и Space.

Pressed

Краткое подтверждение нажатия. В демо — внутренний слой; размер контейнера остаётся прежним.

Disable

В исходнике opacity .32. Кнопка исключена из Tab и не вызывает действие.

Матрица / варианты и состояния

Три уровня действия

Primary

Основное

enable
hover
focus
pressed
disable
Secondary

Вторичное

enable
hover
focus
pressed
disable
Tertiary

Текстовое

enable
hover
focus
pressed
disable

x11 / x14 / x17, Primary / Secondary / Tertiary, focus, pressed и opacity .32 показаны в Figma. Паддинги, радиус и размеры слотов сверены с исходными компонентами. Исходная палитра сохранена в токенах; Primary в макетах и образцах использует бирюзовый акцент, второстепенные действия — серые поверхности. Pressed — интерактивная демонстрация правила нажатия.

04 / Поля

Ввод данных

Высота поля
Анатомия / Normal и Select

Ввод текста и раскрытый список

Normal содержит текстовый слот. Select добавляет шеврон и отдельное состояние list: варианты продолжают поле, не перекрывая следующий образец.

Контейнерx14 · 56 pxТекст / line-height14 / 20 pxВнутренние поля16 px · radius 12Шеврон / правый отступ24 px / 16 px

Normal, Select, Password, Email, телефон и Textarea. Все примеры используют осмысленные подписи и одинаковые значения во всех состояниях.

Все типы полей
Normal

Имя пациента

Текст и числа

Проверьте значение поля
Проверяем значение…
Select

Специализация

Одно значение из списка

Проверьте значение поля
Проверяем значение…
Password

Пароль

Скрытие и показ символов

Проверьте значение поля
Проверяем значение…
Email

Электронная почта

Адрес электронной почты

Проверьте значение поля
Проверяем значение…
Телефон

Номер телефона

Клавиатура телефона

Проверьте значение поля
Проверяем значение…
Textarea

Комментарий

Длинный текст · высота 112 px

Helper
Helper
Helper
Проверьте значение поля
Проверяем значение…
Helper

Пять исходных состояний сохранены; добавлена загрузка. Все состояния имеют одинаковую высоту 112 px и показывают многострочный ввод. Радиус 12 px, подсказка под контейнером.

x14 / x17

56 / 68 px — размеры контейнера из библиотеки. Текст и внутренние поля выше — спецификация реализации.

Focus

Одна фиолетовая граница без второго внешнего кольца. Список: стрелки, Enter, Escape.

Positive / Negative

Светлая поверхность и тонкая граница; ошибка дополнительно передаётся через aria-invalid.

Disable

В исходнике opacity .32. Геометрия сохранена, ввод и открытие списка недоступны.

Normal / Select, состояние list, x14 / x17 и пять состояний сверены с Figma. Цвета, Manrope SemiBold и радиус 12 px сверены с исходными компонентами. Password, Email, телефон и loading добавлены в развитие демонстрации; выпадающее меню оформлено в общем стиле.

05 / Controls

Выбор и изменение значения

Phosphor · контур и заливка

В обычном состоянии иконки контурные, в выбранном — залитые. Нажмите, чтобы сравнить.

Radio · 20 × 20

Один вариант

Unselected / Selected · Enable, Hover, Focus, Disabled.

Checkbox · 20 × 20

Несколько вариантов

Unselected / Selected / Indeterminate. В исходнике выбранное значение отмечено квадратом.

Slider

Диапазон

52

Enable / Focus / Disabled / Sliding. Дорожка 4 px, бегунок 20 px.

Stepper

По одному шагу

1

Кнопки 32 × 32 px, иконка в слоте 20 px, радиус 4 px. Enable / Hover / Focus / Disabled.

06 / Calendar · List

Выбор даты и элементов списка

Calendar / Pickers

Дата

июнь 2022 г.
пнвтсрчтптсбвс

В библиотеке: Date, Date & Time, Year и Time picker. Состояния дня: Normal, Hover, Selected, Diapason, начало и конец диапазона, Disable.

List / Item · Group

Группа значений

Default / Checkbox / Icon. Enable, Hover, Selected / Pressed, Disable · opacity .32. В группе — не больше 5–6 видимых строк до скролла.

07 / Pagination · Links

Переход между страницами

Pagination / Page

Страницы

Кнопки «Назад» и «Вперёд» всегда видимы. Enable / Hover / Selected / Focus / Disabled. В библиотеке есть и Slider-пагинация.

Links

Текстовое действие

ПодробнееПодробнееПодробнее

Small / Medium / Large · без иконки, с иконкой до или после текста. Enable / Hover / Focus / Disabled.

Показаны дополнительные семейства Molecules из Figma. В исходнике также есть Tab, Navigation, Balance, Medical card, Tag и отдельная библиотека иконок.