Prototype En flydende handlingsknap i pixat

Sep 14, 2025
hvordan

Pixat giver dig mulighed for hurtigt at prototype interaktive mobile mockups, der kan forhåndsvises på Android og iOS-enheder. I denne vejledning skal vi bruge det til at opbygge en flydende handlingsknap (FAB), herunder underindstillinger. Vi vil udforske forskellige teknikker og indstillinger i pixat, såsom overgange og betingelser.

Fabs bruges til at fremme handling og tiltrække en brugers opmærksomhed. Generelt fås en ansøgnings hovedfunktioner via en Fab. Vores fab vil være i en materiel design stil, som egner sig til smukke, naturlige følelse grænseflader. Implementering af materiale designelementer er enkel, hvis du bruger Googles retningslinjer. til reference.

Før du dykker ind, er det vigtigt at forstå, at pixatet kun bruger billeder, så du vil have aktiverne til dit individuelle projekt klar og eksporteres til den nødvendige skærmtæthed. De billeder, der bruges i denne vejledning, trækkes direkte fra Materiale Design Sticker Sheet . Dette sikrer belysningen, skyggerne, størrelsen og den samlede følelse af elementerne i overensstemmelse med retningslinjerne. Du kan ændre den enhed, du prototyper ved at vælge den relevante indstilling fra Flyout-menuen i midten af ​​lærredsmenuen.

Du skal også bruge Pixate Mobile App til Android eller IOS. Det er ligegyldigt hvilken enhed du forhåndsviser på, da appen automatisk skal skala prototypen, der passer til din enheds skærm.

Find alle de filer, du har brug for til denne vejledning her .

01. Kom godt i gang

Åbn pixat, og fra velkomstskærmen klik på 'Opret en ny prototype'. Vælg din ønskede gem placering, når du bliver bedt om det, og navngiv din fil.

Når du har klikket på Gem, bliver du bedt om at vælge den enhed, du er prototyping for. Dette behøver ikke at være den enhed, du forhåndsviser på - for dette eksempel vælger vi Nexus 5. Du skal nu kigge på et blankt lærred.

02. Importer dine billeder

Import all the necessary assets for your prototype

Importer alle de nødvendige aktiver til din prototype

For at starte, vil vi importere billederne til denne vejledning. Du finder alle de aktiver, jeg har brugt her (Disse er alle for en 3x prototype). I øverste venstre hjørne af skærmen skal du klikke på den midterste fane og derefter klikke på knappen '+'. Naviger til den mappe, hvor dine aktiver er, vælg alle dem og klik på Åbn.

03. Tilføj og position

Nu vil vi tilføje og placere fab og ikonbilleder. I pixat, når du trækker aktiver til lærredet, vil de blive oprettet som et lag, og at lagens navn bliver filnavnet på det billede, du uploadede. Sådan refererer jeg til lagene i hele denne vejledning.

Træk 'fab_normal' til lærredet og placer laget, hvor du vil have fab til at sidde. Træk også 'ICON_ADD' aktivet og centrer det på fab. Når du importerer 'icon_add' og forsøger at snappe det til FAB, vil det snappe lavere end centerpunktet. For at rette op på dette, tryk på pilen på tastaturet tre gange. Dette vil nudge det til det visuelle center.

04. Tilføj dine fab-instanser

Add four instances of the FAB to your blank canvas

Tilføj fire forekomster af fab til dit blanke lærred

Tilføj nu fire forekomster af 'fab_option' til lærredet. Træk den første, så den nederste grænse snaps til toppen af ​​'fab_normal', og er vertikalt center-justeret.

Juster de resterende tre 'fab_option' lag, så de er lodret center-justeret og sidder oven på hinanden. Sådan vises FAB-menuen, når den er udvidet.

05. Tilføj indstilling ikoner

Tilføj alle indstillingsikoner ('Icon_school', 'Icon_flight', 'Icon_Cake' og 'Icon_Basket') til lærredet og juster hver af dem med en forekomst af knappen 'Fab_Option'. Igen, fordi skyggen er inkluderet i billedfilen, er midten af ​​cirklen ikke centrum af laget. Du skal bump op hver af ikonerne omkring tre punkter, så de ser ud til at være centreret.

06. Tilføj den pressede fab

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

Placer det 'fab_pressed' ikon på toppen af ​​den upressede version

Endelig tilføj 'Fab_pressed' til lærredet og læg det oven på 'Fab_Normal'. Nudge 'fab_pressed' så kanterne af cirkelkampen 'fab_normal'. Dette er omkring tre punkter ned fra center-snappet justering.

07. Nesting lag.

Nesting lag inde i hinanden skaber et forælder / barn forhold. Dette giver dig mulighed for at anvende animationer til en gruppe lag og få dem animeret som en enhed. Det opnås ved at trække og tabe et lag på en anden i lagslisten (i øverste venstre hjørne af skærmen).

08. Nest option ikon lag

Nest the option icon layers into their respective button layers

Nest indstillingen ikon lag i deres respektive knaplag

Nest indstillingen ikon lag i deres respektive knaplag. For eksempel nest 'icon_school' i den tilsvarende 'fab_option' ved at trække 'ikon_school' lag listing på optionens lag liste.

09. Skyl og gentag

Gentag dette for alle menuindstillingerne, og sørg for at du nesterer ikonerne under den korrekte knapindstilling. Du er velkommen til at sammenbruge alle optionslagene for at forenkle laglistevisningen.

10. Juster egenskaber

Bestil 'Fab_pressed', så det sidder under 'icon_add' men over 'fab_normal'. Vælg nu 'Icon_Add' og klik på '+' øverst på laglisten. I panelet Lagegenskaber (i øverste højre hjørne af skærmen) skiftes bredden og højdeværdierne for at matche 'Fab_pressed' (80 x 92). Dette sikrer, at det interaktive område omfatter hele FAB.

11. Tilføj en trykinteraktion

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

Indstil farveprøven i egenskabspanelet til gennemsigtig, og tilføj en trykinteraktion

I panelet i egenskaberne skal du sætte farveprøven til gennemsigtig og placere laget, så det er center-justeret med 'fab_pressed'. Træk derefter en trykinteraktion på laget i listen. Holde nede cmd. og vælg alle 'fab_option' lag såvel som 'fab_pressed', og sæt derefter opacitet til 0. . Du må ikke ændre opaciteten af ​​ikonet lag! Da du justerer forældragene, er ikonlagets opacitet arvet fra dem.

12. Drej ikonet

Lad os gøre vores fabikon rotere på tryk. I pixat kan animationer henvise til tilstanden af ​​et andet lag. Dette giver dig mulighed for at indstille en animation til at spille en gang en betingelse er opfyldt. Vi ønsker at rotere 'icon_add', så vi kan basere andre animationer 'betingelser på det. Træk en roter animation på 'ICON_ADD' og indstil følgende muligheder. Baseret på: Tryk på Layer. og TAP , Hvis: icon_addpng.rotation == 0. , Drej til: -225. , Lette kurve: lette ud og CUBIC. , Varighed: 0.3. .

13. Omvendt betingelse.

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

Tilføj en omvendt tilstand for at rotere ikonet tilbage til sin oprindelige position

Klik på linket '+ Tilstand' nederst i animationen og indstil følgende: Ellers hvis: icon_addpng.rotation! = 0 , Drej til: 0. , Lette kurve: lette ud og CUBIC. , Varighed: 0.3. .

14. Tilføj en fade-in

Adjust the settings so the FAB fades in on tap

Juster indstillingerne, så FAB falmer ind på tryk

Vi ønsker, at FAB-indstillingerne falder ind på tryk. Så vi kan se, hvad vi laver, vi vil føje fade ind på option knapperne først. Træk en fade animation til en optionsknap og indstil følgende.

Baseret på: Tryk på Layer. og TAP , Hvis: icon_addpng.rotation == 0. , Fade til: 100. , Varighed: 0. . Så '+ tilstand' og ellers hvis: icon_addpng.rotation! = 0 , Fade til: 0. , Lette kurve: lette ud og CUBIC. . Gør dette for hver valgknap.

15. skala ting ned

I de materielle designretningslinjer, optioner skalere op, når fab tappes. Da vores muligheder begynder i fuld skala, ønsker vi at skalere dem ned, når prototypen belastes.

Træk en skala animation på en optionsknap og indstil følgende muligheder. Baseret på: * Skærm * og Lastet , Skala x og skala y: 0. og varighed: 0. Vælg bund-midten anker i ankernettet. Gør dette for hver valgknap.

16. Animation muligheder.

These settings will apply our animation to the FAB

Disse indstillinger vil anvende vores animation til FAB

Lad os nu sætte mulighederne for at udvide, når FAB er tappet. Træk en skala animation på den øverste knap og indstil indstillingerne som vist i skærmbilledet ovenfor.

17. Forsink skalaerne

Når du tilføjer denne animation til resten af ​​optionsknapperne, skal du trække 0,02 fra IF's forsinkelsesegenskab. Den anden mulighed fra toppen skal have en forsinkelse af 0,04. , den tredje vil have en forsinkelse af 0,02. , og den sidste 0,0 . Nu vil mulighederne skalere en efter den anden.

18. Flere animationsmuligheder

Add these settings to emulate the FAB being pressed

Tilføj disse indstillinger for at efterligne Fab'et trykket

Endelig skal vi efterligne Fab'et presses. I materialet design skiftes fabens skygge ned og sløret for at give effekten af ​​knappen, der bevæger sig mod brugeren, når den tappes. Dette er lidt vanskeligt at først finde ud af, da det kræver, at vi krydser to separate lag.

Træk en fade-animation på 'FAB_NORMAL' og 'FAB_PRESSED' og anvende de indstillinger, der vises i screenshot.

19. Klar til brug

Du kan nu bruge denne fil til nogen af ​​dine prototyper. Ved at klikke på knappen øverst til højre på lærredet kan du vælge en pixatfil for at fusionere i den, der for øjeblikket er åben. Dette giver dig mulighed for at tilføje komponenter som denne fab til prototyper, som du allerede arbejder på.

20. Tilpas!

Importer dine egne ikoner og ændre farverne, som du finder passende. Med trinene her kan du tilføje yderligere FAB-indstillinger og endda tilslutte efterfølgende vandhaner og animationer til optionsknapperne.

Hold øje med mere pixat materiale design komponenter fra Google, og design væk!

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 281; Køb det her .

hvordan - Mest populære artikler

4 trin til brug af variable skrifttyper

hvordan Sep 14, 2025

(Billedkredit: fremtiden) Variable skrifttyper Aktiver skriftdesignere til at definere type variationer i selve skrif..

Byg prototyper med Adobe XD

hvordan Sep 14, 2025

(Billedkredit: fremtiden) I nutidig web- og app design er der ofte tidspunkter, hvor interaktionen ikke åbner en hel..

Easy Posing Techniques til 3D-modeller

hvordan Sep 14, 2025

Jeg har været en animationsdirektør i de sidste par år og har arbejdet med mange animatorer, hvilket hjælper dem med at få d..

3 Tips til udformning af fantastisk udskrivning af reklamemateriale

hvordan Sep 14, 2025

I en stadig mere digital verden har klogt udformet printfremmende materiale beføjelse til at gøre en alvorlig indvirkning. Mås..

Sådan designes isometrisk typografi

hvordan Sep 14, 2025

Perspektivet er alt i design. Hvis noget du har trukket, har et perfekt perspektiv, vil det hjælpe dit arbejde med at se mere re..

Model en fremmede piratskab i Zbrush

hvordan Sep 14, 2025

For at hjælpe dig med at lære at oprette en 3D-fremmede piratkarakter, vil jeg vise dig, hvordan jeg skulpterede ansigtet af mi..

Sådan maler man en zombie i klipstudiummaling

hvordan Sep 14, 2025

I denne tegning tutorial lærer du Sådan tegner og maler en zombie bruger Clip Studio Paint. , Dig..

Opret interaktive diagrammer i Ionic 2

hvordan Sep 14, 2025

Når du arbejder i et lille team, har det tendens til at være svært at skrive og vedligeholde separat kode for Android, IOS og ..

Kategorier