Обмежувальні рамки
Огляд
Обмежувальні рамки є основною моделлю взаємодії зворотного проектування. Після завантаження зображення ви малюєте прямокутні рамки навколо окремих елементів інтерфейсу користувача, щоб ізолювати їх. Кожна обмежувальна рамка стає областю для вибору, якій можна призначити поведінку, перетворити на код або експортувати як каркасний компонент.
Потік екрана та групи
Полотно Screen Flow дозволяє організовувати роботу зворотного проектування в групи. Кожна група може містити декілька зображень екрана та може бути введена як Екран (головні сторінки, розділи чи перегляди) або Модальний (накладки, діалогові вікна, спливаючі вікна, ящики). Двічі клацніть групу, щоб відкрити її та працювати з її зображеннями.
Ручний бокс
Виберіть інструмент Коробка
Виберіть інструмент малювання обмежувальної рамки на панелі інструментів над полотном зображення.
Намалюйте коробку
Натисніть і перетягніть зображення, щоб намалювати прямокутну рамку навколо елемента інтерфейсу користувача — кнопки, картки, панелі навігації, розділу героя або будь-якого компонента.
Змінити розмір і налаштувати
Перетягніть краї або кути будь-якого поля, щоб точно налаштувати його положення та розмір. Переконайтеся, що він щільно огортає цільовий елемент.
Призначити поведінку
Виберіть поле та визначте, що має робити елемент — наприклад, «відкриває модальний», «переходить до /about» або «перемикає спадне меню».
AI Автобокс
Замість того, щоб малювати кожну коробку вручну, скористайтеся автоматичним боксом штучного інтелекту, щоб Kaiju Hub AI автоматично виявляв і обводив елементи інтерфейсу на вашому зображенні. AI аналізує візуальний макет і створює обмежувальні рамки навколо виявлених компонентів, таких як заголовки, кнопки, картки, вхідні дані, зображення та елементи навігації.
Виявлення в один клік
Натисніть кнопку автоматичного блокування, і AI сканує все зображення, створюючи обмежувальні рамки навколо кожного виявленого елемента інтерфейсу користувача.
Редагувати після виявлення
Автоматично визначені поля можна повністю редагувати. Перемістіть, змініть розмір, видаліть або додайте нові поля, щоб уточнити результати.
Вибіркове повторне виявлення
Запустіть автоматичне виявлення в певній області зображення, якщо вам потрібні поля лише для частини макета.
Керівна поведінка
Сила обмежувальних рамок полягає в тому, щоб керувати тим, що робить кожен елемент. Після упаковки елемента ви можете призначити йому інтерактивну поведінку, яка буде відображена в згенерованому коді або каркасі:
Відкриває Modal
Натискання елемента відкриває модальне/діалогове вікно. Укажіть, який вміст має відображати модаль.
Перехід до розділу
Елемент діє як посилання або кнопка, яка переміщує на іншу сторінку чи розділ програми.
Перемикає вміст
Елемент показує або приховує пов’язаний контент — випадаючі списки, гармошки, панелі, що розгортаються.
Подання форми
Елемент запускає логіку перевірки форми та подання.
Спеціальна дія
Визначте будь-який спеціальний опис поведінки, і штучний інтелект згенерує відповідні обробники подій і логіку.