Prototype En flytende handlingsknapp i Pixate

Sep 11, 2025
hvordan

Pixate lar deg raskt prototype interaktive mobile mockups som kan forhåndsvises på Android og iOS-enheter. I denne opplæringen skal vi bruke den til å bygge en flytende handlingsknapp (FAB), inkludert underalternativer. Vi vil utforske forskjellige teknikker og innstillinger i Pixate, for eksempel overganger og forhold.

Fabs brukes til å fremme handling og tiltrekke seg en brukers oppmerksomhet. Vanligvis åpnes et applikasjons hovedfunksjoner gjennom en fab. Vår fab kommer til å være i en materiell design stil, som gir seg til vakre, naturlige følelse grensesnitt. Implementering av materielle designelementer er enkel hvis du bruker Googles retningslinjer for referanse.

Før du dykker inn, er det viktig å forstå at Pixate bare bruker bilder, så du vil ha eiendeler for ditt individuelle prosjekt klar og eksportert til den nødvendige skjermtettheten. Bildene som brukes i denne opplæringen blir trukket direkte fra [1. 3] Material Design Sticker Sheet

. Dette sikrer belysning, skygger, størrelse og generelle følelsen av elementene som justeres med retningslinjene. Du kan endre enheten du har prototyping for ved å velge det aktuelle alternativet fra Flyout-menyen i midten av lerretmenyen.

Du trenger også Pixate Mobile-appen for Android eller iOS. Det spiller ingen rolle hvilken enhet du forhåndsviser på, da appen automatisk skal skalere prototypen for å passe til enhetens skjerm.

Finn alle filene du trenger for denne opplæringen her .

01. Kom i gang

Åpne Pixate, og fra velkomstskjermbildet klikker du på 'Opprett en ny prototype'. Velg ønsket lagringsplass når du blir bedt om det, og navnet på filen din.

Når du klikker på Lagre, blir du bedt om å velge enheten du er prototyping for. Dette trenger ikke å være enheten du forhåndsvisning på - for dette eksemplet velger vi Nexus 5. Du bør nå se på et tomt lerret.

02. Importer bildene dine

Import all the necessary assets for your prototype

Importer alle nødvendige eiendeler for prototypen din

For å starte, vil vi importere bildene for denne opplæringen. Du finner alle eiendelene jeg har brukt her (Dette er alle for en 3x prototype). I øvre venstre hjørne av skjermen klikker du på Mellom-fanen og klikker deretter på '+' -knappen. Naviger til mappen der dine eiendeler er, velg alle av dem og klikk Åpne.

03. Legg til og posisjon

Nå vil vi legge til og plassere fab og ikonbilder. I Pixate, når du drar eiendeler til lerretet, blir de opprettet som et lag, og at lagets navn vil være filnavnet til bildet du lastet opp. Slik refererer jeg til lagene i denne opplæringen.

Dra 'fab_normal' til lerretet og plasser laget der du vil ha fab å sitte. Dra også 'ICON_ADD' -aktivet og sentr det på fab. Når du importerer 'icon_add' og prøver å snap det til fab, vil den snappe lavere enn midtpunktet. For å rette opp dette, trykk på pil opp på tastaturet tre ganger. Dette vil nudge det til det visuelle senteret.

04. Legg til dine fab forekomster

Add four instances of the FAB to your blank canvas

Legg til fire forekomster av fab til ditt blanke lerret

Legg nå fire forekomster av "fab_option" til lerretet. Dra den første så de nederste grensen snaps til toppen av 'fab_normal', og er vertikalt midtjustert.

Juster de resterende tre 'fab_option-lagene, slik at de er vertikalt midtjustert og sitter på toppen av hverandre. Slik vises Fab-menyen når den er utvidet.

05. Legg til alternativikonene

Legg til alle alternativikonene ('icon_school', 'icon_flight', 'icon_cake' og 'icon_basket') til lerretet og juster hver av dem med en forekomst av 'FAB_OPTION' -knappen. Igjen, fordi skyggen er inkludert i bildefilen, er senteret i sirkelen ikke midt på laget. Du må støte på hver av ikonene om tre poeng, slik at de vises sentrert.

06. Legg til den pressede fab

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

Plasser "fab_pressed" -ikonet på toppen av den unresserte versjonen

Til slutt, legg til 'fab_pressed' til lerretet og legg det på toppen av 'fab_normal'. Nudge 'fab_pressed' så kantene på sirkelen matcher 'fab_normal'. Dette er omtrent tre poeng ned fra senter-snappet tilpasning.

07. Nesting Lag

Nesting lag i hverandre skaper et foreldre / barn forhold. Dette gjør at du kan bruke animasjoner til en gruppe lag og få dem til å animere som en enhet. Den oppnås ved å dra og slippe et lag på en annen i laglisten (i øvre venstre hjørne av skjermen).

08. Nest Alternativ Ikon Lag

Nest the option icon layers into their respective button layers

Nest opsjonsikonet lag i deres respektive knappelag

Nest opsjonsikonet lag i deres respektive knappelag. For eksempel Nest 'Icon_school' i sin tilsvarende 'FAB_OPTION' ved å dra 'icon_school' lagoppføringen på alternativets lagliste.

09. Skyll og revear

Gjenta dette for alle menyalternativene, og sørg for at du nesting av ikonene under riktig knappalternativ. Du er velkommen til å kollapse alle alternativene for å forenkle laglistevisningen.

10. Juster egenskaper

Reorder 'fab_pressed' så det sitter under 'icon_add' men over 'fab_normal'. Velg nå 'ICON_ADD' og klikk på '+' øverst på laglisten. I lag-properties-panelet (i øverste høyre hjørne av skjermen), endre bredde- og høydeverdiene for å matche "fab_pressed" (80 x 92). Dette vil sikre at det interaktive området omfatter hele fab.

11. Legg til et trykkinteraksjon

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

Sett fargeprøven i egenskapspanelet til transparent, og legg til et trykkinteraksjon

Mens du er i Egenskaper-panelet, må du sette fargeprøven til gjennomsiktig og plassere laget slik at det er midtjustert med 'fab_pressed'. Deretter dra en trykkinteraksjon på laget i listen. Holde nede cmd. og velg alle "fab_option" lagene så vel som "fab_pressed", så sett opacity til 0. . Ikke endre opaciteten av ikonet lagene! Siden du justerer foreldrelagene, er ikonlagets opacitet arvet fra dem.

12. Roter ikonet

La oss få vårt fab-ikon rotere på trykk. I Pixate kan animasjoner referere til tilstanden til et annet lag. Dette lar deg sette en animasjon for å spille en gang en tilstand er oppfylt. Vi ønsker å rotere 'icon_add' slik at vi kan basere andre animasjonssituasjoner på den. Dra en roter animasjon på 'ICON_ADD' og angi følgende alternativer. Basert på: Trykk på lag og Tap , Hvis: icon_addpng.rotation == 0. , Roter til: -225. , Easing Curve: lette ut og Cubic. , Varighet: 0.3. .

13. Omvendt tilstand

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

Legg til en omvendt tilstand for å rotere ikonet tilbake til sin opprinnelige posisjon

Klikk på linken '+ Condition' nederst på animasjonen og sett følgende: Ellers hvis: icon_addpng.Rotasjon! = 0 , Roter til: 0. , Easing Curve: lette ut og Cubic. , Varighet: 0.3. .

14. Legg til en fade-in

Adjust the settings so the FAB fades in on tap

Juster innstillingene slik at fab fades inn på trykk

Vi vil at fab-alternativene skal falme inn på trykk. Så vi kan se hva vi gjør, vi vil legge til falmen inn på alternativknappene først. Dra en fade animasjon til en alternativknapp og angi følgende.

Basert på: Trykk på lag og Tap , Hvis: icon_addpng.rotation == 0. , Falme til: 100. , Varighet: 0. . Deretter '+ tilstand' og ellers hvis: icon_addpng.Rotasjon! = 0 , Falme til: 0. , Easing Curve: lette ut og Cubic. . Gjør dette for hver alternativknapp.

15. Skala ting ned

I retningslinjene for materialdesign, skalaler opp når fab er tappet. Siden våre alternativer starter i full skala, vil vi skala dem ned når prototypen laster.

Dra en skala animasjon på en alternativknapp og angi følgende alternativer. Basert på: *SKJERM* og Lastet , Skala x og skala y: 0. og varighet: 0. Velg det nederste midtanker i ankernettet. Gjør dette for hver alternativknapp.

16. Animasjonsalternativer

These settings will apply our animation to the FAB

Disse innstillingene gjelder vår animasjon til fab

La oss nå sette alternativene for å utvide når Fab er tappet. Dra en skala animasjon på den øverste knappen og sett alternativene som vist i skjermbildet ovenfor.

17. Forsink skalaene

Når du legger til denne animasjonen i resten av alternativknappene, trekker du 0,02 fra hvis forsinkelsesegenskaper. Det andre alternativet fra toppen skal ha en forsinkelse av 0,04 , den tredje vil ha en forsinkelse av 0,02. , og den siste 0.0. . Nå vil alternativene skalere en etter hverandre.

18. Flere animasjonsalternativer

Add these settings to emulate the FAB being pressed

Legg til disse innstillingene for å etterligne Fab som trykkes

Til slutt må vi etterligne Fab som presses. I materiell design skiftes skyggen av faben ned og sløret for å gi effekten av knappen som beveger seg mot brukeren når den tappes. Dette er litt vanskelig å først finne ut, siden det krever at vi krysser to separate lag.

Dra en fade animasjon på 'fab_normal' og 'fab_pressed' og bruk innstillingene som vises i skjermbildet.

19. Klar til bruk

Du kan nå bruke denne filen for noen av prototypene dine. Ved å klikke på knappen øverst til høyre på lerretet, kan du velge en PIXATE-fil for å slå sammen i den som er åpen. Dette lar deg legge til komponenter som denne fab til prototyper som du allerede jobber med.

20. Tilpass!

Importer dine egne ikoner og endre fargene som du passer. Med trinnene her kan du legge til flere fabalternativer og til og med koble til påfølgende kraner og animasjoner til alternativknappene.

Hold øye med flere Pixate Material Design-komponenter fra Google, og design vekk!

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 281; Kjøp det her .

hvordan - Mest populære artikler

22 Best Ui Design Tools

hvordan Sep 11, 2025

[1. 3] (Bilde Kreditt: Invision) Et utvalg av de beste UI-designverktøyene vil hjelpe med nesten alle designprosesser..

Hvordan unngå en Amazon Prime Day 2020 Feil

hvordan Sep 11, 2025

[1. 3] (Bilde Kreditt: Amazon) Selv om vi ennå ikke vet nøyaktig datoen for Amazon Prime Day 2020 Lik..

Bruk negativ plass til å tegne bedre hender

hvordan Sep 11, 2025

[1. 3] Selv en tilsynelatende kompleks prosess som å tegne en hånd kan forenkles, med de riktige tegningsteknikkene og triksene...

Hvordan lage en Alexa ferdighet for nettstedet ditt

hvordan Sep 11, 2025

[1. 3] Mange av oss har nå en slags stemmeassistent rundt hjemmet, enten det er en Amazon Echo, Apple Homepod eller et Google-hje..

Gjør dine tegn pop med farge og lys

hvordan Sep 11, 2025

[1. 3] Jeg liker virkelig å jobbe i farge, om det er i Photoshop CC. eller maleri tradisjonelt med akvareller. Lev..

Slik smelter du et 3D-objekt med tre.js

hvordan Sep 11, 2025

[1. 3] Internett som vi vet det, er stadig forandring og evolusjonerende. Det vi fortsatt kan huske som et enkelt og grei medium f..

Hvordan blande fargede blyanter

hvordan Sep 11, 2025

Lære å blande fargede blyanter vil hjelpe deg med å få mer fra verktøyene dine. I stedet for å stole på den enkelte, flate fargen på hver blyant, kan vi blande dem sammen for å gjør..

Master brukeropplevelsesstrategi

hvordan Sep 11, 2025

[1. 3] UX-strategi er en prosess som bør startes før design eller utvikling av et digitalt produkt påbegynnes. Det ..

Kategorier