Создание интерактивного руководства по приложению

Команды поддержки часто испытывают трудности с приложениями, которые они никогда не устанавливали.

PDF-файл со скриншотами — это стандартное решение. Но большинство людей не читают PDF. Я хотел создать нечто лучшее. Мне нужно было руководство, которое ощущается как настоящее приложение. Вы видите главный экран, нажимаете кнопку, и появляется следующий экран.

Я создал интерактивное руководство, используя реальные скриншоты и кликабельные хотспоты.

Как это работает

Для хранения изображений я использовал Firebase Storage, а для логики — чистый JavaScript. Никаких сторонних библиотек.

  • Каждый экран — это одно цельное изображение.
  • Поверх изображения я накладываю невидимые прямоугольники, называемые хотспотами.
  • В этих хотспотах используются проценты вместо пикселей. Это позволяет сохранять их выравнивание при изменении размера окна.
  • Навигацию управляет простой конечный автомат (state machine). У каждого экрана есть ID, изображение и список хотспотов.

Редактор

Измерять координаты вручную — долго. Чтобы ускорить процесс, я создал отдельный HTML-редактор.

  • Загрузите скриншот.
  • Перетащите мышь, чтобы нарисовать хотспот.
  • Привяжите хотспот к целевому экрану.
  • Экспортируйте код напрямую.

Дизайнерские решения

Не на каждом экране есть полноценная навигация. Чтобы избежать путаницы, я добавил пульсирующее синее свечение для кликабельных областей. Это показывает пользователям, куда именно можно нажать.

Ключевые технические уроки

  • Firebase Storage: Не создавайте URL-адреса вручную. Используйте метод SDK getDownloadURL. Он включает токен авторизации, необходимый для обхода правил безопасности.
  • CSS Flexbox: Если вы используете flex: 1 в макете с колонками (column layout), у родительского элемента должна быть явно заданная высота. Установите min-height: 0 для дочернего элемента, чтобы предотвратить переполнение (overflow).
  • Производительность: Обращение к Firebase при каждом клике вызывает задержки. Я реализовал кэширование в оперативной памяти и предварительно загрузил все изображения при открытии модального окна. Это делает навигацию мгновенной.
  • Масштабирование: Используйте CSS-свойство transform: scale(). Это гарантирует, что изображение и хотспоты будут идеально выровнены независимо от размера экрана.

Результат

  • 20 экранов, по которым можно перемещаться как по настоящему телефону.
  • 52 хотспота с визуальными подсказками.
  • Мгновенная загрузка благодаря предварительной загрузке и кэшированию.
  • Адаптивный дизайн, подходящий под любой размер модального окна.

Источник: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e