---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-09-11
publishYear: 2025
name: Erna
title: Медицинский интерфейс для работы с ЭКГ
excerpt: Создали интерфейс медицинской диагностической платформы для кардиологов.
context: |
[Erna](https://erna.moscow/#rec806330140#!/tab/822667600-3) — российская компания, которая специализируется на разработке цифровых решений для медицины. Одна из разработок компании — клиническая информационная система «Кардиум» с применением искусственного интеллекта. Платформа решает как задачи административного персонала (такие как ведение баз пациентов, документооборот, инструкциии), так и задачи кардиологов (снятие кардиограммы, ее расшифровку, заключение).
doubleSize: true
logo:
src: ~/assets/images/portfolio/erna/logo.svg
alt: Erna • Логотип
link: https://erna.moscow/#rec806330140#!/tab/822667600-3
image: ~/assets/images/portfolio/erna/main.png
imageAlt: Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ
thumbnail:
src: ~/assets/images/portfolio/cards/erna.png
src2: ~/assets/images/portfolio/cards-l/erna_big.png
alt: Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ
tags:
- med
- research
- ux-design
- consultation
- prof
- constructor
awards:
- |
<a href="https://tagline.ru/sobaka-pavlova/cases/interfeysy-klinicheskoy-informacionnoy-sistemy--kardium--medicinskaya-diagnosticheskaya-platforma-dlya-kardiologov-erna---3/" target="_blank" title="Кейс «Кардиум» — серебряный медалист Tagline Awards 2025"><img src="/images/medals/tagline-silver-2025.svg" alt="Кейс «Кардиум» — серебряный медалист Tagline Awards 2025"></a>
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Наша экспертиза
Более 30 проектов, связанных с медицинскими интерфейсам, и [15 проектных кейсов](https://sobakapav.ru/portfolio#med).
### Наши статьи о медицинских интерфейсах
collection: post
page: medical-interfaces
- collection: post
page: professional-testing
- collection: post
page: before-interface-testing
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: tmh
- collection: portfolio
page: avicenna
- collection: portfolio
page: onkor
- collection: portfolio
page: tis
- collection: portfolio
page: raisa
- collection: portfolio
page: m-line
- collection: portfolio
page: medmarket
- collection: portfolio
page: miaz
- collection: portfolio
page: costa
outcome:
title: Некоторые цифры
numbers:
- title: Провели
number: "30"
text: сессий аналитики
- title: Проработали
number: "12"
text: разделов системы
- title: Создали
number: "400+"
text: макетов интерфейса
- title: Передали в разработку
number: "79"
text: задач
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: "NDA"
time: "> 6 месяцев"
review:
text: |
Компания «ЭРНА» сотрудничала с командой «Собака Павлова» в рамках разработки дизайна нашего продукта Кардиум. Для нас было важно создать удобный и интуитивно понятный инструмент для врачей, и именно эту задачу команда решила на высоком профессиональном уровне.
Специалисты не только разработали современный пользовательский интерфейс, но и тщательно продумали сценарии использования, сделав систему практичной и эффективной в реальной работе. Особенно ценно их глубокое понимание специфики медицинских сервисов и внимание к деталям, которые напрямую влияют на качество работы врача и удобство пациента.
Мы высоко ценим открытый диалог, гибкость в процессе и готовность искать лучшие решения. Сотрудничество с «Собакой Павлова» стало важным шагом для развития наших продуктов в сфере цифровой медицины.
От всей команды «ЭРНА» выражаем искреннюю благодарность за профессионализм и качественный результат.
person: Владимир Александрович Падишин
position: Коммерческий директор компании «ЭРНА»
director: "Стандартизировали интерфейсы весьма нестандартной системы. Сделали простым и удобным взаимодействие пользователей с невероятно сложным инструментом. И, наконец, раскрасили ярким то, что обычно розовато-больничного цвета."
metadata:
canonical: https://sobakapav.ru/portfolio/erna
title: Медицинский интерфейс для работы с ЭКГ
description: "Создали интерфейс медицинской диагностической платформы для кардиологов."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/erna/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import { YouTube, Tweet, Vimeo } from 'astro-embed';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результаты](#anchor3) • [Wow-эффект](#anchor4) • [Аналитика](#anchor5) • [Дизайн](#anchor6) • [Интерфейс медсестры](#anchor7) • [Интерфейс врача](#anchor8) • [Интерфейс администратора](#anchor9) • [Помимо макетов](#anchor10) • [Итог](#anchor11) • [Отзыв, цены, сроки](#anchor12)
</TOC>
## <a name="anchor1" />Бизнес-задача
Создать медицинскую диагностическую платформу «Кардиум», в которой врачи и медицинский административный персонал смогут решать весь комплекс вопросов, связанных с кардиологией.
<div class="daisy-diff sm:aspect-[1440/996] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/25-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/25.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник врача. Расшифровка ЭКГ. Детальный просмотр комплекса. <a href="/images/portfolio/erna/25.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/25-1.png" target="_blank">темная тема</a></em>
## <a name="anchor2" />Дизайн-задача
Создать удобный пользовательский интерфейс для врачей, которые занимаются проведением и расшифровкой электрокардиограмм.
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/1-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник исследования (врач). <a href="/images/portfolio/erna/1.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/1-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/11-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/11.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Выбор комплекса. <a href="/images/portfolio/erna/11.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/11-1.png" target="_blank">темная тема</a></em>
## <a name="anchor3" />Результаты
### <a name="anchor4" />Wow-эффект
“Интерфейс” – первый пункт в списке преимуществ системы [на сайте заказчика](https://erna.moscow/). Макеты – важная часть коммерческих [презентаций](https://drive.google.com/file/d/1_mPfwexHCV4MbxWnSgnIUesnt_0e3gio/view). Пока сама система проходит испытания, интерфейс уже продаёт.
<a href="/images/portfolio/erna/34.png" target="_blank"></a>
<em>Сайт заказчика</em>
### <a name="anchor5" />Аналитика
- Провели 4 интервью с внешними медицинскими экспертами и серию воркшопов с экспертами заказчика.
- Провели анализ решений конкурентов.
- Сделали полные сценарии процессов снятия и анализа электрокардиограмм, чтобы понять как сейчас устроена рутина пользователей.
- Составили карты процессов снятия и анализа ЭКГ: пописали все шаги процесса, задачи выполняемые пользователями, и какие из них берёт на себя интерфейс.
<a href="/images/portfolio/erna/35.png" target="_blank"></a>
Сделали информационно-архитектурную карту системы, чтобы определить, где какие задачи выполняются в интерфейсе.
<a href="/images/portfolio/erna/36.png" target="_blank"></a>
## <a name="anchor6" />Дизайн
«Кардиумом» пользуется три типа пользователей:
1. Медсестры, чтобы вести приём и снимать кардиограммы.
2. Врачи-кардиологи, чтобы расшифровывать ЭКГ, ставить диагнозы, писать заключения.
3. Административный персонал и врачи других специальностей, чтобы обеспечивать управление и коммуникацию.
<div class="daisy-diff sm:aspect-[1440/996] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/24-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/24.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник врача. Расшифровка ЭКГ. Представительный комплекс. Включено заключение. <a href="/images/portfolio/erna/24.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/24-1.png" target="_blank">темная тема</a></em>
### <a name="anchor7" /> Интерфейс медсестры
Работает с очередью приёма и направлениями пациентов. Снимает электрокардиограммы в стационаре или на выезде.
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/9-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/9.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Календарь медсестры. <a href="/images/portfolio/erna/9.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/9-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/6-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/6.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Очередь на ЭКГ. <a href="/images/portfolio/erna/6.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/6-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/5-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/5.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Снятие ЭКГ. <a href="/images/portfolio/erna/5.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/5-1.png" target="_blank">темная тема</a></em>
Задачи медсестры:
- Вести приём по расписанию.
- Создать, изучить, отредактировать направление на ЭКГ.
- Снять ЭКГ по направлению.
- Проверить снятую ЭКГ на предмет качества записи и наличия острых паталогий.
- Отправить снятую ЭКГ в общую базу исследований.
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/39-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/39.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Очередь приёма со всеми подсказками. <a href="/images/portfolio/erna/39.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/39-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/40-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/40.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Направление на ЭКГ. <a href="/images/portfolio/erna/40.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/40-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/41-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/41.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Проверка и отправка записи. <a href="/images/portfolio/erna/41.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/41-1.png" target="_blank">темная тема</a></em>
### <a name="anchor8" /> Интерфейс врача-кардиолога
Анализирует электрокардиограммы, пишет заключения и передает их в медицинскую информационную систему (МИС).
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/10-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/10.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Основной экран врача. <a href="/images/portfolio/erna/10.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/10-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/2-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/2.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник исследования (врач). Календарь. <a href="/images/portfolio/erna/2.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/2-1.png" target="_blank">темная тема</a></em>
Задачи врача:
1. Найти пациента или нужное исследование в базе.
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/42-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/42.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник врача со всеми подсказками. <a href="/images/portfolio/erna/42.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/42-1.png" target="_blank">темная тема</a></em>
2. Расшифровать ЭКГ: просмотреть плёнку, настроить отображение
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/14-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/14.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Состояния отведений. Выбор. <a href="/images/portfolio/erna/14.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/14-1.png" target="_blank">темная тема</a></em>
3. Воспользоваться инструментами анализа (сравнительными таблицами, анализом и сравнением комплексов, инструментами измерений).
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/3-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/3.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник врача. Расшифровка ЭКГ. Цвета. <a href="/images/portfolio/erna/3.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/3-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1440/996] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/4-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/4.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник врача. Расшифровка ЭКГ. Представительный комплекс. <a href="/images/portfolio/erna/4.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/4-1.png" target="_blank">темная тема</a></em>
4. Написать заключение самостоятельно или воспользовавшись мастером заключений.
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/17-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/17.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Заполнение вручную. <a href="/images/portfolio/erna/17.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/17-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/16-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/16.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Заполнение с помощью Мастера заключений. <a href="/images/portfolio/erna/16.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/16-1.png" target="_blank">темная тема</a></em>
5. Подписать заключение и отправить на сервер.
<a href="/images/portfolio/erna/18.png" target="_blank"></a>
<em>Подписать ЭЦП</em>
### <a name="anchor9" /> Администрирование и управление системой
Помимо непосредственно работы с кардиограммами врачам и медсёстрам, а также административному персоналу нужны такие сценарии, как:
1. Настроить вид плёнки (задать привычные цвета, шаблоны, линии)
<a href="/images/portfolio/erna/31.png" target="_blank"></a>
<em>Настройки пленки</em>
2. Настроить дефолтные состояния системы
<div class="daisy-diff sm:aspect-[1280/800] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/43-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="МСобака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/43.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Значения по умолчанию. <a href="/images/portfolio/erna/43.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/43-1.png" target="_blank">темная тема</a></em>
3. Подключить и настроить оборудование
4. Составить отчёт
<div class="daisy-diff sm:aspect-[1280/800] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/21-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/21.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Меню отчетов. <a href="/images/portfolio/erna/21.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/21-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/22-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/22.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Создание шаблона отчета. <a href="/images/portfolio/erna/22.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/22-1.png" target="_blank">темная тема</a></em>
5. Посмотреть данные аналитики
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/23-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/23.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Расширенный отчет и скрытые фильтры. <a href="/images/portfolio/erna/23.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/23-1.png" target="_blank">темная тема</a></em>
6. Распечатать документы
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/19-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/19.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Настройка печати ЭКГ. <a href="/images/portfolio/erna/19.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/19-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/20-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/20.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Печать ЭКГ. Модальное окно детальной настройки. <a href="/images/portfolio/erna/20.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/20-1.png" target="_blank">темная тема</a></em>
## <a name="anchor10" />Помимо макетов
Провели огромную аналитическую работу с медицинскими экспертами и аналитиками заказчика. Потребовалось 23 файла со схемами, флоу, диаграммами и комментариями.
<a href="/images/portfolio/erna/37.png" target="_blank"></a>
<em>Пример работы с вводными</em>
В процессе работы сменили дизайн-систему на Material 3. В силу сложности проекта, многие правки вносили на уровне дизайн-системы.
<div class="daisy-diff sm:aspect-[1892/1176] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/32-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/32.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Палитра. <a href="/images/portfolio/erna/32.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/32-1.png" target="_blank">темная тема</a></em>
Наладили коммуникацию с разработкой через стикеры в файле библиотеки, чтобы держать в курсе всех кастомизаций.
<a href="/images/portfolio/erna/38.png" target="_blank"></a>
Чтобы спроектировать удобные инструменты для врачей, пришлось разобраться в кардиологии.
<a href="/images/portfolio/erna/44.png" target="_blank"></a>
<a href="/images/portfolio/erna/46.png" target="_blank"></a>
Передали в разработку 79 задач.
<a href="/images/portfolio/erna/45.png" target="_blank"></a>
<em>Задачи</em>
Пример задачи: сделать 60 вариантов миллиметровки для ЭКГ. Чтобы графики легко читались и глаза врачей не уставали, проработали тёмную тему и гибкие настройки вида плёнки: цвета, контрастность, тип разметки, тощину графиков и так далее. Рассказали и показали, как решали эту задачу, [в отдельном материале](/publications/).
<YouTube id="6jrX8PrG6jQ" />
<div class="daisy-diff sm:aspect-[2800/1360] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/30-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/30.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Цвета миллиметровки. <a href="/images/portfolio/erna/30.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/30-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1440/996] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/26-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="МСобака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/26.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<div class="daisy-diff sm:aspect-[1440/996] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/27-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/27.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<div class="daisy-diff sm:aspect-[1440/996] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/28-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/28.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<div class="daisy-diff sm:aspect-[1440/996] diff-black">
<div class="daisy-diff-item-1">
<img alt="МСобака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/29-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/29.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Экран «Расшифровка ЭКГ. Представительный комплекс» с четырьмя разными цветами пленки</em>
## <a name="anchor11" />Итог
Мы создали макеты для всех ключевых разделов системы и закончили этап детального проектирования. Все интерфейсы нарисованы, эксперты заказчика довольны. Теперь дело за пользователями.
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/13-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/13.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Информация об исследовании и пациенте. Первый экран. Электроды не прикреплены. <a href="/images/portfolio/erna/13.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/13-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/15-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/15.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Состояния отведений. Результат. <a href="/images/portfolio/erna/15.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/15-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/7-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/7.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник направления (медсестра). Начало приема. <a href="/images/portfolio/erna/7.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/7-1.png" target="_blank">темная тема</a></em>
<div class="daisy-diff sm:aspect-[1280/720] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/8-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • Erna • Медицинский интерфейс для работы с ЭКГ"
src="/images/portfolio/erna/8.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дневник направления (медсестра). Всплывающая подсказка ИИ. <a href="/images/portfolio/erna/8.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/erna/8-1.png" target="_blank">темная тема</a></em>
## <a name="anchor12" />