Efni.
- Flytja inn frá skissu
- Búðu til grímu og avatar lög
- Skilgreindu ríki
- Lifa milli ríkja
- Prófaðu það á alvöru farsíma
Rökin á bak við frumgerð hönnunar eru ekki ný - það er það sama og allt suðið um að hanna í vafranum. Þegar þú sérð hönnun í raunverulegu samhengi er hún allt önnur. Þú tekur betri ákvarðanir þegar þú þarft ekki að gera forsendur fyrir því hvernig viðmót mun virka og líða. Þetta kann að hljóma eins og aukavinna en innsýnin sem þú getur fengið með því að sjá hönnunina virka er ómetanleg.
Framer er nýtt frumgerðartæki sem byggir á kóða. Þú getur búið til mockups í Sketch (eða Photoshop) alveg eins og venjulega og flutt inn í Framer. Þá skaltu skrifa smá CoffeeScript og þú getur náð miklu.
Ég ætla að kenna þér grundvallaratriðin í frumgerð í Framer með því að nota dæmi um iOS app frumgerð með tveimur skoðunum: sniðsýn og aðdráttarskoðun á mynd mynd notandans. Við munum búa til frumgerð hvernig stækkaða myndasýning opnast og lokast og við munum einnig gera það líflegt. Skoðaðu kynningu á netinu hér (til að sjá frumkóðann, smelltu bara á táknið efst í vinstra horninu). Þú þarft einnig ókeypis prufuáskrift að Framer sem þú getur fengið á framerjs.com.
Flytja inn frá skissu
Fyrsta skrefið er að flytja inn lög frá Sketch í Framer. Smelltu einfaldlega á Import hnappinn í Framer meðan hönnunin er opin í Sketch og veldu rétta skrá í glugganum sem fylgir. Framer mun sjálfkrafa flytja inn myndir úr hverju lagi og gera þær aðgengilegar með kóða sem þessum:
sketch = Framer.Importer.load "flutt / prófíl"
Notaðu þessa breytu til að fá aðgang að innfluttum lögum. Til dæmis, til að vísa til lagsins sem heitir „innihald“ í skissuskránni, myndirðu slá sketch.content í Framer.
Búðu til grímu og avatar lög
Meginhlutverk þessarar frumgerðar er að stækka avatarmyndina þegar hún er bankað á og loka henni þegar hún er bankuð aftur. Í fyrsta lagi búum við til tvö grímulög - hreiður grímu eða grímu inni í öðrum grímu. Við munum lífga báðar grímurnar í einu til að skapa falleg, lúmskur opnunar- og lokunaráhrif. HeaderMask lagið mun skera avatarmyndina í ferhyrning þegar það er stækkað og grímulagið mun skera það í lítinn hring á prófílsýninni.
Búðu til headerMask lagið svona:
headerMask = nýtt lagbreidd: Skjár.breidd, hæð: 800 bakgrunnur Litur: "gegnsætt"
Fyrsta kóðalínan býr til og nefnir nýja lagið. Síðan, með því að nota innsetningarkennslu CoffeeScript, stillum við breidd, hæð og bakgrunnseiginleika. Við notum gagnsæjan bakgrunn svo lögin hér að neðan birtast þegar mynd af myndinni er stækkuð.
Næst skaltu búa til grímulagið:
gríma = ný Lagbreidd: 1000, hæð: 1000 bakgrunnur Litur: "gagnsæ", border Radius: 500 y: sketch.header.height - 100 superLayer: header Grímuskala: 0,2, uppruni Y: 0
Við búum til nýtt lag og stillum eiginleika á sama hátt. Stóri borderRadius gerir þetta lag að hring. Við setjum grímulagið þannig að það skarist við hauslagið sem var flutt inn frá Sketch. Við munum einnig lækka niður í 20 prósent eða 0,2. UppruniY af núlli stillir akkeripunktinn eða skráningu myndarinnar á efstu brún.
Eftirstöðvarnar, ofurlag, stillir hausMask lagið sem við bjuggum til sem foreldri þessa nýja lags. Svona virkar gríma í Framer. Einfaldlega stilltu superLayer eignina og þá mun móðurlagið gríma barnið.
Næst verðum við að búa til myndina fyrir avatar og setja hana inni í þessum nýju grímum. Til að stækka og lífga uppskerumörkin búum við til avatarlagið handvirkt. Afritaðu ljósmynd í undirmyndina í undirmöppu verkefnamöppunnar. Búðu síðan til lag með því að nota þá mynd:
avatar = ný Layer image: "images / avatar.png" breidd: mask.width, height: mask.height superLayer: mask, force2d: true
Takið eftir að við stillum ofurlagi avatar sem grímulaga. Báðir eru nú hreiður í headerMask. Við stillum einnig breidd og hæð svo myndin fylli grímusvæðið alveg.
Síðast munum við búa til breytu til að geyma Y stöðu grímunnar sem við notum fyrir hreyfimyndina. Við miðjum það lárétt þar sem það er stærra en skjárinn.
maskY = mask.y mask.centerX ()
Skilgreindu ríki
Fyrsta skrefið í því að búa til hreyfimynd er að skilgreina upphafs- og endaríki. Í Framer eru ríki eins og lykilrammar skrifaðir út í kóða. Ríki er bara safn eigna. Hvert lag hefur sjálfgefið ástand. Fyrir þessa frumgerð mun sú vanræksla þjóna sem upphafspunktur hreyfimyndarinnar, þannig að við þurfum aðeins að setja annað ástand fyrir hvert lag.
Setningafræði ríkja er mjög einföld. Tilvísaðu í lagið, notaðu lagið.states.add () aðferðina og skráðu síðan eiginleikana sem eiga að vera með.
sketch.content.states.add (fela: {ógagnsæi: 0}) headerMask.states.add (færa: {y: 120}) mask.states.add (vaxa: {skali: 1.1, y: maskY - 420})
Annað ástand innihaldslagsins, sem var flutt inn frá Sketch og inniheldur alla aðra prófílskjáþætti, ætti að vera alveg gegnsætt. Þannig, þegar avatarinn er stækkaður, munum við hafa svartan bakgrunn og hin innfluttu táknin og þættirnir munu birtast í gegn.
Önnur kóðalínan býr til ástand fyrir headerMask, sem einfaldlega færir það niður í Y stöðu 120. Þetta gerir titlinum og lokunarhnappnum kleift að birtast efst á skjánum þegar avatar myndin er stækkuð. Það mun einnig gera lífskjör að uppskerumörkum ljósmyndarans.
Að lokum, nýtt ástand fyrir grímulagið mun bæði stækka það og færa það upp með því að nota maskY breytuna sem við bjuggum til áðan. Vegna þess að uppruni Y (eða akkeripunktur) grímulagsins er efri brún þess verðum við að færa það upp um 420 punkta svo að miðja myndarinnar séist.
Lifa milli ríkja
Til að gera líf milli sjálfgefnu ríkjanna og þeirra nýju sem við bjuggum til, þurfum við aðeins fjórar línur af kóða. Við munum stilla smellihöndlun á avatar lagið. Þegar notandi bankar á prófílskjáinn munum við fara yfir í stækkaða sýn með hjólreiðaríkjum. Þegar það er slegið aftur munum við fara aftur í sjálfgefið ástand svo það snúi aftur í lítinn hring. Sömu línur kóðans höndla bæði milliverkanir:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Fyrsta línan í þessari blokk setur upp smellahandfangið á avatar laginu. Hvenær sem það er tappað, sama hvernig það er klippt eða í hvaða stærð það er, munu fullyrðingarnar sem fylgja fylgja hlaupa.
Síðan vísum við einfaldlega í hvert lag og notum aðferðina layer.states.next () til að skipta um ríki. Þegar þú notar layer.states.next () mun Framer nota sjálfgefnu fjörstillingarnar. Þetta er mjög þægilegt en þú getur búið til enn betri hreyfimyndir með því að fínstilla hreyfimyndalínurnar.
Þegar þú notar ríki eins og við erum hérna geturðu auðveldlega breytt hverri hreyfikúrfu fyrir sig með því að nota eignina layer.states.animationOptions. Með aðeins þremur smávægilegum aðlögunum finnst fjörinu allt annað:
sketch.content.states.animationOptions = ferill: "vellíðan", tími: 0,3 headerMask.states.animationOptions = ferill: "vor (150, 20, 0)" mask.states.animationOptions = ferill: "vor (300, 30, 0) „
Fyrir innihaldslagið sem dofnar út og inn, munum við velja einfalda forstillingu ferils, vellíðan og stilla tímalengd fjörs á 0,3 svo það sé mjög fljótt.
Notaðu vorferil fyrir hausMaskann og grímulögin. Í okkar tilgangi þarftu bara að vita að gormgormurinn breytir hraða og hopp hreyfimyndarinnar. Gildin fyrir grímulagið gera fjör þess mun hraðari en hausMask og innihald. Nánari upplýsingar um vorferilsstillingar er að finna í skjölum Framer á framerjs.com/docs.
Prófaðu það á alvöru farsíma
Að sjá hönnunina á raunverulegu tæki er svo miklu áhrifaríkara en að nota keppinautana og þú munt sjá ávinninginn í starfi þínu. Framer inniheldur spegilaðgerð, sem er innbyggður netþjónn sem býður upp á slóð á frumgerðina þína á þínu staðarneti. Farðu einfaldlega á slóðina með tækinu þínu.
Þú hefur lært allt sem þú þarft að vita til að frumgera eigin hönnun í Framer. Eftir hverju ertu að bíða?
Orð: Jarrod Drysdale
Jarrod Drysdale er höfundur, hönnunarráðgjafi, framleiðandi stafrænna vara. Þessi grein var upphaflega birt í 270. tölublaði net tímaritsins.
Líkaði þetta? Lestu þessar!
- Búðu til smellt, lifandi frumgerð í Sketch
- Hvernig á að stofna blogg
- Bestu myndritstjórarnir
