Përmbajtje
- Importo nga Sketch
- Krijoni shtresa maske dhe avatar
- Përcaktoni gjendjet
- Bëni jetë mes shteteve
- Provojeni në një pajisje të vërtetë mobile
Arsyetimi prapa prototipizimit të dizajnit nuk është i ri - është i njëjtë me të gjithë zhurmën rreth dizajnimit në shfletues. Kur shihni një dizajn në kontekstin e tij real, është krejtësisht ndryshe. Ju merrni vendime më të mira kur nuk duhet të bëni supozime se si do të funksionojë dhe ndjehet një ndërfaqe. Kjo mund të tingëllojë si punë shtesë, por njohuritë që mund të fitoni duke parë dizajnin tuaj të punës janë të paçmueshme.
Framer është një mjet i ri prototip i bazuar në kod. Ju mund të krijoni makete në Sketch (ose Photoshop) ashtu si zakonisht, dhe t'i importoni ato në Framer. Pastaj, shkruaj pak CoffeeScript dhe mund të arrish shumë.
Unë do t'ju mësoj bazat e prototipave në Framer, duke përdorur shembullin e një prototipi të aplikacionit iOS me dy pamje: një pamje profili dhe një pamje të zmadhuar të imazhit të avatarit të përdoruesit. Ne do të prototipojmë se si do të hapet dhe mbyllet pamja e zgjeruar e fotografisë dhe gjithashtu do ta animojmë atë. Shikoni demonstrimin në internet këtu (për të parë kodin burim, thjesht klikoni në ikonën në këndin e sipërm të majtë). Do të të duhet edhe prova falas e Framer, të cilën mund ta marrësh në framerjs.com.
Importo nga Sketch
Hapi i parë është importimi i shtresave nga Sketch në Framer. Thjesht klikoni në butonin Import në Framer ndërsa dizajni është i hapur në Sketch dhe zgjidhni skedarin e duhur në dialogun që vijon. Framer automatikisht do të importojë imazhe nga secila shtresë dhe do t'i bëjë ato të arritshme përmes kodit si ky:
sketch = Framer.Importer.load "importuar / profil"
Përdorni atë variabël për të hyrë në shtresat e importuara. Për shembull, për të referuar shtresën me emrin 'përmbajtje' në skedarin Sketch, ju do të shkruani sketch.content në Framer.
Krijoni shtresa maske dhe avatar
Funksioni thelbësor i këtij prototipi është të zgjerojë imazhin e avatarit kur preket, dhe pastaj ta mbyllë atë kur preket përsëri. Së pari, ne do të krijojmë dy shtresa maske - një maskë të mbivendosur, ose një maskë brenda një maske tjetër. Ne do t'i animojmë të dy maskat menjëherë për të krijuar një efekt të bukur, delikat të hapjes dhe mbylljes. Shtresa e maskës së header do të shkurtojë foton e avatarit në një drejtkëndësh kur të zgjerohet, dhe shtresa e maskës do ta prerë atë në një rreth të vogël në pamjen e profilit.
Krijoni shtresën e headerMask si kjo:
headerMask = gjerësia e re e shtresës: Gjerësia e ekranit, lartësia: 800 sfond Ngjyra: "transparente"
Linja e parë e kodit krijon dhe emërton shtresën e re. Pastaj, duke përdorur sintaksën e dhëmbëzimit të CoffeeScript, ne vendosim gjerësinë, lartësinë dhe vetitë e sfondit. Ne do të përdorim një sfond transparent në mënyrë që shtresat poshtë të shfaqen kur fotografia e avatarit të zgjerohet.
Tjetra, krijoni shtresën e maskës:
maskë = gjerësia e re e shtresës: 1000, lartësia: 1000 sfond Ngjyra: "transparente", kufiri Radioja: 500 y: sketch.header.height - 100 superLayer: header Shkalla e maskës: 0,2, origjina Y: 0
Ne krijojmë një shtresë të re dhe vendosim vetitë në të njëjtën mënyrë. Kufiri i madhRadius e bën këtë shtresë një rreth. Ne pozicionojmë shtresën e maskës në mënyrë që të mbivendoset shtresa e kokës, e cila është importuar nga Sketch. Ne gjithashtu do të zbresim në 20 për qind, ose 0.2. Një origjinë zero e vendos pikën e ankorimit ose regjistrimin e figurës në skajin e sipërm.
Prona e mbetur, superLayer, vendos shtresën e maskës header që kemi krijuar si prind i kësaj shtrese të re. Kështu funksionon maskimi në Framer. Thjesht vendosni pronën superLayer dhe shtresa prind do ta maskojë fëmijën.
Tjetra, duhet të krijojmë grafikun avatar dhe ta vendosim brenda atyre maskave të reja. Për të zmadhuar dhe gjallëruar kufijtë e prerjes, ne do të krijojmë manualisht shtresën e avatarit. Kopjoni një foto në nën-dosjen 'images' të dosjes së projektit. Pastaj krijoni një shtresë duke përdorur atë imazh:
avatar = imazhi i ri i shtresës: "images / avatar.png" gjerësia: mask.width, lartësia: mask.height superLayer: mask, force2d: true
Vini re që vendosim superLayer të avatar të jetë shtresa e maskës. Të dy tani janë vendosur brenda headerMask. Ne gjithashtu vendosim gjerësinë dhe lartësinë në mënyrë që imazhi të mbushë plotësisht zonën e maskuar.
Së fundmi, ne do të krijojmë një ndryshore për të ruajtur pozicionin Y të maskës që do të përdorim për animacionin. Ne do ta përqendrojmë atë horizontalisht, pasi është më i madh se ekrani.
maskY = mask.y mask.centerX ()
Përcaktoni gjendjet
Hapi i parë në krijimin e një animacioni është përcaktimi i gjendjes fillestare dhe përfundimtare. Në Framer, shtetet janë si kornizat kryesore të shkruara në kod. Një shtet është vetëm një koleksion i pronave. Çdo shtresë ka një gjendje të paracaktuar. Për këtë prototip, ai parazgjedhje do të shërbejë si pika fillestare për animacionin, kështu që duhet vetëm të vendosim një gjendje të dytë për secilën shtresë.
Sintaksa për shtetet është shumë e thjeshtë. Referojeni shtresën, përdorni metodën layer.states.add () dhe pastaj renditni vetitë që do të përfshihen.
sketch.content.states.add (fsheh: {opacity: 0}) headerMask.states.add (lëviz: {y: 120}) mask.states.add (rritet: {shkalla: 1.1, y: maskY - 420})
Gjendja e dytë për shtresën e përmbajtjes, e cila është importuar nga Sketch dhe përmban të gjithë elementët e tjerë të ekranit të profilit, duhet të jetë plotësisht transparente. Në këtë mënyrë, kur avatar të zgjerohet, do të kemi një sfond të zi dhe ikonat dhe elementët e mbetur të importuar do të shfaqen.
Linja e dytë e kodit krijon një gjendje për headerMask, e cila thjesht do ta zhvendosë atë poshtë në një pozicion Y prej 120. Kjo do të lejojë që titulli dhe butoni i mbylljes të shfaqen në pjesën e sipërme të ekranit kur fotografia e avatarit të zgjerohet. Ai gjithashtu do të gjallërojë kufijtë e prerjes së fotografisë së avatarit.
Së fundmi, një gjendje e re për shtresën e maskës do ta shkallëzojë atë lart dhe do ta zhvendosë lart, duke përdorur ndryshoren maskY që kemi krijuar më parë. Meqenëse origjinaY (ose pika e ankorimit) e shtresës së maskës është buza e saj e sipërme, ne duhet ta lëvizim atë lart për 420 pikselë në mënyrë që qendra e imazhit të jetë e dukshme.
Bëni jetë mes shteteve
Për të gjallëruar midis gjendjeve të paracaktuara dhe atyre të reja që sapo krijuam, na duhen vetëm katër rreshta të kodit. Ne do të vendosim një mbajtës klikimesh në shtresën e avatarit. Kur një përdorues e prek atë në ekranin e profilit, ne do të kalojmë në pamjen e zgjeruar nga gjendjet e çiklizmit. Kur të përgjohet përsëri, ne do të kthehemi përsëri në gjendjet e paracaktuara, kështu që të kthehet në një rreth të vogël. Të njëjtat linja të kodit trajtojnë të dy ndërveprimet:
avatar.on Ngjarjet. Kliko, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Linja e parë e këtij blloku vendos administruesin e klikimeve në shtresën avatar. Sa herë që përgjohet, pa marrë parasysh se si pritet ose çfarë madhësie ka, deklaratat që vijojnë do të ekzekutohen.
Pastaj ne thjesht i referohemi secilës shtresë dhe përdorim metodën layer.states.next () për të ndërruar shtetet. Kur përdorni layer.states.next (), Framer do të përdorë cilësimet e brendshme të parazgjedhura të animacionit. Kjo është jashtëzakonisht e përshtatshme, por ju mund të krijoni animacione edhe më të mira duke finesuar kthesat e animacioneve.
Kur përdorni gjendje si ne jemi këtu, ju lehtë mund të ndryshoni secilën kurbë të animacionit veçmas duke përdorur vetinë layer.states.animationOptions. Me vetëm tre rregullime të lehta, animacioni ndihet krejt ndryshe:
sketch.content.states.animationOptions = lakorja: "lehtësia", koha: 0,3 headerMask.states.animationOptions = kurba: "pranvera (150, 20, 0)" mask.states.animationOptions = kurba: "pranvera (300, 30, 0) "
Për shtresën e përmbajtjes që po venitet dhe futet brenda, ne do të zgjedhim një kurbë të thjeshtë të paracaktuar, lehtësi dhe do të vendosim kohëzgjatjen e animacionit në 0.3 në mënyrë që të jetë shumë e shpejtë.
Për shtresat e maskës dhe maskës së kokës, përdorni një kurbë pranverore. Për qëllimet tona, thjesht duhet të dini se vlerat e kurbës së pranverës ndryshojnë shpejtësinë dhe kërcimin e animacionit. Vlerat për shtresën e maskës do ta bëjnë animacionin e saj shumë më të shpejtë se headerMaska dhe përmbajtja. Për më shumë detaje mbi cilësimet e kurbës së pranverës, referojuni dokumentacionit Framer në framerjs.com/docs.
Provojeni në një pajisje të vërtetë mobile
Të shohësh modelin në një pajisje reale është shumë më efektive sesa të përdorësh emulatorë dhe do të shohësh përfitimet në punën tënde. Framer përfshin një veçori pasqyre, e cila është një server i integruar që ofron një URL në prototipin tuaj përmes rrjetit tuaj lokal. Thjesht vizitoni URL duke përdorur pajisjen tuaj.
Ju keni mësuar gjithçka që duhet të dini për të prototipuar vetë dizajnet tuaja në Framer. Cfare po pret
Fjalët: Jarrod Drysdale
Jarrod Drysdale është një autor, konsulent i dizajnit, prodhues i produkteve dixhitale. Ky artikull u botua fillimisht në numrin 270 të revistës net.
Te pelqen kjo? Lexoni këto!
- Krijoni prototipa të drejtpërdrejtë të klikueshëm, në Skicë
- Si të filloni një blog
- Redaktuesit më të mirë të fotografive
