Prototípus egy lebegő művelet gomb a Pixate

Sep 16, 2025

kézikönyv

A Pixate lehetővé teszi, hogy gyorsan megvédje az interaktív mobil mockupokat, amelyek megtekinthetők az Android és az iOS eszközökön. Ebben a bemutatóban használjuk, hogy egy úszó akciógombot (FAB) építsünk, beleértve az al-opciókat is. Különböző technikákat és beállításokat vizsgálunk a Pixate-ban, például az átmenetekben és a feltételekben.

A FAB-k a cselekvés előmozdítására szolgálnak, és vonzzák a felhasználó figyelmét. Általában egy alkalmazás fő funkciói a Fab-on keresztül érhetők el. A Fab egy anyagi design stílusban lesz, amely gyönyörű, természetes érzés interfészeket kölcsönöz. Az anyagtervezési elemek végrehajtása egyszerű, ha használod A Google irányelvei referenciaként.

A búvárkodás előtt fontos megérteni, hogy a Pixate csak képeket használ, így az egyéni projekt eszközei készen állnak és exportálhatók a szükséges képernyő sűrűségére. Az ebből bemutatott képeket közvetlenül a Anyagtervező matrica lap . Ez biztosítja az elemek világítását, árnyékát, méretét és általános érzését az iránymutatásokhoz igazítva. Megváltoztathatja azt a készüléket, amelyet prototyping, ha kiválasztja a megfelelő opciót a flyout menü közepén a vászon menüsor.

Szüksége van a Pixate Mobile alkalmazásra az Android vagy az iOS számára. Nem számít, hogy milyen eszközre van nézve, mivel az alkalmazás automatikusan méretezi a prototípust, hogy illeszkedjen a készülék képernyőjének megfelelően.

Keresse meg az összes fájlhoz szükséges fájlt itt .

01. Kezdje el

Nyissa meg a Pixate-t, és az üdvözlő képernyőn kattintson a "Új prototípus létrehozása" gombra. Válassza ki a kívánt mentési helyet, ha a rendszer kéri, és nevezze meg a fájlt.

Miután kattintson a Mentés gombra, akkor felkérik, hogy válassza ki az Ön által prototípusú eszközt. Ez nem kell az Ön által előnézeti eszköz - Ehhez a példához kiválasztjuk a Nexus 5. Most egy üres vászonra kell néznie.

02. Importálja a képeket

Import all the necessary assets for your prototype — Importálja a prototípus összes szükséges eszközét

Elkezdeni, importálni szeretnénk a képeket erre a bemutatóra. Meg fogja találni az összes használt eszközt itt (Ezek mindegyike 3x prototípus). A képernyő bal felső sarkában kattintson a középső fülre, majd kattintson a '+' gombra. Navigáljon a mappába, ahol az eszközök, válassza ki az összeset, és kattintson a Megnyitás gombra.

03. Hozzáadás és pozíció

Most szeretnénk hozzáadni és elhelyezni a Fab és az ikon képeket. A Pixate-ban, amikor a vászonra húzza az eszközöket, rétegként jönnek létre, és a réteg neve lesz a feltöltött kép fájlneve. Így utalok a rétegekre a bemutató során.

Húzza a "fab_normal" -t a vászonhoz, és helyezze el a réteget, ahová a fab üljön. Húzza az "ICON_ADD" eszközt és középen a Fab. Ha importálja az "ICON_ADD", és próbálja meg felvenni a FAB-t, akkor a középpontnál alacsonyabb lesz. Ennek kijavításához háromszor nyomja meg a billentyűzeten lévő nyílat. Ez a vizuális központba fogni fogja.

04. Adja hozzá a FAB példányokat

Add four instances of the FAB to your blank canvas — Adjon hozzá négy példányt a FAB-nak az üres vászonhoz

Most adjon négy példányt a "FAB_OPTION" a vászonra. Húzza az elsőt, így az alsó határ a "fab_normal" tetejére támaszkodik, és függőlegesen középpontban van.

Igazítsa a fennmaradó három "FAB_OPTION" réteget, így függőlegesen közép-összehangolt és egymás tetején ülnek. Így jelenik meg a Fab menü, amikor kibővült.

05. Adja hozzá az opciókat

Adja hozzá az összes opciót ('icon_school', 'icon_flight', 'icon_cake' és 'icon_basket') hozzáadása a vászonhoz, és összehangolja mindegyiket a "FAB_OPTION" gomb példányával. Ismét, mert az árnyék szerepel a képfájlban, a kör közepe nem a réteg közepe. A három pontot mindegyik ikonra kell felhúznia, így középpontba kerülnek.

06. Adja hozzá a nyomógombot

Place the 'FAB_pressed' icon on top of the unpressed version — Helyezze a "FAB_PRESSED" ikont az unpressed verzió tetejére

Végül adjunk hozzá "Fab_pressed" -t a vászonhoz, és helyezze a "Fab_Normal" tetejére. A "fab_pressed" -t, így a kör szélei megfelelnek a "fab_normal". Ez körülbelül három ponttal lefelé a középpontba ütközött igazításból.

07. Fészkelő rétegek

Az egymás belsejében fészkelő rétegek szülő / gyermek kapcsolatot hoznak létre. Ez lehetővé teszi, hogy animációkat alkalmazzon a rétegek csoportjára, és egy egységként animáljon. Úgy érhető el, hogy egy réteget húzunk és leesnek egy másik rétegre a réteglistában (a képernyő bal felső sarkában).

08. fészek opció ikon rétegek

Nest the option icon layers into their respective button layers — Fészkel az opciós ikon rétegek a megfelelő gombrétegekbe

Fészkel az opció ikon rétegei a megfelelő gombrétegekbe. Például a fészek "icon_school" a megfelelő "fab_option" -ra húzva az "Icon_school" réteg felsorolását az opció réteglistájára.

09. Öblítse le és visszaszerezze

Ismételje meg ezt az összes menüopcióhoz, ügyelve arra, hogy az ikonokat a megfelelő gomb opció alatt fészkelhesse. Nyugodtan összeomlik az összes opció rétegének egyszerűsítése a réteglista nézet.

10. Állítsa be a tulajdonságokat

Az "fab_pressed" átrendezése, így az "ICON_ADD" alatt található, de a "fab_normal" felett van. Most válassza az "ICON_ADD" lehetőséget, és kattintson a "+" gombra a réteglista tetején. A réteg tulajdonságai panelen (a képernyő jobb felső sarkában) Módosítsa a szélességet és a magassági értékeket a "FAB_PRESSED" (80 x 92). Ez biztosítja, hogy az interaktív terület magában foglalja az egész FAB-t.

11. Tap interakció hozzáadása

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction — Állítsa be a Color Swatch-t a Tulajdonságok panelen átlátszóra, és adjon hozzá egy érintő interakciót

A Tulajdonságok panelen állítsa be a színmintát átlátszóvá és helyezze el a réteget, így a "FAB_PRESSED" -hez igazítva van. Ezután húzza az interakciót a listán szereplő rétegre. Lefog cmd és válassza ki az összes "FAB_OPTION" réteget, valamint a "fab_pressed" -t 0 . Ne változtassa meg az ikon rétegeinek átlátszatlanságát! Mivel a szülő rétegek beállításakor az ikon rétegek opacitása öröklődik tőlük.

12. Forgassa el az ikont

Tegyük fel a FAB ikonunkat a csapra. A Pixate-ban animációk utalhatnak egy másik réteg állapotára. Ez lehetővé teszi, hogy egy animációt állítson be, ha egy feltétel teljesül. Szeretnénk elforgatni az "icon_add" -t, így más animációk feltételeit is alapozhatjuk. Húzza a forgatás animációt az "ICON_ADD" -re, és állítsa be a következő lehetőségeket. Alapján: Érintőréteg és Koppintson a , Ha: icon_addpng.rotation == 0 , Forgassa el: -225 , Enyhítés görbe: kielégít és kocka alakú , Időtartam: 0,3 .

13. Fordított állapot

Add a reverse condition to rotate the icon back to its original position — Adjon hozzá egy fordított állapotot az ikon elforgatásához az eredeti pozícióba

Kattintson a "+ állapot" linkre az animáció alján, és állítsa be a következőket: más, ha: icon_addpng.Rotation! = 0 , Forgassa el: 0 , Enyhítés görbe: kielégít és kocka alakú , Időtartam: 0,3 .

14. Adjon meg egy fade-in

Adjust the settings so the FAB fades in on tap — Állítsa be a beállításokat, így a Fab elhalványul

Azt akarjuk, hogy a FAB opciók elhalványuljanak a csapon. Tehát láthatjuk, hogy mit csinálunk, először hozzáadjuk az opció gombjait. Húzza a fade animációt egy opciógombra, és állítsa be a következőket.

Alapján: Érintőréteg és Koppintson a , Ha: icon_addpng.rotation == 0 , Fade to: 100 , Időtartam: 0 . Ezután "+ állapot", és más, ha: icon_addpng.Rotation! = 0 , Fade to: 0 , Enyhítés görbe: kielégít és kocka alakú . Tegye ezt az egyes opciók gombjára.

15. Méretezés a dolgok lefelé

Az anyagtervezési iránymutatásokban az Options LEHETŐSÉGE, amikor a Fab megérintette. Mivel a lehetőségek teljes körűen elkezdődnek, akkor a prototípus terhelésekor csökkenteni szeretnénk őket.

Húzza a skála animációt egy opciógombra, és állítsa be a következő lehetőségeket. Alapján: *KÉPERNYŐ* és Töltött , Skála x és skála y: 0 , és időtartam: 0. Válassza ki az alsó középső horgonyt a horgonyhálózatban. Tegye ezt az egyes opciók gombjára.

16. Animációs opciók

These settings will apply our animation to the FAB — Ezek a beállítások az animációnkat a Fab-ra alkalmazzák

Most állítsa be az opciókat, hogy bővüljenek, ha a Fab megérintette. Húzza a skála animációt a legfelső gombra, és állítsa be az opciókat a fenti képernyőképen látható módon.

17. Késlelteted a mérlegeket

Ha ezt az animációt hozzáadja az opciós gombok többi részéhez, kivonja a 0,02-et az IF késleltetési tulajdonságtól. A tetején lévő második lehetőségnek késedelmesnek kell lennie 0,04 , a harmadiknak késedelmes lesz 0,02 , és az utolsó 0,0 . Most az opciók egymás után lesznek.

18. További animációs lehetőségek

Add these settings to emulate the FAB being pressed — Adja hozzá ezeket a beállításokat, hogy emulálja a FAB-t

Végül meg kell emelni a FAB-t. Az anyagtervezésben az FAB árnyéka lefelé tolódik és elmosódott, így a gomb hatása a felhasználó felé mozog, ha megérinti. Ez egy kicsit trükkös, hogy eredetileg kitaláljon, mivel megköveteli tőlünk, hogy két különálló réteget helyezzünk el.

Húzza a fade animációt a "FAB_NORMAL" és a "FAB_PRESSED" -ra, és alkalmazza a képernyőképen látható beállításokat.

19. Készen áll a használatra

Ezt a fájlt a prototípusok bármelyikére használhatja. A vászon jobb felső sarkában található gombra kattintva kiválaszthat egy Pixate fájlt, amely egyre nyitva van, amely jelenleg nyitva van. Ez lehetővé teszi, hogy olyan komponenseket adjunk hozzá, mint a FAB, hogy a már dolgozó prototípusok.

20. Testreszabás!

Importálja saját ikonjait, és módosítsa a színeket, ahogy látja. A lépésekkel további FAB-beállításokat adhat hozzá, és még a későbbi csapokat és animációkat is felvesz az opcionális gombokra.

Tartsa szemre a Google-tól a Pixate anyagtervezési összetevőit, és design távol!

Ez a cikk eredetileg megjelent net magazin 281 kiadvány; Vásárolja meg itt .

Prototípus egy lebegő művelet gomb a Pixate

01. Kezdje el

02. Importálja a képeket

03. Hozzáadás és pozíció

04. Adja hozzá a FAB példányokat

05. Adja hozzá az opciókat

06. Adja hozzá a nyomógombot

07. Fészkelő rétegek

08. fészek opció ikon rétegek

09. Öblítse le és visszaszerezze

10. Állítsa be a tulajdonságokat

11. Tap interakció hozzáadása

12. Forgassa el az ikont

13. Fordított állapot

14. Adjon meg egy fade-in

15. Méretezés a dolgok lefelé

16. Animációs opciók

17. Késlelteted a mérlegeket

18. További animációs lehetőségek

19. Készen áll a használatra

20. Testreszabás!

kézikönyv - Most Popular Articles

Hogyan kell a Photoshop-i történetet

Hogyan kell rajzolni egy elefántot

Hogyan hozzunk létre egy fotorealisztikai helyszínt

Festék egy 3D-s hálóra Zbruscore polipszint eszközzel

Hogyan készítsünk szőrös rajzfilmfigurákat

Hogyan kell kifejleszteni a mitikus teremtményeket

Hogyan juthat el többet a digitális textúráktól

Hogyan lehet létrehozni egy stilizált 3D karaktert a játékokhoz

Kategóriák