Интерактивные указатели

Указатели — это кликабельные точки, которые можно добавлять на страницы флипбука или работы в галерее. Используйте их, чтобы сделать контент интерактивным и направлять зрителей по материалу.

Указатели доступны для проектов «Флипбук» и «Галерея». В проектах «Бейдж» для интерактивности используется навигационный док.

Что такое указатели?

Указатели — это визуальные иконки, которые появляются на страницах флипбука или работах в галерее. При нажатии они выполняют действие, например:

  • Переход к другой странице флипбука
  • Открытие внешнего сайта
  • Показ всплывающей подсказки с информацией
  • Открытие модального окна с подробным контентом

Типы указателей

Перейти на страницу

Направляет зрителей на конкретную страницу флипбука. Отлично подходит для:

  • Ссылок из оглавления
  • Ссылок «Подробнее на странице X»
  • Ссылок возврата на обложку/главную
  • Подсказок для последовательной навигации

Открыть URL

Открывает внешний сайт в новой вкладке. Идеально для:

  • Ссылок на покупку товаров
  • Профилей в социальных сетях
  • Форм обратной связи
  • Связанных ресурсов

Показать подсказку

Отображает текст при наведении или нажатии на указатель. Полезно для:

  • Описаний товаров
  • Информации о ценах
  • Кратких фактов
  • Подсказок и советов

Показать модальное окно

Открывает всплывающее окно с форматированным контентом. Идеально для:

  • Подробной информации о товаре
  • Условий и положений
  • Контактной информации
  • Дополнительного контента, который не помещается на странице

Добавление указателя

  1. Перейдите к странице или работе, на которую хотите добавить указатель. Используйте навигацию для перехода к нужной странице (флипбук) или работе (галерея).
  2. Откройте вкладку «Указатели» в правой боковой панели.
  3. Нажмите «Добавить указатель», чтобы начать создание нового указателя.
  4. Кликните по области предпросмотра, чтобы задать позицию указателя. Вы увидите предварительный вид расположения указателя.
  5. Настройте указатель в появившейся форме:
    • Выберите тип действия (Страница, URL, Подсказка, Модальное окно)
    • Задайте цель действия (номер страницы, URL или контент)
    • Выберите иконку из библиотеки
    • Выберите цвет
    • Задайте размер (маленький, средний, большой)
    • Добавьте необязательную подпись
  6. Сохраните указатель, нажав кнопку сохранения.

Параметры настройки

Иконки

Выбирайте из 50+ иконок, включая стрелки, фигуры, символы и иконки действий. Используйте поиск, чтобы найти нужную иконку.

Цвета

Выбирайте из готовых цветов или введите пользовательский HEX-код. Сделайте указатели заметными или гармонично вписанными в дизайн.

Размеры

Доступны три размера: маленький (24px), средний (32px) и большой (44px). Выбирайте в зависимости от важности и дизайна страницы.

Позиция

Размещайте указатели точно, кликая по странице. Тонкая настройка с помощью процентных координат (X/Y).

Управление указателями

Вкладка «Указатели» показывает все указатели на текущей странице или работе:

  • Редактирование: кликните по указателю в списке для изменения его настроек
  • Удаление: удалите указатель, нажав кнопку удаления
  • Предпросмотр: указатели отображаются в реальном времени в области предпросмотра
  • Фильтрация: просматривайте указатели по страницам/работам или все сразу

Лучшие практики

  • 1Не перегружайте страницы — используйте указатели стратегически
  • 2Используйте единые цвета для однотипных действий
  • 3Делайте указатели достаточно большими для касания на мобильных
  • 4Не закрывайте важный контент
  • 5Используйте подсказки для кратких сведений, модальные окна — для подробных
  • 6Протестируйте все ссылки указателей перед публикацией

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

Каталог продукции

Добавьте указатели «Купить» со ссылками на ваш магазин, иконки информации для характеристик товаров и навигацию к похожим товарам.

Интерактивный журнал

Ссылки между статьями на их страницы, модальные окна «Читать далее» для расширенного контента и кнопки публикации в соцсетях.

Учебное пособие

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

Связанная документация