Quadres delimitadors
Visió general
Els quadres delimitadors són el model d'interacció bàsic de l'enginyeria inversa. Després de carregar una imatge, dibuixa rectangles al voltant dels elements individuals de la interfície d'usuari per aïllar-los. Cada quadre delimitador es converteix en una regió seleccionable a la qual es pot assignar un comportament, convertir-lo en codi o exportar-lo com a component de maquetes.
Flux de pantalla i grups
El llenç de flux de pantalla us permet organitzar el vostre treball d'enginyeria inversa en grups. Cada grup pot contenir múltiples imatges de pantalla i es pot classificar com a Pantalla (pàgines, seccions o vistes principals) o Modal (superposicions, diàlegs, finestres emergents, calaixos). Feu doble clic a un grup per obrir-lo i treballar amb les seves imatges.
Quadre manual
Obre la pestanya de flux
A la barra lateral dreta, vés a la pestanya de flux per veure les connexions existents o afegir-ne de noves.
Afegeix una connexió
Fes clic a Afegeix la primera connexió (o al botó +) per crear un flux nou. Tria una pantalla o un fotograma de destinació per connectar-hi.
Redimensiona i ajusta
Arrossega els límits o les cantonades de qualsevol quadre per afinar la seva posició i mida. Assegura't que envolta bé l'element de destinació.
Assigna el comportament
Selecciona un quadre i defineix què hauria de fer: per exemple, "obre un modal", "navega a /about" o "mostra un menú desplegable".
Auto-quadre per la IA
En lloc de dibuixar cada quadre manualment, fes servir l'auto-quadre de la IA per fer que Kaiju Hub AI detecti i delineï automàticament els elements de la interfície d'usuari a la teva imatge. La IA analitza el disseny visual i crea quadres delimitadors al voltant dels components detectats, com ara capçaleres, botons, targetes, inputs, imatges i elements de navegació.
Detecció amb un sol clic
Fes clic al botó d'auto-quadre i la IA escaneja tota la imatge, creant quadres delimitadors al voltant de cada element de la interfície d'usuari detectat.
Edita després de la detecció
Els quadres detectats automàticament es poden editar completament. Mou, redimensiona, elimina o afegeix nous quadres per refinar els resultats.
Redetecció selectiva
Executa la detecció automàtica en una regió específica de la imatge si només necessites quadres per a una part del disseny.
Dirigir el comportament
El poder dels quadres delimitadors rau en dirigir què fa cada element. Després d'enquadrar un element, pots assignar-li comportaments interactius que es reflectiran al codi o a la maqueta generada:
Obre un modal
Fent clic a l'element s'obre un modal/diàleg. Especifica quin contingut hauria de mostrar el modal.
Navega a la secció
L'element actua com a enllaç o botó que navega a una altra pàgina o secció de l'aplicació.
Alterna el contingut
L'element mostra o amaga el contingut relacionat: menús desplegables, acordions, panells expansibles.
Enviament del formulari
L'element activa la lògica de validació i enviament del formulari.
Acció personalitzada
Defineix qualsevol descripció d'acció personalitzada i la IA generarà els controladors d'esdeveniments i la lògica adequats.