Izveidojiet augstas uzticamības prototipu programmā Atomic

Ir viegli nokļūt, mēģinot attīstīt ideju statiskā maketa vai plakano failu zīmēšanas rīkā, bet prototips ir vērts tūkstoš sapulces. Kāpēc jūs samierinātos ar kaut ko mazāku par savu ideju izpēti interaktīvā veidā?

Varbūt jums ir ideja par to, kā pāreja varētu rīkoties, taču neesat īsti pārliecināts, vai tas justos pareizi lietotājam. Ātra pārejas prototipu veidošana un tieša mijiedarbība ar to sniedz daudz reālāku pieredzi par to, kā galaprodukts varētu darboties reālajā pasaulē.



Mēs esam redzējuši, ka rīki prototipu izveidi rada dizaina telpā, taču neviens no tiem nepatīk Atomu . Tagad ir veids, kā izveidot pilnīgi interaktīvus, augstas uzticības prototipus, kas izskatās un darbojas kā reāli.



Atomic prototipēšana ir neticami ātra: dažu minūšu laikā varat izveidot skaistus, progresīvus maketus, nerakstot kodu, neinstalējot programmatūru vai dzerot pārāk daudz kafijas. Varēsiet priekšskatīt, izmantojot prototipu tieši savā mobilajā ierīcē, vai arī kopīgot to ar komandas biedru, lai saņemtu atsauksmes. Mēs arī esam iepriekš sagatavojuši visus aktīvus, kas jums nepieciešami, lai sāktu darbu, tāpēc jums nebūs jāimportē kaut kas (bet jūs varat importēt no Sketch un Photoshop CC arī).

Šajā apmācībā mēs izpētīsim vienkāršu vilkšanas pāreju laika lietotnē, kuru izveidosim programmā Atomic. Mēs iepazīsimies ar vienkāršām pāreju izveides darbībām, un, ja jums ir nepieciešams izaicinājums, es apskatīšu arī dažas uzlabotas prototipu veidošanas funkcijas, kuras varat izpētīt.



01. Pierakstīties

Sāksim! Ja jums vēl nav konta, atveriet Google Chrome un apmeklējiet vietni atomic.io un reģistrējieties bezmaksas izmēģinājumam. Tas ilgst 30 dienas, un tam vajadzētu būt daudz laika, lai jūs varētu izpētīt Atomic un izgatavot savu pirmo prototipu.

02. Paskaties apkārt

Paraugu projektā ir paraugu faili, kas palīdzēs jums labāk iepazīties ar Atomic

Paraugu projektā ir paraugu faili, kas palīdzēs jums labāk iepazīties ar Atomic

Tagad esat pierakstījies savā kontā. Šis ir lielisks laiks izpētei. Jūs pamanīsit, ka jums ir izveidots projekta paraugs. Tam ir daži ievada paraugu faili, ar kuriem varat spēlēt, kamēr iepazīstaties ar Atomic. Alternatīvi jūs varat apmeklēt mūsu Vitrīna , kurā ir citu būvētu prototipu kolekcija. Ja jūs iestrēgstat, labākā vieta, kur meklēt risinājumu, ir mūsu palīdzības centrs .



03. Jauns projekts

Izveidojiet jaunu projektu, noklikšķinot uz “Jauns projekts” un piešķiriet tam nosaukumu “Recipe App”. Nospiežot Enter, tiks atvērta projekta mape. Šeit jūs varat apskatīt visus šī konkrētā projekta dizainus. Tā kā šis ir jauns projekts, tas ir tukšs. Tomēr dizainparaugi laika gaitā šeit tiks piepildīti, kad jūs tos veidojat.

04. Paņemiet paraugu

Tur

Šim projektam ir gatavs parauga fails

Tā vietā, lai izveidotu jaunu tukšu dizainu, dodieties šeit . Tādējādi tiks atvērts mūsu izveidots faila paraugs, lai palīdzētu jums sākt darbu.

Apakšējā labajā stūrī skatiet pogu Kopēt un rediģēt? Noklikšķiniet uz tā un pievienojiet to savam Recipe App projektam. Noklikšķiniet uz Rediģēt tūlīt. Tāpat kā mūsu parauga faila kopija tagad ir jūsu projektā, un tā ir gatava rediģēšanai.

05. Izpētiet redaktoru

Laipni lūdzam redaktorā! Ja agrāk izmantojāt dizaina rīku, Atomic, iespējams, jutīsies pazīstams. Paskatīsimies apkārt. Kreisajā pusē jūs atradīsit piekļuvi zīmēšanas, izkārtojuma un prototipu veidošanas rīkiem, kā arī divām cilnēm, kas ļauj pārslēgties starp paneļiem Lappuses un Slāņi. Labajā pusē jūs pamanīsit paneli Rekvizīti, kas ļauj mainīt lapas lielumu, kā arī ievest stilu un pāreju iestatījumus.

06. Pārbaudiet elementus

Faila paraugā

Faila parauga lapā Aktīvi atradīsit nepieciešamos elementus

Faila parauga lapā Jūs redzēsit, ka mēs esam izveidojuši jums visus šajā prototipā izmantotos elementus. Pārslēdzieties uz paneļa Slāņi un pēc tam noklikšķiniet uz dažiem audekla elementiem. Atlasītie elementi tiks automātiski izcelti slāņu panelī. Paātriniet darbplūsmu, nospiežot '?' lai redzētu izmantojamo īsinājumtaustiņu diapazonu.

07. Priekšskatījums

Varat priekšskatīt un mijiedarboties ar savu prototipu, kad vien vēlaties, redaktora apakšējā labajā stūrī noklikšķinot uz “Priekšskatīt”. Mēs to izmantosim vēlāk, lai pārbaudītu, kā jūtas mūsu pārejas. Ja tagad atlasīsit “Priekšskatījums”, aktīvi tiks parādīti pilnekrāna režīmā, taču, ja ar bultiņām pārvietosities uz 2. lapu, tiks parādīts mūsu prototipa pirmā stāvokļa atsauces piemērs. Mēģiniet mijiedarboties ar atsauces piemēru, galvenē noklikšķinot uz pogas Saglabātās receptes, lai priekšskatītu, ko mēs izveidosim.

08. Sāciet

Tagad jūs esat iepazinies ar mūsu veidoto prototipu, ir pienācis laiks sākt! Atlasiet Rediģēt, lai atgrieztos redaktorā, un pēc tam lapā Aktīvi atlasiet visus elementus un kopējiet tos starpliktuvē. Pārejiet uz 1. lapu un ielīmējiet elementus lapā.

09. Sakārtojiet savus aktīvus

Bez atlasītiem elementiem iestatiet audekla fona aizpildījumu uz # F6F7F8 (skatiet labās puses paneli Properties). Novietojiet galveni uz audekla, augšpusē un centrā.

Jūs vēlaties pārkārtot aktīvus, lai jūsu pirmais stāvoklis (visas receptes) tiktu novietots uz audekla, un jūsu drīzumā izveidojamā otrā stāvokļa (saglabātās receptes) aktīvi būtu ārpus audekla pa labi. Lūk, kāpēc: ja viens un tas pats objekts pastāv 1. un 2. lappusē, Atomic automātiski animēs visas izmaiņas starp tām.

10. Kraujiet kārtis

Sākotnēji priekšskatot prototipu, iespējams, pamanījāt, ka lapu “Atsauce - visas receptes” recepšu avots ir vertikāli ritināms. Lai pievienotu šo efektu, sakārtojiet recepšu kartītes vertikālā kaudzītē, ieskaitot tekstu “Atgriezieties rīt”, kas jānovieto pēdējais, apakšā.

11. Izveidojiet ritināšanas konteineru

Atlasiet recepšu kartītes un tekstu “Atgriezieties rīt” un izvēlieties rīku Konteiners, kas parādīsies Audekla augšējā centrā. Atlasiet “Izveidot ritināšanas konteineru”. Pēc tam saturs tiks sagrupēts un ievietots tā dēvētajā ritināšanas konteinerā, pēc noklusējuma iespējojot vertikālo ritināšanu. Noteikti definējiet konteinera robežas, velkot apakšējo robežu uz augšu, lai maskētu elementus un atbilstu audeklam.

12. Novietojiet savus elementus

Šajā konkrētajā pārejā mēs vēlamies, lai labajā pusē ienāktu režģis “Saglabātās receptes”, bet no apakšas - teksts “Pievienot vairāk”. Lai pārliecinātos, ka tas notiek, novietojiet katru elementu attiecīgajā sākuma stāvoklī. Piemēram, “Saglabātās receptes” jānovieto 1. lappusē, ārpus audekla un pa labi; tā kā teksts “Pievienot vairāk” jānovieto 1. lappusē, ārpus audekla un zemāk.

13. Pieskarieties pārejai

Kad mēs veidojam pieskāriena pāreju, kur mēs vēlamies, lai mūsu nākamās lapas elementi ieslīdētu, ir svarīgi, lai tie noteiktu arī 1. lappusē, ārpus audekla, lai noteiktu to sākuma pozīciju. Jebkurā laikā varat atsaukties uz lapu “Atsauce - visas receptes”, lai uzzinātu, kā šī lapa ir jāsakārto.

14. Dublēšana

Mūsu pārejai dublējiet 1. lapu

Mūsu pārejai dublējiet 1. lapu

Tagad mēs esam izveidojuši pirmo lapu, ir pienācis laiks izveidot otro pārejas stāvokli, ko mēs veiksim jaunā lapā. Pārliecinieties, vai ir atlasīts panelis Lappuses, pēc tam virziet kursoru virs 1. lappuses, lai lapas lappuses apakšējā labajā stūrī atvērtu hamburgera izvēlni. Noklikšķiniet uz izvēlnes un atlasiet “Dublēt”.

15. Saglabātās receptes

Atomic animēs visas jūsu veiktās izmaiņas starp 1. un jauno 2. lapu

Atomic animēs visas jūsu veiktās izmaiņas starp 1. un jauno 2. lapu

Pārejiet uz savu nesen dublēto lapu, lai izveidotu otro stāvokli: savas saglabātās receptes. Šeit ir svarīgi neizdzēst nevienu lapas elementu, jo tas pārtrauks pāreju. Tā kā mēs esam dublējuši lapu, Atomic zina, ka abu lapu elementi ir vienādi saistīti elementi. Tāpēc tā zina, lai animētu visas izmaiņas, kuras mēs veicam elementu īpašībās 2. lappusē (izmērs, novietojums, rotācija, necaurredzamība, krāsa un tā tālāk).

labākā 3D modelēšanas programmatūra nereālam motoram 4

16. Vairāk pāreju

Vispirms pārvietojiet ritināšanas grupu “Visas receptes” pa kreisi, no audekla, elementu “Saglabātās receptes” un tekstu “Pievienot vairāk” savās jaunajās pozīcijās: pamattekstā (grupas “Visas receptes” vietā) audekla apakšējā puse un attiecīgi centrā. Vienīgais elements, kuru mēs nepārvietojam šajā pārejā, ir galvene. Tas ir tāpēc, ka galvene paliek ekrānā un mainās tikai smalki - mēs pie tā drīz nonāksim.

17. Tālāka animācija

Galvenei mēs vēlamies, lai zilais fons slīdētu pāri otrajam stāvoklim. Kamēr 2. lappusē ir atvērts panelis Slāņi, izvērsiet grupu ar nosaukumu “Galvene” un atlasiet zilo taisnstūri. Pēc tam pārvietojiet to pa labi, lai tas atrastos aiz “Saglabātās receptes”. Jauki!

18. Jautrā daļa

Pievienojiet mijiedarbības karsto punktu apgabalā, ar kuru vēlaties, lai lietotāji mijiedarbotos

Pievienojiet mijiedarbības karsto punktu apgabalā, ar kuru vēlaties, lai lietotāji mijiedarbotos

Tagad nāk jautrā pārejas izveides daļa. 1. lapā mēs izveidosim karsto punktu virs teksta 'Saglabātās receptes', jo šī ir joma, ar kuru mēs vēlamies mijiedarboties mūsu lietotājam. Rīku panelī, kas atrodas redaktora tālākajā kreisajā pusē, atlasiet mijiedarbības vietas rīku (vai vienkārši nospiediet H) Jūs varat uzzīmēt karstos punktus, izmantojot to pašu metodi, kuru izmantosit, lai uz audekla uzzīmētu taisnstūri: vienkārši noklikšķiniet un velciet.

19. Pārejas iestatījumi

Pielāgojiet pāreju, ieskaitot aktivizētāja žestu un kustības veidu

Pielāgojiet pāreju, ieskaitot aktivizētāja žestu un kustības veidu

Kad esat uzzīmējis savu karsto punktu un tā joprojām ir atlasīta, panelī Rekvizīti pa labi parādīsies sadaļa Mijiedarbība. Šeit jūs varat norādīt aktivizētāja žestu, mērķa lapu, kustības veidu un pārejas ilgumu. Šajā pārejā norādiet šādus iestatījumus: Žests: Noklikšķiniet vai pieskarieties ; Iet uz: 2. lappuse ; Kustība: E ase iekšā ; Ilgums: 250 .

20. Šurpu turpu

Mēs vēlamies, lai varētu pārslēgties uz priekšu un atpakaļ starp abām pārejām, tāpēc arī tagad mums būs jānovieto karstais punkts 2. lappusē, lai atgrieztos 1. lappusē. Izmantojot tastatūras īsinājumtaustiņus, kopējiet karsto punktu no 1. lappuses un ielīmējiet 2. lappusē virs galvenes esošā teksta “Visas receptes”. Atcerieties atjaunināt jaunā tīklāja galamērķa lapas iestatījumu uz 1. lapu.

21. Priekšskatījums

Noklikšķiniet uz pogas Priekšskatījums, lai redzētu pāreju darbībā

Noklikšķiniet uz pogas Priekšskatījums, lai redzētu pāreju darbībā

Ir pienācis laiks priekšskatīt pāreju! Lapu panelī dodieties uz 1. lapu un redaktora apakšējā labajā stūrī noklikšķiniet uz Priekšskatījums (saīsne cmd + ievadiet ). Noklikšķiniet uz sava prototipa vai pieskarieties tam “Saglabātās receptes”, lai pārietu uz 2. lappusi. Pēc tam atlasiet “Visas receptes” prototipu, lai atgrieztos 1. lappusē.

22. Viss izdarīts!

Tagad jūs esat profesionālis! Atlasiet Rediģēt, lai atgrieztos redaktorā. Pēc tam, ja izdzēsīsit līdzekļus un divas atsauces lapas (atlasot lapas hamburgera izvēlni un pēc tam - Dzēst lapu), tikko izveidotais prototips ir gatavs kopīgot. Jūs varat viegli izveidot kopīgošanas saiti, redaktora apakšējā labajā stūrī nospiežot “Kopīgot”.

Šis raksts sākotnēji parādījās net žurnāls 283. izdevums; nopirkt šeit !