Интерфейс СЭД DOC

Сентябрь 2025

Doc — система электронного документооборота, разработанная в АО «НТТ». В 2025 году, являясь сотрудником АО «НТТ» я разработал новый интерфейс системы. В процессе работы так же была несколько упрощена бизнес-логика приложения.

К каждому документу в DOC можно создать бизнес-процесс (ознакомление, утверждение и так далее), который состоит из задач. Текущие задачи и бизнес-процессы отображаются на главном экране DOC.

Главная

Документ — это сущность из набора полей. Чаще всего одно из полей — приложенный файл + его описание, дата создания и так далее, но можно настроить как угодно. Документы хранятся в привычной иерархии в папках-шаблонах. Это как папки на компьютере, но в папку Договоры не получится сохранить приказы, если отличается набор полей документа. Каждая папка в Док — это ещё и шаблон для хранящихся в ней документов.

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

Изначально в DOC присутствовали две сущности: папки, задающие структуру хранения документов, и виды — по сути шаблоны документов. Нужно было выбрать сначала необходимую папку, а затем нужный вид документа. При этом виды изначально были скрыты. Это вызывало вопросы у пользователей, которые не могли найти документ, хотя помнили, что он был в этой папке. Я объединил 2 сущности, в папки-шаблоны. Была идея в целом отказаться от термина папка, оставив только иерархию шаблонов, но это вызывало вопросы у пользователей.

При создании новой папки-шаблона мы задаём набор полей для документов этой папки, а в правой части экрана видим итоговую форму «документа».

Создание «папки»

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

Ещё одно важнейшее нововведение: на странице документа отображается содержимое приложенного файла. В первой версии системы нужно было скачивать файл по ссылке и открывать его в Ворде, чтоб узнать, что же такое тебе отправили из отдела кадров. Ага! Уведомление о предстоящем отпуске! Сейчас это видно сразу. Если приложено несколько файлов, то каждый из них можно отрыть для просмотра прямо в DOC. Поддерживается предпросмотр всех популярный типов офисных файлов.

В правой части страницы отображается всё, что связано с бизнес-процессами по документу.

Документ

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

В системе присутствует полноценный чат.

Изначально в DOC не было отдельного раздела «Чат». Чат присутствовал, но располагался в одной из вкладок документа, хотя и не был к нему привязан — в разных документах открывался один и тот же чат. Некоторые пользователи даже не знали о его существовании, а те, что знали не всегда могли вспомнить, где он находится.

Для администраторов системы доступен раздел с настройками. Здесь можно добавить пользователя, подключить LDAP, настроить почтовые уведомления, и главное — создавать бизнес-процессы. Бизнес-процессы могут быть сложные, многоступенчатые. Задачи могут группироваться, частично выполняться последовательно, а частично параллельно. Но интерфейс создания таких процессов нагляден и прост, а сортировать этапы можно простым перетаскиванием мыши.

Интерфейс адаптирован для работы на мобильных устройствах. Поддерживается тёмная тема.

Тёмная тема в мобильной версии

Смотри, мам, без Фигмы!

Дизайн интерфейса я делал сразу на vue.js. Был создан собственный ui-kit. В основе проекта кастомный bootsrtap-vue. Какие-то компоненты интерфейса я написал сам, разработку каких-то курировал. Так, например, я написал компонент, который занимается экранной типографикой, а фронтендеры, согласно моей идее разработали компонент Datalist, который управляет отображением любых списков. Можно отобразить список в виде дерева или с чекбоксами у каждого элемента, отфильтровать результаты, добавить паджинацию. На основе Datalist работают все списки в системе в том числе таблицы и селекты.

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