Hogyan prototípi egy mobilalkalmazást az origami stúdióval

Sep 16, 2025

kézikönyv

Olyan világban, ahol a felhasználóknak nagy elvárásai vannak az interneten és a mobilon, a prototípus és a felhasználói értékelés kulcsfontosságúak. Most már gyakori, hogy fokozatosan iterálja a prototípusokat egyre nagyobb hűséggel, és egy virágzó felhasználói tapasztalat Az iparág a kritikus tevékenységek köré nőtt. Végső soron a prototípuskészítési szakaszban a szoftver megszerzése időt és / vagy pénzt takarít meg később.

10 Legjobb prototípusú eszközök

Sok megközelítés van, amit a prototípushoz vezethet, és számos eszköz van, hogy segítsen. Az egyik legújabb a blokk Origami stúdió , A Facebook által kifejlesztett és a Macos számára ingyenes.

Origami Studio, amely ténylegesen megkezdte életét, mint egy plugin a Quartz Composer (vizuális programozási nyelv a MacOS a Xcode fejlesztői környezet) válása előtt egy önálló eszköz, szerzett egy nagy figyelmet az elmúlt évben.

Ez nem csak azért van, mert egy nagy névfejlesztő által épített, hanem a hatalom és az egyszerűség kombinációja miatt, amely a nagy hűség, interaktív prototípusok kialakulását eredményezi.

Kövesse az alábbi lépéseket annak felfedezéséhez, hogy mennyire könnyedén használhatja az Origami Studio-t egy prototípus létrehozásához.

01. Új prototípus

Start by creating a new iPhone 8 prototype — Indítsa el az új iPhone 8 prototípus létrehozásával

Egy prototípust hozunk létre egy mobilalkalmazáshoz, amely lehetővé teszi számunkra, hogy a macskák képei révén csúsztassanak minket, és "hasonlítanak" néhányat. Miután telepítettük az Origami Studio-t, új iPhone 8 prototípust hozunk létre a Splash képernyőn.

02. Rétegek hozzáadása

Elkezdhetünk néhány réteget hozzáadni a prototípusunkhoz. Ebben az esetben hozzáadunk egy logót, amely a képernyő tetején helyezkedik el. Hozzáadjuk a réteget a + gombbal a jobb felső sarokban, és kiválasztjuk a "Képréteget". Ezután átméretezhetjük és helyesen helyezhetjük el a réteg tulajdonságainak kiemelésével és módosításával. A márkánk után hozzáadunk egy szív képet a képernyő alján, hogy "hasonlók" gombként szolgáljon.

03. Interakció létrehozása

For interactions you'll need to create a patch — A kölcsönhatásokhoz egy javítást kell létrehoznia

A szívgombunkat a felhasználói interakciókra válaszolnunk kell. Megfigyeled, hogy az Előnézet ablakban a kurzor megváltozik, hogy érintse meg a mobileszközt. Ahhoz, hogy válaszoljon erre, létre kell hoznunk egy "javítást", amely lényegében az origami funkció, amely bemeneti és termel kimeneteket. Kattintson duplán az üres szürke területre, hogy hozza létre az új javítások listáját, és keressen "interakciót". Helyezze a tapaszt, és megjelenjen a képernyőn.

04. A rétegek kölcsönhatásainak összekapcsolása

Change the patch properties so that it only responds when you click in the right place — Módosítsa a javítás tulajdonságait, hogy csak akkor válaszoljon, amikor rákattint a megfelelő helyre

Jelenleg a javításod válaszol a prototípusra bárhová. Tesztelje ki a kattintással, és megjelenik a "Le" és a "Érintse meg a" Tap "tulajdonságokat valós időben. Ha a "réteg" tulajdonságot választja a javításban, akkor a szív képet tartalmazó réteghez kapcsolhatja, és most csak az adott területre kattint.

05. Animációk

A pop animation will give users a bit of visual feedback — A pop animáció egy kis vizuális visszajelzést ad a felhasználóknak

Most azt akarjuk, hogy valami történjen, ha az interakciónk kiváltása. Hozzon létre egy másik javítást, ezúttal egy "pop animáció". Ez egy rugós hatás létrehozására szolgál. Hagyja el a tulajdonságokat, mivel most már most, de linket hozunk létre a korábban létrehozott interakció csapata és az új pop animáció számbevitele között. Ezt a kis körök között kattintunk és húzzuk egymás mellett. Ha most rákattint a szívre, akkor az interakció megváltoztatja a pop animáció "előrehaladásának" kimenetét.

06. Átmenetek

You can change the extent to which objects change size when they're clicked — Megváltoztathatja azt a mértéket, amelyre az objektumok mérete megváltozik, amikor rákattintanak

A következő dolog, amire szükségünk van, átmeneti javítás. Ez lehetővé teszi számunkra, hogy meghatározzuk az alacsony és magas értékeket, hogy a pop animáció előrehaladási kimeneti változásai között mozogjanak. Ezután összekapcsolhatjuk az átmeneti kimeneti értékeket a szív képréteg skálájára, hogy elmondja az origami-nak, hogy átméretezze azt, amikor rákattint. Most meg kell találnia, hogy a szívre kattintva egy rövid méretű változást animál. Ez azonban nem igaza van, hiszen azonnal visszaáll a normálra.

07. Kapcsolók

Use switch patches to toggle objects between different states — Használja a kapcsolófoltokat a különböző állapotok közötti objektumok átkapcsolásához

A kapcsolófoltok origami módja a két állam közötti váltás. Ezt szeretnénk a "Like" gombunkra. A kapcsolófoltba átadott bemenet megfordíthatja a "ON" és az "OFF" állapotok között, amelyeket ezután a későbbi javítások kimenetének lehetnek. Hozzunk létre egy új kapcsolót, és helyezzük el az interakció és a pop animáció között. Ezután meg kell tudnia, hogy kattintson a szívre, hogy átkapcsolja a kis és a nagy államok között.

08. bonyolultabb viselkedés

By experimenting with patches you can add more complex behaviour to your prototype — A javításokkal való kísérletezéssel összetettebb viselkedést adhat a prototípusához

Gratulálunk! Most létrehozta az első interaktív funkciót, a leggyakoribb foltokat használva, amelyeket újra és újra használni fog. Több foltot adhatunk hozzá, hogy összetettebb viselkedést hozzon létre. Hozzunk létre egy másik színes szívréteget közvetlenül a jelenlegi mögött, majd adjunk hozzá új foltokat mindkettőn, mindkettő egyidejűleg, és módosítsuk az eredeti rétegünk opacitását, így láthatóvá válik. Most, amikor megérinti a szívét, nagyobb és kisebb lesz, de úgy tűnik, hogy megváltoztatja a színt.

09. körhinta

It's time to bring on all the cats — Itt az ideje, hogy minden macskát hozza

A prototípus befejezéséhez adjunk hozzá egy képarányt a macskákkal, amelyeket a felhasználók "tetszésnek" kívánunk. Ehhez először hozzá kell adnunk egy rétegcsoportot. Minden kép különálló réteg lesz, egyre egyre inkább az X koordinátákkal, hogy lényegében egymás méretű síkban üljenek egymáshoz, csak egy látható képernyőn láthatóak.

10. Balra és jobbra húzva

Follow these steps to add a classic swiping action to your carousel — Kövesse az alábbi lépéseket, hogy hozzáadjon egy klasszikus swiping műveletet a karusszel

Az utolsó dolog, amit meg kell tennünk ahhoz, hogy működjön, a bal és a jobb swipek lehetővé teszik a körhinta görgetéséhez. Ezt úgy végezzük, hogy görgetős interakciót hozunk létre a karusszel rétegcsoporthoz (nem az egyes képekhez). Az interakció egy X koordinátát eredményez, amelyet ezután összekapcsolhatunk a körhinta x tulajdonságához, hogy mozgassa. A közöttük, hozzáadunk egy klipplasztot, amely felhasználható az értékek korlátozására annak biztosítása érdekében, hogy ne görgetünk a karusszel szélén kívüli koordinátákhoz.

11. Következő lépések

Now you've learned the basics you can add more advanced features — Most már megtanultad az alapokat, amellyel nagyobb funkciókat adhat hozzá

Ez az. Létrehozott egy nagyon alapvető alkalmazást. Használhatja az Origami Studio beépített "kereteket" is, hogy egy eszköz háttérre helyezze, amely segíthet professzionális befejezést. Most, hogy ismeri a javítások használatának alapjait, elkezdheti létrehozni a fejlettebb viselkedést. Rengeteg útmutató van az Origami Studio weboldalán, amely megmagyarázza, hogyan kell alkalmazni az alkalmazásokban általánosan látható népszerű funkciókat.

Ez a cikk eredetileg megjelent a szóban forgó 270 kreatív web design magazin Web Designer. Itt vásároljon 270 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

Trendek, amelyek 2018-ban alakítják az alkalmazás tervezését
3 legjobb módja a weboldal prototípusának felépítéséhez
Mindössze annyit kell tudnod a mockupokról, a drótvázról és a prototípusokról

Hogyan prototípi egy mobilalkalmazást az origami stúdióval

01. Új prototípus

02. Rétegek hozzáadása

03. Interakció létrehozása

04. A rétegek kölcsönhatásainak összekapcsolása

05. Animációk

06. Átmenetek

07. Kapcsolók

08. bonyolultabb viselkedés

09. körhinta

10. Balra és jobbra húzva

11. Következő lépések

kézikönyv - Most Popular Articles

A textúrák használata a Photoshopban

Szint a VR Art

Készítsen kísérteties textúrákat vegyes média technikákkal

Festeni egy huncut nyúl az akvarellben

Rajzoljon öt perc alatt

Add hozzá vibráció az olajfestményeket ezekkel a felső tippekkel

Hogyan festeni Fantasy Beasts

Egyéni kefék létrehozása a Clip Studio festékben

Kategóriák