Nilalaman
- Mag-import mula sa Sketch
- Lumikha ng mga layer ng mask at avatar
- Tukuyin ang mga estado
- Pag-agawin ang pagitan ng mga estado
- Subukan ito sa isang tunay na mobile device
Ang pangangatwiran sa likod ng disenyo ng prototyping ay hindi bago - pareho ito sa lahat ng buzz tungkol sa pagdidisenyo sa browser. Kapag nakakita ka ng isang disenyo sa totoong konteksto nito, lubos itong naiiba. Gumagawa ka ng mas mahusay na mga desisyon kung hindi mo kailangang gumawa ng mga pagpapalagay tungkol sa kung paano gagana ang isang interface at pakiramdam. Ito ay maaaring parang isang labis na trabaho, ngunit ang mga pananaw na maaari mong makuha sa pamamagitan ng pagtingin sa iyong disenyo na gumagana ay napakahalaga.
Ang Framer ay isang bagong tool na batay sa code na prototyping. Maaari kang lumikha ng mga mockup sa Sketch (o Photoshop) tulad ng karaniwang ginagawa mo, at i-import ang mga ito sa Framer. Pagkatapos, sumulat ng isang maliit na CoffeeScript at marami kang makakamit.
Ituturo ko sa iyo ang mga pangunahing kaalaman ng pag-prototyp sa Framer, gamit ang halimbawa ng isang iOS app na prototype na may dalawang pagtingin: isang pagtingin sa profile at isang naka-zoom-in na pagtingin sa imahe ng avatar ng gumagamit. Prototype namin kung paano magbubukas at magsasara ang pinalawak na pagtingin sa larawan, at isasabuhay din namin ito. Tingnan ang online demo dito (upang makita ang source code, i-click lamang ang icon sa kaliwang sulok sa itaas). Kakailanganin mo rin ang libreng pagsubok ng Framer, na makukuha mo sa framerjs.com.
Mag-import mula sa Sketch
Ang unang hakbang ay mag-import ng mga layer mula sa Sketch papunta sa Framer. I-click lamang ang pindutang I-import sa Framer habang ang disenyo ay bukas sa Sketch, at piliin ang tamang file sa sumusunod na dayalogo. Awtomatikong mai-import ng Framer ang mga imahe mula sa bawat layer at gawing naa-access ang mga ito sa pamamagitan ng code na tulad nito:
sketch = Framer.Importer.load "na-import / profile"
Gamitin ang variable na iyon upang ma-access ang na-import na mga layer. Halimbawa, upang sanggunian ang layer na pinangalanang 'nilalaman' sa Sketch file, mai-type mo ang sketch.content sa Framer.
Lumikha ng mga layer ng mask at avatar
Ang pangunahing pag-andar ng prototype na ito ay upang mapalawak ang imahe ng avatar kapag na-tap ito, at pagkatapos ay upang isara ito kapag na-tap muli ito. Una, lilikha kami ng dalawang mga layer ng mask - isang sararang maskara, o isang maskara sa loob ng isa pang maskara. Bibigyan namin ng buhay ang parehong mga maskara nang sabay-sabay upang lumikha ng isang mahusay, banayad na pagbubukas at pagsasara ng epekto. I-crop ng layer ng headerMask ang larawan ng avatar sa isang rektanggulo kapag pinalawak ito, at i-crop ito ng layer ng mask sa isang maliit na bilog sa view ng profile.
Lumikha ng layer ng headerMask tulad nito:
headerMask = bagong Lapad ng layer: Screen.width, taas: 800 backgroundColor: "transparent"
Ang unang linya ng code ay lumilikha at pinangalanan ang bagong layer. Pagkatapos, gamit ang syntax ng indentation ng CoffeeScript, itinakda namin ang lapad, taas at mga katangian ng background. Gumagamit kami ng isang transparent na background upang ang mga layer sa ilalim ay nagpapakita kapag ang larawan ng avatar ay pinalawak.
Susunod, likhain ang layer ng maskara:
mask = bagong Lapad ng layer: 1000, taas: 1000 backgroundColor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, pinagmulan Y: 0
Lumilikha kami ng isang bagong layer at nagtatakda ng mga pag-aari sa parehong paraan. Ginagawa ng malaking borderRadius ang layer na ito ng isang bilog. Pinoposisyon namin ang layer ng mask upang ma-overlap nito ang layer ng header, na na-import mula sa Sketch. Susukat din kami hanggang sa 20 porsyento, o 0.2. Ang isang pinagmulanY ng zero ay nagtatakda ng anchor point o pagrehistro ng imahe sa tuktok na gilid.
Ang natitirang pag-aari, superLayer, ay nagtatakda ng layer ng headerMask na nilikha namin bilang magulang ng bagong layer. Ganito gumagana ang masking sa Framer. Itakda lamang ang superLayer na pag-aari, at ang layer ng magulang ay maskara ang bata.
Susunod, kailangan naming likhain ang avatar graphic at ilagay ito sa loob ng mga bagong maskara. Upang mag-zoom at i-animate ang mga hangganan ng pag-crop, manu-mano kaming gagawa ng layer ng avatar. Kopyahin ang isang larawan sa subfolder ng 'mga imahe' ng folder ng proyekto. Pagkatapos ay lumikha ng isang layer gamit ang imaheng iyon:
avatar = bagong imahe ng Layer: "mga imahe / avatar.png" lapad: mask.width, taas: mask.height superLayer: mask, force2d: true
Pansinin na itinakda namin ang superLayer ng avatar na maging layer ng mask. Parehas na ang pugad sa loob ng headerMask. Itinakda din namin ang lapad at taas kaya't pinunan ng imahe ang masked area.
Panghuli, lilikha kami ng variable upang maiimbak ang posisyon ng Y ng mask na gagamitin namin para sa animasyon. Ilalagay namin ito nang pahalang, dahil mas malaki ito sa screen.
maskY = mask.y mask.centerX ()
Tukuyin ang mga estado
Ang unang hakbang sa paglikha ng isang animasyon ay upang tukuyin ang mga estado ng simula at pagtatapos. Sa Framer, ang mga estado ay tulad ng mga keyframe na nakasulat sa code. Ang isang estado ay isang koleksyon lamang ng mga pag-aari. Ang bawat layer ay may default na estado. Para sa prototype na ito, ang default na iyon ay magsisilbing panimulang punto para sa animasyon, kaya kailangan lang naming magtakda ng pangalawang estado para sa bawat layer.
Ang syntax para sa mga estado ay napaka-simple. Sanggunian ang layer, gamitin ang layer.states.add () na pamamaraan, at pagkatapos ay ilista ang mga katangian na isasama.
sketch.content.states.add (itago: {opacity: 0}) headerMask.states.add (ilipat: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
Ang pangalawang estado para sa layer ng nilalaman, na na-import mula sa Sketch at naglalaman ng lahat ng iba pang mga elemento ng screen ng profile, ay dapat na ganap na transparent. Sa ganitong paraan, kapag pinalawak ang avatar, magkakaroon kami ng isang itim na background at ang natitirang na-import na mga icon at elemento ay lalabas.
Ang pangalawang linya ng code ay lumilikha ng isang estado para sa headerMask, na papalitan lamang ito sa isang posisyon na Y na 120. Papayagan nito ang pamagat at isara ang pindutan upang ipakita sa tuktok ng screen kapag pinalaki ang larawan ng avatar. Ito rin ang magpapasikat sa mga hangganan ng pag-crop ng larawan ng avatar.
Panghuli, ang isang bagong estado para sa layer ng maskara ay parehong susukat nito at ilipat ito, gamit ang maskY variable na nilikha namin nang mas maaga. Dahil ang pinagmulanY (o anchor point) ng layer ng mask ay ang tuktok na gilid nito, kailangan nating ilipat ito ng 420 na mga pixel upang makita ang gitna ng imahe.
Pag-agawin ang pagitan ng mga estado
Upang mai-animate ang mga default na estado at ang mga bago naming nilikha, kakailanganin lamang namin ang apat pang mga linya ng code. Magtatakda kami ng isang handler ng pag-click sa avatar layer. Kapag na-tap ito ng isang gumagamit sa screen ng profile, lilipat kami sa pinalawak na view ng mga estado ng pagbibisikleta. Kapag na-tap ulit ito, babalik kami sa mga default na estado upang bumalik ito sa isang maliit na bilog. Ang parehong mga linya ng code ay hawakan ang parehong mga pakikipag-ugnayan:
avatar.on Mga Kaganapan. Mag-click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Ang unang linya ng bloke na ito ay nagtatakda ng handler ng pag-click sa avatar layer. Anumang oras na ito ay na-tap, hindi mahalaga kung paano ito na-crop o kung anong sukat ito, tatakbo ang mga sumusunod na pahayag.
Pagkatapos ay simpleng isinangguni namin ang bawat layer, at ginagamit ang layer.states.next () na pamamaraan upang i-toggle ang mga estado. Kapag gumamit ka ng layer.states.next (), gagamitin ng Framer ang panloob na mga default na setting ng animasyon. Ito ay lubos na maginhawa, ngunit maaari kang gumawa ng mas mahusay na mga animasyon sa pamamagitan ng pag-aayos ng mga curve ng animation.
Kapag gumagamit ng mga estado na tulad namin dito, madali mong mababago ang bawat kurba ng animation nang magkahiwalay sa pamamagitan ng paggamit ng layer.states.animationOptions na pag-aari. Sa pamamagitan lamang ng tatlong bahagyang mga pagsasaayos, ganap na naiiba ang pakiramdam ng animasyon:
sketch.content.states.animationOptions = curve: "madali", oras: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Para sa layer ng nilalaman na kumukupas at papasok, pipili kami ng isang simpleng curve preset, madali, at itakda ang tagal ng animasyon sa 0.3 kaya't napakabilis nito.
Para sa headerMask at mask layer, gumamit ng spring curve. Para sa aming mga layunin, kailangan mo lamang malaman na ang mga halaga ng spring curve ay nagbabago sa bilis at bounce ng animasyon. Ang mga halaga para sa layer ng mask ay gagawing mas mabilis ang animasyon nito kaysa sa headerMask at nilalaman. Para sa higit pang mga detalye sa mga setting ng curve ng spring, sumangguni sa dokumentasyon ng Framer sa framerjs.com / doc.
Subukan ito sa isang tunay na mobile device
Ang pagtingin sa disenyo sa isang totoong aparato ay mas epektibo kaysa sa paggamit ng mga emulator, at makikita mo ang mga pakinabang sa iyong trabaho. Kasama sa Framer ang isang tampok na mirror, na kung saan ay isang built-in na server na nag-aalok ng isang URL sa iyong prototype sa iyong lokal na network. Bisitahin lamang ang URL gamit ang iyong aparato.
Natutunan mo ang lahat ng kailangan mong malaman upang mag-prototype ng iyong sariling mga disenyo sa Framer. Ano pa ang hinihintay mo?
Mga salita: Jarrod Drysdale
Si Jarrod Drysdale ay isang may-akda, consultant sa disenyo, tagagawa ng digital na produkto. Ang artikulong ito ay orihinal na na-publish sa isyu ng 270 ng net magazine.
Nagustuhan ito? Basahin ang mga ito!
- Lumikha ng na-click, live na mga prototype sa Sketch
- Paano magsimula ng isang blog
- Ang pinakamahusay na mga editor ng larawan
