Rajaavat laatikot
Yleiskatsaus
Rajauslaatikot ovat käänteisen suunnittelun keskeinen vuorovaikutusmalli. Kun olet ladannut kuvan, piirrät suorakulmaisia laatikoita yksittäisten käyttöliittymäelementtien ympärille, jotta voit eristää ne. Jokaisesta rajalaatikosta tulee valittava alue, jolle voidaan määrittää käyttäytyminen, muuntaa se koodiksi tai viedä se kehyskomponenttina.
Näytön virtaus ja ryhmät
Näytön virtauskangas avulla voit järjestää käänteisen suunnittelutyösi ryhmiin. Jokainen ryhmä voi sisältää useita näyttökuvia, ja se voidaan tyypittää joko Näyttö (pääsivut, osiot tai näkymät) tai Modaali (päällekkäisyydet, valintaikkunat, ponnahdusikkunat, laatikot). Kaksoisnapsauta ryhmää avataksesi sen ja työskennelläksesi sen kuvien kanssa.
Manuaalinen rajaus
Valitse Rajauslaatikko-työkalu
Valitse rajalaatikoiden piirtotyökalu työkalupalkista kuvan yläpuolella.
Piirrä laatikko
Napsauta ja vedä kuvaa piirtääksesi suorakulmaisen laatikon käyttöliittymäelementin ympärille – painikkeen, kortin, navigointipalkin, yläosan tai minkä tahansa komponentin.
Muuta kokoa ja säädä
Vedä minkä tahansa laatikon reunoja tai kulmia hienosäätääksesi sen sijaintia ja kokoa. Varmista, että se ympäröi tiukasti kohde-elementin.
Määritä käyttäytyminen
Valitse laatikko ja määritä, mitä sen pitäisi tehdä – esimerkiksi "avaa modaali-ikkuna", "siirtyy osoitteeseen /about" tai "näyttää avattavan valikon".
Tekoälypohjainen automaattinen rajaus
Sen sijaan, että piirtäisit jokaisen laatikon manuaalisesti, käytä tekoälypohjaista automaattista rajalaatikoiden luontia, jotta Kaiju Hub AI havaitsee ja rajaa käyttöliittymäelementit kuvassasi automaattisesti. Tekoäly analysoi visuaalisen asettelun ja luo rajalaatikot havaittujen komponenttien, kuten otsikoiden, painikkeiden, korttien, syöttökenttien, kuvien ja navigointielementtien ympärille.
Yhden klikkauksen tunnistus
Napsauta automaattisen rajauksen painiketta, niin tekoäly skannaa koko kuvan ja luo rajalaatikot jokaisen havaitun käyttöliittymäelementin ympärille.
Muokkaa tunnistuksen jälkeen
Automaattisesti havaitut laatikot ovat täysin muokattavissa. Siirrä, muuta kokoa, poista tai lisää uusia laatikoita tulosten tarkentamiseksi.
Valikoiva uudelleentunnistus
Suorita automaattinen tunnistus kuvan tietylle alueelle, jos tarvitset laatikoita vain osaan asettelusta.
Käyttäytymisen ohjaus
Rajalaatikoiden voima piilee siinä, että ne määrittävät, mitä kukin elementti tekee. Kun olet rajannut elementin, voit määrittää sille interaktiivisia käyttäytymismalleja, jotka heijastuvat luotuun koodiin tai kehysasetteluun:
Avaa modaali-ikkuna
Kun elementtiä napsautetaan, se avaa modaali-ikkunan/valintaikkunan. Määritä, mitä sisältöä modaali-ikkunan tulisi näyttää.
Siirtyy osioon
Elementti toimii linkkinä tai painikkeena, joka siirtyy toiselle sivulle tai sovelluksen osioon.
Vaihtaa sisältöä
Elementti näyttää tai piilottaa liittyvää sisältöä – avattavia valikoita, harmonikkaluetteloita, laajennettavia paneeleita.
Lomakkeen lähetys
Elementti käynnistää lomakkeen validointi- ja lähetyslogiikan.
Mukautettu toiminto
Määritä mukautettu käyttäytymiskuvaus, niin tekoäly luo asianmukaiset tapahtumakäsittelijät ja logiikan.