Hoe een mobiele app te prototeren met Origami Studio

Sep 14, 2025
Procedures

In een wereld waar gebruikers hoge verwachtingen hebben van hun ervaring op het web en mobiel, prototyping en evaluatie van de gebruiker de sleutelwoorden. Het is nu vaak voor het produceren van prototypen met steeds hoge fidelity, en een bloeiende gebruikerservaring De industrie is opgegroeid rond deze kritische reeks activiteiten. Uiteindelijk bespaart u latere software recht bij de prototypingfase u tijd en / of geld later.

  • 10 Top Prototyping Gereedschap

Er zijn veel benaderingen die u kunt nemen tot prototyping en tal van hulpmiddelen die er zijn om te helpen. Een van de nieuwste op het blok is Origami studio , ontwikkeld door Facebook en gratis beschikbaar voor MacOS.

Origami Studio, die eigenlijk zijn leven begon als een plug-in voor Quartz Composer (een visuele programmeertaal binnen de MacOS's Xcode Development Environment) voordat hij een standalone tool wordt, heeft het afgelopen jaar veel aandacht gekregen.

Dit komt niet alleen omdat het wordt gebouwd door een grote ontwikkelaar, maar ook vanwege de combinatie van macht en eenvoud brengt het om high-fidelity, interactieve prototypen te ontwikkelen.

Volg deze stappen om te ontdekken hoe gemakkelijk u kunt gebruiken Origami-studio om een ​​prototype te bouwen.

01. Een nieuw prototype

Start by creating a new iPhone 8 prototype

Begin met het maken van een nieuw iPhone 8-prototype

We gaan een prototype maken voor een mobiele app die ons in staat zal stellen om door foto's van katten te vegen en 'zoals' sommigen van hen. Zodra we Origami Studio hebben geïnstalleerd, maken we een nieuw iPhone 8-prototype van het Splash-scherm.

02. Lagen toevoegen

We kunnen meteen enkele lagen toevoegen aan ons prototype. In dit geval voegen we een logo toe dat aan de bovenkant van het scherm is geplaatst. We voegen de laag toe met behulp van de + -knop in de rechterbovenhoek en selecteren 'beeldlaag'. We kunnen het dan wijzigen en positioneren op de juiste manier door de eigenschappen van de laag te markeren en aan te passen. Na ons merk, voegen we ook een hartafbeelding aan de onderkant van het scherm toe om te dienen als onze 'like'-knop.

03. Een interactie creëren

For interactions you'll need to create a patch

Voor interacties moet je een patch maken

We moeten onze hartknop laten reageren op gebruikersinteracties. U zult merken dat in het voorbeeldvenster de cursorwijzigingen verandert om aanraking op een mobiel apparaat te vertegenwoordigen. Om hierop te reageren, moeten we een 'patch' maken, wat in wezen een functie is in origami die ingangen neemt en uitgangen produceert. Dubbelklik op het lege grijze gebied om een ​​lijst met nieuwe patches op te zetten en zoek naar 'interactie'. Plaats uw patch en het zou op het scherm moeten verschijnen.

04. Interacties aan lagen koppelen

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

Wijzig de patcheigenschappen zodat het alleen reageert wanneer u op de juiste plaats klikt

Op dit moment zal uw patch reageren op aanraking overal op het prototype. Test het door op te klikken en je ziet de eigenschappen 'Down' en 'Tap' in realtime veranderen. Als u de eigenschap 'laag' in de patch selecteert, kunt u het koppelen aan de laag die het hartbeeld bevat, en het reageert nu alleen op klikken op dat specifieke gebied.

05. Animaties

A pop animation will give users a bit of visual feedback

Een POP-animatie geeft gebruikers een beetje visuele feedback

Nu willen we iets gebeuren als onze interactie triggeert. Maak een andere patch, deze keer een 'POP-animatie'. Dit wordt gebruikt om een ​​veerachtig effect te creëren. Verlaat de eigenschappen zoals ze nu zijn, maar we maken een koppeling tussen de tikuitgang van de interactie die we eerder hebben gemaakt en de nummerinvoer van onze nieuwe POP-animatie. We doen dit door op elk te klikken en te slepen tussen de kleine cirkels naast elk. Als u nu op het hart klikt, ziet u nu de interactie activeert een wijziging in de output 'Progress' van de POP-animatie.

06. Overgangen

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

U kunt de mate wijzigen waaraan objecten de maat wijzigen wanneer ze worden geklikt

Het volgende dat we nodig hebben is een overgangspleister. Hierdoor kunnen we lage en hoge waarden opgeven om te bewegen tussen de voortgangsveranderingen van de POP-animatie. We kunnen vervolgens de uitgangswaarden van de overgang koppelen aan de schaalbezit van de hartafbeeldingslaag om origami te vertellen om het formaat te wijzigen wanneer het is geklikt. Je zou nu moeten merken dat het klikken op het hart ervoor zorgt dat het een korte verandering in grootte kan maken. Het is echter niet helemaal gelijk, omdat het meteen weer normaal is.

07. Schakelaars

Use switch patches to toggle objects between different states

Gebruik schakelaarpatches om objecten tussen verschillende staten te schakelen

Switch-patches zijn de manier van origami om tussen twee staten te schakelen. Dit is wat we willen voor onze 'like'-knop. Een ingang die is doorgegeven aan een schakelkap kan het draaien tussen 'aan' en 'uit' staten, die vervolgens kunnen worden doorgegeven als een uitvoer naar volgende patches. Laten we een nieuwe schakelaar maken en plaatsen tussen de interactie en de POP-animatie. Je moet dan op het hart klikken om het tussen kleine en grote staten te schakelen.

08. Complex gedrag

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

Door te experimenteren met patches, kunt u meer complex gedrag aan uw prototype toevoegen

Gefeliciteerd! U hebt nu uw eerste interactieve functie gemaakt, met behulp van de meest voorkomende patches die u zult vinden die u opnieuw gebruikt. We kunnen meer patches toevoegen om complexer gedrag te creëren. Laten we een andere gekleurde hartlaag rechtstreeks achter onze huidige lijn maken, voeg dan nieuwe patches toe, beide om het tegelijkertijd te schalen en de dekking van onze originele laag te wijzigen, zodat het zichtbaar is gemaakt. Nu, wanneer u op het hart tikt, schakelt het groter en kleiner, maar lijkt ook van kleur te veranderen.

09. Carrousel

It's time to bring on all the cats

Het is tijd om alle katten aan te brengen

Om ons prototype te voltooien, laten we een beeldcarrousel toevoegen met de katten die we willen laten toestaan ​​dat gebruikers 'leuk' zijn. Om dit te doen, moeten we eerst een groep lagen toevoegen. Elk beeld is een afzonderlijke laag, met steeds meer offset x coördineert, zodat ze in wezen zij-bij-maat op een rij zitten met slechts één zichtbaar op het scherm bij een item.

10. Linker naar links en rechts

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

Volg deze stappen om een ​​klassieke vegende actie toe te voegen aan je carrousel

Het laatste dat we moeten doen om het te laten werken, is links en rechts swipes in om de carrousel te scrollen. We doen dit door een scrollinteractie te maken om te linken naar de carrousellaaggroep (niet de afzonderlijke afbeeldingen). De interactie geeft een X-coördinaat uit die we vervolgens kunnen koppelen aan de X-eigenschap van de carrousel om het te verplaatsen. In -tussen zullen we een clippatch toevoegen, die kan worden gebruikt om waarden te beperken om ervoor te zorgen dat we niet scrollen naar coördinaten buiten de rand van de carrousel.

11. Volgende stappen

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

Nu heb je de basis geleerd, je kunt meer geavanceerde functies toevoegen

Dat is het. U hebt een zeer eenvoudige app gemaakt. U kunt ook gebruikmaken van Origami Studio's ingebouwde 'Frames' om het op een apparaatachtergrond te plaatsen, wat kan helpen een professionele afwerking te geven. Nu u bekend bent met de basisprincipes van het gebruik van patches, kunt u beginnen met het creëren van meer geavanceerde gedragingen. Er zijn veel gidsen op de Origami Studio-website, die uitleggen hoe ze populaire functionaliteiten implementeren die gewoonlijk in apps worden gezien.

Dit artikel is oorspronkelijk gepubliceerd in uitgifte 270 van Creative Web Design Magazine Web Designer. Koop hier nummer 270 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

  • Trends die app-ontwerp in 2018 vormen
  • 3 topmanieken om een ​​website-prototype te bouwen
  • Alles wat u moet weten over mockups, wireframes en prototypes

Procedures - Meest populaire artikelen

GRATIS GRATIS EN SNELLE GEBRUIKERSESTEKEN MET UERSLOOK

Procedures Sep 14, 2025

Afbeelding: Getty Images Aannames zijn slecht voor het bedrijfsleven. Ze zijn slecht omdat we, van nature, op de hoog..

Hoe licht- of donkere modi te implementeren in CSS

Procedures Sep 14, 2025

De CSS-specificatie is steeds evoluerend. Het proces voor het implementeren van nieuwe functies in CSS is ingewikkeld, maar de ve..

Het maken van glitch tekst en beeldeffecten in CSS

Procedures Sep 14, 2025

In deze tutorial laten we u zien hoe u een glitch-tekst-effect kunt maken. Speciale effecten en animaties kunnen help websites opvallen, waardoor een onmiddellijke impact op de gebruiker onts..

Converteer Flash Games naar HTML5

Procedures Sep 14, 2025

Flash wordt langzaam verlaten door Adobe ten gunste van HTML5 en JavaScript; Het officiële einde van de levensduur is ingesteld ..

Hoe isometrische typografie ontwerpen

Procedures Sep 14, 2025

Perspectief is alles in ontwerp. Als iets dat je hebt getekend een perfect perspectief heeft, zal het je werk helpen realistische..

Een realistische CG-doek maken

Procedures Sep 14, 2025

Bij het werken met doek en stoffen in 3D, kan het moeilijk zijn om zowel goede resolutie als een geweldige uitstraling te bereike..

Modellering Complex Geometrie: 5 Toptips

Procedures Sep 14, 2025

Gedurende mijn jarenlange ervaring, werkend in Video Game Studio-instellingen en lesgeven 3d kunst Naar hongerige ..

Maak game-ready texturen met behulp van substantie schilder

Procedures Sep 14, 2025

Het afgelopen jaar is een game-wisselaar voor de videogamesindustrie en voor Amerikaanse kunstenaars geluk hebben genoeg om de ko..

Categorieën