Prototype en flytande åtgärdsknapp i pixat

Sep 14, 2025
Hur

Pixate låter dig snabbt prototypa interaktiva mobila mockups som kan förhandsgranskas på Android och IOS-enheter. I den här handledningen ska vi använda den för att bygga en flytande åtgärdsknapp (Fab) inklusive delalternativ. Vi utforskar olika tekniker och inställningar i Pixate, såsom övergångar och förhållanden.

Fabs används för att främja åtgärd och locka användarens uppmärksamhet. I allmänhet nås en applikationens huvudfunktioner via en Fab. Vår fab kommer att vara i en materiell designstil, som låter sig vara vackra, naturliga känslor. Implementera materialdesignelement är enkelt om du använder Googles riktlinjer som referens.

Innan du dyker in är det viktigt att förstå att Pixate endast använder bilder, så du vill ha tillgångarna för ditt individuella projekt redo och exporteras till den nödvändiga skärmdensiteten. Bilderna som används i denna handledning dras direkt från Material design klistermärkeark . Detta säkerställer belysningen, skuggorna, storleken och den totala känslan av elementen i linje med riktlinjerna. Du kan ändra enheten du prototyper för genom att välja lämpligt alternativ från snabbmenyn i mitten av kanfasmenyn.

Du behöver också Pixate Mobile-appen för Android eller IOS. Det spelar ingen roll vilken enhet du förhandsgranskar på, eftersom appen automatiskt kommer att skala prototypen för att passa enhetens skärm.

Hitta alla filer du behöver för den här handledningen här .

01. Kom igång

Öppna Pixate, och från välkomstskärmen klicka på "Skapa en ny prototyp". Välj önskat spara plats när du uppmanas, och namnge din fil.

När du klickar på Spara, blir du ombedd att välja den enhet du prototyper för. Detta behöver inte vara den enhet du förhandsgranskar på - För det här exemplet väljer vi Nexus 5. Du ska nu titta på en tom duk.

02. Importera dina bilder

Import all the necessary assets for your prototype

Importera alla nödvändiga tillgångar för din prototyp

För att börja, vill vi importera bilderna för den här handledningen. Du hittar alla tillgångar jag har använt här (Det är alla för en 3x prototyp). I det övre vänstra hörnet på skärmen klickar du på fliken Middle och klickar sedan på knappen '+'. Navigera till mappen där dina tillgångar är, välj alla och klicka på Öppna.

03. Lägg till och position

Nu vill vi lägga till och placera Fab och Icon-bilderna. I Pixate, när du drar tillgångar till duken, ska de skapas som ett lager och att lagets namn kommer att vara filnamnet på den bild du laddat upp. Så här hänvisar jag till lagren i hela den här handledningen.

Dra "fab_normal" till duken och placera det lager där du vill att faben ska sitta. Dra också "icon_add" tillgången och centrera den på fab. När du importerar "icon_add" och försök att snäppa den till faben, kommer den att snäppa lägre än mittpunkten. För att rätta till det här, slå upp pilen på ditt tangentbord tre gånger. Detta kommer att nudge det till det visuella centrumet.

04. Lägg till dina Fab-instanser

Add four instances of the FAB to your blank canvas

Lägg till fyra instanser av faben på din tomma duk

Lägg nu fyra instanser av "fab_option" till duken. Dra den första så bottengränsen snaps till toppen av "fab_normal" och är vertikalt mittjusterad.

Justera de återstående tre "fab_option" -lagren så att de är vertikalt mittlinjer och sitter ovanpå varandra. Så här visas Fab-menyn när den expanderas.

05. Lägg till alternativikoner

Lägg till alla alternativikoner ('icon_school', 'icon_flight', 'icon_cake' och 'icon_basket') till duken och anpassa var och en av dem med en förekomst av "Fab_Option" -knappen. Återigen, eftersom skuggan ingår i bildfilen, är cirkelns mitt inte mitten av skiktet. Du måste stöta på var och en av ikonerna om tre punkter så att de visas centrerade.

06. Lägg till den pressade fab

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

Placera ikonen "Fab_tryck" ovanpå den oprimerade versionen

Slutligen lägg till "Fab_pressed" till duken och placera den ovanpå "fab_normal". Nudge 'fab_pressed' så kanterna på cirkelmatchen 'fab_normal'. Det här är ungefär tre punkter ner från centrum-snapped inriktning.

07. Nestande lager

Nesting Lager inuti varandra skapar ett föräldra / barnförhållande. Detta gör att du kan applicera animationer till en grupp lager och få dem att animera som en enhet. Det uppnås genom att dra och släppa ett lager på ett annat i skiktlistan (längst upp till vänster på skärmen).

08. Nestalternativ ikonlager

Nest the option icon layers into their respective button layers

Nest alternativikonskikten i deras respektive knappslag

Boet alternativikonskikten i deras respektive knappslag. Till exempel, Nest 'icon_school' i sin motsvarande 'fab_Option' genom att dra in "Icon_School" -lagret på alternativets lagerlista.

09. Skölj och repear

Upprepa detta för alla menyalternativ, se till att du nar i ikonerna under alternativet Korrekt knapp. Känn dig fri att kollapsa alla alternativlagren för att förenkla lagerlistvyn.

10. Justera egenskaper

Omordna "Fab_pression" så det sitter under "icon_add" men ovanför "fab_normal". Välj nu 'icon_add' och klicka på '+' längst upp på laglistan. I panelen Skiktegenskaper (i det övre högra hörnet på skärmen) ändras bredden och höjdvärdena för att matcha "Fab_pressed" (80 x 92). Detta kommer att säkerställa att det interaktiva området omfattar hela Fab.

11. Lägg till en kran-interaktion

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

Ställ in färgfärg i egenskapspanelen för att transparent och lägga till en kran-interaktion

När du är i panelen Egenskaper, ställ in färgen Swatch för att transparent och placera skiktet så att det är centralt i linje med "Fab_pressed". Dra sedan en kran-interaktion på lagret i listan. Håll ner cmd och välj alla "Fab_OPTION" -lagren såväl som "Fab_pression", sedan Opacity till 0 . Ändra inte ikonlagernas opacitet! Eftersom du justerar föräldralagren är ikonlagren "opacitet ärvt från dem.

12. Rotera ikonen

Låt oss göra vår fabikon rotera på kranen. I Pixate kan animationer referera till tillståndet för ett annat lager. Detta låter dig ställa in en animering för att spela när ett villkor är uppfyllt. Vi vill rotera 'icon_add' så vi kan basera andra animationsbetingelser på den. Dra en rotera animering på 'icon_add' och ställ in följande alternativ. Baserat på: Tryck på lager och Knacka , OM: icon_addpng.rotation == 0 , Rotera till: -225 , Lättnadskurva: lätta ut och kubisk , Varaktighet: 0,3 .

13. Omvänd tillstånd

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

Lägg till ett omvändt tillstånd för att rotera ikonen tillbaka till sin ursprungliga position

Klicka på länken '+ tillstånd' längst ner i animationen och ställ in följande: annars om: icon_addpng.rotation! = 0 , Rotera till: 0 , Lättnadskurva: lätta ut och kubisk , Varaktighet: 0,3 .

14. Lägg till en fade-in

Adjust the settings so the FAB fades in on tap

Justera inställningarna så att faben bleknar in på kranen

Vi vill att Fab-alternativen ska blekna in på kranen. Så vi kan se vad vi gör, vi lägger till blekna in på alternativknapparna först. Dra en blekna animering till en alternativknapp och ställ in följande.

Baserat på: Tryck på lager och Knacka , OM: icon_addpng.rotation == 0 , Blekna till: 100 , Varaktighet: 0 . Sedan '+ tillstånd' och annat om: icon_addpng.rotation! = 0 , Blekna till: 0 , Lättnadskurva: lätta ut och kubisk . Gör det här för varje alternativknapp.

15. Skala saker ner

I riktlinjerna för materiella design skala upp när Faben tappas. Eftersom våra alternativ startar i full skala vill vi skala ner dem när prototypen laddas.

Dra en skala animering på en alternativknapp och ställ in följande alternativ. Baserat på: *SKÄRM* och Lastad , Skala x och skala y: 0 och varaktighet: 0. Välj det nedre mitten ankaren i ankargitteret. Gör det här för varje alternativknapp.

16. Animationsalternativ

These settings will apply our animation to the FAB

Dessa inställningar kommer att tillämpa vår animering till fab

Låt oss nu ställa in alternativen att expandera när faben tappas. Dra en skala animering på den översta knappen och ställ in alternativen som visas i skärmdumpen ovan.

17. Fördröja vågorna

När du lägger till den här animationen till resten av alternativknapparna, subtrahera 0,02 från Ifs fördröjningsegenskap. Det andra alternativet från toppen ska ha en fördröjning av 0,04 , den tredje kommer att ha en fördröjning av 0,02 , och den sista 0,0 . Nu kommer alternativen att skala en efter en.

18. Fler animeringsalternativ

Add these settings to emulate the FAB being pressed

Lägg till dessa inställningar för att emulera faben som pressas

Slutligen måste vi emulera faben som pressas. I materialdesign flyttas fabs skugga ner och suddig för att ge effekten av knappen som rör sig mot användaren när den tappas. Det här är lite knepigt att inledningsvis ta reda på, eftersom det kräver att vi korsar två separata lager.

Dra en blekna animering på "fab_normal" och "fab_pression" och applicera de inställningar som visas i skärmdumpen.

19. Klar att använda

Du kan nu använda den här filen för någon av dina prototyper. Genom att klicka på knappen längst upp till höger på duken kan du välja en Pixate-fil för att slå samman den som är öppen för tillfället. Detta låter dig lägga till komponenter som denna fab till prototyper som du redan arbetar med.

20. Anpassa!

Importera dina egna ikoner och ändra färgerna som du tycker är lämplig. Med stegen här kan du lägga till ytterligare Fab-alternativ och även ansluta efterföljande kranar och animeringar till alternativknapparna.

Håll ett öga ut för mer pixate materialdesignkomponenter från Google, och Design bort!

Denna artikel uppträdde ursprungligen i nätmagasin utgåva 281; köp det här .

Hur - Mest populära artiklar

Hur man testar reagerar webbplatser och appar

Hur Sep 14, 2025

(Bildkredit: Framtida) Om du vill veta hur man testar reagerar du på rätt ställe. Vet du verkligen din kod gör va..

Hur man animerar med mo.js-biblioteket

Hur Sep 14, 2025

(Bildkredit: Pexels / Frank Kagumba) Mo.js är ett unikt Motion Graphics JavaScript-bibliotek som inte bara underlät..

Hur man skapar en appikon i Illustrator

Hur Sep 14, 2025

Sida 1 av 2: Så här skapar du en appikon i Illustrator: Steg 01-11 Så här skapar du en appikon i Illustrator: Steg 01-11 ..

Hur man bygger komplexa layouter med CSS

Hur Sep 14, 2025

Layout för webben har alltid varit begränsad, det har verkligen aldrig varit något som verkligen är dedikerat till att göra ..

Hur man tar din vektorlogo från 2D till 3D

Hur Sep 14, 2025

I den här handledningen tittar vi på hur du kan ta dina vektorbaserade logotyper från Illustrator och Photoshop till Cinema 4D..

Topptips för att förfina dina handritade illustrationstekniker

Hur Sep 14, 2025

Jag har gjort pennkonst Sedan min barndom, när jag skulle bära en penna och papper runt med mig. Färgning och m..

Topptips för att skulptera en varelse i Zbrush

Hur Sep 14, 2025

För att visa att bygga en varelse i Zbrush använder jag den här delen av 3d konst Jag jobbar med, designad av ..

Hur man gör en flexibel bandrigg

Hur Sep 14, 2025

Bandriggar är ganska vanliga i 3d konst Produktionsriggar dessa dagar. De har ett liknande beteende för att anv�..

Kategorier