Sisältö
- Tuo luonnoksesta
- Luo peite- ja avatar-tasot
- Määritä tilat
- Animoi valtioiden välillä
- Kokeile sitä oikealla mobiililaitteella
Suunnitteluprototyyppien perustelut eivät ole uusia - ne ovat samat kuin kaikki selaussuunnittelun suosiot. Kun näet mallin todellisessa yhteydessä, se on täysin erilainen. Teet parempia päätöksiä, kun sinun ei tarvitse tehdä oletuksia käyttöliittymän toiminnasta ja tuntemuksesta. Tämä saattaa kuulostaa ylimääräiseltä työltä, mutta oivallukset, joita voit saada näkemällä suunnittelusi toimivan, ovat korvaamattomia.
Framer on uusi koodipohjainen prototyyppityökalu. Voit luoda maketteja Sketchissä (tai Photoshopissa) tavalliseen tapaan ja tuoda ne Frameriin. Kirjoita sitten pieni CoffeeScript ja voit saavuttaa paljon.
Aion opettaa sinulle prototyyppien perustiedot Framerissa käyttämällä esimerkkiä iOS-sovelluksen prototyypistä, jossa on kaksi näkymää: profiilinäkymä ja zoomattu näkymä käyttäjän avatar-kuvasta. Prototyyppimme, kuinka laajennettu valokuvanäkymä avautuu ja sulkeutuu, ja animoimme myös sen. Katso online-esittely täällä (nähdäksesi lähdekoodin, napsauta vain vasemmassa yläkulmassa olevaa kuvaketta). Tarvitset myös Framerin ilmaisen kokeiluversion, jonka saat osoitteesta framerjs.com.
Tuo luonnoksesta
Ensimmäinen vaihe on tuoda tasot Sketchista Frameriin. Napsauta vain Tuo-painiketta Framerissa, kun muotoilu on auki Sketchissä, ja valitse oikea tiedosto seuraavasta valintaikkunasta. Framer tuo kuvat automaattisesti jokaisesta kerroksesta ja tekee niistä saatavana seuraavan koodin avulla:
luonnos = Framer.Importer.load "tuotu / profiili"
Käytä tätä muuttujaa päästäksesi tuotuihin tasoihin. Voit esimerkiksi viitata Sketch-tiedostossa olevaan ”sisältö” -kerrokseen kirjoittamalla sketch.content Frameriin.
Luo peite- ja avatar-tasot
Tämän prototyypin ydintoiminto on laajentaa avatar-kuvaa, kun sitä napautetaan, ja sitten sulkea se, kun sitä napautetaan uudelleen. Ensin luomme kaksi maskikerrosta - sisäkkäisen maskin tai maskin toisen maskin sisälle. Animoimme molemmat naamiot kerralla luodaksemme hienon, hienovaraisen avaavan ja sulkevan vaikutuksen. HeaderMask-kerros rajaa avatar-kuvan suorakulmioon, kun se laajennetaan, ja maskikerros rajaa sen pieneen ympyrään profiilinäkymässä.
Luo headerMask-kerros tällä tavalla:
headerMask = new Layer width: Näytön leveys, korkeus: 800 backgroundColor: "läpinäkyvä"
Koodin ensimmäinen rivi luo ja nimeää uuden tason. Sitten asetamme CoffeeScriptin sisennyksen syntaksin avulla leveyden, korkeuden ja taustan ominaisuudet. Käytämme läpinäkyvää taustaa, joten alla olevat kerrokset näkyvät, kun avatar-kuvaa laajennetaan.
Luo seuraavaksi maskikerros:
maski = uusi Kerroksen leveys: 1000, korkeus: 1000 taustaväri: "läpinäkyvä", reunusRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0
Luomme uuden kerroksen ja asetamme ominaisuudet samalla tavalla. Suuri borderRadius tekee tästä kerroksesta ympyrän. Sijoitamme maskikerroksen siten, että se menee päällekkäin Sketchistä tuotun otsikkokerroksen kanssa. Pienennämme myös 20 prosenttiin eli 0,2: een. Alkuperä nolla asettaa kuvan ankkuripisteen tai rekisteröinnin yläreunaan.
Jäljellä oleva ominaisuus, superLayer, määrittää luomamme headerMask-tason tämän uuden tason ylätasoksi. Näin naamiointi toimii Framerissä. Määritä yksinkertaisesti superLayer-ominaisuus, ja ylätaso peittää lapsen.
Seuraavaksi meidän on luotava avatar-grafiikka ja sijoitettava se näiden uusien naamioiden sisään. Rajausrajojen zoomaamiseksi ja animoimiseksi luomme avatar-tason manuaalisesti. Kopioi valokuva projektikansion 'images' -alikansioon. Luo sitten taso käyttämällä tätä kuvaa:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Huomaa, että asetimme avatarin superLayerin maskikerrokseksi. Molemmat ovat nyt sisäkkäin headerMaskissa. Asetamme myös leveyden ja korkeuden, jotta kuva täyttää peitetyn alueen kokonaan.
Viimeiseksi luomme muuttujan animaatioon käytetyn maskin Y-sijainnin tallentamiseksi. Keskitämme sen vaakasuoraan, koska se on suurempi kuin näyttö.
maskY = naamio.y mask.centerX ()
Määritä tilat
Animaation luomisen ensimmäinen vaihe on alku- ja lopputilojen määritteleminen. Framerissä tilat ovat kuin koodiksi kirjoitetut avainkehykset. Osavaltio on vain kokoelma ominaisuuksia. Jokaisella kerroksella on oletustila. Tälle prototyypille kyseinen oletusarvo toimii animaation aloituskohtana, joten meidän on asetettava vain toinen tila kullekin kerrokselle.
Tilojen syntaksi on hyvin yksinkertainen. Viita tasoon, käytä layer.states.add () -menetelmää ja listaa sitten sisällytettävät ominaisuudet.
sketch.content.states.add (piilota: {peittävyys: 0}) headerMask.states.add (siirrä: {y: 120}) mask.states.add (kasvaa: {scale: 1.1, y: maskY - 420})
Sketchista tuotun sisältökerroksen toisen tilan, joka sisältää kaikki muut profiilinäyttöelementit, pitäisi olla täysin läpinäkyvä. Tällä tavalla, kun avataria laajennetaan, taustamme on musta ja loput tuodut kuvakkeet ja elementit näkyvät läpi.
Toinen koodirivi luo headerMask-tilan, joka siirtää sen yksinkertaisesti Y-asentoon 120. Tämä sallii otsikon ja sulkemispainikkeen näytön yläreunassa, kun avatar-kuvaa suurennetaan. Se animoi myös avatar-kuvan rajausrajat.
Viimeiseksi uusi naamiokerroksen tila sekä skaalaa sitä ylöspäin että siirtää sitä ylöspäin käyttämällä aiemmin luomaamme maskY-muuttujaa. Koska maskikerroksen origY (tai ankkuripiste) on sen yläreuna, meidän on siirrettävä sitä 420 pikseliä ylöspäin, jotta kuvan keskipiste on näkyvissä.
Animoi valtioiden välillä
Animoidaksesi oletustilojen ja juuri luomamme uudet tilat tarvitsemme vain neljä koodiriviä lisää. Asetamme napsautuskäsittelijän avatar-tasolle. Kun käyttäjä napauttaa sitä profiilinäytössä, siirrymme laajennettuun näkymään pyöräilytilojen mukaan. Kun sitä napautetaan uudelleen, palataan oletusarvoihin, jotta se palaa pieneen ympyrään. Samat koodirivit käsittelevät molempia vuorovaikutuksia:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Tämän lohkon ensimmäinen rivi asettaa napsautuskäsittelijän avatar-kerrokseen. Aina kun sitä napautetaan, riippumatta siitä, kuinka se rajataan tai minkä kokoinen se on, seuraavat lauseet suoritetaan.
Sitten viittaamme yksinkertaisesti kuhunkin kerrokseen ja vaihdamme tiloja vaihtaessa layer.states.next () -menetelmää. Kun käytät layer.states.next () -ohjelmaa, Framer käyttää sisäisiä oletusanimaatioasetuksiaan. Tämä on erittäin kätevää, mutta voit tehdä vielä parempia animaatioita hienostamalla animaatiokäyrät.
Kun käytetään tiloja, kuten olemme täällä, voit helposti muuttaa kutakin animaatiokäyrää erikseen käyttämällä layer.states.animationOptions-ominaisuutta. Vain kolmella pienellä säädöllä animaatio tuntuu täysin erilaiselta:
sketch.content.states.animationOptions = käyrä: "helppous", aika: 0.3 headerMask.states.animationOptions = käyrä: "spring (150, 20, 0)" mask.states.animationOptions = käyrä: "spring (300, 30, 0) "
Sisältökerrokselle, joka on hiipumassa ja sisään, valitaan yksinkertainen käyrän esiasetus, helppous ja asetetaan animaation kestoksi 0,3, jotta se olisi erittäin nopea.
Käytä headerMask- ja maskikerroksiin jousikäyrää. Meidän tarkoituksiin sinun on vain tiedettävä, että jousikäyrän arvot muuttavat animaation nopeutta ja palautumista. Maskikerroksen arvot tekevät animaatiosta paljon nopeamman kuin headerMask ja sisältö. Lisätietoja jousikäyrän asetuksista on Framer-ohjeissa osoitteessa framerjs.com/docs.
Kokeile sitä oikealla mobiililaitteella
Suunnittelun näkeminen oikealla laitteella on paljon tehokkaampaa kuin emulaattoreiden käyttö, ja näet työsi edut. Framer sisältää peilitoiminnon, joka on sisäänrakennettu palvelin, joka tarjoaa prototyyppisi URL-osoitteen lähiverkossa. Käy vain URL-osoitteessa laitteellasi.
Olet oppinut kaiken, mitä sinun tarvitsee tietää omien malliesi prototyyppien tekemiseksi Framerissä. Mitä odotat?
Sanat: Jarrod Drysdale
Jarrod Drysdale on kirjailija, suunnittelukonsultti, digitaalisten tuotteiden valmistaja. Tämä artikkeli julkaistiin alun perin verkkolehden numerossa 270.
Piditkö tästä? Lue nämä!
- Luo napsautettavia live-prototyyppejä Sketchissä
- Kuinka perustaa blogi
- Parhaat valokuvankäsittelyohjelmat
