Hvordan prototype en mobilapp med origami Studio

Jan 22, 2026

hvordan

I en verden der brukerne har høye forventninger til deres erfaring på nettet og mobil, prototyping og brukervaluering er nøkkelen. Det er nå vanlig å gradvis iterere på prototyper med stadig høye trofasthet, og en blomstrende Brukererfaring Industrien har vokst opp rundt dette kritiske settet av aktiviteter. Til slutt, å få programvare rett på prototyping-scenen sparer deg tid og / eller penger senere.

10 Top prototyping verktøy

Det er mange tilnærminger du kan ta til prototyping, og mange verktøy der ute for å hjelpe. En av de nyeste på blokken er Origami Studio. , utviklet av Facebook og tilgjengelig gratis for MacOS.

Origami Studio, som faktisk startet sitt liv som en plugin for Quartz Composer (et visuelt programmeringsspråk i MacOS XCode Development Environment) før han ble et frittstående verktøy, har fått stor oppmerksomhet i løpet av det siste året.

Dette er ikke bare fordi det er bygget av en stor navn utvikler, men også på grunn av kombinasjonen av kraft og enkelhet gir den til å utvikle høyfidelitet, interaktive prototyper.

Følg disse trinnene for å oppdage hvor lett du kan bruke origami Studio for å bygge en prototype.

01. En ny prototype

Start by creating a new iPhone 8 prototype — Start med å lage en ny iPhone 8 prototype

Vi skal lage en prototype for en mobilapp som vil tillate oss å sveipe gjennom bilder av katter og "som" noen av dem. Når vi har installert Origami Studio, lager vi en ny iPhone 8-prototype fra Splash-skjermen.

02. Legge til lag

Vi kan begynne å legge til noen lag til vår prototype med en gang. I dette tilfellet legger vi til en logo plassert øverst på skjermen. Vi legger til laget ved hjelp av + -knappen øverst til høyre og velger "Image Layer". Vi kan deretter endre størrelse og plassere den på riktig måte ved å markere og modifisere lagets egenskaper. Etter vår merkevare vil vi også legge til et hjertebilde nederst på skjermen for å fungere som vår "like" -knapp.

03. Opprette en interaksjon

For interactions you'll need to create a patch — For interaksjoner må du lage en oppdatering

Vi må gjøre vår hjerte-knapp svare på brukerinteraksjoner. Du vil legge merke til at i forhåndsvisningsvinduet endres markøren for å representere berøring på en mobil enhet. For å svare på dette må vi lage en "patch", som i hovedsak er en funksjon i origami som tar innspill og produserer utganger. Dobbeltklikk på det tomme gråområdet for å hente en liste over nye oppdateringer, og søk etter 'interaksjon'. Plasser oppdateringen din og den skal vises på skjermen.

04. Kobling av interaksjoner til lag

Change the patch properties so that it only responds when you click in the right place — Endre oppdateringsegenskapene slik at det bare reagerer når du klikker på rett sted

For øyeblikket vil lappen din svare på å berøre hvor som helst på prototypen. Test det ut ved å klikke, og du vil se "ned" og "trykke" Egenskaper som skifter i sanntid. Hvis du velger "Layer" -boligen i oppdateringen, kan du koble den til laget som inneholder hjertebildet, og det vil nå bare svare på klikk på det bestemte området.

05. Animasjoner

A pop animation will give users a bit of visual feedback — En pop animasjon vil gi brukerne litt visuell tilbakemelding

Nå vil vi ha noe skje når vår interaksjon utløser. Opprett en annen oppdatering, denne gangen en "pop animasjon". Dette brukes til å skape en fjærende effekt. La egenskapene som de er for nå, men vi vil lage en sammenheng mellom trykkutgangen til samspillet vi opprettet tidligere og nummerinngangen til vår nye Pop-animasjon. Vi gjør dette ved å klikke og dra mellom de små sirkler ved siden av hver. Hvis du klikker på hjertet nå, vil du nå se samspillet utløsere en endring i "fremgang" -utgangen til popanimasjonen.

06. Overganger

You can change the extent to which objects change size when they're clicked — Du kan endre i hvilken grad objekter endrer størrelse når de er klikket

Den neste tingen vi trenger er en overgangsplaster. Dette vil tillate oss å spesifisere lave og høye verdier for å bevege seg mellom som pop animasjonens fremdriftsutgang endres. Vi kan deretter koble overgangens utgangsverdier til skalaenes egenskap av hjertebildslaget for å fortelle origami for å endre størrelsen på den når den klikkes. Du bør nå finne at å klikke på hjertet får det til å animere en kort endring i størrelse. Det er imidlertid ikke helt riktig, men siden det kommer tilbake til normalt straks.

07. Brytere

Use switch patches to toggle objects between different states — Bruk bryterplaster til å veksle objekter mellom forskjellige stater

Bryterplaster er origamis måte å bytte mellom to stater. Dette er hva vi vil ha for vår "like" -knapp. En inngang som passerte til en bryterplaster kan vende den mellom 'på' og 'Av' -stater, som deretter kan sendes som en utgang til påfølgende flekker. La oss lage en ny bryter og plasser den mellom samspillet og popanimasjonen. Du bør da kunne klikke på hjertet for å veksle det mellom små og store stater.

08. Mer kompleks oppførsel

By experimenting with patches you can add more complex behaviour to your prototype — Ved å eksperimentere med oppdateringer kan du legge til mer kompleks oppførsel på prototypen din

Gratulerer! Du har nå opprettet din første interaktive funksjon, ved hjelp av de vanligste oppdateringene som du finner du bruker tid på nytt. Vi kan legge til flere oppdateringer for å skape mer kompleks oppførsel. La oss lage et annet farget hjertelag rett bak vår nåværende, og legg til nye oppdateringer både for å skalere den samtidig, og endre opaciteten til vårt opprinnelige lag, slik at det er synlig. Nå, når du trykker på hjertet, vil det bytte større og mindre, men ser også ut til å endre farge.

09. karusell

It's time to bring on all the cats — Det er på tide å ta med på alle kattene

For å fullføre vår prototype, la oss legge til et bilde karusell med kattene vi vil tillate brukere å "like". For å gjøre dette må vi først legge til en gruppe lag. Hvert bilde vil være et separat lag, med stadig mer offset x koordinater slik at de i hovedsak sitter side-for-størrelse på rad med bare en synlig på skjermen på et hvilket som helst element.

10. Swiping til venstre og høyre

Follow these steps to add a classic swiping action to your carousel — Følg disse trinnene for å legge til en klassisk swiping-handling til karusellen din

Det siste vi trenger å gjøre for å få det til å fungere, gjør det mulig for venstre og høyre swipes å bla karusellen. Vi gjør dette ved å lage en rulleinteraksjon for å koble til Carousel Layer-gruppen (ikke de enkelte bildene). Samspillet utganger en X-koordinat som vi deretter kan koble til karusellens x-egenskap for å flytte den. I mellomtiden legger vi til en klemplaster, som kan brukes til å begrense verdier for å sikre at vi ikke ruller til koordinater utenfor kanten av karusellen.

11. Neste trinn

Now you've learned the basics you can add more advanced features — Nå har du lært det grunnleggende du kan legge til flere avanserte funksjoner

Det er det. Du har opprettet en veldig grunnleggende app. Du kan også bruke origami Studio's innebygde rammer for å plassere den på en enhetsbakgrunn, som kan bidra til å gi en profesjonell finish. Nå som du er kjent med grunnleggende om å bruke patcher, kan du begynne å skape mer avansert atferd. Det er mange guider på Origami Studio-nettstedet, som forklarer hvordan man implementerer populære funksjoner som ofte settes i apper.

Denne artikkelen ble opprinnelig publisert i utgave 270 av Creative Web Design Magazine webdesigner. Kjøp problem 270 her eller Abonner på webdesigner her .

Relaterte artikler:

Trender som vil forme appdesign i 2018
3 Topp måter å bygge en nettside prototype
Alt du trenger å vite om mockups, wireframes og prototyper

Hvordan prototype en mobilapp med origami Studio

01. En ny prototype

02. Legge til lag

03. Opprette en interaksjon

04. Kobling av interaksjoner til lag

05. Animasjoner

06. Overganger

07. Brytere

08. Mer kompleks oppførsel

09. karusell

10. Swiping til venstre og høyre

11. Neste trinn

hvordan - Mest populære artikler

14 Zbrush Workflow Tips

5 tips for super-rask CSS

Forstå CSS-visningseiendom

Lag en vektorforskyvning mesh børste

Lag fantastiske landskap i Houdini

Hvordan bygge raskere nettsteder

Lag en kinemagraph med Photoshop på 60 sekunder

Hvordan kombinere malerenes akvarellet setter

Kategorier