Мобильные паттерны навигации

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

Ключевые возможности Shepherd.js:

  • Привязка подсказок к DOM-элементам с помощью attachTo.
  • Полная кастомизация внешнего вида через CSS и classes.
  • Управление логикой тура: запуск, переходы, завершение, отмена.
  • Обработка событий на каждом шаге (show, hide, complete, cancel).

Настройка тура для мобильных экранов

При работе с мобильными устройствами важно учитывать размеры экрана и адаптивность подсказок. В Shepherd.js это достигается через:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: { beh * avior: 'smooth', block: 'center' },
    cancelIcon: { enabled: true },
    canClickTarget: false,
    classes: 'shepherd-theme-arrows mobile-tour',
  },
  useModalOverlay: true,
});

Пояснения ключевых параметров:

  • scrollTo: плавная прокрутка к элементу, учитывающая центр экрана.
  • cancelIcon: отображение крестика для закрытия подсказки, особенно важно для маленьких экранов.
  • canClickTarget: запрет на клики по элементу во время шага, предотвращая случайные действия.
  • classes: кастомные классы для адаптации стиля под мобильные устройства.
  • useModalOverlay: затемнение фона, чтобы фокус оставался на подсказке.

Создание шагов с привязкой к элементам

tour.addStep({
  id: 'step-menu',
  text: 'Это главное меню приложения.',
  attachTo: {
    element: '.menu-button',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.addStep({
  id: 'step-profile',
  text: 'Здесь находится ваш профиль.',
  attachTo: {
    element: '.profile-icon',
    on: 'left'
  },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Готово',
      action: tour.complete
    }
  ]
});

Особенности для мобильных интерфейсов:

  • Расположение подсказки (on) следует выбирать так, чтобы подсказка не перекрывала основной контент.
  • Для маленьких кнопок рекомендуется использовать scrollTo: { block: 'center' }.
  • Если элемент скрыт за экраном, Shepherd автоматически прокрутит страницу.

Управление адаптивностью подсказок

Для корректного отображения на разных разрешениях можно использовать медиа-запросы в CSS или динамически менять позицию подсказки через Jav * aScript:

tour.addStep({
  id: 'step-settings',
  text: 'Настройки приложения.',
  attachTo: {
    element: '.settings-icon',
    on: window.innerWidth < 600 ? 'top' : 'right'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

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

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

document.querySelector('.menu-button').addEventListener('click', () => {
  tour.addStep({
    id: 'dynamic-step',
    text: 'Эта подсказка появляется после открытия меню.',
    attachTo: { element: '.menu-item', on: 'bottom' },
    buttons: [{ text: 'Закрыть', action: tour.complete }]
  });
  tour.start();
});

Настройка навигационных кнопок для мобильного UX

Для удобства на маленьких экранах часто используют однотипные кнопки с минимальным текстом и крупными зонами клика:

buttons: [
  {
    text: 'Назад',
    action: tour.back,
    classes: 'btn-mobile-back'
  },
  {
    text: 'Далее',
    action: tour.next,
    classes: 'btn-mobile-next'
  }
]

Рекомендации:

  • Минимальная ширина кнопок: 44px для соответствия гайдлайнам мобильного UX.
  • Цвета и контраст должны быть высокими для видимости на солнечном свету.
  • Можно объединять действия и смахивание для навигации между шагами.

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

Shepherd.js позволяет отслеживать действия пользователя на каждом шаге, что важно для мобильных приложений с ограниченным вниманием:

tour.on('complete', () => {
  console.log('Тур завершён');
});

tour.on('cancel', () => {
  console.log('Тур был прерван пользователем');
});

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

Советы по производительности

  • Избегать тяжелых анимаций, которые замедляют отклик на мобильных устройствах.
  • Использовать useModalOverlay с осторожностью, так как на слабых устройствах overlay может замедлять прокрутку.
  • Минимизировать количество DOM-элементов на каждом шаге, особенно если элементы динамически создаются.

Интеграция с популярными фреймворками

Shepherd.js легко интегрируется с React, Vue и Angular:

  • В React можно использовать useEffect для инициализации тура после рендеринга компонентов.
  • В Vue рекомендуется использовать mounted для привязки шагов к DOM-элементам.
  • В Angular инициализация тура часто выполняется после события ngAfterViewInit.

Эта стратегия позволяет создавать мобильные туры, которые корректно реагируют на динамическую подгрузку элементов и изменение размера экрана.

Оглавление