Share
În acest tutorial, vă voi învăța cum să creați un prototip animat al aplicației pentru aplicații mobile. Prototipul va arăta și se va simți ca o aplicație reală pe telefon; veți putea să navigați și să navigați prin design, folosind gesturi și animații personalizate.
La sfârșitul acestui tutorial, veți putea să faceți o versiune animată a prototipului oricărui tip de aplicație folosind Pixate. Să începem!
Pentru acest tutorial veți avea nevoie de trei lucruri de urmat:
În opinia mea, Pixate este cel mai bun instrument disponibil pentru designeri pentru a crea prototipuri de aplicații mobile personalizate complet personalizate, fără a scrie o singură linie de cod.
Spre deosebire de alte instrumente de prototipare, precum Flinto sau Marvel, Pixate vă permite să separați straturile și să încorporați interacțiuni, cum ar fi Glisați, Atingeți, Atingeți dublu, Derulați, Strângeți și multe altele.
Prototipul în sine există pe web. În timpul acestui tutorial vom folosi versiunea web a Pixate, dar vom obține rezultatele finale într-o aplicație nativă pe telefonul nostru, ceea ce oferă o experiență fluidă excelentă.
Înainte de a putea începe crearea primului nostru prototip, trebuie să instalăm un nou proiect în Pixate.
După ce v-ați conectat la contul dvs., faceți clic pe Proiect nou , apoi selectați Prototype nou opțiune.
Aici putem selecta tipul specific de dispozitiv pentru care proiectăm. În acest caz, hai să alegem iPhone-ul 6, deoarece am proiectat aplicația de fitness pentru dispozitivul respectiv în Sketch.
Notă: putem de asemenea să selectăm dimensiunile ecranului smartwatch, precum Apple Watch, LG G Watch sau Moto 360.
Pixate ne permite să animăm fiecare obiect din prototipul nostru, bazat pe diverse evenimente și interacțiuni, cum ar fi încărcarea ecranului, apăsarea, atingerea dublă sau parcurgerea. Acest lucru înseamnă, de asemenea, că trebuie să exportăm separat elementele pe care vrem să le animăm în prototipul nostru.
Să deschidem fișierul Sketch și să începem să exporăm fiecare element unul câte unul. Dacă te uiți la prototipul final, poți vedea că în cazul ecranului "GO" am exportat separat bara de navigare, bara de tab-uri, fiecare coloană a previziunii meteo și cercurile de țintă.
Ar trebui să exportați în PNG, deoarece este cheia pentru a avea straturi transparente.
Bacsis: focalizați mereu pe un singur ecran simultan. În acest moment al procesului, ar trebui să exportați numai straturile "ecranului GO", astfel încât să fie mai ușor să lucrați și să modificați lucrurile în mișcare dacă este necesar.
Importarea de materiale în Pixate este o problemă de extracție și abandonare a fișierelor PNG exportate în fereastra browserului:
Acum, e timpul să reconstruim ecranul nostru în Pixate. Această lucrare se poate face mult mai repede dacă ne referim la Panoul de inspecție atât în Pixate, cât și în Sketch. În acest caz, trebuie doar să copiem și să lipim valorile X și Y ale fiecărui element.
Notă: rețineți că proiectarea schiței a fost făcută la rezoluția @ 2x, în timp ce în Pixate lucrăm cu rezoluția @ 1x. Aceasta înseamnă că trebuie să împărțim fiecare număr de la Sketch cu 2 înainte de a aplica Pixate.
Să deschidem aplicația Pixate pe iPhone, unde putem vedea că designul nostru a început să se unească. De acum încolo, de fiecare dată când schimbăm ceva în aplicația web, se va sincroniza automat cu telefoanele noastre.
După selectarea primei coloane a prognozei meteo, putem vedea tipurile de animații disponibile în partea stângă în browserul nostru. Să trageți și să lăsați Fade animație pe partea opusă, bara laterală dreaptă.
Acum, trebuie să specificăm când ne-ar plăcea să apară această animație. Seteaza Bazat pe valori pentru * SCREEN *, Încărcat.
Aceasta înseamnă că animația noastră va fi redată imediat după încărcarea primului ecran, ceea ce se întâmplă imediat când executăm prototipul.
Deoarece obiectivul nostru este de a avea efectul de estompare, să stabilim opacitatea inițială 0% pe Panoul Proprietăți, și a 100% pe Panoul de animații.
În partea de jos a Panoul de animații de asemenea, putem seta curba de relaxare, durata și valorile de întârziere.
Ar trebui să setați durata între 0.2-0.4s, dar nu există oficial aici, așa că vă încurajez să jucați cu aceste valori până când simțiți că au dreptate.
Notă: în prototipul meu, am preferat să folosesc animații puțin mai lente, astfel încât să le puteți vedea mai clar. Într-un proiect real, aș recomanda o mișcare mai rapidă și mai subtilă.
Acum, să selectăm cea de-a doua coloană a prognozei meteo și să setăm exact același lucru Fade animație așa cum am făcut înainte, cu o singură diferență: de data aceasta a stabilit animație întârziere a fi imprejur 0.1-0.3s. În acest fel, animațiile vor fi redate într-o secvență.
Continuați cu exact aceeași metodă pentru toate elementele pe care doriți să le adăugați o animație Fade, dar nu uitați să creșteți în mod continuu valoarea întârzierii animației.
Acum, să organizăm interacțiunea între cercurile din secțiunea de goluri. Pentru a putea derula orizontal între inelele de țintă, trebuie să le importăm ca trei fișiere PNG separate.
După ce le plasați în poziția corectă, hai să mergem creați un nou strat în Pixate; necesare pentru a permite derularea orizontală. Pe Panoul Proprietăți asigurați-vă că setați aspectul la Nu este setat niciun set de imagini. Înainte de a adăuga orice interacțiune cu acest strat, vom adăuga fișierele de fișiere PNG de tip gol la noul strat de pe straturi panou. În termeni simpli, aceasta este similară cu grup în schiță.
Acum putem adăuga a Trageți interacțiunea la acest strat nou și set Deplasare orizontală cu poziția minimă: -255pt și poziția maximă: 120pt pe Panoul de animații.
Pentru efectul de bouncing mic în timpul derulării orizontale, am creat o animație personalizată cu condiții speciale. Pentru a începe, adăugați a Mutați animația la cel mai nou strat, care conține toate straturile inelului.
Acum, în Animații panou setat Bazat pe valoare pentru Setările obiectivelor și Trageți eliberarea.
Pentru primul IF condiție Am folosit următoarea formulă: goal_settings.x> -255 && goal_settings.x < -67, ceea ce înseamnă că dacă poziția stratului grupului de țintă (ID-ul stratului: goal_settings) este mai mare decât -255 pt și mai mică decât -67 pt, va muta partea stângă a stratului pe -67 pt punct.
Pentru animație am folosit a Curbă de relaxare a arcului cu valoarea de frecare de 25 și tensiune de600.
A doua mea condiție IF este: goal_settings.x <= -67 && goal_settings.x > -255, apoi mutați partea stângă a stratului în -255 pt.
A treia condiție este: goal_settings.x> -67 && goal_settings.x < 150, apoi mutați partea stângă a stratului în 150 pt.
Nu în ultimul rând, ultima declarație IF este: goal_settings.x < 150 && goal_settings.x > -67, care va muta partea stângă a stratului la -67 pt.
Notă: Știu că acest lucru pare un pic cam complicat pentru prima dată, dar vă încurajez să copiați și să lipiți soluția mea și să o încercați, apoi schimbați ceva și încercați din nou. Condițiile mele nu sunt în nici un fel perfecte, astfel încât să le poți îmbunătăți și să le optimizezi, până când se simt bine pentru tine.
Așa cum am făcut și cu inelele de goluri, să creăm un nou strat și să punem fiecare strat pe care îl avem până acum. Doar grupăm straturile ecranului "GO" chiar acum.
Înainte de a începe să importați și să reconstruiți ecranul "Provocări" din Pixate, trebuie să creați un nou strat, care va funcționa ca strat de grup pentru fiecare element de pe acest ecran. Să plasăm acest lucru chiar lângă "ecranul GO", fără nici o umplutură sau decalaj între ele.
După ce am importat și reconstruit ecranul, strat cu strat, trebuie să setăm parcurgerea verticală pentru cărțile cu provocări.
hai creați un nou strat fără fundal imagine și adăugați straturile de cărți ale acestuia. Scroll-ul vertical este chiar mai ușor decât defilarea orizontală, deoarece singurul lucru pe care trebuie să-l facem este să adăugăm o Derulați interacțiunea la acest nou strat.
Pentru a vedea ecranul "Provocări" și pe iPhone, trebuie să ne întoarcem la ecranul "GO" și să adăugăm un nou strat de dreptunghi în partea de sus a butonului Provocări din bara tab.
Setați aspectul fără a umple imaginea și adăugați a Atingeți interacțiunea la el. Acum, să revenim, să selectați stratul de grupuri Challenges, care conține fiecare element din ecranul "Provocări" și adăugați un Mutați animația la el.
Singurul lucru pe care trebuie să-l facem este să setăm Bazat pe eveniment la butonul pe care l-am adăugat recent pe ecranul "GO" cu Atingeți interacțiunea și setați Treceți la valoare pentru 0 pt. Atunci când apăsăm butonul provocări de pe ecranul "GO", stratul de grupuri Challenges se va deplasa la locul potrivit.
Pentru a anima cartonașele de provocări, vom folosi în același timp două animații, un Fade și o mișcare. Asigurați-vă că ați setat Bazat pe valoare pentru butonul Provocări.
Pentru animația Fade, folosim aceeași tehnică ca și cu ecranul GO, așa că trebuie să setăm Opacitate la 0% pe Proprietăți panou și Fade la valoarela 100% pe Animații panou. Pentru durata pe care am folosit-o 0.5s cu 0.2S întârziere.
Notă: nu uitați să creșteți în mod continuu valoarea întârzierii pentru fiecare card.
Cea de-a doua animație este a Mutați animația. Ca și în cazul animației Fade, hai să setăm Bazat pe valoarea la butonul Provocări și utilizarea aceleiași durate de animație și aceeași întârziere ca și în cazul animației Fade. Acum, setați Mergeți în sus valoare pentru 10px, care va muta cartonașul de provocări cu 10px în sus, când începe animația.
Deoarece la sfârșitul animației, fiecare carte de provocare va fi de 10 pixeli în sus, trebuie să le deplasăm cu 10 pixeli în jos pe panza Pixate.
Să creăm încă o dată un strat nou, care va conține secțiunea Căutați provocări. Ca și în cazul secțiunii "Provocările mele", să adăugăm a Derulați interacțiunea la el.
Pentru a putea comuta între secțiunile Provocările mele și Căutarea provocărilor, trebuie să creați un nou strat în partea de sus a titlului Căutați provocări, care va funcționa ca un buton. Setați stratul de umplere la Nu este setat niciun set de imagini și adăugați a Atingeți interacțiunea la el.
Acum, dacă ne întoarcem la stratul grupului de provocări Răsfoiți (creat în pasul anterior), putem adăuga un Fade animație pentru a le baza pe acest nou buton. Deci, până când apăsăm butonul Răsfoiți provocările, opacitatea secțiunii provocări de răsfoire este de 0%, iar după robinet, va fi de 100%.
Ca ultim pas, am adăugat a Scale și animație Fade la barele de progres ale liniei de timp din secțiunea Căutați provocări.
Notă: nu uitați să utilizați exact aceeași durată de animație și valori de întârziere pentru animațiile Fade și Scale.
Înainte de a începe animarea ecranului "Activități", trebuie să repetăm câțiva pași făcuți și în cazul ecranului "Provocări".
Să creăm un nou strat chiar lângă ecranul "Provocări" fără nici un fel de umplutură. Acest strat va fi stratul de grup pentru elementele de pe ecranul "Activități".
Acum, să revenim la ecranul "GO" și să creăm un nou strat în partea de sus a paginii Activitati de pe bara de file. Adauga o Atingeți interacțiunea la acest nou strat.
Reveniți la stratul nostru de activități și adăugați o Mutați interacțiunea pe baza noului nostru buton.
Acum adaugati a Fade animație la fiecare rezultat din ecranul Activități cu 0.4s durata de animație și a 0.1s animație întârziere între rezultate.
Notă: nu uitați să setați Bazat pe valoare la butonul "Activități", pe care l-am plasat pe "ecranul GO".
Creați un alt strat de grup și plasați fiecare sesiune de antrenament în cadrul acestuia, cu excepția celui dintâi. Vom avea nevoie de acest lucru pentru Deplasați animația în jos, deoarece deplasarea în josul unui singur strat este mult mai ușoară decât deplasarea în jos a șase sau șapte straturi deodată.
Acum adaugati a Atingeți interacțiunea la prima sesiune de antrenament, adăugați apoi a Mutați animația la stratul de grup pe care tocmai l-am creat. În panoul Animații setați opțiunea Bazat pe pentru prima sesiune de antrenament și adăugați o Mergeți în sus valoare în jur 277pt. Când atingem prima sesiune de antrenament, orice altceva se va muta în jos pe ecran.
Pentru vizualizarea detaliilor antrenamentului, am folosit doar Se estompează și se mișcă animații bazate pe atingerea primei sesiuni de antrenament.
La început, se estompează și se mișcă în fundal, apoi graficul și, în final, numerele și detaliile antrenamentului.
Ar trebui să jucați puțin aici cu durata și întârzierile în animație.
Esti minunata! Tocmai ați creat primul prototip animat personalizat Pixate personalizat. După ce ați urmat acest tutorial, sper că sunteți mai încrezător în utilizarea prototipurilor Pixate pentru aplicații mobile.
Sunt curios să vă aud opiniile cu privire la acest tutorial și nu ezitați să puneți întrebări în comentarii, voi fi aici pentru a vă ajuta și a le răspunde.
Accentsconagua