Prototyping fyrir vefinn með Framer
Framer er mjög öflugt tól sem hægt er að prototype nokkuð sem þú getur hugsað um en ef þú skoðar Gallerí Framer verður þú fljótlega að taka eftir einhverju:
Af 54 dæmum þeirra, 48 þeirra eru forrit, 4 fyrir Apple Watch, 1 fyrir iPad og 1 fyrir Apple TV. Er Framer jafnvel ætlað fyrir 'hefðbundinn' vef / skrifborðs hönnun?
Algerlega.
Í IBM Hönnun eru flestar mínar hönnun gerðar fyrir vefborðsforrit fyrir fyrirtæki. Flestir hönnuðir sem ég vinn með notkun Skissa (þ.mt ég sjálfur). Þessar Sketch skrár eru síðan frumgerð með því að nota tól eins InVision eða endurskapað og frumritað í kóða. Sem framkvæmdaraðili á hönnunarsteymi hef ég einstaka stöðu þar sem ég bæði hönnun og kóða frumgerð.
Eftir að hafa lækkað grunnatriði Framer ákvað ég að bæta því við vinnsluferlinu og það hefur í raun batnað hönnunarferlið mitt. Stærsti hlutinn er að flytja inn kyrrstöðu Sketch skrá inn í Framer og breyta því í raunhæf, gagnvirk frumgerð á tiltölulega stuttan tíma.
Með þessu þarf ég ekki að eyða dýrmætum tíma í upphafi ferlisins að endurskapa hönnun í kóða. Ég get fengið hugmyndir fyrir hagsmunaaðila og notendur miklu hraðar. Ég get vistað kóðun fyrir seinna þegar verkefnið er sterkari.
Eftir að hafa notað Framer í nokkra mánuði hér eru nokkrar hlutir sem ég hef lært:
Skipuleggja og umfang frumgerðin þín
Áður en ég byrjar verkefni ákveður ég nokkra hluti:
Hvað er ég að reyna að ná?
Hvort frumgerðin er notuð til að prófa notendur eða fá hugmynd að hugmyndum, hvað er lágmarksfjöldi vinnu sem þarf til að fá hugmyndina mína yfir eða til að öðlast innsýn frá prófunum? Ég er ekki bara latur;), þetta hjálpar til við að ákveða nauðsynlegar samskipti, hreyfimyndir og skjái sem þarf.
Því meiri tími sem þú eyðir á hönnun þinni því meira sem þú verður viðhengdur. Því meira sem fylgir, því líklegra er að þú gerir nauðsynlegar breytingar.
Við skulum nota frumgerðina hér að ofan sem dæmi.
Ég var að vinna að nýju verkefni og langaði til að kanna hvaða kortafjölskylda skipulag með hreyfimyndir í milli ríkja myndi líta út. Ég setti fram grundvallar hugmyndina sem ég vildi gera og notaði það sem upphafspunkt.
Ef þú kíkja Að loknu frumgerðinni er aðeins fyrsta kortið smellt í hvert skref. Það er engin leið til að fara aftur, engin sveigjanleiki, innihald síðasta skjásins er ekki lokið og það er ekki næstum pixla fullkomið. Ekkert af þeim var nauðsynlegt til að fá hugmyndina mína yfir svo ég eyði ekki tíma þar á meðal þeim. Framer getur gert allt sem er, en það þýðir ekki að þú ættir að reyna að gera allt í frumgerð þinni.
Búðu til UI flæði með ógnvekjandi ViewController mát Andreas
Þú getur notað ViewController Skissa tappi til að búa til UI flæði rétt í Sketch. Snúðuðu hönnununum þínum smátt og smátt til að smella á þær án þess að þurfa að skrifa kóða.
Þetta er frábært fyrir kynninguna þína fyrir hagsmunaaðila og er mjög einfalt að gera. Í stað þess að ganga í gegnum Sketch skrá með tugi listatöflum eða .pdf, getur þú kynnt gagnvirka frumgerð eða deilt með hýsilinn Framer verkefnaslóð.
Það fer eftir því sem ég er að reyna að ná, en ég gæti endað með að skrifa smá kóða fyrir hluti eins og sveimaáhrif, hreyfimynd og textainntak til viðbótar við raunsæi og gagnvirkni. Aftur, sem hönnuður, ákveðið hvað er nauðsynlegt til að fá hugmyndina þína yfir og framkvæma á viðeigandi hátt.
Athuga Andreas 'Búðu til UI flæði með skissu og framer grein til að læra meira um tappann.
Örverur
Ég held að það séu nokkrar ástæður fyrir því að farsímaútgáfurnar séu mjög vinsælar hjá Framer, ein þeirra sem eru örveruvirkni virðast miklu algengari í farsíma. En það þarf ekki að vera þannig! Ég held að eins og hönnuðir á vefnum geti verið betra að gera vinnu okkar meiri hreyfingu og Framer er mjög góður í þessu.
Þetta er bara einfalt dæmi um fljótleg samskipti sem ég gerði með því að nota skissa skrá sem hönnuður á liðinu mínu hafði þegar gert. Að skoða samskipti eins og þetta tekur nokkrar mínútur.
Jú, en hvers vegna ekki bara kóða?
Sem framhaldsframkvæmdaraðila mun mikið af verkefnum mínum endar á endanum með dulmáli frumgerð. Ég nota þá þessa frumgerð sem grundvöll til að skrifa framhliðarkóðann inn í vöruna, vinna með hliðarverkfræði. Svo hvers vegna ekki bara kóða frá byrjun?
Eins og ég nefndi áður, hraði. Ég get fljótt útskýrt hugmyndir sem annaðhvort ég eða annar hönnuður hafi þegar gert með því að flytja þær frá Sketch into Framer. Það er frábært fyrir upphaf hönnunarferlisins þar sem þú ert að skoða hugmyndir og framkvæma endurgjöf fljótt. Ég get flutt nokkuð hratt í kóða en Framer tekur það á næsta stig.
Önnur ástæða er frelsi. Einfaldlega staðreyndin að öll kóðinn minn skrifaður í Framer verður kastað í burtu er reyndar góður. Það leyfir mér að prófa hluti sem ég myndi ekki annars og að vera svolítið laus við númerið mitt. Ég get eytt 15 mínútum að skoða hugmynd og þá rusla það án þess að hafa iðrun.
Nokkrar ábendingar og bragðarefur
Þú (eða hönnuðurinn sem þú ert að vinna með) verður líklega að setja upp Sketch skrár svolítið öðruvísi.
- Hópaðu lögin þín. Lög sem eru ekki í hópi eru hunsuð
- Forðastu að nota rými í heiti hópsins
- Falinn lög í skissu eru enn fluttar en sýnileiki þeirra verður stillt á rangan hátt.
- Búðu til einföld, einstök nöfn fyrir borðplöturnar þínar
- A mínus (-) í lok listblaðsins þinn útilokar að það sé flutt inn í Framer
Fletið öll lög í skissu sem verða áfram truflanir. Þetta mun bæta hleðslutíma verkefnisins, sem er sérstaklega frábært þegar búið er að búa til stærri frumgerð. Þú getur gert þetta með því að bæta við stjörnu (*) í lok lagsins í skissu.
Það er þess virði að eyða tíma með hönnuðum í hópnum þínum til að fara yfir hvernig á að skipuleggja Sketch skrár til að passa vel í vinnslu og hvað virkar best fyrir liðið.
Þegar þú sendir inn Sketch skrá inn í Framer muntu sjá eitthvað eins og þetta:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Skiptu skissu með $, og þú getur nú notað $ til að vísa til skýringarmyndanna og spara þér frá því að skrifa orðalistann hundrað sinnum:
$ = Framer.Importer.load("imported/design@1x")Notaðu 'Normal Bendill' fyrir venjulegt músarbendilinn:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Ég flyt inn hönnun mína á @ 2x og síðan minnka þá niður, svo þau eru skarpar. Athugaðu að þetta virðist ekki fylgja með ViewController mátinu sem nefnt er hér að ofan.
Framer.Device.contentScale = .5Sketch and Framer nota mismunandi sjálfgefið listatöflu / tæki fyrir netið. Teikningin notar 1440 × 1024 en Framer notar 1440 × 900. Ég kýs 1440 × 900. Hugsaðu þér ekki að þú sért takmarkaður við 900 punkta fyrir hæð þó að þú getur auðveldlega búið til flettanlegar síður í Framer.
[- Þessi grein var upphaflega staða á miðlungs , endurgefin með leyfi höfundarins -]