Рекомендации по написанию текстов

Intro.js — это легковесная библиотека на JavaScript для создания интерактивных пошаговых руководств по интерфейсу. Она позволяет выделять элементы страницы, добавлять подсказки и управлять последовательностью шагов, что делает обучение пользователей более наглядным. Библиотека работает с любыми DOM-элементами и не требует сторонних зависимостей.

Инициализация и базовая настройка

Для подключения Intro.js достаточно добавить ссылку на скрипт и CSS-файл:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>

Инициализация последовательного руководства выполняется через метод introJs():

introJs().start();

Для привязки шагов к конкретным элементам DOM используется атрибут data-intro:

<button data-intro="Нажмите, чтобы добавить новый элемент">Добавить</button>

Можно также задать порядок шагов с помощью data-step:

<button data-intro="Первый шаг" data-step="1">Шаг 1</button>
<button data-intro="Второй шаг" data-step="2">Шаг 2</button>

Настройка внешнего вида и поведения

Intro.js предоставляет широкие возможности кастомизации:

  • theme: базовый стиль элементов подсказок можно менять через CSS.
  • tooltipPosition: позиция подсказки относительно элемента (top, left, right, bottom, auto).
  • showStepNumbers: отображение номеров шагов (true/false).
  • exitOnOverlayClick: закрытие при клике вне подсказки (true/false).
  • nextLabel / prevLabel / skipLabel / doneLabel: настройка текста кнопок навигации.

Пример конфигурации:

introJs().setOptions({
  tooltipPosition: 'right',
  showStepNumbers: true,
  exitOnOverlayClick: false,
  nextLabel: 'Далее',
  prevLabel: 'Назад',
  skipLabel: 'Пропустить',
  doneLabel: 'Готово'
}).start();

Работа с динамическим контентом

Intro.js поддерживает динамическое создание шагов через метод addStep():

introJs().addStep({
  element: document.querySelector('#dynamicButton'),
  intro: 'Этот элемент добавлен динамически',
  position: 'bottom'
}).start();

Можно программно менять содержимое подсказок и их порядок, что полезно для интерфейсов с изменяемыми компонентами или условными шагами.

Обработка событий

Библиотека предоставляет события, которые позволяют контролировать процесс:

  • onbeforechange(targetElement) — перед переходом на следующий шаг.
  • onchange(targetElement) — после перехода на новый шаг.
  • onafterchange(targetElement) — сразу после отрисовки подсказки.
  • oncomplete() — при завершении всей последовательности.
  • onexit() — при досрочном выходе из руководства.

Пример использования:

introJs().onchange(function(targetElement){
  console.log('Пользователь перешёл к элементу:', targetElement);
}).start();

Продвинутые техники

  1. Условные шаги Можно пропускать шаги в зависимости от состояния интерфейса:
introJs().onbeforechange(function(targetElement){
  if(targetElement.id === 'stepToSkip'){
    this.next();
  }
});
  1. Многоуровневые подсказки Для сложных интерфейсов возможно создавать несколько последовательностей и переключаться между ними:
var tour1 = introJs().setOptions({ steps: [...] });
var tour2 = introJs().setOptions({ steps: [...] });

tour1.oncomplete(function(){
  tour2.start();
});
tour1.start();
  1. Интеграция с фреймворками В React, Vue или Angular Intro.js можно интегрировать через рефы или директивы, привязывая шаги к компонентам, что позволяет создавать интерактивные гайды в SPA-приложениях.

Рекомендации по написанию текстов подсказок

  • Краткость и ясность: каждое сообщение должно быть коротким, чтобы его легко воспринимать за один взгляд.
  • Действие в настоящем времени: описывать, что пользователь делает прямо сейчас, а не что он сделал или сделает.
  • Последовательность: шаги должны логически вести пользователя от простого к сложному.
  • Фокус на контенте: избегать общих фраз, сосредотачиваться на конкретных действиях и функциях элемента.
  • Использование маркеров и форматирования: при необходимости включать списки, чтобы подчеркнуть важные детали.
  • Минимизация технического жаргона: текст подсказки должен быть понятен даже новым пользователям.

Примеры текстов для подсказок

  • Кнопка добавления элемента: “Нажмите, чтобы создать новый элемент в списке.”
  • Форма ввода: “Введите имя пользователя и нажмите «Сохранить».”
  • Фильтр таблицы: “Выберите категории для отображения нужных данных.”

Точная настройка шагов и текста подсказок позволяет сделать интерактивное руководство максимально полезным и удобным.

Оглавление