Комбинирование туров и хинтов

Intro.js предоставляет гибкий механизм создания интерактивных туров по интерфейсу, а также возможность отображения кратких подсказок (хинтов) для отдельных элементов. Комбинирование этих двух функций позволяет строить многоуровневые интерактивные руководства: сначала привлекая внимание с помощью хинтов, а затем сопровождая пользователя пошаговым туром.

Настройка туров и хинтов

Туры создаются с использованием метода introJs().setOptions(options).start(). Основные параметры в options:

  • steps — массив объектов с описанием шагов тура. Каждый шаг включает:

    • element — DOM-элемент, к которому привязан шаг;
    • intro — текст подсказки;
    • position — расположение подсказки относительно элемента (top, right, left, bottom).

  • showStepNumbers — отображение номера шага;

  • showBullets — наличие навигационных точек внизу.

Хинты добавляются через addHints(), а их свойства определяются в hintOptions:

  • hint — текст хинта;
  • hintPosition — положение хинта относительно элемента;
  • hintButtonLabel — текст кнопки для закрытия или запуска действия.
introJs().setOptions({
  steps: [
    { element: '#menu', intro: 'Это главное меню', position: 'right' },
    { element: '#content', intro: 'Здесь отображается контент', position: 'bottom' }
  ],
  showStepNumbers: true,
  showBullets: true
}).start();
introJs().addHints();

Последовательность: хинты перед туром

Один из распространённых сценариев — показывать хинты сначала для привлечения внимания, а затем запускать тур:

  1. Инициализация хинтов:
const intro = introJs();

intro.setOptions({
  hints: [
    { element: '#menu', hint: 'Здесь находятся основные разделы', hintPosition: 'top-middle' },
    { element: '#settings', hint: 'Настройки доступны здесь', hintPosition: 'right-middle' }
  ]
});

intro.addHints();
  1. Запуск тура после взаимодействия с хинтом:

Хинты могут содержать обработчики событий, которые запускают тур:

document.querySelector('#menu').addEventListener('click', () => {
  intro.setOptions({
    steps: [
      { element: '#menu', intro: 'Это меню с навигацией', position: 'right' },
      { element: '#content', intro: 'Контент отображается здесь', position: 'bottom' },
      { element: '#footer', intro: 'Футер с дополнительной информацией', position: 'top' }
    ]
  }).start();
});

Динамическое переключение между хинтами и турами

Intro.js позволяет управлять состоянием подсказок и туров во время работы страницы:

  • hideHints() — скрывает все текущие хинты;
  • showHints() — отображает все хинты заново;
  • exit() — завершает текущий тур;
  • goToStep(index).start() — позволяет начать тур с конкретного шага.

Пример переключения:

const intro = introJs();

// Показ хинтов
intro.addHints();

// После закрытия всех хинтов, запускаем тур
intro.onhintclose(() => {
  intro.setOptions({
    steps: [
      { element: '#menu', intro: 'Меню для навигации', position: 'right' },
      { element: '#content', intro: 'Основной контент', position: 'bottom' }
    ]
  }).start();
});

Управление пользовательским опытом при комбинировании

Советы по улучшению UX при сочетании хинтов и туров:

  1. Не перегружать страницу большим количеством одновременно видимых хинтов.
  2. Разделять интерактивные элементы: хинты должны подталкивать к действиям, туры — объяснять функционал.
  3. Использовать события (onhintclick, onhintclose) для запуска тура в нужный момент.
  4. Сохранять прогресс пользователя в localStorage, чтобы при повторном посещении страницы тур или хинты не мешали.

Кастомизация визуального оформления

Intro.js поддерживает стилизацию как туров, так и хинтов:

  • CSS-классы:

    • .introjs-tooltip — основной контейнер подсказки;
    • .introjs-hint — контейнер хинта;

  • Можно менять цвета, тени, кнопки и анимацию:

.introjs-tooltip {
  background-color: #2c3e50;
  color: #ecf0f1;
  border-radius: 8px;
  padding: 15px;
}

.introjs-hint {
  background-color: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

Примеры сложных комбинаций

  1. Цепочка хинтов с туром по завершении:

    • Пользователь видит три хинта.
    • После закрытия последнего хинта автоматически стартует тур из 5 шагов, объясняющий весь интерфейс.

  2. Интерактивный запуск тура из хинта:

    • Каждый хинт содержит кнопку “Подробнее”.
    • При нажатии открывается тур, начиная с конкретного шага, связанного с этим элементом.

  3. Контекстное отображение:

    • Хинты появляются только для новых элементов или при первом посещении.
    • Тур запускается только если пользователь пропустил хинты или хочет подробное руководство.

Заключение по архитектуре

Комбинирование хинтов и туров в Intro.js требует управления состоянием, событий и пользовательских действий. Ключевое преимущество — гибкая организация интерактивного обучения, где хинты привлекают внимание, а туры глубоко объясняют функционал. Такой подход позволяет создавать пошаговые, адаптивные руководства без перегрузки интерфейса.

Оглавление