Share
Prototiparea ar trebui să fie o modalitate rapidă și ușoară de a câștiga încredere în design-ul dvs. Nu mai este considerat ca o modalitate de a stropi magia mișcărilor sau modelelor de polizare, prototipul este un instrument de comunicare. Dacă comunicați cu părțile interesate, cu managerii de proiectare sau cu utilizatorii, un prototip bun vă ajută să comunicați deciziile de proiectare și ideile de testare.
În acest tutorial vom crea un prototip basic de "îmbarcare" în Atomic, pe care îl puteți previzualiza aici. Prototipul începe cu o stare de încărcare înainte de a vă permite să răsfoiți zborurile viitoare și să previzualizați codul de îmbarcare. Pentru a crea acest prototip, vom folosi componente interactive, date, variabile și tranziții de pagină. Nu-ți face griji! Vă ajut în fiecare pas.
Iată o demonstrație a ceea ce vom crea:
Există câteva lucruri de care veți avea nevoie pentru a vă urma:
atomic.ioDacă în orice moment în tutorial aveți o întrebare, nu ezitați să mă contactați (@ femkesvs) sau echipa de asistență atomică (@we_are_atomic) pe Twitter.
Sa mergem!
Am creat un exemplu de fișier cu activele pe care le veți avea nevoie pentru a vă crea prototipul. Acest exemplu de fișier este completat cu activele pe care le vom folosi, precum și componentele pre-construite.
Puteți accesa activele aici. Pentru a utiliza activele, va trebui să copiați prototipul în contul dvs. Puteți face acest lucru dând clic pe Copiați și editați din dreapta jos și apoi selectați un proiect la care doriți să îl copiați. Vă sugerez să creați un nou proiect pentru acest tutorial.
Înainte de a începe crearea prototipului nostru, va trebui să adăugăm mai întâi sursa de date la Atomic. Am creat o foaie Google cu câteva date de bază pe care le vom folosi în prototipul nostru.
Puteți accesa datele aici. Cu sursa de date deschisă, mergeți la Fișier> Adăugați la Discul meu (veți avea nevoie de un Cont Google pentru acest lucru).
Apoi, cu proiectul deschis în Atomic, selectați Date tab. De aici faceți clic pe Importați date, și localizați sursa de date prin căutare. După ce ați localizat, selectați sursa de date. Veți vedea încărcarea atomică a datelor în proiectul dvs. Această sursă de date poate fi acum accesată și utilizată în orice prototip al proiectului.
Suntem gata!
Să începem asamblarea prototipului nostru prin crearea stării de încărcare. Vom face acest lucru prin crearea unei acțiuni de tranziție personalizată și a unei pagini bazate pe o temporizare.
Mai întâi, selectați componenta de încărcare din pagina Activități pentru a copia (CMD-C și lipiți-o (CMD-V) pe pagina 1. Va fi mare și mai degrabă decât să o redimensionați, poziționați-o în poziția inițială.
Apoi, copiați elementul de încărcare pe care tocmai l-ați plasat la pagina 1, de această dată inserând-l la pagina 2. Repoziționați-l în starea finală (rotit în sensul acelor de ceasornic cu 75 °, astfel încât planul este poziționat în partea dreaptă a pânzei).
Pentru a ne crea o tranziție, reveniți la pagina 1. În panoul cu proprietăți din partea dreaptă, veți vedea o secțiune numită Acțiuni de pagină. Faceți clic pe butonul plus și apoi setați următoarele:
Să examinăm și să vedem tranziția în acțiune - ar trebui să vedem că planul glisează de la stânga la dreapta pe parcursul a două secunde. ordinat!
Pentru a continua, puteți copia și lipi sigla Fly atât pe pagina 1, cât și pe pagina 2 (sub componenta de încărcare din panoul paginilor și plasată în spatele acesteia). Asigurați-vă că urmați aceeași tehnică de plasare a acesteia în poziția inițială și de sfârșit a fiecărei pagini. Probabil că trebuie să ajustați ordinea straturilor pentru a-l face să pară din spate.
În cele din urmă, va trebui să creați o acțiune care va duce automat utilizatorul la pagina 3 de la pagina 2. La pagina 2 adăugați o altă acțiune a paginii cronometrate. De data aceasta vom folosi următoarele setări:
Bacsis: dacă doriți să aliniați calendarul celor două elemente de animație, puteți face acest lucru folosind Linie de timp avansată pentru mișcare.
Apoi, copiați elementele necesare pentru pagina 3 și lipiți-le pe pagina 3. Va trebui să faceți o rearanjare și ajustări pentru a se potrivi elementelor de pe pagină după cum este necesar.
Aproape toate elementele necesare pentru această pagină sunt componente.
Componentele din Atomic sunt ca simbolurile. Orice componentă poate fi editată și refolosită pe parcursul unui proiect. Orice modificări aduse unei componente vor fi actualizate în fiecare instanță. Componentele pot fi, de asemenea, interactive și conțin mai multe stări ale unui simbol. Acest lucru face foarte ușor să vă structurați prototipul.
Să adăugăm o anumită interactivitate componentei boardingPasses. Pentru a deschide componenta, faceți dublu clic pe pictograma componentă din panoul straturilor de lângă numele stratului. Odată deschis, veți vedea trei pagini; unul reprezentând fiecare zbor. Deocamdată, aceste pași sunt identici, în curând vom schimba acest lucru.
Știm că utilizatorul are trei zboruri și am dori ca aceștia să poată să treacă prin fiecare. Există, de asemenea, o pictogramă de cod QR care, atunci când este interacționată cu aceasta, ar trebui să aducă codul de îmbarcare.
Dacă priviți în panoul straturilor, veți observa că fiecare pagină este o instanță a unei componente numită "BoardingCard". Să deschidem acum componenta BoardingCard pentru a vedea cum au fost aplicate datele.
Componenta BoardingCard este o componentă încorporată într-o componentă. Acest lucru ne permite să creăm un simbol pentru carte de îmbarcare care poate fi reutilizat în timp ce se afișează seturi diferite de date.
Cu componenta boardingcard deschisă veți vedea două pagini; partea din față și din spate a trecerii. Acesta este locul unde datele sunt atribuite elementelor individuale de text.
Datele moștenite de la părinteSelectați textul ABC și aruncați o privire la Proprietăți de text. Veți observa următoarele:
Ulterior, dacă te uiți la Foița Google de unde sunt scoase aceste date, vei vedea o coloană intitulată "cod de plecare". Aceasta înseamnă că elementul de text ABC va afișa datele care sunt afișate în coloana "cod de plecare".
Tot textul dinamic din această componentă a fost setat la Moșteniți de la părinte. Acest lucru ne permite să conectăm la fișa de date la nivel de grup și prin urmare să afișăm și să sortăm rândul de date pe rând. Vom ajunge la asta în curând.
Apoi vom seta o tranziție bazată pe pagină pentru a comuta între parolă și codul QR. Pe prima pagină a componentei boardingcard apăsați H pentru a accesa instrumentul hotspot. Apoi, trageți un hotspot peste pictograma codului QR de pe prima pagină.
Hotspoturile vă permit să definiți zonele interactive ale prototipului dvs. Cu hotspotul selectat, în panoul de interacțiuni setați următoarele:
Apoi, pe pagina din spate, creați un alt hotspot (H) care ne va duce înapoi la prima pagină. De data aceasta, trageți-o peste închide și setați următoarele:
Este timpul să vă testați interacțiunea! În colțul din dreapta jos, apăsați pe previzualizare buton. Modul de previzualizare vă permite să vă testați tranzițiile și să interacționați cu prototipul dvs. prin intermediul punctelor fierbinți. Încercați să faceți clic pe cartela QR sau pe pictograma de închidere; cardul trebuie să se rotească între cele două stări. Puteți închide previzualizarea apăsând pe X.
Având această carte de îmbarcare ca o componentă interactivă ne permite să selectăm datele care sunt afișate dinamic, fără a trebui să creați mai multe stări și interacțiuni.
Pentru a reveni, faceți clic pe purpuriu înapoi butonul din stânga sus. Acum ar trebui să vă întoarceți la componenta boardingPasses. În această componentă avem trei treceri care afișează în prezent aceleași date. Să actualizăm acum.
Amintiți-vă cum în interiorul componentei BoardingCard au fost setate datele Moșteniți de la părinte? În acest caz, părintele este instanța componentei.
În pagina de zbor 1 selectați instanța de îmbarcare. În proprietățile componentelor părăsi Stat așa cum este. Sub Date, selectați sursa de date și asigurați-o Rând este setat la rândul 1. Instanța ar trebui să afișeze acum datele din primul rând al fișei de date.
Dacă comutați rândul veți observa că datele afișate sunt actualizate. Să o păstrăm pe rândul 1 pentru moment, totuși la zborul 2 și zborul 3 setați acest lucru pentru a afișa datele din rândul 2 și, respectiv, rândul 3.
Pentru a permite utilizatorilor să treacă printr-un permis de îmbarcare, va trebui să setăm o serie de interacțiuni.
Creați și desenați un hotspot (H) în partea dreaptă a zborului 1 pagină (asigurați-vă că vă lăsați un spațiu în partea de sus a hotspot-ului peste pictograma de închidere de pe partea din spate a componentei BoardingCard și că nu- t acoperi codul QR de pe prima pagină). Pentru a crea gestul de glisare, utilizați următoarele setări:
Faceți același lucru pe pagina de zbor 2 și adăugați un al doilea punct hotspot pe partea stângă a zborului 2 și paginile 3 ale zborului setate Apasă dreapta și Apăsați pe stânga in schimb. Simțiți-vă liberi să apăsați previzualizare pentru a testa și a interacționa cu componenta și pentru a ajusta setările dvs. de glisare în consecință.
Pentru a termina construirea prototipului, va trebui să creăm și să folosim o variabilă. Această variabilă va permite componentelor noastre să vorbească unii cu alții, influențând în același timp starea lor.
Variabila pe care o vom crea va fi utilizată pentru a actualiza punctele de progres pe baza cărora este afișat panoul de îmbarcare.
Pentru a crea o variabilă, apăsați V pentru a deschide Variabile Modal. Aici faceți clic pe Creați o nouă variabilă și tip "flightDisplayed" în Nume camp. Lăsați valoarea implicită necompletată.
Excelent, ai setat variabila ta! Închideți modalitățile modale prin apăsarea butonului X sau evadare pe tastatură.
Navigați înapoi la prototip. Dacă previzualizăm acum din pagina de pornire, ar trebui să aveți posibilitatea să glisați între carduri și, de asemenea, să interacționați cu codul QR.
În timp ce acum putem trece prin treceri, mai sunt încă câteva lucruri pe care să le configuram pentru a influența punctele de progres pentru a le actualiza în funcție de progresul trecerilor de îmbarcare.
Pentru a face acest lucru, deschideți componenta boardingPasses. Pe pagina 1 să creăm următoarea acțiune a paginii:
Repetați acest lucru la paginile 2 și 3, asigurându-vă că valoarea este setată la 2 sau 3 pentru a reflecta pagina în care vă aflați.
Am spus în mod eficient componentei boardingPass să actualizeze valoarea zborului variabilDisplayed, în funcție de zborul (pagina) afișat. Acum putem folosi această valoare pentru a influența starea punctelor de progres.
Iată cum: reveniți la prototip și deschideți componenta progressDots.
Veți observa trei pagini (stări) numite 1, 2 și 3. Această denumire se potrivește cu valorile setate în variabila FlightDisplayed. Este important ca aceste nume de pagini să corespundă valorilor stabilite.
Reveniți la prototip, selectați componenta progressDots și:
Am conectat acum componenta progressDots la variabila FlightDisplayed. Aceasta înseamnă că atunci când valoarea variabilei se modifică la o valoare, componenta progressDots va afișa pagina care se potrivește cu valoarea variabilă.
Încercați să examinați prototipul acum, interacționând cu panourile de îmbarcare, prin afișarea rapidă și vizualizarea actualizării punctelor de progres.
În cele din urmă, puteți să ștergeți sau să mutați pagina Activități pentru a vă asigura că vizualizarea partajată se deschide pe pagina de pornire corectă. Pentru a șterge pagina, selectați meniul hamburger din miniatura paginii și faceți clic pe ștergeți pagina.
Bacsis: Vedeți dacă puteți afla cum să obțineți componenta promoCard pentru actualizarea stării sale pe baza zborului afișat. Veți dori să creați o nouă variabilă numită cardDisplayed.
Acolo îl ai! Aplicația dvs. propriu-zisă Passing Pass. Dacă ați descărcat aplicația iOS, încercați să deschideți prototipul și să interacționați cu acesta pe iPhone; ar trebui să se simtă ca și adevăratul lucru.
Bine facut pentru urmarirea acestui tutorial pana la sfarsitul lui. Acum ar trebui să aveți o înțelegere aprofundată a modului de a crea propriul prototip în Atomic. Dacă aveți active existente în Sketch, le puteți importa utilizând Pluginul Atomic pentru schiță sau puteți proiecta nativ în Atomic dacă doriți.
Întrebări? Comentarii? Lăsați-le mai jos sau contactați-mă pe Twitter (@ femkesvs).
Accentsconagua