Käytä Frameer X: tä interaktiivisten prototyyppien rakentamiseksi

Sep 15, 2025

Miten tehdään

(Image Credit: Framer)

Suunnittelijana on aina kysymys siitä, mitä prototyyppityökaluja sinun pitäisi käyttää projektisi. Siellä on paljon ohjelmistoja, kuten Wireframing (katso Top Wireframing-työkalut ja erinomainen Verkkosivuston rakentajat ), prototyyppien ja monimutkaisten vuorovaikutusten rakentaminen; Kuitenkin hyvin harvat työkalut pystyvät käsittelemään kaikkia näitä. Frameer on yksi työkalu, jolla on kaikki nämä toiminnot ja nopeuttaa suuresti pieniä animaatioita ja vuorovaikutuksia.

Uusin iterointi, Framer X , käyttää nyt reagoivaa ja JavaScriptia sen sijaan, että käytät kahvilaa mikro-vuorovaikutusten ja animaation kehittämiseen. Tämä auttaa tuottamaan nopeammin kuormitusaikaa ja parempaa suorituskykyä. Plus reagoivien komponenttien käyttö tarkoittaa sitä, että käyttäjillä on enemmän mahdollisuuksia lisätä ja laajentaa, mukaan lukien mediasoittimet, reaaliaikaiset tiedot ja kaaviot prototyyppeihin.

Testaus on ydinosa prototyyppirakennusprosessista ja vaikka Framer X on erinomainen luomalla vuorovaikutteisia prototyyppejä, joita se tarvitsee auttaa, kuinka hyvät sen luomukset ovat. Tutustu meidän Käyttäjän testaus Lähetä joitain parhaita työkaluja täydentää framer ja auttaa rakentamaan todellisia prototyyppejä ja varmista, että käytät parhaiten sivujen ylläpito Palvelu sinulle.

Miten luoda sovellus Framer X: n kanssa

Arvostamaan Framer X: n voimaa luomaan todellisen elämän projektin: yksinkertainen ruoanlaitto-resepti sovellus jonkin verran sisältöä ja mediaa (varat, jotka varmuuskopioidaan luotettavasti pilvivarasto ). Ensimmäinen asia rakentaa on kotisivu. Pidämme asiat yksinkertaisina seuraavilla elementeillä:

Standard Search Bar löytää reseptejä
Viimeaikaiset toiminnot näyttämään viimeisimmät reseptit
Resepti-kortit, jotka osoittavat asioita, kuten suosituimmat reseptit
Luoda yksityiskohtainen näkymä reseptistä video- ja jakamisvaihtoehdoista

Aloittaminen Sinun täytyy luoda uusi kehys (artboard) klikkaamalla + -kuvaketta vasemmalla navbar. Valitse artboard-tyyli luettelosta standardin iPhone / Android-malleista oikealla palkilla. Nyt olet valmis menemään.

01. Rakenna hakupalkki

Aloitetaan rakentamalla hakupalkki. Sen sijaan, että luot suorakulmion ja lisäämällä hakukuvaketta, kuten normaalisti, voimme todella käyttää nopeita uudelleenkäytettäviä komponentteja Framer X: ssä, niitä kutsutaan paketeiksi. On tuhansia paketteja, jotka löytyvät vasemmanpuoleisesta navigointipalkista varastossa. Napsauta Storea, etsi Android Kit ja esimerkkipakkaus ja asenna ne sitten.

Nämä paketit sisältävät elementtejä, kuten kortteja, painikkeita, näppäimistöjä, liukusäätimiä, tuloja ja navigointivalikkoa. Kun olet asentanut nämä paketit, voit käyttää elementtejä vasemmalla olevista komponenttien valikosta.

Etsi haluamasi elementit etsimällä suodatinta - tässä tapauksessa hakupalkki, joka löytyy esimerkkipaikasta. Yksinkertaisesti vedä ja pudota se kehykseen. Nyt voit muokata ominaisuuksia, kuten paikkamerkin tekstiä, fonttikokoa ja väriä oikealla palkilla.

02. Luo sisältöpino

Tämän viimeaikaisen toiminnan lohkon osalta lisää ensin teksti "Viimeaikainen toiminta", joka on melko suoraviivainen. Nyt voimme käyttää Frameer X: n uutta ominaisuutta. Tämä voidaan tehdä klikkaamalla + -kuvaketta ja valitsemalla pino s valikosta. Kun olet valinnut pinon, vedä ja pudota alue 600 x 300 työryhmässä työn luomiseksi. Tämä pino näytetään sinisenä.

Mennään nyt komponenttien osastoon ja Android-sarjaan, etsi kortin 5 elementti ja vedä se vain luomutuimme pinoon. Kopioi nämä kortit kahdesti ja varmista, että kaikki kolme korttia ovat pinossa.

Niin kauan kuin ne ovat pinossa, nämä kolme korttia voidaan helposti järjestää uudelleen ilman, että sinun täytyy huolehtia etäisyydestä. Jos haluat lisätä korttien välistä etäisyyttä, voit lisätä koko pinon leveyttä. Se on niin yksinkertaista. Voit myös muokata näitä kortteja muuttamalla otsikon ja taustan nimeä mielesi mukaan.

Nyt kun olemme luoneet pinon, anna se vieritettäväksi. Siirrä se pois kehyksestä / artboardista. Napsauta + -kuvaketta vasemmalta navilta ja napsauta Scroll-vaihtoehtoa. Aivan kuten löysimme pinon alueen, luo rullattava alue kehyksessä / artboardissa, joka on sama koko kuin pino.

Muuta nyt oikeanpuoleisen vierityksen ominaisuutta muuttamalla suunta-nuolia, jotta se olisi vaakasuora vieritys. Sen jälkeen, kun Scroll Container on luotu, tarvitsemme sen sisältöä, jota palvelemme aiemmin luomamme pino. Joten yksinkertaisesti liitä vierityssäiliö pinoon nuolinäppäimellä Scroll-säiliössä. Se toimii vetämällä hiiren osoitin pinoon.

03. Luo pystysuora pino

Interactive Framer X - 01 — Framer X: n avulla voit ottaa käyttöön horisontaaliset ja pystysuorat vieritettävät pinot (Kuva luotto: VAMSI Batchu)

Resepti-kortteja sinun on noudatettava samanlaista menetelmää kuin vaihe 2, mutta sen sijaan, että luodaan korttien vaakasuuntainen vieritys, luodaan samanlainen pystysuora, joka on lähinnä luettelo suosituimmista resepteistä, joissa on pikkukuvia. Tätä harjoitusta varten jokaisella reseptillä on neljä elementtiä - kuvan pikkukuvaa, luokitusta, reseptin nimi ja tarvittava aika.

Älä huoli kunkin kortin yksityiskohdista. Ne voidaan mukauttaa suunnittelun makuasi perusteella. Noudata samaa tapaa käyttää korttia komponenteista, kopioida niitä ja lisäämällä ne kaikkiin pinoon, jossa on pystysuuntainen vieritys.

04. Luo uusi sivu

Luodaan uusi sivu, joka siirtyy tietyn reseptin yksityiskohtiin. Esimerkiksi toisesta kortista: Ranskan pasta. Tämän uuden sivun luominen luo uusi kehys / artboard ja esitellä elementit, joita tarvitsemme lisätietoja Ranskan Pasta-reseptistä. Tämä uusi sivu voidaan jakaa videoon, otsikko, luokitus, aika, joka tarvitaan sen ja muutaman toimintopainikkeiden, kuten tallentaa luetteloon ja jakaa sosiaaliseen mediaan.

Videon lisäämiseksi siirry kauppaan ja asenna YouTube-paketti, jonka avulla voit helposti lisätä videoita prototyyppisi. Siirry nyt komponentit-paneeliin ja vedä ja pudota YouTube-elementti YouTube-komponentin alla kehykseen.

Säädä pikkukuvan leveys siten, että se sopii kehyksen leveyteen. Oikeissa ominaisuuksissa voit lisätä videon URL-osoitteen, jonka haluat toistaa prototyyppissä. Jos haluat, on myös keino autoplay videoita valintaruutu Ominaisuudet-paneelissa.

Tämän videon alapuolella voit lisätä otsikon, luokituksen ja erilaiset kuvakkeet. Jos haluat lisätä kuvakkeita esimerkkimme, käytin komponenttia kuvakkeiden generaattorista. Se on helppo prosessi: yksinkertaisesti vedä ja pudota peruskuvake kehykseen ja muuta sitten oikeanpuoleisen paneelin kuvaketta "sydän" ja "Share". Tämä muuttaa peruskuvakkeita tallennettuihin ja osakkeisiin vastaavasti. Heidän värinsä voidaan helposti muuttaa oikean paneelin avulla.

Voit tehdä asioita helppoa kävijöille, voit lisätä osion nimeltä Ainredientit, jotka luetsisivat kaikki reseptimme tarvittavat ainesosat - tässä tapauksessa ranskalainen pasta.

05. Ota käyttöön vuorovaikutukset

Interactive Framer X - 02 — Lisää vuorovaikutuksia painikkeisiin ja elementteihin, jotta ne lisäävät enemmän (Kuva luotto: VAMSI Batchu)

Nyt mallimme lisäämällä lisäämällä vuorovaikutusta painikkeelle. Ihannetapauksessa, kun napsautat osake-kuvaketta, sinun on kehotettava näytöllä jakamaan resepti erilaisten sosiaalisen median kanavien kautta. Rakennetaan uusi kehys.

Varmista, että tämän kehyksen leveys ja korkeus on sama leveys ja korkeus kuin muut kaksi kehystä. Ajatuksena on tämä uusi osake-näyttö liukua ylös ja korvaa nykyinen näyttö, kun osake-kuvaketta napsautetaan.

Jos haluat tehdä näytön erilliseksi, lisätään värin ja täyttää sen sosiaalisen median kuvakkeet, kuten Facebook, Instagram, Whatsapp ja Sähköposti. Tämän osakekannan pitäisi myös olla siihen lisätty X-kuvake, joka napsauttaessa, että se tuovat sen takaisin alkuperäiseen tilaan.

Varmista, että kaikki kuvakkeet on järjestetty pinoon. Heti kun X-kuvake sisältyy, seuraava vaihe on linkittää tämä kehys niin, että se avautuu, kun napsautat osake-kuvaketta.

Voit tehdä tämän valitsemalla Kehys, joka sisältää osakkeen kuvakkeen. Oikeanpuoleisessa paneelissa on nimeltään kiinteistö. Kun napsautat sitä, sovellusrajapinta antaa sinulle nuolen, jonka voit vetää luomaan uusi osakekurssi. Tämä luo linkin taustalla.

Nyt, kun valitset Share-kuvakkeen, huomaat oikeanpuoleisessa paneelissa uusia ominaisuuksia, jotka ovat tavoite, siirtyminen ja suunta. Jokainen näistä ominaisuuksista voit muuttaa elementtejä, kuten siirtymiä ja suunta, jossa näytön tulee ponnahtaa jne.

Voit testata, jos prototyyppi toimii tai ei napsauttamalla käyttöliittymän oikeassa yläkulmassa olevaa toistokuvaketta. Samoin sinun on liitettävä osake-näyttö videonäytölle niin, että kun käyttäjä napsauttaa X-kuvaketta, se palaa edelliseen näyttöön.

Tämä voidaan saavuttaa käyttämällä vastaavaa linkin ominaisuutta ja lisäämällä kohde videon näytöksi. Jos haluat mennä lisäämään hieman vaihtelua, voit tehdä suuntaa vasemmalle yläosan sijasta ja käytä sitten toistokomentoa testaamaan, jos vuorovaikutus toimii vai ei.

06. Lisää Tallenna-painike

Katsotaan nyt SAVE-kuvaketta. Täällä, tavoitteenamme on, että aina kun kävijä napsauttaa sydämenmuotoinen kuvake, olisi pop-up-ikkunan, jossa kysytään, haluatko tallentaa resepti mittatilaustyönä lista.

Aloitetaan luomalla uuden kehyksen nimeltä tallennetut luettelot. Aivan kuten edellisen yhden kanssa, varmista, että tämä kehys on sama leveys, mutta tällä kertaa sinun on vähennettävä sen korkeutta, koska se näkyy päällekkäin napsauttaessa. Tallennetun luettelon kehyksen muotoilussa Lisää otsikko, tekstin syöttö syöttääksesi luettelon nimi ja painike, joka on CTA sen tallentamiseksi.

Jos haluat linkittää, valitse äänikehyksessä oleva sydämen muotoinen kuvake ja lisää linkki tallennettuihin luetteloihin. Nyt siirtymäominaisuuden sijasta työnnetään, tee se peitto. Säädä se 80%: iin ja testaa se sitten toistopainikkeella. Muokkaa, kunnes olet tyytyväinen peittoon. Linkki X-kuvake tallennetuissa luetteloissa Kuvake Takaisin Video-sivulle.

Näin kehyste X: n käyttö voidaan helposti luoda toiminnallisia interaktiivisia prototyyppejä. Käytettävissä on myös kehittyneitä työkaluja sekä lisäämällä reagoimaan koodauspätkät kehyselementteihin. Myös Framer X: n paras osa on, että kukaan voi hallita sitä kokeilemalla sitä muutamalla prototyypillä.

Tämä artikkeli julkaistiin alun perin julkaisussa 325, maailman myydyin aikakauslehti Web-suunnittelijoille ja kehittäjille. Osta numero 325 tai tilata verkkoon.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — Opi rakentamaan parempaa JavaScript Generatejsissa (Kuva Luotto: Tulevaisuus / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftba, Unsplash)

Liity meihin huhtikuussa 2020 JavaScript Superstarsin kokoonpanolla Generatejs - konferenssi auttaa sinua rakentamaan parempaa JavaScriptia. Varaa nyt generateconf.com

Lue lisää:

Kuinka erottua ja palkataan UX-suunnittelija
20 UX-vinkkejä sinun täytyy tietää
22 parasta UI-suunnittelutyökalua

Käytä Frameer X: tä interaktiivisten prototyyppien rakentamiseksi

Miten luoda sovellus Framer X: n kanssa

01. Rakenna hakupalkki

02. Luo sisältöpino

03. Luo pystysuora pino

04. Luo uusi sivu

05. Ota käyttöön vuorovaikutukset

06. Lisää Tallenna-painike

Miten tehdään - Suosituimmat artikkelit

Affinity Designer: Kuinka käyttää vaikutuksia ja tyylit

Miten luoda sovellus Vue.js

Rakenna ristikkäiset mobiilisovellukset Googlen flutter

Tee interaktiiviset 3D typografiavaikutukset

Luo täydellisesti geometrinen logo Design Illustratorissa

Oikean prototyypin työkalun valitseminen

Sharpen Still Life Maalausosaaminen

Creative Design Frient

Luokat