Подсказки и блюр

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

Точка внимания

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

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

Область

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

Если на шаге настроено приближение, выделенная область масштабируется и перемещается вместе с канвасом, оставаясь привязанной к нужному месту на экране.

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

Текстовая подсказка

Текстовая подсказка объясняет контекст: почему этот шаг важен, что изменится после действия или куда зритель попадет дальше. В подсказку можно добавить кнопку, если шаг должен вести к следующему действию.

Пишите коротко. Хорошая подсказка обычно отвечает на один вопрос: что заметить, что нажать или почему это важно.

Карточки текста у точки, области и текстовой подсказки оформлены одинаково: используют выбранный размер Малый, Средний или Большой, читаемый обычный шрифт, свободные внутренние отступы и мягкие скругления. В обычном состоянии карточка не получает лишнюю внешнюю рамку. При наведении или фокусе появляется мягкое свечение в выбранном цвете подсказки, но карточка и ее указатель не сдвигаются. Точка внимания, границы области и кнопка текстовой подсказки при этом не меняются.

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

Плашка действия

Плашка действия — это отдельная CTA-панель на канвасе шага. Она подходит для видимого призыва: перейти к тарифам, открыть регистрацию, показать следующий раздел или отправить зрителя по внешней ссылке.

На одном шаге может быть одна плашка действия. Доступны типы: баннер со стрелкой, баннер без стрелки, верхняя панель с текстом по центру, мини-кнопка и свое изображение поверх шага. Текстовые типы можно перетащить по канвасу, изменить текст, цвет фона, цвет текста и назначение. Для изображения можно загрузить файл со своего устройства: редактор подберет компактный размер по пропорциям файла, после чего изображение можно изменить за четыре угловые ручки. Назначение может вести на следующий шаг, конкретный шаг, оставаться на текущем шаге или открыть URL. В опубликованном viewer кликабельна вся плашка, а не только текст или стрелка. Если такой же призыв нужен во всем демо, используйте Применить ко всем шагам. Это действие заменяет уже существующие плашки на других подходящих шагах, но не меняет обычные подсказки.

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

Шаг без подсказок

Шаг может оставаться без подсказок. Это удобно для паузы, чистого стоп-кадра, видео или промежуточного состояния, где зрителю достаточно навигации плеера. Smotree не блокирует сохранение такого шага и не добавляет пустую подсказку автоматически.

Если у выбранного шага нет подсказок, редактор показывает предупреждение в правой панели. Оно означает, что зритель будет двигаться дальше через обычную навигацию демо.

Блюр

Блюр скрывает чувствительные области на шаге: email, имя клиента, токен, внутренний адрес, сумму или другой фрагмент интерфейса, который нельзя показывать зрителям.

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

Чтобы добавить блюр:

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

Несколько подсказок на одном шаге

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

В правой панели можно:

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

В мобильном опубликованном просмотре текст текущей точки, области или текстовой подсказки показывается под экраном, рядом с навигацией. Если на шаге несколько подсказок, Smotree показывает одну активную подсказку, индикатор вроде 2 / 3 и точки прогресса. Стрелки назад и вперед сначала переключают подсказки внутри шага, а после последней подсказки переходят дальше по сценарию или выполняют настроенное назначение.