Настройка событий прототипа

Что такое событие прототипа

Полное событие прототипа включает триггер, действие, цель и анимацию:

• Триггер определяет условие запуска события.
• Действие определяет, что произойдет после запуска.
• Цель определяет объект, к которому применяется действие.
• Анимация делает переход нагляднее.

Триггер

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

1. Одинарное и двойное нажатие: действие запускается при одном или двух нажатиях по слою. Обычно используется для открытия ссылок и нажатия кнопок.
2. При наведении: действие запускается, когда указатель находится над активной областью. Подходит для подсказок к кнопкам и изменения состояния элемента при наведении.
3. Перетаскивание: действие запускается, когда пользователь нажимает активную область и тянет ее в определенном направлении. Обычно используется для каруселей и выдвижных панелей.
4. При длительном нажатии: действие запускается, когда пользователь нажимает активную область и удерживает ее. Часто используется на мобильных устройствах, например для имитации 3D Touch в iOS.
5. Указатель вошел: действие запускается при входе указателя в активную область. Оно может обозначать интерактивность области или менять информацию без нажатия, например показывать сведения о дате при наведении.
6. Указатель вышел: действие запускается, когда указатель покидает активную область. Обычно используется вместе с событием входа указателя.
7. Нажатие: действие запускается при нажатии на активную точку. Подходит для изменения состояния активной области, например при выборе значка приложения.
8. Отпускание: действие запускается при отпускании кнопки мыши. Обычно используется вместе с нажатием, например при завершении перетаскивания полосы прокрутки.
9. По истечении времени: работает как таймер и автоматически запускает событие после завершения обратного отсчета.

Действие

Действие определяет, что произойдет после запуска события.

1. Перейти к: перейти к указанному фрейму.
2. Открыть окно: открыть указанный фрейм как всплывающее окно на текущей странице.
3. Переключить окно: заменить одно всплывающее окно другим. Обычно используется вместе с открытием окна.
4. Закрыть окно: закрыть текущее окно.
5. Вернуться: перейти к предыдущему фрейму.
6. Открыть ссылку: открыть новое окно и перейти по указанному URL-адресу.

Цель

Цель определяет конечный объект или место назначения события.

Можно выбирать только фреймы на текущей странице. Указать цель на другой странице нельзя.

Анимация

Анимация делает событие нагляднее.

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

Совет: для каждого эффекта доступен динамический предварительный просмотр.

Сбросьте состояние целевого фрейма

Для поддерживаемых действий и типов целевых слоёв можно сбросить состояние при переходе к цели взаимодействия:

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

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

Добавьте несколько действий к одному триггеру

1. Создайте взаимодействие и настройте первый триггер, действие и цель.
2. Откройте настройки этого взаимодействия.
3. Нажмите + над существующим действием, чтобы добавить ещё одно.
4. Настройте дополнительное действие так же, как обычное действие прототипа.
5. Запустите прототип и активируйте триггер, чтобы проверить общий результат.

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

Целями прототипа служат фреймы текущей страницы. При настройке этих взаимодействий размещайте связанные цели на одной странице.