---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-01-28
publishYear: 2021
name: Контроль Лес
title: Дизайн интерфейса мобильного приложения для лесничеств
excerpt: Разработали мобильное приложение для создания документов для лесничеств
isNew: true
thumbnail:
src: ~/assets/images/portfolio/cards/control-forest.svg
alt: Собака Павлова • Контроль • Дизайн интерфейса мобильного приложения для лесничеств
logo:
src: ~/assets/images/portfolio/control/logo.svg
alt: Контроль • Логотип
link: https://datasolution.team/
image: ~/assets/images/portfolio/control-forest/main.png
imageAlt: Собака Павлова • Контроль • Дизайн интерфейса мобильного приложения для лесничеств
tags:
- gos
- prom
- ux-design
- ux-outsource
- prof
- mob
- control
context: |
Компания [Data Solution](https://datasolution.team) — наш очень старый клиент. Их специализация — IT-решения для автоматизации контролирующих органов (государственных и не только).
К 2021 году мы уже сделали для Data Solution [приложение для работы с государственными реестрами](https://sobakapav.ru/portfolio/control-mobile) и [редизайн сервиса для управления такими реестрами](https://sobakapav.ru/portfolio/control).
Новое приложение предназначено для сотрудников лесничеств и владельцев складов и лесопилок. Приложение должно помочь им оформлять все необходимые документы на древесину, а оформлять их нужно много. Очень много.
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/redesign), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: control-patent
- collection: portfolio
page: data-solution
- collection: portfolio
page: control-predpisanie
- collection: portfolio
page: control-mobile
- collection: portfolio
page: control
- collection: portfolio
page: gormost
- collection: portfolio
page: trash
- collection: portfolio
page: smartdeal
outcome:
title: Некоторые цифры
numbers:
- title: Приложение доступно
number: "на 2 платформах"
text: "Android и iOS"
- title: Мы спроектировали
number: "> 80 экранов"
text: "для каждой платформы"
- title: Можно оформить
number: "4 типа документов"
text: в приложении
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: "300 000 ₽"
time: "2 месяца"
director: "Лесная промышленность — очень забюрократизированная отрасль. Постоянно нужно оформлять бумаги, много бумаг. Приложению, которое поможем справляться отчетностью в этой области, конечно, совершенно необходим простой и удобный интерфейс."
metadata:
canonical: https://sobakapav.ru/portfolio/control-forest
title: Дизайн интерфейсов • Мобильное приложение для лесничеств (кейс)
description: "Разработали мобильное приложение для создания документов для лесничеств"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/control-forest/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Контекст](#anchor3) • [Результат](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задача
Создать инструмент, который будет, выражаясь бюрократическим языком, "способствовать реализации одной из мер по противодействию незаконной вырубке леса".
А точнее, выражаясь языком человеческим, разработать мобильное приложение для лесничеств.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/5.png" />
<PhoneMockup image="/images/portfolio/control-forest/6.png" />
</div>
_Контроль.Лес.Авторизация и профиль пользователя_
## <a name="anchor2" />Дизайн-задача
Разработать приложение, которое позволит всем, кто занимается лесозаготовками, — лесникам, владельцам лесопилок и складов леса — работать с документами в удобном формате.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/7.png" />
<PhoneMockup image="/images/portfolio/control-forest/8.png" />
</div>
_Главная страница и действия с документом_
## <a name="anchor3" />Контекст
С того момента, как дерево превращается в бревно, все, что с ним происходит, обязательно сопровождается документами.
<a href="/images/portfolio/control-forest/4.png" target="_blank"></a>
_Электронный сопроводительный документ на транспортировку древесины_
Тем, кто связан с лесной промышленностью, регулярно нужно оформлять и отправлять вот такие бумаги на лес:
- Отчеты о балансе древесины (ОБД) сообщают, что древесину привезли на склад или вывезли оттуда.
- Отчеты о переработанной продукции (ОПП) фиксируют все, что с деревом происходит на лесопилке.
- Электронные сопроводительные документы (ЭСД) на транспортировку древесины.
- Первичные учетные документы (ПУД) отражают покупку, продажу и т.п. на счетах бухгалтерского учета.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/9.png" />
<PhoneMockup image="/images/portfolio/control-forest/10.png" />
</div>
_Создание нового документа_
При этом на лесосеках и лесных складах вполне может и не быть интернета. Скорее всего и нет.
Приложение «Контроль.Лес» предназначено для того, чтобы быстро заполнять эти бумаги и отправлять их через Bluetooth.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/11.png" />
<PhoneMockup image="/images/portfolio/control-forest/12.png" />
</div>
_Отправка документа через Bluetooth_
## <a name="anchor4" />Результат
Изучили, как выглядит лесной документооборот, в какие моменты, в связи с чем и какие именно бумаги оформляются. Какие действия должен совершить пользователь и какие дополнительные возможности ему нужно предоставить.
<a href="/images/portfolio/control-forest/3.png" target="_blank"></a>
_Любое действие на складе вызывает оформление ОБД. Любое действие на лесопилке вызывает оформление ОПП_
Создали принципиальную схему работы приложения.
<a href="/images/portfolio/control-forest/2.png" target="_blank"></a>
_Схема приложения_
Спроектировали все необходимые экраны для основных сценариев работы с документами, затем отрисовали их для Android и iOS.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Всего около восьмидесяти экранов для каждой из мобильных платформ, в том числе:
13 экранов отправки и получения документов
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/13.png" />
<PhoneMockup image="/images/portfolio/control-forest/14.png" />
</div>
_Получение документа_
6 экранов оформления электронного сопроводительного документа (ЭСД)
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/15.png" />
<PhoneMockup image="/images/portfolio/control-forest/16.png" />
</div>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/17.png" />
<PhoneMockup image="/images/portfolio/control-forest/18.png" />
</div>
_Действия с электронным сопроводительным документом (ЭСД)_
23 экрана для различных вариантов и ситуаций оформления отчетов о переработанной продукции (ОПП)
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/19.png" />
<PhoneMockup image="/images/portfolio/control-forest/20.png" />
</div>
_Действия с отчетом о переработанной продукции (ОПП)_
28 экранов для всевозможных отчетов о балансе древесины (ОБД)
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/21.png" />
<PhoneMockup image="/images/portfolio/control-forest/22.png" />
</div>
_Действия отчетом о балансе древесины (ОБД)_
Кроме соовершенно необходимых действий с документами (открыть, заполнить, подписать, отправить...), предусмотрели возможности, которые вроде как не обязательны, но существенно облегчают жизнь тому, кто работает с приложением. Группировка по папкам, быстрые фильтры, возможность проверить, отправлял ли пользователь уже документ.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/25.png" />
<PhoneMockup image="/images/portfolio/control-forest/26.png" />
</div>
_Карточка документа_
У одного пользователя в приложении могут быть десятки, а то и сотни документов разных типов. Мы предусмотрели фильтрацию по следующим аттрибутам:
1. Статус готовности:
- черновик
- подписанный
- неопубликованный
- опубликованный
2. Дата:
- создания
- изменения
- передачи
3. Тип:
- отчеты о балансе древесины (ОБД)
- отчеты о переработанной продукции (ОПП)
- электронные сопроводительные документы (ЭСД)
- первичные учетные документы (ПУД)
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/23.png" />
<PhoneMockup image="/images/portfolio/control-forest/24.png" />
</div>
_Фильтрация, черновики_
Результаты приняты заказчиком и переданы в разработку.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-forest/27.png" />
<PhoneMockup image="/images/portfolio/control-forest/28.png" />
</div>
_Пользователь не найден, ошибка синхронизации_
## <a name="anchor5" />