Come prototipare un'app mobile con origami studio

Sep 12, 2025
Come si fa

In un mondo in cui gli utenti hanno grandi aspettative della loro esperienza sul web e sul cellulare, la prototipazione e la valutazione dell'utente è la chiave. È ora comunale progressivamente iterare sui prototipi con una fedeltà sempre più alta, e un fiorente esperienza utente L'industria è cresciuta attorno a questo insieme critico di attività. In definitiva, ottenere il software giusto alla fase di prototipazione risparmia tempo e / o denaro più tardi.

  • 10 strumenti di prototipazione superiore

Ci sono molti approcci che puoi intraprendere sulla prototipazione e numerosi strumenti là fuori per aiutare. Uno dei più recenti sul blocco è Studio di origami , sviluppato da Facebook e disponibile gratuitamente per MacOS.

Origami Studio, che ha effettivamente avviato la vita come plugin per il compositore al quarzo (un linguaggio di programmazione visivo all'interno dell'ambiente di sviluppo Xcode di Macos) Prima di diventare uno strumento autonomo, ha ottenuto una grande attenzione nell'ultimo anno.

Questo non è solo perché è costruito da uno sviluppatore di un grande nome, ma anche a causa della combinazione di potenza e semplicità porta allo sviluppo di alta fedeltà, prototipi interattivi.

Segui questi passaggi per scoprire quanto è facile utilizzare Origami Studio per costruire un prototipo.

01. Un nuovo prototipo

Start by creating a new iPhone 8 prototype

Inizia creando un nuovo prototipo di iPhone 8

Creeremo un prototipo per un'app mobile che ci consentirà di scorrere le immagini dei gatti e "come" alcuni di loro. Una volta installato Origami Studio, creeremo un nuovo prototipo di iPhone 8 dalla schermata Splash.

02. Aggiunta di strati

Possiamo iniziare ad aggiungere alcuni livelli al nostro prototipo subito. In questo caso, aggiungeremo un logo posizionato nella parte superiore dello schermo. Aggiungiamo il livello utilizzando il pulsante + in alto a destra e selezionando 'Image Layer'. Possiamo quindi ridimensionare e posizionarlo in modo appropriato evidenziando e modificando le proprietà del livello. Dopo il nostro marchio, aggiungeremo anche un'immagine cardiaca nella parte inferiore dello schermo per servire come il nostro pulsante "simile".

03. Creare un'interazione

For interactions you'll need to create a patch

Per le interazioni dovrai creare una patch

Dobbiamo rendere il nostro pulsante cardiaco rispondere alle interazioni dell'utente. Noterai che nella finestra di anteprima, il cursore cambia per rappresentare il tocco su un dispositivo mobile. Per rispondere a questo, dobbiamo creare una "patch", che è essenzialmente una funzione in origami che prende input e produce output. Fare doppio clic sull'area grigia vuota per visualizzare un elenco di nuove patch e cercare "interazione". Metti la tua patch e dovrebbe apparire sullo schermo.

04. Collegamento interazioni agli strati

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

Cambia le proprietà patch in modo che risponda solo quando fai clic nel posto giusto

Al momento, la tua patch risponderà al tocco ovunque sul prototipo. Provalo facendo clic su e vedrai le proprietà "Down" e "Tocca" cambiano in tempo reale. Se si seleziona la proprietà 'Layer' nella patch, è possibile collegarlo al livello contenente l'immagine del cuore e ora risponderà solo ai clic su quell'area specifica.

05. Animazioni

A pop animation will give users a bit of visual feedback

Un'animazione POP darà agli utenti un po 'di feedback visivo

Ora vogliamo avere qualcosa quando la nostra interazione si innesca. Crea un'altra patch, questa volta un'animazione pop ". Questo è usato per creare un effetto a molla. Lasciare le proprietà come per ora, ma creeremo un collegamento tra l'output del rubinetto dell'interazione che abbiamo creato in precedenza e l'immissione del numero della nostra nuova animazione POP. Facciamo questo facendo clic e trascinando tra i piccoli cerchi accanto a ciascuno. Se fai clic sul cuore ora, ora vedrai l'interazione attiva un cambiamento nell'output "progresso" dell'animazione POP.

06. Transizioni

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

È possibile modificare la misura in cui oggetti cambiano le dimensioni quando vengono cliccarono

La prossima cosa di cui abbiamo bisogno è una patch di transizione. Ciò consentirà di specificare valori bassi e alti per spostarsi in quanto le modifiche all'output di avanzamento dell'animazione POP. Possiamo quindi collegare i valori di output della transizione alla proprietà della scala del layer Image Image per dire a Origami di ridimensionarlo quando è cliccato. Dovresti ora scoprire che cliccando sul cuore lo provoca per animare un breve cambiamento di dimensioni. Non è abbastanza giusto, tuttavia, dal momento che si è ribalta di nuovo alla normalità.

07. Interruttori

Use switch patches to toggle objects between different states

Utilizzare le patch dell'interruttore per attivare gli oggetti tra diversi stati

Switch Patch sono il modo di origami di attivarsi tra due stati. Questo è ciò che vogliamo per il nostro pulsante "simile". Un ingresso passò a una patch dell'interruttore può lanciarlo tra gli stati "on" e "off", che possono quindi essere passati come un'uscita alle patch successive. Creiamo un nuovo interruttore e posizioniamolo tra l'interazione e l'animazione POP. Dovresti quindi essere in grado di fare clic sul cuore per attivarlo tra piccoli e grandi stati.

08. Comportamento più complesso

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

Sperimentando con le patch puoi aggiungere un comportamento più complesso al tuo prototipo

Congratulazioni! Ora hai creato la tua prima caratteristica interattiva, usando le patch più comuni che ti troverai di nuovo utilizzo di tempo e di tempo. Possiamo aggiungere più patch per creare un comportamento più complesso. Creiamo uno strato cardiaco colorato diverso direttamente dietro il nostro attuale, quindi aggiungi nuove patch sia di scalarlo simultaneamente e modificare l'opacità del nostro livello originale, quindi è reso visibile. Ora, quando tocchi il cuore, alternano sempre più grande e più piccolo, ma sembra anche cambiare colore.

09. Carosello

It's time to bring on all the cats

È ora di portare tutti i gatti

Per finire il nostro prototipo, aggiungiamo un'immagine carosello con i gatti che vogliamo consentire agli utenti di "piacere". Per fare questo, prima abbiamo bisogno di aggiungere un gruppo di strati. Ogni immagine sarà un livello separato, con le coordinate X sempre più compensabili in modo che siano essenzialmente siediti di dimensioni secondarie in una riga con solo una visibile sullo schermo in qualsiasi elemento.

10. Swiping a sinistra ea destra

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

Segui questi passaggi per aggiungere un classico azione swiping al carosello

L'ultima cosa che dobbiamo fare per farlo funzionare è abilitare gli swips sinistra e destra per scorrere la carosello. Lo facciamo creando un'interazione di scorrimento per il collegamento al Gruppo Carousel Layer (non alle singole immagini). L'interazione produce una coordinata X che possiamo quindi collegare alla proprietà X del carosello per spostarlo. Nel mezzo, aggiungeremo una clip patch, che può essere utilizzata per limitare i valori per assicurarci che non scorreremo verso coordinati al di fuori del bordo del carosello.

11. Punti successivi

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

Ora hai imparato le basi che puoi aggiungere funzionalità più avanzate

Questo è tutto. Hai creato un'app molto semplice. Puoi anche utilizzare gli "cornici" incorporati da Origami Studio per posizionarlo su uno sfondo di dispositivi, che può aiutare a dare una finitura professionale. Ora che hai familiarità con le basi di utilizzo delle patch, puoi iniziare a creare comportamenti più avanzati. Ci sono un sacco di guide sul sito Web di origami studio, che spiega come implementare funzionalità popolari comunemente osservate nelle app.

Questo articolo è stato originariamente pubblicato in emissione 270 di Web Designer di Web Design Web Design. Comprare il problema 270 qui o Iscriviti al web designer qui .

Articoli Correlati:

  • Le tendenze che modelleranno la progettazione dell'app nel 2018
  • 3 modi migliori per costruire un prototipo di un sito web
  • Tutto quello che devi sapere su mockup, wireframe e prototipi

Come si fa - Articoli più popolari

Crea trame con lo strumento di timbro del modello

Come si fa Sep 12, 2025

(Immagine di credito: Lino Dieghe) Se sei bloccato fissando una tela vuota, o di fronte a un breve che ha un sacco di..

Fai funzionare la tua app offline con i lavoratori del servizio

Come si fa Sep 12, 2025

Pagina 1 di 2: Pagina 1: caricamento più veloce Pagina 1: caricamento pi..

Come dipingere come un master del XIX secolo

Come si fa Sep 12, 2025

Il 19 ° secolo è stato un periodo meraviglioso per l'arte. Gli artisti sono stati tenuti in alto riguardo e il pubblico è stat..

Prototipi perfetti e disegni di distribuzione con Marvel

Come si fa Sep 12, 2025

Con una curva di apprendimento più breve dell'App di InVision e dei nuovi strumenti di handoff di progettazione per le squadre a..

Come influenzare le classifiche di Google con il tuo contenuto

Come si fa Sep 12, 2025

Il tuo contenuto non sta andando da nessuna parte a meno che le persone non possano cercarlo e trovarlo, quindi i contenuti dovre..

Come progettare la copertina del libro perfetto

Come si fa Sep 12, 2025

Auto-publishing rappresenta il 22 per cento del mercato ebook del Regno Unito e continua a crescere, il che significa che gli aut..

Migliora i tuoi pennelli in oli

Come si fa Sep 12, 2025

Le vernici ad olio offrono il mezzo ideale per ottenere pennellate forti e interessanti. Lo stile dei pennellati di un artista è ciò che definisce il loro lavoro e dà la personalità. Gioc..

5 modi per gestire il flusso di cassa in modo efficace

Come si fa Sep 12, 2025

Il controllo del flusso di cassa è fondamentale per il successo freelance, e ci sono alcune regole difficili e veloci per assicu..

Categorie