Види подій запуску
Ця стаття створена в межах курсу «Інтерактивні прототипи у Figma». Логіка взаємодії відіграє ключову роль у зручності інтерфейса. Figma дозволяє моделювати інтерактивний сценарій за допомогою подій запуску (triggers), які визначають, що саме активує зміну стану в прототипі.
Що таке події запуску?
Події запуску визначають, що саме активує зміну стану в прототипі. Вони поділяються на дві основні групи:
- Разові події — відбуваються в конкретний момент часу і не впливають на подальшу поведінку інтерфейсу. Наприклад, натискання (On Click) або перетягування (On Drag).
- Події з відстеженням стану — працюють у реальному часі, поки умова виконується. Це всі події, що містять у назві слово «While» (наприклад, While Hovering, While Pressing).
Основні події запуску та їх використання
- Натискання (On Click / On Tap)
Ця разова подія активує зміну стану при натисканні на елемент. Використовується у кнопках, меню, або діалогах.
- Перетягування (On Drag)
Ця разова подія дозволяє змінювати стан при перетягуванні елементів. Вона чудово підходить для створення галерей або анімацій на кшталт «потягніть для оновлення».
- При наведенні курсора (While Hovering)
Ця разова подія використовується для зміни стану під час наведення курсора. Використовується для підказок, змін кольору елементів та інтерактивних ефектів при наведенні.
- При натисканні (While Pressing)
Ця подія з відстеженням стану активується під час утримання кнопки миші або тачпада. Зручна, наприклад, для попереднього перегляду вмісту, чи втілення довгого натискання в мобільних інтерфейсах.
- Натискання клавіші клавіатури чи кнопки геймпада (Keyboard/Gamepad)
Ця подія з відстеженням стану дає змогу створити додаткові варіанти навігації, наприклад, через комбінації клавіш та дії геймпада (наприклад, натискання Enter або Shift+K).
- Вхід та вихід курсора (Mouse Enter / Mouse Leave)
Разова подія «Вхід курсора» (Mouse Enter) активує зміну стану, коли курсор потрапляє в інтерактивну зону, а разова подія «Вихід курсора» (Mouse Leave) — коли він виходить. Ця пара подій може бути використана для відтворення спадних меню чи спливаючих повідомлень.
- Початок та кінець натискання (Mouse/Touch Down)
Ця разова подія використовується для створення інтерактивних анімацій, наприклад, ефекту «вподобайки» при натисканні.
- Після затримки (After delay)
Ця разова подія запускає перехід через певний час після завантаження кадру. Може бути корисною корисною для сповіщень та анімованих підказок.
- Досягнення позначки у відео (When video hits)
Ця разова подія активує перехід, коли відео доходить до певної ділянки в часі. Використовується для рекламних інтеграцій, повідомлень із закликами до дії у відеоплеєрах.
- Кінець відео (When video ends)
Ця разова подія виконує перехід після завершення відео. Зручно для переходів до наступного вмісту чи закриття модального вікна.
Висновок
Події запуску відіграють важливу роль у створенні інтерактивних прототипів і дозволяють робити цифрові продукти більш зручними та динамічними. Доречно використовуючи події у прототипі, ви зможете краще зрозуміти й покращити користувацький досвід!
