---
publishYear: 2023
name: Dipaul
title: Интерфейс приложения визуальной LowCode среды разработки
excerpt: Создали новую удобную для пользователей версию существующего решения.
context: |
Компания [Диполь](https://dipaul.ru/) с 1992 года занимается комплексным оснащением и переоснащением предприятий радиоэлектроники и машиностроения, научно-производственным консалтингом и повышением эффективности производства.
Компания пришла к нам с задачей доработать интерфейс десктопного приложения.
logo:
src: ~/assets/images/portfolio/dipol/logo.png
alt: Диполь • Логотип
link: https://dipaul.ru/
image: ~/assets/images/portfolio/dipol/main2.png
imageAlt: Собака Павлова • Dipaul • Интерфейс приложения визуальной среды разработки
thumbnail:
src: ~/assets/images/portfolio/cards/dipol.svg
alt: Собака Павлова • Dipaul • Интерфейс приложения визуальной среды разработки
tags:
- it
- ui-redesign
- research
- prof
awards:
- |
<a href="https://tagline.ru/awards/winners/?utm_source=medal&utm_medium=banner&utm_campaign=none&utm_term=awards-winners" target="_blank" title="Кейс «Диполь» — призер Tagline Awards 2024"><img src="/images/medals/tagline-winner.svg" alt="Кейс «Диполь» — призер Tagline Awards 2024"></a>
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
Разработать [UX-дизайн под ключ](/services/ux-design) и добавить в интерфейс [новую функциональность](/services/new-features), как в этом кейсе. И [многое другое](/services).
collection: services
page: ux-design
- collection: services
page: new-features
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: elma
- collection: portfolio
page: geonaft
- collection: portfolio
page: edms
- collection: portfolio
page: amber
outcome:
title: Некоторые цифры
numbers:
- title: Отрисовали
number: 8 user-flow
text: для детализации работы определенных сценариев
- title: Создали
number: 3 темы
text: темную, светлую, и дополнительный цвет по выбору заказчика
- title: Спроектировали
number: 6 панелей
text: программы
text2: User-flow объясняют разработке и бизнесу последовательность действий пользователя и детально показывает взаимодействие между экранами. Темы позволяют кастомизировать цветовое решение интефейса. Некоторые из панелей программы уже были реализованы в существующей версии продукта, некоторые мы создавали с нуля.
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: 680 000 ₽
time: 2 месяца
director: |
Внутренние продукты IT-компаний для инженеров обычно очень круты технически. Их делают люди, которые с головой в своей отрасли и не только знают специфические технические нюансы, но и видят и понимают, как такие же как они инженеры используют продукт.
Задачи по таким продуктам бывают двух видов: «упростить для не совсем инженеров» и «сделать красиво» для того, чтоб было проще продавать, удобнее развивать и приятнее работать.
Здесь была задача второго вида, и мы её удачно решили.
metadata:
canonical: https://sobakapav.ru/portfolio/dipol
title: Дизайн интерфейса • Приложение визуальной среды разработки (кейс)
description: "Создали новую удобную для пользователей версию существующего решения."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/dipol/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Нюансы](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задача
Вывести на рынок десктопное приложение визуальной LowCode среды разработки программ для автоматизации процессов измерений, испытаний, межоперационного и выходного контроля и др.
<div class="daisy-diff aspect-[41/30]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Авторизация | SobakaPav.ru"
src="/images/portfolio/dipol/1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Авторизация | SobakaPav.ru"
src="/images/portfolio/dipol/1-2.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Авторизация. <a href="/images/portfolio/dipol/1-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/1.png" target="_blank">светлая тема</a></em>
## <a name="anchor2" />Дизайн-задача
Обновить дизайн существующего решения, которое используется внутри компании:
- провести анализ существующего решения;
- продумать UX- и UI-решения;
- создать детальные макеты интерфейса в дизайне;
- создать единую библиотеку используемых компонентов с описаниями.
Мы присоединились к проекту на стадии разработки продукта и некоторые части интерфейса разрабатывались «Собакой» с нуля. Для существующих элементов требовалось сохранить функциональность и расположение, чтобы пользователи внутри компании, работающие со старой версией интерфейса, могли быстро сориентироваться и в обновленном.
<div class="daisy-diff aspect-[1920/1080]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Схема измерений | SobakaPav.ru"
src="/images/portfolio/dipol/2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Схема измерений | SobakaPav.ru"
src="/images/portfolio/dipol/2-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Схема измерений. <a href="/images/portfolio/dipol/2-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/2.png" target="_blank">светлая тема</a></em>
## <a name="anchor3" />Результат
Заказчик получил обновленный и дополненный интерфейс, разработанный с учетом будущего функционала приложения.
<div class="daisy-diff aspect-[1920/1080]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Главное окно | SobakaPav.ru"
src="/images/portfolio/dipol/3.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Главное окно | SobakaPav.ru"
src="/images/portfolio/dipol/3-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Главное окно. <a href="/images/portfolio/dipol/3-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/3.png" target="_blank">светлая тема</a></em>
Интерфейс стал более современным, более легким и «читаемым». Дизайнеры не стали изобретать велосипед и ориентировались на похожие решения мировых компаний, в том числе уменьшили визуальный шум (тени, обводка и т.п.).
<div class="daisy-diff aspect-[1440/748]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Выделение блока на панели | SobakaPav.ru"
src="/images/portfolio/dipol/4.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Выделение блока на панели | SobakaPav.ru"
src="/images/portfolio/dipol/4-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Выделение блока на панели. <a href="/images/portfolio/dipol/4-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/4.png" target="_blank">светлая тема</a></em>
Передали заказчику макеты отдельных частей приложения и собранные на их основе экраны в различных состояниях. Интерфейс приложения изменялся в зависимости от пользовательской роли и вида работ.
<div class="daisy-diff aspect-[1920/1080]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Работа с проектами | SobakaPav.ru"
src="/images/portfolio/dipol/5.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Работа с проектами | SobakaPav.ru"
src="/images/portfolio/dipol/5-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Работа с проектами. <a href="/images/portfolio/dipol/5-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/5.png" target="_blank">светлая тема</a></em>
Также заказчик получил библиотеку компонентов и удобную настройку цветовой схемы (светлая / тёмная).
<div class="daisy-diff aspect-[1920/1080]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Светлая тема | SobakaPav.ru"
src="/images/portfolio/dipol/6.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Темная тема | SobakaPav.ru"
src="/images/portfolio/dipol/6-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Светлая и темная темы. <a href="/images/portfolio/dipol/6-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/6.png" target="_blank">светлая тема</a></em>
### Экстра-польза
Чтобы показать заказчику, как будут работать части приложения, создали user-flow некоторых действий на экране. Например, работы с панелями «Свойства» и «Инструменты», работы с частью экрана, на которой создается схема для проектирования и тестирования системы (канвас).
<div class="daisy-diff aspect-[1141/801]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Панель «Свойства» | SobakaPav.ru"
src="/images/portfolio/dipol/7.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Панель «Свойства» | SobakaPav.ru"
src="/images/portfolio/dipol/7-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Панель «Свойства». <a href="/images/portfolio/dipol/7-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/7.png" target="_blank">светлая тема</a></em>
<div class="daisy-diff aspect-[1924/1216]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Панель «Инструменты» | SobakaPav.ru"
src="/images/portfolio/dipol/9.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Панель «Инструменты» | SobakaPav.ru"
src="/images/portfolio/dipol/9-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Панель «Инструменты». <a href="/images/portfolio/dipol/9-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/9.png" target="_blank">светлая тема</a></em>
<div class="daisy-diff aspect-[1528/1104]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Панель «Инструменты», user flow «поиск» | SobakaPav.ru"
src="/images/portfolio/dipol/8.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Панель «Инструменты», user flow «поиск» | SobakaPav.ru"
src="/images/portfolio/dipol/8-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Панель «Инструменты», user flow «поиск». <a href="/images/portfolio/dipol/8-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/8.png" target="_blank">светлая тема</a></em>
Заказчику понравилась реализация пошагового user flow для канваса, на которой команда показала работу основных пользовательских сценариев (запуск программы, создание секций, поиск по канвасу и т.п.).
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
<div class="daisy-diff aspect-[1140/768]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Канвас | SobakaPav.ru"
src="/images/portfolio/dipol/10.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Канвас | SobakaPav.ru"
src="/images/portfolio/dipol/10-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Канвас. <a href="/images/portfolio/dipol/10-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/10.png" target="_blank">светлая тема</a></em>
Визуализация пользовательского пути наглядно показывает функциональность панелей и пользовательское взаимодействие с продуктом. Это поможет разработчикам приложения перенести обновленный дизайн в приложение, а пользователям — понять, как взаимодействовать с продуктом.
<div class="daisy-diff aspect-[1140/768]">
<div class="daisy-diff-item-1">
<img alt="User flow «Поиск по канвасу». Ховер на кнопке поиска | SobakaPav.ru"
src="/images/portfolio/dipol/11.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="User flow «Поиск по канвасу». Ховер на кнопке поиска | SobakaPav.ru"
src="/images/portfolio/dipol/11-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>User flow «Поиск по канвасу». Ховер на кнопке поиска. <a href="/images/portfolio/dipol/11-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/11.png" target="_blank">светлая тема</a></em>
<div class="daisy-diff aspect-[1140/768]">
<div class="daisy-diff-item-1">
<img alt="User flow «Поиск по канвасу». По клику раскрывается поиск | SobakaPav.ru"
src="/images/portfolio/dipol/12.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="User flow «Поиск по канвасу». По клику раскрывается поиск | SobakaPav.ru"
src="/images/portfolio/dipol/12-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>User flow «Поиск по канвасу». По клику раскрывается поиск. <a href="/images/portfolio/dipol/12-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/12.png" target="_blank">светлая тема</a></em>
<div class="daisy-diff aspect-[1140/768]">
<div class="daisy-diff-item-1">
<img alt="User flow «Поиск по канвасу». Искомое на лету выделяется инверсией | SobakaPav.ru"
src="/images/portfolio/dipol/13.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="User flow «Поиск по канвасу». Искомое на лету выделяется инверсией | SobakaPav.ru"
src="/images/portfolio/dipol/13-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>User flow «Поиск по канвасу». Искомое на лету выделяется инверсией. <a href="/images/portfolio/dipol/13-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/13.png" target="_blank">светлая тема</a></em>
## <a name="anchor4" />Нюансы и особенности
Анализ существующей версии интерфейса показал, что роль инженера самая функциональная и проработка интерфейса под задачи инженера позволит закрыть потребности других пользователей (администратор, оператор).
Для выполнения задачи был составлен список панелей. Мы проранжировали их по приоритетности, оценили сложность разработки каждой по Фибоначчи-шкале. Это помогло менеджеру оценить затраты времени на каждую из панелей и спланировать сроки и график сдачи проекта.
По ходу работы некоторые требования изменялись, потому что изменялось само приложение. Поэтому мы разбили все задачи на четыре категории приоритетности: must-haves (обязательно), should-haves (желательно), could-haves (возможно) и won't-haves (не будет). Это позволило контролировать передачу новых задач в работу и избежать бесконечного разрастания проекта.
Проект подразумевал высокий темп и постоянные изменения, поэтому промежуточными результатами делились с заказчиком непосредственно в рабочем файле в Figma. Так не пришлось тратить время на внесение корректировок в демонстрационный файл для заказчика и сверку версий.
<div class="daisy-diff aspect-[1920/1080]">
<div class="daisy-diff-item-1">
<img alt="Приложение визуальной среды разработки. Создание проекта | SobakaPav.ru"
src="/images/portfolio/dipol/14.png" style="margin: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Приложение визуальной среды разработки. Создание проекта | SobakaPav.ru"
src="/images/portfolio/dipol/14-2.png" style="margin: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Создание проекта. <a href="/images/portfolio/dipol/14-2.png" target="_blank">Темная тема</a>, <a href="/images/portfolio/dipol/14.png" target="_blank">светлая тема</a></em>
### <a name="anchor5" />