Tee Hi-Fidelity Prototyyppi Atomicissa

Sep 13, 2025
Miten tehdään

On helppo päästä kiinni yrittäessään kehittää ideaa staattisen mockup- tai litteän tiedoston piirustustyökalun sisällä, mutta a prototyyppi on tuhannen kokouksen arvoinen. Miksi olisit asettunut mihinkään vähemmän kuin tutkia ideoita interaktiivisella tavalla?

Ehkä sinulla on ajatus siitä, miten siirtyminen voisi käyttäytyä, mutta et ole varma, olisiko käyttäjälle oikeus käyttäjälle. Nopeasti prototyyppi siirtyminen ja vuorovaikutuksessa sen kanssa antaa sinulle suoraan realistisemman kokemuksen siitä, miten lopputuote voisi toimia todellisessa maailmassa.

Olemme nähneet työkalut tuomaan prototyyppejä suunnittelutilaan, mutta ei mitään Atomi . Nyt on tapa rakentaa täysin vuorovaikutteisia, Hi-Fidelity Prototyyppejä, jotka näyttävät ja käyttäytyvät kuin todellinen asia.

Prototyyping Atomicissa on uskomattoman nopea: voit luoda kauniita, kehittyneitä mockups minuutteina kirjoittamatta mitään koodia, asentamalla kaikki ohjelmistot tai juominen liikaa kahvia. Voit esikatsella prototyyppiä suoraan mobiililaitteellesi tai jakaa sen palautteen joukkuetoverin kanssa. Olemme myös valmiiksi kaikki varat, joita sinun täytyy aloittaa, joten sinun ei tarvitse tuoda asiaa (mutta voit tuoda luonnosta ja Photoshop CC liian).

Tässä opetusohjelmassa tutkitaan yksinkertainen pyyhkäisy siirtyminen sää App-sovelluksen sisällä, jonka luomme atomilla. Me kävelemme helpon askeleen siirtymiseen, ja jos tarvitset haasteen, kattaa myös kehittyneempiä prototyyppiominaisuuksia, joita voit tutustua.

01. Rekisteröidy

Aloitetaan! Jos sinulla ei vielä ole tiliä, avaa Google Chrome, vierailu atomic.io ja rekisteröidy ilmaiseen kokeiluun. Tämä kestää 30 päivää, minkä pitäisi olla runsaasti aikaa tutustua atomiciin ja tehdä ensimmäinen prototyyppi.

02. Katsokaa ympärillä

The Sample Project contains sample files to help you get familiar with Atomic

Näyteprojekti sisältää näytetiedostoja, joiden avulla voit tutustua Atomiciin

Nyt olet kirjautunut tilillesi, tämä on hauskaa tutkia. Huomaat, että näyteprojekti on asetettu sinulle. Tällä on jotkut johdantoiset näytetiedostot, joita voit pelata, kun olet perehtynyt atomiciin. Vaihtoehtoisesti voit käydä meidän Esitellä , jolla on kokoelma muiden rakentamia prototyyppejä. Jos tulet jumissa, paras paikka etsiä ratkaisua ohjekeskus .

03. Uusi hanke

Luo uusi projekti klikkaamalla "Uusi projekti" ja nimeä se "Resepti-sovellus". Painamalla Enter avaa projektikansio. Täällä voit tarkastella kaikkia tämän hankkeen malleja. Koska tämä on uusi projekti, se on tyhjä. Kuitenkin mallit täyttyvät täällä ajan myötä, kun luot ne.

04. Tartu näyte

There's a ready-made sample file for this project

Tähän projektiin on valmiita näytetiedostoja

Sen sijaan, että luodaan uusi tyhjä muotoilu, päätä täällä . Tämä avaa näytetiedoston, jonka olemme luoneet, jotta voit aloittaa.

Katso oikeassa alakulmassa olevaa kopiota ja muokkaa '-painiketta? Napsauta sitä ja lisää se resepti-sovellushankkeeseen. Napsauta Muokkaa nyt. Juuri näin, kopio näytetiedostomme on nyt projektin sisällä valmis muokkaamaan.

05. Tutustu toimittajaan

Tervetuloa toimittajaan! Jos olet käyttänyt suunnittelua työkalua aiemmin, Atomic todennäköisesti tuntuu tutulta. Katsotaanpa. Vasemmalla löydät pääsyn piirustus-, ulkoasu- ja prototyyppiiniliöihin sekä kaksi välilehteä, joiden avulla voit vaihtaa sivujen ja kerrospaneelin välillä. Oikealla huomaat Ominaisuudet-paneelin, jonka avulla voit muuttaa sivun kokoa sekä tuoda asetuksia tyyleille ja siirtymille.

06. Tutustu elementteihin

In the sample file's Assets page you’ll find the elements you need

Näytteen tiedostojen omaisuus -sivulla löydät tarvitsemasi elementit

Näet näytetiedoston omaisuuden sivulla Olemme luoneet kaikki tämän prototyypin elementit sinulle. Vaihda kerrospaneeliin ja valitse sitten osa elementtejä kankaalle. Valitsemasi elementit korostetaan automaattisesti kerrospaneelissa. Nopeuta työnkulkuasi painamalla '?' Jos haluat nähdä näppäimistön lyhytvalikoimat, joita voit käyttää.

07. Esikatselu

Voit esikatsella ja vuorovaikutuksessa prototyypin kanssa aina, kun haluat klikkaamalla "Esikatsele" editorin oikeassa alakulmassa. Käytämme tätä myöhemmin testaamaan, miten siirtymät tuntevat. Nyt "esikatselu" näyttää nyt varat koko näytön tilassa, mutta jos siirrät sivut 2 nuolinäppäimillä, näet vertailuesimerkin prototyypin ensimmäisestä tilasta. Kokeile vuorovaikutuksessa vertailuesimerkin kanssa napsauttamalla otsikon tallennettua reseptejä "-painiketta esikatselemaan, mitä aiomme luoda.

08. Aloita

Nyt olet perehtynyt rakennuksen prototyyppiin, on aika aloittaa! Valitse "Muokkaa", palataksesi editoriisi ja sitten omaisuus-sivulla valitse kaikki elementit ja kopioi ne leikepöydälle. Siirry sivulle 1 ja liitä elementit sivulle.

09. Järjestä omaisuutesi

Ilman valittuja elementtejä aseta kankaasi tausta täyttö # F6F7F8 (katso oikeanpuoleisessa ominaisuuksissa). Aseta otsikko kankaalle, ylhäältä ja keskustaan.

Haluat järjestää varoja, jotta ensimmäinen tila (kaikki reseptit) on sijoitettu kankaalle ja varat pian luotuun toisen tilaan (tallennetut reseptit) ovat pois kankaalle oikealle. Seuraavassa: Kun sama kohde on olemassa sivulla 1 ja Page 2, Atomic animoivat mahdolliset muutokset niiden välillä automaattisesti.

10. Pitä kortit

Kun alunperin esikatselitte prototyyppi, olet ehkä huomannut reseptien uutiskirje "viite - kaikki reseptit" -sivulla on pystysuoraan vieritettävä. Tämän vaikutuksen lisäämiseksi järjestä resepti kortit pystysuoraan pinoon, mukaan lukien "Tule takaisin huomenna" -teksti, joka pitäisi sijoittaa viimeiseksi, alareunassa.

11. Luo vieritysastia

Valitse resepti kortit ja "Tule takaisin huomenna" -teksti ja valitse säiliötyökalu, joka on ilmestynyt kankaalle yläosassa. Valitse "Luo vierityspakkaus". Sisältö sitten ryhmitellään ja sijoitetaan sisälle, mitä kutsumme vieritysastialla, jonka pystysuuntainen vieritys on oletusarvoisesti käytössä. Varmista, että määrität säiliön rajat vetämällä pohjarajaa peittämään elementtejä ja tavata kankaalle.

12. Aseta elementit

Tätä siirtymistä varten haluamme "tallennetut reseptit", jotka tulevat oikealta, ja "Lisää lisää tekstiä tulevat alla. Varmista, että tämä tapahtuu, aseta jokainen elementti vastaavaan lähtöasentoonsa. Esimerkiksi "tallennetut reseptit" olisi sijoitettava sivulle 1, pois kankaalle ja oikealle; ottaa huomioon, että "Lisää" tekstiä olisi sijoitettava sivulle 1, pois kankaalle ja alla.

13. Napauta siirtymä

Kuten luodamme napaussiirtymisen, jossa haluamme, että seuraavan sivun elementit liukuvat, on tärkeää, että ne ovat myös sivulla 1, pois kankaalle, määritellä niiden lähtöasento. Voit milloin tahansa viitata "Viite - kaikki reseptejä" -sivulle nähdäksesi, miten tämä sivu on järjestettävä.

14. Kopiointi

For our transition, duplicate page 1

Siirtyminen, kaksoiskappale sivu 1

Nyt olemme perustaneet ensimmäisen sivun, on aika luoda toinen tila siirtymälle, jota teemme uudella sivulla. Varmista, että sivupaneeli on valittu, siirrä sitten sivun 1 päälle sivun kortin oikeassa alakulmassa Hamburger-valikko. Napsauta valikkoa ja valitse "Duplicate".

15. Tallennetut reseptit

Atomic will animate any changes you make between Page 1 and your new Page 2

Atomic animoi mahdolliset muutokset, jotka teet sivun 1 ja uuden sivun 2 välillä

Siirry äskettäin päällekkäiseen sivuun, jos haluat luoda toisen tilan: Tallennetut reseptit. Tärkeää täällä ei ole poistaa mitään elementtejä sivulla, koska se rikkoo siirtymistä. Koska olemme päällekkäisiä sivun, atomi tietää, että molempien sivujen elementit ovat samat liitetyt elementit. Siksi se tietää animoida muutoksia, joita teemme elementtien ominaisuuksiin sivulla 2 (koko, sijainti, kierto, läpikuultavuus, väri ja niin edelleen).

16. Lisää siirtymiä

Siirrä ensin "Kaikki reseptit" vieritysryhmä vasemmalle, pois päältä kankaalle ja "Tallennetut reseptit" -elementti ja "Lisää tekstiä uusiin asentoihinsa: kehossa (" Kaikki reseptit "-ryhmän sijasta) kankaalle ja keskuksessa. Ainoa elementti, jota emme liiku tässä siirtymässä, on otsikko. Tämä johtuu siitä, että otsikko pysyy näytöllä ja muutokset vain hienovaraisesti - pääsemme siihen pian.

17. Muita animaatiota

Otsikko haluamme sinisen taustan liukumaan toisella tilassa. Sivulla 2, kun kerrokset paneeli auki, laajenna ryhmä nimeltään "otsikko" ja valitse sininen suorakulmio. Siirrä sitten tämä oikealle, joten se on sijoitettu takana "Tallennetut reseptit". Kiva!

18. Hauska osa

Add an interaction hotspot over the area you want users to interact with

Lisää vuorovaikutus hotspot alueelle, jonka haluat käyttää vuorovaikutuksessa

Nyt tulee hauska osa siirtymisen luomista. Sivulla 1 Aiomme vetää hotspotin otsikon "tallennettujen reseptien" tekstin yli, koska tämä on alue, jota haluamme, että käyttäjämme vuorovaikutuksessa. Valitse vuorovaikutus Hotspot -työkalu Työkalut-paneelista päätorin vasemmalla puolella (tai vain paina H). Voit vetää hotspotit käyttämällä samaa menetelmää, jonka haluat piirtää suorakulmion kankaalle: Napsauta ja vedä.

19. Siirtymäasetukset

Customise your transition, including the trigger gesture and motion type

Mukauta siirtymääsi, mukaan lukien liipaisin ele ja liiketyyppi

Kun olet piirtänyt hotspotin, se on edelleen valittu, näet vuorovaikutuksen osan Ominaisuudet-paneelissa oikealle. Tällöin voit määrittää siirtymän liipaisimen, kohde-sivun, liiketyypin ja keston. Tämän siirtymän osalta määritä seuraavat asetukset: ele: Napsauta tai napauta ; Mene: Sivu 2 ; Motion: E ASE-ulostulo ; Kesto: 250 .

20. edestakaisin

Haluamme pystyä vaihtamaan edestakaisin näiden kahden siirron välillä, joten meidän on myös asetettava Hotspot sivulle 2 ottamaan meidät takaisin sivulle 1. Kopioi hotspot sivulta 1 käyttämällä näppäimistön pikavalintoja ja liitä liitä Sivulla 2 "Kaikkien Reseptit" -tekstin yli "otsikko". Muista päivittää uuden hotspot-sivun asetus sivulle 1.

21. Esikatselu

Click the Preview button to see your transition in action

Napsauta Esikatselupainiketta nähdäksesi siirtymisen toiminnassa

On aika esikatsella siirtymääsi! Siirry sivulle 1 Sivupaneelissa ja valitse Editorin oikealla puolella oleva esikatselu (pikakuvake CMD + Enter ). Napsauta tai napauta "Tallennetut reseptit", jos haluat siirtyä sivulle 2. Valitse sitten "Kaikki reseptit" -prototyyppi, joka on otettava takaisin sivulle 1.

22. Kaikki tehdään!

Nyt olet pro! Valitse "Muokkaa" palataksesi editoriin, jos poistat varat ja kaksi viitevuosi (valitsemalla sivun Hamburger-valikko ja sitten "Poista sivu"), juuri valmistettu prototyyppi on valmis jakamaan. Voit helposti luoda osakeyhteyden painamalla "Share" editorin oikeassa alakulmassa.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti numero 283; Osta se täällä !

Miten tehdään - Suosituimmat artikkelit

Digitaalisten Plein Air Maalausten luominen

Miten tehdään Sep 13, 2025

Hanki ulkona luomaan suurta taidetta (Kuva luotto: Mike Mc Cain) On niin paljon hienoja tapoja oppia ja h..

10 Asiat, joita et tiennyt, voit tehdä Photoshopin kanssa

Miten tehdään Sep 13, 2025

Photoshop on täydellinen esimerkki koko on suurempi kuin sen osien summa, joista monet; Työkalujen, säätöjen ja suodattimien..

Step-by-Step: Miten Mimic öljymaali Corel Painterissa

Miten tehdään Sep 13, 2025

Se tuntuu eilen, kun olin roolipelit lukion ystäviä Fantasy Worlds täynnä ritarit, velhoja, barbaareja ja aarteita piilossa Dungeonsissa. Teini-ikäisinä teoreettein omistamamme omaisuut..

5 Asiat, joita tarvitset öljymaalaukseen

Miten tehdään Sep 13, 2025

Siellä on perusteltua mystiikkaa ympäri öljymaalausta, joka on asettanut joitain taiteilijoita tutkimalla niitä. Jos tiedät ..

Luo digitaalinen etch a sketch

Miten tehdään Sep 13, 2025

Tässä opetusohjelmassa otetaan mekaaninen piirustus lelu etsimään luonnoksen inspiraationa ja pyrkimys toteuttaa nämä omina..

Kuinka lisätä hauskoja CSS-taustoja sivustoihisi

Miten tehdään Sep 13, 2025

Aika oli web-sivulla tausta oli pieni laatta kuva - ja usein hirveä, hyökkäsi jokaisen kävijän silmämunat. Tänään tausta..

Luo täydelliset viestit kaikissa sähköpostiohjeissa

Miten tehdään Sep 13, 2025

Jokaiselle sähköpostimarkkinointikampanjalle toimivat sähköpostiviestin on saatava postilaatikkoon ja erottuu kaikista muista. Tarina ei kuitenkaan pääty sinne. Sähköpostiosoitteesi o..

Tee logo Illustratorissa

Miten tehdään Sep 13, 2025

Tällä viikolla ilmestyi joitakin uusia videoita Adoben Make It Now soittolistan, kokoelma leikkeet kaikkien miten luoda suunnitteluprojekteissa Creative Cloud sovelluksia minuutin tai vähe..

Luokat