Дата публикации: .
- Что теряет пользовательская документация без аннотаций
- Шаг 1. Открытие проекта и выбор раздела
- Шаг 2. Захват экрана системы
- Шаг 3. Автоматические выноски на элементах интерфейса
- Шаг 4. Добавление описаний к элементам
- Шаг 5. Сохранение и проверка результата
- Готовый результат: инструкция со скриншотами
- Как это работает на практике
- Частые вопросы
Что теряет пользовательская документация без аннотаций
Без аннотаций скриншоты в документации теряют ясность. Соотносить обведённые элементы с выносками неудобно и долго, а инструкция превращается в набор картинок, которые нужно постоянно расшифровывать. Если на скриншотах есть подписи и нумерованные пометки, сотрудник быстрее находит нужный элемент и реже отвлекает наставника.
Нумерованные аннотации облегчают работу и тем, кто готовит документацию, и тем, кто по ней работает.
Технический писатель. "Когда интерфейс системы обновляется, мне важно переделать инструкцию быстро, чтобы не переделывать все пометки заново. Хочу, чтобы при замене скриншота подписи и нумерация сохранялись на своих местах".
Руководитель внедрения. "Моя задача — чтобы сотрудники вышли на рабочую скорость, а внедрение не растянулось на месяцы. Мне нужна инструкция, по которой человек разберётся сам, без отрыва наставника от работы".
Специалист по обучению. "Я готовлю программу адаптации и хочу снизить нагрузку на наставников, чтобы они занимались своими задачами, а не повторяли одно и то же каждому новичку. Мне важно, чтобы инструкция отвечала на вопрос «что мне сделать с этим элементом и зачем»".
Сотрудник. "Когда я открываю инструкцию, я хочу сразу видеть, куда нажать, а не разбираться в нагромождении кнопок. Мне важно, чтобы подсказка объясняла, что произойдёт после моего действия, — тогда я разберусь сам, не отвлекая наставника".
Примеры сложной системы автоматизации:
Для подробной визуализации вам нужны скриншоты для документации к внутренней системе автоматизации с пронумерованными пометками, где каждый элемент интерфейса подписан и объяснен.
Dr.Explain автоматически распознает элементы интерфейса и создает готовые нумерованные выноски. Вам нужно лишь дополнить их описаниями. Сторонние графические редакторы и ручная расстановка подписей не понадобятся.
В этой статье мы покажем, как сделать скриншоты с интерактивными аннотациями для пользовательской документации в Dr.Explain.
Шаг 1. Открытие проекта и выбор раздела
Откройте проект, в котором будет размещена пошаговая инструкция. Если проект еще не создан, создайте его через Файл → Создать локальный проект или кнопку Создать новый проект на стартовом экране. Для документации к системе автоматизации подойдёт пустой проект — вы наполните его позже.
Создайте новый проект. Для этого на стартовом экране нажмите "Создать локальный проект". Или после запуска програмы перейдите в меню Файл → Создать локальный проект. Также можно нажать горячие клавиши Ctrl+N. Полный список горячих клавиш Dr.Explain.
Для импорта имеющейся у вас документации нажмите "Открыть существующий проект" на стартовом экране. Или после запуска програмы перейдите в меню Файл → Открыть существующий проект. Также можно нажать горячие клавиши Ctrl+O.
В левой части окна отображается дерево разделов. Выберите раздел, в который нужно вставить скриншот с пометками. Если инструкция для сотрудников состоит из нескольких частей, создайте отдельный раздел для каждого шага работы с системой — так сотруднику будет проще ориентироваться. О создании разделов мы писали в статье "Добавление нового раздела в документацию системы внутренней автоматизации — фокус на обучение сотрудников"
Шаг 2. Захват экрана системы
Откройте окно системы автоматизации, интерфейс которого нужно задокументировать. Вернитесь в Dr.Explain и нажмите кнопку захвата экрана на панели инструментов.
Окно системы появится поверх интерфейса Dr.Explain. Выберите область захвата: все окно целиком, часть интерфейса или отдельную панель с кнопками и полями. Для инструкции к системе управления предприятием чаще всего достаточно захватить конкретную форму или диалоговое окно, с которым работает сотрудник.
После выбора области Dr.Explain автоматически откроет раздел документации с уже созданным аннотированным скриншотом.
Шаг 3. Автоматические аннотации на элементах интерфейса
Сразу после захвата программа анализирует структуру интерфейса и распознаёт ключевые элементы: кнопки, поля ввода, меню, выпадающие списки. Dr.Explain выполняет автоматическую расстановку пометок — на элементах появляются пронумерованные выноски на скриншоте с цифрами.
Если какая-то пометка оказалась лишней, удалите ее. Если нужно добавить пометку на элемент, который программа не распознала, — добавьте вручную. Нумерация обновится автоматически. Так вы постепенно выстраиваете аннотации в системе автоматизации управления предприятием так, как удобно сотрудникам.
В Дизайнере аннотаций можно настроить внешний вид пометок: стиль стрелок, рамок, шрифт подписей — чтобы они соответствовали корпоративному стилю вашей системы или стандартам оформления документации.
Шаг 4. Добавление описаний к элементам
На этом этапе вы превращаете безликие цифры в понятную инструкцию. Для каждой пометки добавьте текст: что это за элемент и что произойдёт, если на него нажать или ввести данные. Особое внимание уделите подписям к кнопкам — именно они вызывают больше всего вопросов у новых сотрудников.
Например, для системы автоматизации управления предприятием подпись к пометке на кнопке может выглядеть так: "Нажмите 'Создать заявку', чтобы открыть форму ввода нового запроса на закупку". Подпись к полю ввода: "Введите табельный номер сотрудника — система автоматически подгрузит его данные из справочника".
Каждая подпись должна отвечать на вопрос сотрудника: "Что мне сделать с этим элементом и зачем". Именно так аннотированные скриншоты превращаются в рабочий инструмент обучения.
Шаг 5. Сохранение и проверка результата
Нажмите Принять и закрыть в Дизайнере аннотаций. Скриншот с пометками и подписями встроен в раздел документации. Так формируется готовое руководство пользователя, которое можно сразу передавать сотрудникам.
Проверьте результат в режиме предварительного просмотра. Dr.Explain позволяет посмотреть, как документ будет выглядеть в HTML, CHM или PDF — выберите подходящий формат на панели предпросмотра. Если нужно что-то поправить, вернитесь в режим редактирования изображения: щелкните по скриншоту правой кнопкой и выберите Редактировать.
Готовый результат: инструкция со скриншотами
У вас есть готовый аннотированный скриншот: элементы интерфейса пронумерованы, каждая цифра соответствует понятному описанию. Сотрудник, открывший инструкцию, видит не абстрактную картинку, а пошаговую визуальную подсказку: куда нажать, что ввести, что проверить.
Такие скриншоты с аннотациями для системы управления предприятием можно использовать и в электронной документации, и в распечатанных памятках. Если интерфейс системы обновится, достаточно заменить скриншот — пометки и описания останутся на своих местах.
Рекомендуем посмотреть обучающее видео, в котром показано, как можно добавить подписи на скриншоты в программе Dr.Explain..
Когда основная работа со скриншотами завершена, логично перейти к следующим задачам: экспортировать документ в нужный формат (PDF для печати, HTML для базы знаний, CHM для встроенной справки сотрудникам, Markdown для хранения в системе контроля версий и для работы с ИИ), настроить условия вывода разделов в финальный документ, использовать тепловую карту для отслеживания готовности разделов.
Когда освоитесь с основными действиями, эти комбинации помогут работать быстрее.
| Комбинация | Действие |
|---|---|
| Ctrl+T | Добавить дочерний раздел |
| Ctrl+D | Добавить раздел того же уровня |
| Insert | Добавить подраздел |
| Enter | Добавить раздел того же уровня после текущего |
Как это работает на практике
Orangecat. Разработчики рассказали, как делают снимок экрана, а Dr.Explain сам разбивает его на элементы управления — остаётся расставить аннотации. Тот же механизм позволяет заменить устаревший скриншот при редизайне без потери пометок.
Hocus Pocus. Технический художник описал, как захват интерфейса с извлечением кликабельных зон заменил ему ручную расстановку пометок. Всё происходит автоматически, а освободившееся время он тратит на программирование новых инструментов.
Behold Genealogy. Разработчик рассказал, как с помощью скриншотов и аннотаций задокументировал все окна и пункты меню. Руководство стало выглядеть профессионально и придаёт пользователю уверенности.
BioAware. Компания поделилась, как перешла с документа Word на автоматическое аннотирование скриншотов. Теперь клиентов с вопросами отсылают к странице справки, где описан ответ.
Частые вопросы
Как аннотировать скриншоты к внутренней системе автоматизации, если программа не распознала элемент?
Добавьте пометку вручную — в Дизайнере аннотаций это делается в один клик. Нумерация обновится автоматически.
Можно ли изменить пометки после сохранения скриншота?
Да. Щелкните по изображению правой кнопкой и выберите Редактировать — откроется Дизайнер аннотаций, где можно добавить, удалить или переставить пометки и изменить подписи.
Как быстро обновить скриншот, если интерфейс системы изменился?
Замените старый скриншот на новый — все пометки и описания сохранятся на своих местах, повторно аннотировать не нужно.
Можно ли использовать один скриншот в разных разделах документации?
Да, изображение можно скопировать в другой раздел. При копировании пометки сохраняются.
В каких форматах можно экспортировать документ с аннотированными скриншотами?
Dr.Explain экспортирует проект со скриншотами в HTML, CHM, PDF, DOCX. Аннотированные скриншоты одинаково выглядят во всех форматах — дополнительная настройка не требуется.
Если изменить номер аннотации, придется исправлять и остальные?
Нет. Dr.Explain автоматически пересчитает нумерацию всех аннотаций.