Cum să prototipe o aplicație mobilă cu studio de origami

Jan 28, 2026
să

Într-o lume în care utilizatorii au așteptări mari despre experiența lor pe web și pe mobil, prototiparea și evaluarea utilizatorilor este esențială. Este acum comun să se repete progresiv pe prototipuri cu fidelitate din ce în ce mai mare și o înflorire experiența utilizatorului Industria a crescut în jurul acestui set critic de activități. În cele din urmă, obținerea de software chiar la etapa de prototipare vă economisește timp și / sau bani mai târziu.

  • 10 Instrumente de prototipuri de top

Există multe abordări pe care le puteți lua la prototipuri și numeroase instrumente de acolo pentru a ajuta. Unul dintre cele mai noi pe bloc este Origami Studio. , dezvoltat de Facebook și disponibil gratuit pentru MacOS.

Origami Studio, care și-a început viața ca plugin pentru compozitorul de cuarț (un limbaj de programare vizuală în mediul de dezvoltare XCOD XCOD) înainte de a deveni un instrument independent, a câștigat o mare atenție în ultimul an.

Acest lucru nu este numai pentru că este construit de un dezvoltator cu numele mare, dar, de asemenea, din cauza combinației de putere și simplitate pe care o aduce la dezvoltarea prototipurilor interactive de înaltă fidelitate.

Urmați acești pași pentru a descoperi cât de ușor puteți utiliza studioul Origami pentru a construi un prototip.

01. Un nou prototip

Start by creating a new iPhone 8 prototype

Începeți prin crearea unui nou prototip iPhone 8

Vom crea un prototip pentru o aplicație mobilă care ne va permite să vărsăm imagini de pisici și "ca" unele dintre ele. Odată ce am instalat studioul Origami, vom crea un nou prototip iPhone 8 de pe ecranul de stropire.

02. Adăugarea straturilor

Putem începe să adăugăm niște straturi la prototipul nostru imediat. În acest caz, vom adăuga un logo poziționat în partea de sus a ecranului. Adăugați stratul utilizând butonul + în partea dreaptă sus și selectarea "stratului de imagine". Apoi, putem redimensiona și poziționați-l în mod corespunzător prin evidențierea și modificarea proprietăților stratului. După marca noastră, vom adăuga, de asemenea, o imagine de inimă în partea de jos a ecranului pentru a servi drept butonul nostru "cum ar fi".

03. Crearea unei interacțiuni

For interactions you'll need to create a patch

Pentru interacțiuni, va trebui să creați un patch

Trebuie să facem butonul inimii să răspundă interacțiunilor utilizatorilor. Veți observa că în fereastra de previzualizare, cursorul se modifică pentru a reprezenta atingerea pe un dispozitiv mobil. Pentru a răspunde la aceasta, trebuie să creăm un "patch", care este în esență o funcție în origami care ia inputuri și produce rezultate. Faceți dublu clic pe zona gri gri pentru a aduce o listă de patch-uri noi și pentru a căuta "interacțiune". Plasați patch-ul și ar trebui să apară pe ecran.

04. Legarea interacțiunilor la straturi

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

Schimbați proprietățile patch-urilor astfel încât să răspundă numai atunci când faceți clic pe locul potrivit

În prezent, plasturele dvs. va răspunde la atingere oriunde pe prototip. Testați-l făcând clic pe și veți vedea proprietățile "Down" și "Apăsați" Schimbarea în timp real. Dacă selectați proprietatea "stratului" în patch, îl puteți conecta la stratul care conține imaginea inimii și va răspunde acum numai la clicurile din acea zonă specifică.

05. Animații

A pop animation will give users a bit of visual feedback

O animație pop va oferi utilizatorilor un feedback vizual

Acum vrem să avem ceva atunci când interacțiunea noastră declanșează. Creați un alt patch, de data aceasta o "animație pop". Acest lucru este folosit pentru a crea un efect de relasiv. Lăsați proprietățile așa cum sunt pentru moment, dar vom crea o legătură între ieșirea de la robinet a interacțiunii pe care am creat-o anterior și numărul de numere a noii noastre animații pop. Facem acest lucru făcând clic și tragând între cercurile mici de lângă fiecare. Dacă faceți clic pe inimă acum, veți vedea acum interacțiunea declanșează o schimbare în ieșirea "progresului" a animației pop.

06. tranziții

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

Puteți schimba măsura în care obiectele se schimbă dimensiunea când sunt făcute

Următorul lucru de care avem nevoie este un plasture de tranziție. Acest lucru ne va permite să specificăm valori scăzute și mari pentru a se deplasa între modificările producției de progres ale progresului pop-animației. Apoi, putem lega valorile de ieșire ale tranziției la proprietatea de scară a stratului de imagine a inimii pentru a le spune origami pentru ao redimensiona atunci când este clic. Acum ar trebui să găsiți că faceți clic pe inimă determină animarea unei scurte schimbări în dimensiune. Nu este corect, deoarece se întoarce imediat la normal.

07. Comutatoare

Use switch patches to toggle objects between different states

Utilizați patch-uri de comutare pentru a comuta obiecte între diferite stări

Plăcile de comutare sunt modalitatea de a trece între două state. Aceasta este ceea ce vrem pentru butonul nostru "ca" nostru. O intrare trecută la un plasture de comutare poate să o răstoarne între stările "pe" și "off", ceea ce poate fi trecut ca o ieșire la patch-urile ulterioare. Să creăm un nou comutator și să îl plasați între interacțiune și animația pop. Ar trebui să puteți face să faceți clic pe inimă pentru ao comuta între stările mici și mari.

08. Comportament mai complex

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

Experimentarea cu patch-uri puteți adăuga un comportament mai complex la prototipul dvs.

Felicitări! Ați creat acum prima dvs. caracteristică interactivă, folosind cele mai frecvente patch-uri pe care le veți găsi din nou să utilizați timp și timp. Putem adăuga mai multe patch-uri pentru a crea un comportament mai complex. Să creăm un strat de inimă colorat direct în spatele celui actual, apoi să adăugăm noi patch-uri atât pentru a le scala simultan și modifică opacitatea stratului nostru original, așa că este vizibil. Acum, când atingeți inima, va comuta mai mare și mai mică, dar par a fi, de asemenea, să schimbe culoarea.

09. Carusel.

It's time to bring on all the cats

Este timpul să aducem pe toate pisicile

Pentru a termina prototipul nostru, să adăugăm un carusel de imagine cu pisicile pe care vrem să le permitem utilizatorilor să "placă". Pentru a face acest lucru, trebuie mai întâi să adăugăm un grup de straturi. Fiecare imagine va fi un strat separat, cu coordonatele X din ce în ce mai mult, astfel încât acestea să stea în mod esențial de dimensiuni laterale într-un rând, cu doar unul vizibil pe ecran la un singur element.

10. Swiping stânga și dreapta

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

Urmați acești pași pentru a adăuga o acțiune clasică de schimbare a caruselului dvs.

Ultimul lucru pe care trebuie să-l facem pentru a face să funcționeze este să permiteți glisare stânga și dreapta pentru a derula caruselul. Facem acest lucru prin crearea unei interacțiuni de defilare pentru a vă conecta la grupul de carusel (nu imaginile individuale). Interacțiunea rezultă că o coordonată X pe care o putem lega apoi la proprietatea X a caruselului pentru ao muta. Interior, vom adăuga un patch clip, care poate fi folosit pentru a limita valorile pentru a vă asigura că nu vom derula la coordonatele din afara marginii caruselului.

11. Următorii pași

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

Acum ați învățat elementele de bază pe care le puteți adăuga mai multe funcții avansate

Asta este. Ați creat o aplicație foarte de bază. De asemenea, puteți utiliza "Rames" de la Origami Studio pentru ao plasa pe un fundal al dispozitivului, care vă poate ajuta să oferiți un finisaj profesionist. Acum că sunteți familiarizați cu elementele de bază ale patch-urilor, puteți începe să creați comportamente mai avansate. Există o mulțime de ghiduri pe site-ul Origami Studio, care explică modul de implementare a funcționalităților populare utilizate în mod obișnuit în aplicații.

Acest articol a fost publicat inițial în numărul 270 al revistei Creative Web Design Designer Web. Cumpărați problema 270 aici sau Aboneaza-te la designerul web aici .

Articole similare:

  • Tendințe care vor forma aplicații în 2018
  • 3 moduri de top pentru a construi un prototip al site-ului web
  • Tot ce trebuie să știți despre Mockups, Wireframes și Prototipuri

să - Cele mai populare articole

Înțelegerea procesării limbii naturale

să Jan 28, 2026

Site-urile web și aplicații pot avea diferite părți în mișcare, inclusiv creativul frontal, procesarea serverului, API-uri ..

Rotiți Ilustrații 2D în Art 3D

să Jan 28, 2026

Călătoria mea în a face 3D Art. a început cu câțiva ani în urmă, când fratele meu mi-a spus să încerc ..

19 sfaturi pentru marile poseri

să Jan 28, 2026

Pagina 1 din 2: Pagina 1 Pagina 1 Pagina..

Cum se proiectează tipografia izometrică

să Jan 28, 2026

Perspectiva este totul în design. Dacă ceva pe care l-ați desenat are o perspectivă perfectă, vă va ajuta munca să pară m..

Creați peisaje uimitoare în Houdini

să Jan 28, 2026

Folosind o abordare procedurală bazată pe noduri, software-ul 3D Houdini de la Sidefx oferă artiștilor digitali cu un nivel r..

Cum se creează o lampă de lavă cu keyshot

să Jan 28, 2026

Există ceva ciudat satisfăcător despre lămpile de lavă. O lumină liniștitoare, plină de culoare și izerizând bloburi ce..

Cum se utilizează instrumente digitale pentru a crea un aspect trasat manual

să Jan 28, 2026

Editarea și ilustrarea digitalului are o mulțime de sens, în special pentru proiectele de ilustrare comercială. Anul trecut, ..

Cum se face 3D litere în Illustrator

să Jan 28, 2026

Săptămâna trecută, Adobe a lansat mai multe videoclipuri în cele mai utile să fie acum playlist, oferind creatorilor șansa de a ridica o serie de abilități practice în doar 60 de se..

Categorii