Sådan prototype En mobil app med Origami Studio

Sep 11, 2025
hvordan

I en verden, hvor brugerne har høje forventninger til deres erfaring på web- og mobilen, er prototyping og brugerevaluering nøglen. Det er nu almindeligt at progressivt iterere på prototyper med stadig mere høj troskab og en blomstrende brugererfaring Industrien er vokset op omkring dette kritiske sæt aktiviteter. I sidste ende sparer software lige ved prototypestadiet dig tid og / eller penge senere.

  • 10 TOP PROTOTYPING TOOLS

Der er mange tilgange, du kan tage til prototyper, og mange værktøjer derude for at hjælpe. En af de nyeste på blokken er Origami Studio , udviklet af Facebook og tilgængelig gratis til MacOS.

Origami Studio, som faktisk startede sit liv som et plugin til Quartz Composer (et visuelt programmeringssprog inden for Macos's XCode-udviklingsmiljø), før de blev et selvstændigt værktøj, har fået en stor opmærksomhed i løbet af det sidste år.

Dette er ikke kun fordi det er bygget af en stornavn udvikler, men også på grund af kombinationen af ​​magt og enkelhed, det bringer til udvikling af højfidelighed, interaktive prototyper.

Følg disse trin for at opdage, hvor nemt kan du bruge Origami Studio til at opbygge en prototype.

01. En ny prototype

Start by creating a new iPhone 8 prototype

Start med at oprette en ny iPhone 8 prototype

Vi skal oprette en prototype til en mobilapp, som vil give os mulighed for at skubbe gennem billeder af katte og 'som' nogle af dem. Når vi har installeret Origami Studio, opretter vi en ny iPhone 8 prototype fra splash-skærmen.

02. Tilføjelse af lag.

Vi kan begynde at tilføje nogle lag til vores prototype straks. I dette tilfælde tilføjer vi et logo placeret øverst på skærmen. Vi tilføjer laget ved hjælp af + knappen øverst til højre og vælg 'Image Layer'. Vi kan derefter ændre størrelsen og placere det hensigtsmæssigt ved at fremhæve og ændre lagets egenskaber. Efter vores mærke vil vi også tilføje et hjertebillede nederst på skærmen for at tjene som vores 'Like' -knap.

03. Oprettelse af en interaktion

For interactions you'll need to create a patch

For interaktioner skal du oprette en patch

Vi skal gøre vores hjerte-knap reagere på brugerinteraktioner. Du vil bemærke, at i preview-vinduet ændres markøren til at repræsentere berøring på en mobilenhed. For at reagere på dette skal vi oprette en 'patch', som i det væsentlige er en funktion i origami, der tager input og producerer udgange. Dobbeltklik på det tomme grå område for at få en liste over nye patches, og søg efter 'interaktion'. Placer din patch, og det skal vises på skærmen.

04. Sammenkædning af interaktioner til lag

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

Skift patchegenskaber, så det kun reagerer, når du klikker på det rigtige sted

I øjeblikket vil din patch reagere på at trykke hvor som helst på prototypen. Test det ud ved at klikke, og du vil se 'Down' og 'Tap' Egenskaber, der skifter i realtid. Hvis du vælger 'Layer' -ejendommen i plaster, kan du linke det til laget, der indeholder hjertebilledet, og det vil nu kun svare på klik på det pågældende område.

05. Animationer.

A pop animation will give users a bit of visual feedback

En pop animation vil give brugerne en smule visuel feedback

Nu vil vi gerne have noget, der sker, når vores interaktion udløser. Opret en anden patch, denne gang en 'pop animation'. Dette bruges til at skabe en fjedrende virkning. Forlad egenskaberne, som de er for nu, men vi opretter et link mellem tapens udgang af den interaktion, vi har oprettet tidligere og nummeret på vores nye pop animation. Vi gør dette ved at klikke og trække mellem de små cirkler ved siden af ​​hver. Hvis du klikker på hjertet nu, vil du nu se, at interaktionen udløser en ændring i popimationens 'fremskridt'.

06. Overgange.

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

Du kan ændre, i hvilket omfang objekter ændrer størrelse, når de er klikket

Den næste ting, vi har brug for, er en overgangs patch. Dette vil give os mulighed for at angive lave og høje værdier for at flytte mellem, da POP-animationens fremskridtsudgang ændres. Vi kan derefter forbinde overgangens outputværdier til skærmens skalaegenskab for at fortælle origami for at ændre størrelsen på det, når det klikkes. Du skal nu finde ud af at klikke på hjertet, der får det til at animere en kort ændring i størrelse. Det er dog ikke helt rigtigt, da det springer tilbage til normal med det samme.

07. Switches.

Use switch patches to toggle objects between different states

Brug switch patches til at skifte objekter mellem forskellige tilstande

Switch patches er origami's måde at skifte mellem to stater. Dette er, hvad vi vil have for vores 'Like' knappen. En indgang, der passeres til en switch patch, kan vende den mellem 'på' og 'off', som derefter kan bestås som en udgang til efterfølgende patches. Lad os oprette en ny switch og placere den mellem interaktionen og pop animationen. Du skal så kunne klikke på hjertet for at skifte det mellem små og store stater.

08. Mere kompleks adfærd

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

Ved at eksperimentere med patches kan du tilføje mere kompleks adfærd til din prototype

Tillykke! Du har nu lavet din første interaktive funktion ved hjælp af de mest almindelige patches, som du finder, at du bruger tid og tid igen. Vi kan tilføje flere patches for at skabe mere kompleks adfærd. Lad os oprette et andet farvet hjerte lag direkte bag vores nuværende, og tilføj derefter nye patches både for at skalere det samtidigt og ændre opaciteten af ​​vores oprindelige lag, så det er synligt. Nu, når du trykker på hjertet, vil det skifte større og mindre, men synes også at ændre farve.

09. Carousel.

It's time to bring on all the cats

Det er på tide at bringe på alle katte

For at afslutte vores prototype, lad os tilføje en billedkarrussel med de katte, vi ønsker at tillade brugere at 'lide'. For at gøre dette skal vi først tilføje en gruppe lag. Hvert billede vil være et separat lag, med i stigende grad offset x koordinater, så de i det væsentlige sidder side om størrelse i en række med kun en synlig på skærmen på et hvilket som helst element.

10. Swiping venstre og højre

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

Følg disse trin for at tilføje en klassisk swiping handling til din karrusel

Det sidste, vi skal gøre for at få det til at fungere, er at aktivere venstre og højre swipes for at rulle karrusellen. Vi gør dette ved at oprette en rulleinteraktion for at linke til Carousel Layer Group (ikke de enkelte billeder). Interaktionen udsender en X-koordinat, som vi kan forbinde til karrusellens X-ejendom for at flytte den. Mellem, vi tilføjer et klipplaster, som kan bruges til at begrænse værdier for at sikre, at vi ikke ruller til koordinater uden for karrusellen.

11. Næste trin

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

Nu har du lært det grundlæggende, du kan tilføje mere avancerede funktioner

Det er det. Du har oprettet en meget grundlæggende app. Du kan også bruge Origami Studio er indbyggede i 'rammer' for at placere den på en enheds baggrund, som kan hjælpe med at give en professionel finish. Nu hvor du er bekendt med det grundlæggende ved at bruge patches, kan du begynde at skabe mere avancerede adfærd. Der er masser af guider på Origami Studio-webstedet, som forklarer, hvordan man implementerer populære funktioner, der almindeligvis ses i apps.

Denne artikel blev oprindeligt offentliggjort i udstedelse 270 af Creative Web Design Magazine Web Designer. Køb problem 270 her eller Abonner på Web Designer her .

Relaterede artikler:

  • Trends, der vil forme app design i 2018
  • 3 Top måder at opbygge en hjemmeside prototype
  • Alt du behøver at vide om mockups, wireframes og prototyper

hvordan - Mest populære artikler

Sådan tegner du perspektiv

hvordan Sep 11, 2025

At lære at tegne perspektivet korrekt kunne ændre hele din tegningsproces. Uanset om det traditionelt trækkes med blyant og papir eller digitalt ved hjælp af en grafiktablet, konstruerer ..

Opret en WebGL 3D destinationsside

hvordan Sep 11, 2025

(Billedkredit: fremtiden) Oprettelse af en WebGL 3D destinationsside er en måde at gøre et godt første indtryk med..

Forstå naturlig sprogbehandling

hvordan Sep 11, 2025

Websites og apps kan have forskellige bevægelige dele, herunder frontende kreative, server-side behandling, API'er og datalagrin..

Sådan skete hurtigt hænder

hvordan Sep 11, 2025

For at tegne hænderne skal du se forbi kompleksiteten af ​​håndens anatomi og genkende enkle regler, der vil hjælpe dig me..

Opret specielle udskrivninger i InDesign

hvordan Sep 11, 2025

Side 1 af 4: Folie blokering Folie blokering ..

Speed ​​sculpt en væsen i zbrush

hvordan Sep 11, 2025

Når konceptende væsner i Zbrush, der præsenterer din ide som en gråtykte, ensartet stykke af 3D Art. kan gøre..

Opret bedre tegn animationer i Maya

hvordan Sep 11, 2025

Ant Ward vil være en af ​​vores kunstnere, der besvarer dine specifikke spørgsmål på Vertex ..

Sådan blandes en gouache palette

hvordan Sep 11, 2025

Gouache er mere tilgivende end akvarelmaling, men beslutninger, du får tidligt, kan stadig påvirke resten af maleri ..

Kategorier