Prototyyppi Kelluva toimintopainike pixaateessa

Sep 11, 2025
Miten tehdään

PIXATEn avulla voit nopeasti prototyyppi Interactive Mobile Mockups, jotka voidaan esikatsella Android- ja IOS-laitteissa. Tässä opetusohjelmassa aiomme käyttää sitä rakentamaan kelluvan toimintapainikkeen (FAB) mukaan lukien sub-vaihtoehdot. Tutkimme erilaisia ​​tekniikoita ja asetuksia pixateissa, kuten siirtymisissä ja olosuhteissa.

Fabia käytetään edistämään toimia ja houkutella käyttäjän huomion. Yleensä sovelluksen päätoimintoja pääsee Fab: n kautta. Meidän Fab tulee olemaan aineellisessa suunnittelutyylillä, joka sopii kauniisiin, luonnollisiin tuntemuksiin. Materiaalin suunnitteluelementtien toteuttaminen on yksinkertaista, jos käytät Googlen ohjeet viitteeksi.

Ennen sukellusta on tärkeää ymmärtää, että PIXATE käyttää vain kuvia, joten haluat saada omaisuutesi yksittäiselle hankkeelle valmis ja viedään tarvittavaan tiheyteen. Tässä opetusohjelmassa käytetyt kuvat vedetään suoraan Materiaalin suunnittelu Tarra arkki . Tämä takaa elementtien valaistus, varjot, koko ja yleinen tunnelma suuntaviivojen kanssa. Voit muuttaa prototyyppiä laitetta, jos valitset sopivan vaihtoehdon Flyout-valikosta CANVAS-valikkorivin keskustassa.

Tarvitset myös PIXATE-mobiilisovelluksen Androidille tai iOS: lle. Ei ole väliä mitä laitetta esikatselut, koska sovellus laatii prototyypin automaattisesti laitteen näytön mukaan.

Etsi kaikki tämän opetusohjelman tarvitsemat tiedostot tässä .

01. Aloita

Avaa PIXATE ja Tervetuloa-näytöstä napsauttamalla "Luo uusi prototyyppi". Valitse haluamasi SAVE Sijainti pyydettäessä ja nimeä tiedosto.

Kun napsautat Tallenna, sinua pyydetään valitsemaan laite, jonka olet prototyyppi. Tämän ei tarvitse olla laite, jota esikatselut, tässä esimerkissä valitsimme Nexus 5. Sinun pitäisi nyt tarkastella tyhjää kankaalle.

02. Tuo kuvat

Import all the necessary assets for your prototype

Tuo kaikki tarvittavat varat prototyypin

Aloita haluamme tuoda kuvia tähän opetusohjelmaan. Löydät kaikki käytetyt varat tässä (Nämä ovat kaikki 3x prototyypin). Napsauta näytön vasemmassa yläkulmassa keskellä-välilehteä ja napsauta sitten "+" -painiketta. Siirry kansioon, jossa omaisuutesi ovat, valitse ne kaikki ja valitse Avaa.

03. Lisää ja asento

Nyt haluamme lisätä ja asettaa FAB- ja ICON-kuvia. Pixateissa, kun vedät varoja kankaalle, ne luodaan kerroksena ja että kerroksen nimi on ladatun kuvan tiedostonimi. Näin voin viitata kerrosten koko tämän opetusohjelman.

Vedä 'fab_normal' kankaalle ja aseta kerros, johon haluat fach istua. Vedä myös "icon_add" omaisuus ja keskitä se FAB: llä. Kun tuodaan "icon_add" ja yritä napsauttaa se fabille, se napsahtaa pienempi kuin keskipiste. Korjata tämä painamalla näppäimistön nuolta kolme kertaa. Tämä nousi sen visuaaliseen keskustaan.

04. Lisää Fab-tapaukset

Add four instances of the FAB to your blank canvas

Lisää FAB: n neljä tapausta tyhjälle kankaalle

Lisää nyt neljä tapausta "fab_option" kankaalle. Vedä ensin, joten pohjan reuna napsahtaa "Fab_normal" yläosaan ja pystysuoraan keskipisteenä.

Kohdista jäljellä olevat kolme "Fab_option" -kerroksia, joten ne ovat pystysuoraan keskitetty ja istuvat toistensa päälle. Näin FAB-valikko tulee näkyviin, kun se on laajennettu.

05. Lisää vaihtoehtokuvakkeet

Lisää kaikki vaihtoehtoiset kuvakkeet ('icon_school', 'icon_flight', 'icon_cake' ja 'icon_basket') kankaalle ja kohdista kukin "FAB_OPTION" -painikkeella. Jälleen, koska varjo sisältyy kuvatiedostoon, ympyrän keskus ei ole kerroksen keskipiste. Sinun täytyy kopioida kukin kuvakkeista noin kolme pistettä, jotta ne näkyvät keskitettynä.

06. Lisää painettu FAB

Place the 'FAB_pressed' icon on top of the unpressed version

Aseta "FAB_PRESED" -kuvake pajaiseen version päälle

Lopuksi lisää "fab_pressoitu" kankaalle ja aseta se "Fab_normal" päälle. Nudge 'fab_pressed' niin ympyrän ottelu "fab_normal" reunat. Tämä on noin kolme pistettä alaspäin keskiarvosta.

07. Pisteiden kerrokset

Pisteiden kerrokset keskenään luo vanhemman / lasten suhdetta. Näin voit käyttää animaatioita kerroksittain ja heitä animoimaan yhtenä yksikkönä. Se saavutetaan vetämällä ja pudottamalla kerros toiseen kerroksen luettelossa (näytön vasemmassa yläkulmassa).

08. NEST OPTION ICON-kerrokset

Nest the option icon layers into their respective button layers

Pesä Optio-kuvakkeet kerrokset vastaaviin napinkerrostensa

Pesä Optio-kuvakkeet kerrokset vastaaviin napin kerroksiin. Esimerkiksi pesä "icon_school" sen vastaavaan "fab_option" vetämällä "icon_school" -kerrosluettelon vaihtoehdon kerrosluetteloon.

09. Huuhtele ja palauta

Toista tämä kaikkiin valikkovaihtoehtoihin, varmista, että kuvakkeet pestään oikeassa painikkeella. Voit mukauttaa kaikki vaihtoehtokerrokset yksinkertaistamaan kerroslistanäkymää.

10. Säädä ominaisuuksia

Reorder 'fab_pressed', joten se istuu alla "icon_add", mutta yllä "Fab_normal". Valitse nyt 'icon_add' ja klikkaa "+" taso listan yläosassa. Layer Ominaisuudet-paneelissa (näytön oikeassa yläkulmassa) muuttaa leveys- ja korkeuden arvot vastaamaan "fab_pressoitu" (80 x 92). Tämä varmistaa, että interaktiivinen alue käsittää koko FAB: n.

11. Lisää TAP Interaction

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction

Aseta värivalikoima Ominaisuudet-paneeliin läpinäkyväksi ja lisää napauttamalla vuorovaikutusta

Ominaisuudet-paneelissa aseta värimallasi läpinäkyvään ja aseta kerros niin, että se on keskellä kohdistettu "fab_pressoitu". Vedä sitten napauta vuorovaikutus luettelossa olevaan kerrokseen. Pitää alhaalla cmd ja valitse kaikki "Fab_option" -kerrokset sekä "fab_pressed" ja aseta sitten opasiteetti 0 . Älä muuta kuvaketta kerroksia! Koska olet säätänyt vanhempien kerroksia, kuvakkeiden kerrosten läpinäkyvyys on peritty niistä.

12. Kierrä kuvaketta

Tehkäämme Fab-kuvaketta kiertää napauttamalla. Pixateissa animaatiot voivat viitata toisen kerroksen tilaan. Näin voit asettaa animaation pelata, kun tila on täyttynyt. Haluamme kiertää "icon_add", jotta voimme perustaa muita animaatioita siihen. Vedä pyörivä animaatio 'icon_add' ja aseta seuraavat vaihtoehdot. Perustuen: Napauta kerros ja Napata , Jos: icon_addpng.Rotation == 0 , Kierrä: -225 , Keventävä käyrä: helpoa ja kuutio- , Kesto: 0,3 .

13. peruutustila

Add a reverse condition to rotate the icon back to its original position

Lisää käänteinen tila kääntääksesi kuvakkeen takaisin alkuperäiseen asentoonsa

Napsauta animaation alareunassa olevaa "+ kunnon" -linkkiä ja aseta seuraava: muu, jos: icon_addpng.rotaatio! = 0 , Kierrä: 0 , Keventävä käyrä: helpoa ja kuutio- , Kesto: 0,3 .

14. Lisää haalistuminen

Adjust the settings so the FAB fades in on tap

Säädä asetuksia niin, että Fab haalistuu

Haluamme, että Fab-vaihtoehdot haalistuvat napauttamalla. Joten voimme nähdä, mitä teemme, lisäämme ensimmäisenä painikkeita ensin. Vedä Fade-animaatio vaihtoehtoon ja aseta seuraava.

Perustuen: Napauta kerros ja Napata , Jos: icon_addpng.Rotation == 0 , Haalistuu: 100 , Kesto: 0 . Sitten "+ tila" ja muuten, jos: icon_addpng.rotaatio! = 0 , Haalistuu: 0 , Keventävä käyrä: helpoa ja kuutio- . Tee tämä jokaiselle vaihtoehto-painikkeelle.

15. Scale asioita alas

Materiaalisen suunnittelun ohjeissa vaihtoehdot skaalavat, kun Fab on kopioitu. Koska vaihtoehdot alkavat koko mittakaavassa, haluamme laatia ne alas, kun prototyyppi kuormitukset.

Vedä asteikko animaatio vaihtoehtoon ja aseta seuraavat vaihtoehdot. Perustuen: * Näyttö * ja Ladattu , Scale X ja Scale Y: 0 ja kesto: 0. Valitse ankkurivirroon pohja-keskimmäinen ankkuri. Tee tämä jokaiselle vaihtoehto-painikkeelle.

16. Animaatiovaihtoehdot

These settings will apply our animation to the FAB

Nämä asetukset soveltavat animaatiomme FAB: hen

Nyt asetetaan vaihtoehdot laajentamaan, kun Fab on kopioitu. Vedä mittakaavaus animaatio yläreunaan ja aseta vaihtoehdot edellä kuvatun kuvakaappauksen mukaisesti.

17. Viivyttää vaa'at

Kun lisäät tämän animaation muuhun vaihtoehtopainikkeisiin, vähennä 0,02 IF: n viiveen omaisuutta. Toisen vaihtoehdon yläosasta pitäisi viivästynyt 0,04 , kolmas viivästyy 0,02 ja viimeinen 0,0 . Nyt vaihtoehdot skaalavat yhden toisensa jälkeen.

18. Lisää animaatiovaihtoehtoja

Add these settings to emulate the FAB being pressed

Lisää nämä asetukset emuloimaan FAB painetaan

Lopuksi meidän on jäljitettävä FAB painetaan. Materiaalimuodossa Fab: n varjo siirretään alas ja hämärtynyt, jotta painikkeen vaikutus siirtyy kohti käyttäjää, kun sitä käytetään. Tämä on vähän hankala, jolla voit aluksi selvittää, koska se vaatii meitä ristiriidassa kaksi erillistä kerrosta.

Vedä Fade-animaatio "fab_normal" ja "fab_pressoitu" ja käytä kuvakaappauksessa näkyviä asetuksia.

19. Valmis käytettäväksi

Nyt voit käyttää tätä tiedostoa mille tahansa prototyypistä. Klikkaamalla CANVASin oikeassa yläkulmassa olevaa painiketta voit valita PIXATE-tiedoston yhdistää tällä hetkellä auki. Näin voit lisätä tämän fabin komponentteja prototyyppeihin, joita olet jo työskennellyt.

20. Mukauta!

Tuo omat kuvakkeet ja muuta värejä, kuten näet. Kun vaiheet, voit lisätä FAB-asetuksia ja jopa kytkeä myöhemmät hanat ja animaatiot vaihtoehtoihin.

Pidä silmällä enemmän PIXATE Material Design -komponentteja Googlesta ja suunnitella pois!

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti numero 281; Osta se täällä .

Miten tehdään - Suosituimmat artikkelit

Aloita Adobe Dimension CC

Miten tehdään Sep 11, 2025

Adobe Dimension tekee siitä tuulen monimutkaisten kohtausten perustamiseksi (Kuva luotto: Mike Griggs) A..

8 Essential WordPress Security Secrets

Miten tehdään Sep 11, 2025

Viimeisten 15 vuoden aikana WordPress on tullut maailman suosituin sisällönhallintajärjestelmä. Helppo aloittaa ja erittäin monipuolinen, se on yksi Parhaat Blogging-alustat ..

Miten vaikuttaa Google-rankingille sisällön kanssa

Miten tehdään Sep 11, 2025

Sisältösi ei mene mihinkään, ellei ihmiset voi etsiä ja löytää sitä, joten sisältö on kirjoitettava ymmärryksessä, k..

Maalaa klassinen keiju, jossa on procreate

Miten tehdään Sep 11, 2025

Procreate on nopeasti tullut Go-Digital Maalaus -sovellukseni. Kiitos siirrettävyyden iPad Pro , sen vetoomus min..

Miten Master Creature Anatomy

Miten tehdään Sep 11, 2025

Kun se tulee Piirustus uskottavia olentoja , sinun on keskityttävä luuston, lihasten ja verisuonijärjestelmiin...

Mestari veitsityökalu

Miten tehdään Sep 11, 2025

Joskus palata perusasioihin on elintärkeää pysyä pelin päällä, kun taitosi uudistaminen voi elvyttää intohimosi ja et ko..

Miten havainnollistaa tapahtumaa

Miten tehdään Sep 11, 2025

Tapahtumien kuvitukset ovat fantastinen luova haaste, johon kuuluu tarinoita piirustuksesi, jotka ruokkivat tapahtuman kerronta, ..

Miten prototyyppi mobiilisovellus Adobe XD: llä

Miten tehdään Sep 11, 2025

Tämä opetusohjelma, jossa voit tehdä mobiilisovelluksen prototyypin Adobe XD: ssä, koottiin yhteen Ado..

Luokat