Miten prototyyppi mobiilisovellus origami studiolla

Sep 13, 2025
Miten tehdään

Maailmassa, jossa käyttäjillä on suuria odotuksia kokemuksistaan ​​verkosta ja mobiililaitteesta, prototyyppistä ja käyttäjän arvioinnista on avainasemassa. Nyt on tavallista asteittain iteroida prototyyppejä, joilla on yhä suurempi uskollisuus ja kukoistava käyttäjäkokemus Teollisuus on kasvanut tämän kriittisen toiminnan ympärille. Viime kädessä ohjelmistojen saaminen suoraan prototyyppivaiheessa säästää aikaa ja / tai rahaa myöhemmin.

  • 10 Top Prototyyppiasiat

On monia lähestymistapoja, joita voit ottaa prototyyppiin ja lukuisiin työkaluihin auttaa. Yksi uusimmista lohko on Origami Studio , Kehitti Facebookissa ja saatavilla ilmaiseksi MacOSille.

Origami Studio, joka todella aloitti elämänsä pluginiksi kvartsi-säveltäjälle (visuaalinen ohjelmointikieli Macon Xcode -kehitysympäristössä) ennen itsenäistä työkalua, on saanut paljon huomiota viime vuoden aikana.

Tämä ei ole vain siksi, että se rakentaa suuren nimen kehittäjä, mutta myös siksi, että voiman ja yksinkertaisuuden yhdistelmä on kehittää korkean uskotun, vuorovaikutteisia prototyyppejä.

Noudata näitä ohjeita löytääksesi kuinka helposti voit käyttää Origami Studio rakentaa prototyyppi.

01. Uusi prototyyppi

Start by creating a new iPhone 8 prototype

Aloita luomalla uusi iPhone 8 prototyyppi

Aiomme luoda prototyypin mobiilisovellukseen, jonka avulla voimme pyyhkiä kuvia kissojen kuvien ja "kuten" joitakin niistä. Kun olemme asentaneet Origami Studio, luomme uuden iPhone 8 -prototyypin splash-näytöstä.

02. Kerrosten lisääminen

Voimme aloittaa kerrosten lisäämisen prototyyppimme heti. Tässä tapauksessa lisäämme näytön yläosassa olevan logon. Lisäsimme kerroksen käyttämällä + -painiketta oikeassa yläkulmassa ja valitsemalla "Kuvakerros". Voimme sitten muuttaa ja asettaa sen asianmukaisesti korostamalla ja muokkaamalla kerroksen ominaisuuksia. Tuotemerkin jälkeen lisäämme myös sydämen kuvan näytön alareunassa, jotta voit palvella "Like" -painiketta.

03. Yhteisvaikutuksen luominen

For interactions you'll need to create a patch

Vuorovaikutus, sinun on luotava laastari

Meidän täytyy tehdä sydämemme-painike käyttäjän vuorovaikutukseen. Huomaat, että esikatseluikkunassa kohdistin muuttuu edustamaan kosketusta mobiililaitteessa. Vastatakseen tähän, meidän on luotava "laastari", joka on olennaisesti toiminto origami-toiminnolla, joka ottaa sisääntuloa ja tuottaa tulosteita. Kaksoisnapsauta tyhjää harmaa alue, jotta voit tuoda esiin uusien laastareiden luettelon ja etsiä "vuorovaikutusta". Aseta laastari ja sen pitäisi näkyä näytöllä.

04. Yhteisvaikutusten yhdistäminen kerroksille

Change the patch properties so that it only responds when you click in the right place

Muuta korjaustiedostoja, jotta se vastaa vain, kun napsautat oikeaan paikkaan

Tällä hetkellä laastari reagoi kosketukseen missä tahansa prototyyppiin. Testaa se napsauttamalla ja näet "alas" ja "Napauta" -ominaisuudet muuttuvat reaaliajassa. Jos valitset laastarin "Layer" -ominaisuuden, voit yhdistää sen kerrokseen, joka sisältää sydämen kuvan, ja se vastaa nyt vain napsautuksiin kyseisen alueen.

05. Animaatiot

A pop animation will give users a bit of visual feedback

Pop-animaatio antaa käyttäjille vähän visuaalista palautetta

Nyt haluamme jotain tapahtua, kun vuorovaikutus laukaisee. Luo toinen laastari, tällä kertaa "pop-animaatio". Tätä käytetään joustavan vaikutuksen luomiseen. Jätä ominaisuudet, kun ne ovat nyt, mutta luomme yhteyden aiemmin luomamme vuorovaikutuksen napauta ja uuden pop-animaation numero. Teemme tämän napsauttamalla ja vetämällä pienten piireiden vieressä. Jos napsautat sydäntä nyt, näet nyt vuorovaikutuksen käynnistää muutoksen POP-animaation "Progress" -lähtöön.

06. Siirtyminen

You can change the extent to which objects change size when they're clicked

Voit muuttaa laajuutta, mitä esineitä muuttaa kokoa, kun niitä napsautetaan

Seuraava asia, jota tarvitsemme on siirtymälaastari. Näin voimme määrittää alhaiset ja korkeat arvot siirtymään POP-animaation edistymismuutoksista. Sitten voimme yhdistää siirtymän lähtöarvot sydämen kuvakerroksen mittakaavaomaiseen omaisuuteen kertoa, että origami muokata sitä, kun se on klikkautunut. Nyt sinun pitäisi nyt löytää, että sydämen klikkaaminen aiheuttaa sen animoivan lyhyen muutoksen kokoa. Se ei ole aivan oikein, koska se ponnahtaa takaisin normaaliksi heti.

07. Kytkee

Use switch patches to toggle objects between different states

Käytä kytkin laastaria vaihtaaksesi kohteita eri tilojen välillä

Kytkin laastarit ovat origamin tapa vaihtaa kahden tilan välillä. Tämä on mitä haluamme "Like" -painikkeemme. Kytkentälaitteelle siirretty tulo voi kääntää sen "päälle" ja "OFF" -tilat, jotka voidaan sitten siirtää ulostulona myöhemmille laastareille. Luodaan uusi kytkin ja aseta se vuorovaikutuksen ja pop-animaation väliin. Sinun pitäisi sitten napsauttaa sydän vaihtaa sen pienten ja suurien tilojen välillä.

08. Monimutkaisempi käyttäytyminen

By experimenting with patches you can add more complex behaviour to your prototype

Kokeilemalla laastareita voit lisätä monimutkaisempaa käyttäytymistä prototyyppisi

Onnittelut! Olet nyt luonut ensimmäisen vuorovaikutteisen ominaisuuden käyttämällä yleisimpiä laastareita, joita voit käyttää aikaa ja aikaa uudelleen. Voimme lisätä lisää laastareita luoda monimutkaisempi käyttäytyminen. Luodaan eri värillinen sydänkerros suoraan nykyisen takana ja lisää sitten uusia laastareita sekä skaalata se samanaikaisesti ja muokkaa alkuperäisen kerroksen läpinäkyvyyttä, joten se on näkyvissä. Nyt, kun napautat sydäntä, se vaihtaa suurempia ja pienempiä, mutta näyttää myös vaihtaa väriä.

09. CAROUSEL

It's time to bring on all the cats

On aika tuoda kaikki kissat

Lopeta prototyyppi, lisää kuvan karuselli kissojen kanssa, jonka haluamme sallia käyttäjien "kuten". Tehdä tämä, meidän on ensin lisättävä kerrosryhmä. Jokainen kuva on erillinen kerros, jossa on yhä offset x koordinaatit niin, että ne olennaisesti istuvat sivukokoisella rivillä vain yhdellä näytöllä millä tahansa tavalla.

10. Swiping vasemmalle ja oikealle

Follow these steps to add a classic swiping action to your carousel

Noudata näitä ohjeita, jos haluat lisätä klassisen pyyhkäisytoiminnan karuselliin

Viimeinen asia, jonka meidän on tehtävä, jotta se voi tehdä vasemmalle ja oikealle pyyhkäisee selaamaan karusellia. Teemme tämän luomalla selauksen vuorovaikutuksen linkittämään karusellikerrosryhmään (ei yksittäisiä kuvia). Vuorovaikutus tuottaa x koordinaatin, jonka voimme sitten linkittää karusellin X-ominaisuuden siirtämiseksi. In-välissä, lisäämme leikkeen laastarin, jota voidaan käyttää arvojen rajoittamiseen sen varmistamiseksi, että emme siirrä koordinaatteja karusellin reunan ulkopuolella.

11. Seuraavat vaiheet

Now you've learned the basics you can add more advanced features

Nyt olet oppinut perusasiat Voit lisätä lisäominaisuuksia

Se siitä. Olet luonut hyvin perussovelluksen. Voit myös käyttää Origami Studioin rakennettuja "kehyksiä" sijoittaa sen laitteen taustalle, mikä voi auttaa antamaan ammattimaisen viimeistelyn. Nyt kun olet perehtynyt korjaustiedostojen käyttämisestä, voit alkaa luoda kehittyneempiä käyttäytymistä. Origami Studio -verkkosivustolla on runsaasti oppaita, jotka selittävät, miten toteuttaa suosittuja toimintoja, joita yleisesti nähtiin sovelluksissa.

Tämä artikkeli julkaistiin alun perin julkaisussa 270 Creative Web Design Magazine Web Designer. Osta numero 270 täällä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

  • Trendit, jotka muokkaavat sovelluksen suunnittelua vuonna 2018
  • 3 Yläosaa rakentaa verkkosivuston prototyyppi
  • Sinun tarvitsee tietää Mockups, Wireframes ja Prototyypit

Miten tehdään - Suosituimmat artikkelit

22 parasta UI-suunnittelutyökalua

Miten tehdään Sep 13, 2025

(Image Credit: Invision) Valikoima parhaita UI-suunnittelutyökaluja auttaa lähes jokaisen suunnitteluprosessin kans..

Nestemäisten vaikutusten luominen WebGL: llä

Miten tehdään Sep 13, 2025

Monet web-suunnittelijat etsivät tapoja lisätä suuria vaikutuksia sivuston suunnitteluun, jotta he tarttuvat käyttäjiensä h..

30 keyshot-renderointivinkit

Miten tehdään Sep 13, 2025

Kuvan muodostaminen, mallin animaatio tai jopa koko kohtaus on tärkeä askel art luomisessa. Ilman tätä tärkeää vaihetta lo..

Luo Jumalan säteet V-Ray

Miten tehdään Sep 13, 2025

Todellisessa maailmassa valokuvauksessa valonsäteet ovat niiden näkyvissä, kun heillä on pinta pomppia pois, kuten pöly, sii..

Kuinka luoda digitaalinen öljymaalaus käyttämällä Artrage

Miten tehdään Sep 13, 2025

Maalaus digitaalisesti käyttämällä a Piirustus Tabletti ja piirustus ohjelmisto Artrage. Käyttämällä grafi..

Opi kasvamaan lehtineen X-hiukkasten kanssa

Miten tehdään Sep 13, 2025

Staattisen kasvien mallinnus, joka on kasvanut in situ, ei ole liian kovaa, mutta luomalla laite, joka animoi, että kasvu on hie..

Kuinka tehdä omat kangaslevyt

Miten tehdään Sep 13, 2025

Omien kangaslevyn tekeminen on hauskaa, nopeaa ja säästää rahaa. Se antaa sinulle myös erinomaisen tuotteen ja joustavuuden ..

Kuinka siirtyä DAZ Studio ja Cinema 4D

Miten tehdään Sep 13, 2025

Ohjelmien välillä voi olla sekava. Minulla on taipumus kiinni neljästä elintarvikeryhmästä - Cinema 4D, Zbrush, Daz Studio ..

Luokat