prototip un buton de acțiune plutitor în Pixate

Sep 14, 2025
să

Pixate vă permite să transmiteți rapid prototipurile mobile interactive care pot fi previzualizate pe dispozitivele Android și IOS. În acest tutorial, o vom folosi pentru a construi un buton de acțiune plutitor (FAB), inclusiv sub-opțiuni. Vom explora diferite tehnici și setări în pixate, cum ar fi tranzițiile și condițiile.

Fab-urile sunt folosite pentru a promova acțiunea și pentru a atrage atenția unui utilizator. În general, funcțiile principale ale aplicației sunt accesate printr-un FAB. Fab-ul nostru va fi într-un stil de design material, care se îndreaptă spre interfețe frumoase, de sentiment natural. Implementarea elementelor de proiectare a materialelor este simplă dacă utilizați Ghidul Google pentru trimitere.

Înainte de scufundări, este important să înțelegeți că Pixate utilizează numai imagini, astfel încât să doriți să aveți activele pentru proiectul dvs. individual gata și exportat la densitatea ecranului necesară. Imaginile utilizate în acest tutorial sunt trase direct de la Fișă de autocolant de proiectare a materialelor . Acest lucru asigură iluminatul, umbrele, dimensiunea și simțul general al elementelor care se aliniază cu liniile directoare. Puteți modifica dispozitivul pe care îl prototiști prin selectarea opțiunii corespunzătoare din meniul Flyout din centrul barei de meniu Canvas.

De asemenea, veți avea nevoie de aplicația mobilă Pixate pentru Android sau iOS. Nu contează ce dispozitiv vă previzualizați, deoarece aplicația va scala automat prototipul pentru a se potrivi ecranului dispozitivului.

Găsiți toate fișierele de care aveți nevoie pentru acest tutorial Aici .

01. Începeți

Deschideți pixate și din ecranul de întâmpinare faceți clic pe "Creați un nou prototip". Selectați locația dvs. de salvare dorită când vi se solicită și numele fișierului.

Odată ce faceți clic pe Salvați, vi se va cere să alegeți dispozitivul pe care îl prototiști. Acest lucru nu trebuie să fie dispozitivul pe care îl previzualizați - pentru acest exemplu, alegem Nexus 5. Ar trebui să vă uitați acum la o panza goală.

02. Importați imaginile

Import all the necessary assets for your prototype

Importați toate activele necesare pentru prototipul dvs.

Pentru a începe, dorim să importăm imaginile pentru acest tutorial. Veți găsi toate activele pe care le-am folosit Aici (Acestea sunt toate pentru un prototip 3x). În colțul din stânga sus al ecranului, faceți clic pe fila Middle și apoi faceți clic pe butonul "+". Navigați la dosarul în care sunt activele dvs., selectați toate și faceți clic pe Deschidere.

03. Adăugați și poziționați

Acum vrem să adăugăm și să poziționăm imaginile Fab și Icon. În Pixate, când trageți activele în panza, acestea vor fi create ca un strat și numele stratului va fi numele fișierului imaginii pe care ați încărcat-o. Acesta este modul în care mă voi referi la straturile din acest tutorial.

Glisați "Fab_normal" la panza și poziționați stratul în care doriți să stați Fab. De asemenea, glisați activul "icon_add" și centrați-l pe Fab. Când importați "icon_add" și încercați să îl fixați la Fab, acesta va fi mai mic decât punctul central. Pentru a corecta acest lucru, apăsați pe săgeata sus de pe tastatură de trei ori. Acest lucru îl va lăsa la centrul vizual.

04. Adăugați instanțele FAB

Add four instances of the FAB to your blank canvas

Adăugați patru cazuri ale Fab-ului în panza voastră goală

Acum adăugați patru cazuri de "Fab_option" la panza. Trageți primul astfel încât marginea de jos se fixează în partea de sus a lui "fab_normal" și este aliniată pe verticală a centrului.

Aliniați restul de trei straturi "Fab_option", astfel încât acestea sunt aliniate la nivel vertical și așezate unul pe altul. Acesta este modul în care se va afișa meniul Fab atunci când este extins.

05. Adăugați pictogramele de opțiuni

Adăugați toate pictogramele de opțiuni ("icon_school", "icon_flight", "icon_cake" și "icon_basket") în panza și aliniați fiecare dintre ele cu o instanță a butonului "Fab_option". Din nou, deoarece umbra este inclusă în fișierul imagine, centrul cercului nu este centrul stratului. Va trebui să vă bucurați de fiecare dintre pictogramele cu trei puncte, astfel încât să pară centrate.

06. Adăugați Fab presat

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

Plasați pictograma "fab_prese" în partea de sus a versiunii neprevătate

În cele din urmă, adăugați "fab_presed" la pânză și puneți-l pe partea de sus a lui "Fab_normal". Notă "Fab_Presed", astfel încât marginile cercului se potrivesc "fab_normal". Aceasta este la aproximativ trei puncte în jos de la alinierea centrală.

07. Straturile de cuibărit

Straturile de cuibărit în interiorul unuia dintre ele creează o relație părinte / copil. Acest lucru vă permite să aplicați animații unui grup de straturi și să le animați ca o singură unitate. Se realizează prin tragerea și scăderea unui strat pe altul în lista de straturi (în colțul din stânga sus al ecranului).

08. Pictograma cuiburilor Pictograme

Nest the option icon layers into their respective button layers

Cuibați straturile de pictograme ale opțiunii în straturile de pe butonul respectiv

Cuibați straturile de pictograme ale opțiunii în straturile de butoane respective. De exemplu.

09. Clătiți și repetați

Repetați acest lucru pentru toate opțiunile de meniu, asigurându-vă că ați cuibărit pictogramele sub opțiunea Buton corect. Simțiți-vă liber să redați toate straturile de opțiuni pentru a simplifica vizualizarea listei de straturi.

10. Reglați proprietățile

Reordonați "fab_presed", astfel încât acesta stă mai jos "icon_add", dar deasupra "fab_normal". Acum, selectați "icon_add" și faceți clic pe "+" din partea de sus a listei de straturi. În panoul proprietăților stratului (în colțul din dreapta sus al ecranului), modificați valorile lățimii și înălțimii pentru a se potrivi cu "Fab_Presed" (80 x 92). Acest lucru va asigura ca zona interactivă să cuprindă întregul Fab.

11. Adăugați o interacțiune cu robinet

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

Setați swatchul de culori în panoul de proprietăți la transparent și adăugați o interacțiune cu robinet

În timpul panoului Proprietăți, setați modelul de culori la transparent și plasați stratul astfel încât acesta să fie aliniat central cu "fab_presed". Apoi glisați o interacțiune la stratul din listă. Țineți apăsat cmd. și selectați toate straturile "fab_option", precum și "fab_presed", apoi setați opacitatea la 0. . Nu modificați opacitatea straturilor de pictograme! Deoarece ajustați straturile părinte, opacitatea straturilor de pictograme este moștenită de la ei.

12. Rotiți pictograma

Să facem ca pictograma FAB să se rotească pe robinet. În pixate, animațiile se pot referi la starea unui alt strat. Acest lucru vă permite să setați o animație pentru a juca odată ce o condiție este îndeplinită. Vrem să rotim "icon_add", astfel încât să putem baza condițiile altor animații pe ea. Glisați o animație rotativă pe "icon_add" și setați următoarele opțiuni. Bazat pe: Atingeți stratul și Atingeți , DACĂ: icon_addpng.rotation == 0. , Rotiți la: -225. , Curba de relaxare: Ușor și cub , Durată: 0.3. .

13. Condiție inversă

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

Adăugați o condiție inversă pentru a roti pictograma înapoi în poziția inițială

Faceți clic pe linkul "+ condiție" din partea de jos a animației și setați următoarele: altfel dacă: Icon_addpng.rotation! = 0 , Rotiți la: 0. , Curba de relaxare: Ușor și cub , Durată: 0.3. .

14. Adăugați o dispariție

Adjust the settings so the FAB fades in on tap

Reglați setările astfel încât FAB să dispară la atingere

Vrem ca opțiunile Fab să se estompeze la atingere. Așadar, putem vedea ce facem, vom adăuga mai întâi se estompează butoanele de opțiune. Trageți o animație de decolorare la un buton de opțiune și setați următoarele.

Bazat pe: Atingeți stratul și Atingeți , DACĂ: icon_addpng.rotation == 0. , Se estompează la: 100. , Durată: 0. . Apoi "+ condiție" și altfel dacă: Icon_addpng.rotation! = 0 , Se estompează la: 0. , Curba de relaxare: Ușor și cub . Faceți acest lucru pentru fiecare buton de opțiune.

15. Scala lucrurile în jos

În liniile directoare de proiectare a materialelor, opțiunile scară până când Fab este atins. Deoarece opțiunile noastre încep la scară completă, dorim să le scarăm în jos atunci când se încarcă prototipul.

Glisați o animație la scară pe un buton de opțiune și setați următoarele opțiuni. Bazat pe: *ECRAN* și Încărcat , Scară x și scară y: 0. , și durata: 0. Selectați ancora de mijloc în grila de ancorare. Faceți acest lucru pentru fiecare buton de opțiune.

16. Opțiuni de animație

These settings will apply our animation to the FAB

Aceste setări vor aplica animația noastră la Fab

Acum, să stabilim opțiunile să se extindă când Fab-ul este lovit. Glisați o animație pe scară pe butonul cel mai înalt și setați opțiunile așa cum se arată în ecranul de ecran de mai sus.

17. Întârzieți scalele

Când adăugați această animație la restul butoanelor de opțiuni, scădeți 0,02 din proprietatea întârziată. A doua opțiune din partea de sus ar trebui să aibă o întârziere a 0.04. , al treilea va avea o întârziere de 0.02. , și ultimul 0.0. . Acum, opțiunile se vor scala unul după altul.

18. Mai multe opțiuni de animație

Add these settings to emulate the FAB being pressed

Adăugați aceste setări pentru a emula Fabul apăsat

În cele din urmă, trebuie să emităm Fab fiind apăsat. În designul materialului, umbra lui Fab este deplasată în jos și încețoșată pentru a da efectul butonului care se deplasează spre utilizator când este atins. Acest lucru este un pic mai complicat pentru a vă imagina inițial, deoarece ne cere să traversăm două straturi separate.

Trageți o animație de decolorare pe "Fab_normal" și "Fab_Presed" și aplicați setările afișate în captura de ecran.

19. Gata de utilizare

Acum puteți utiliza acest fișier pentru oricare dintre prototipurile dvs. Făcând clic pe butonul din partea dreaptă sus a panzei, puteți selecta un fișier pixat pentru a fuziona în cel care este în prezent deschis. Acest lucru vă permite să adăugați componente ca acest FAB la prototipurile pe care le lucrați deja.

20. Personalizați-vă!

Importați propriile icoane și modificați culorile după cum doriți. Cu pașii de aici puteți adăuga opțiuni FAB suplimentare și chiar conectați robinetele și animațiile ulterioare la butoanele de opțiune.

Păstrați un ochi pentru mai multe componente de design de materiale Pixate de la Google, și design departe!

Acest articol a apărut inițial în revista netă Ediția 281; Cumpărați-l aici .

să - Cele mai populare articole

22 cele mai bune instrumente de design UI

să Sep 14, 2025

(Credit Imagine: Invision) O selecție a celor mai bune instrumente de design UI va ajuta cu aproape fiecare proces d..

Cum de a juca Photoshop într-o imagine

să Sep 14, 2025

(Credit Imagine: Viitor, Matt Smith) Învățând cum să fotografiați pe cineva într-o imagine este o abilitate su..

Folosiți Framer X pentru a construi prototipuri interactive

să Sep 14, 2025

(Credit Imagine: Framer) Ca designeri, există întotdeauna problema instrumentelor de prototipare pe care ar trebui ..

Cum să vă perfecționați portofoliul de proiectare

să Sep 14, 2025

Portofoliul dvs. deține cheia pentru a obține următorul proiect în geantă, astfel încât merită o atenție deosebită. De asemenea, este important să vă amintiți că nu este nicioda..

Cum să pictați un castel cu schițe

să Sep 14, 2025

Există o serie de Tehnici de artă care vă poate ajuta cu pictura digitală, dar nu există nici o negare a cre�..

Vopsea pe o plasă 3D cu instrumentul polipant al lui Zbrushcore

să Sep 14, 2025

Polypaint in ZBRUSHCORE. este un instrument fantastic care vă permite să adăugați culori și texturi la modelu..

Înțelegerea proprietății afișajului CSS

să Sep 14, 2025

E miezul nopții și asta div Pe site-ul dvs. încă arată ca pieptul unui copil al copilului. Toate elementele s..

Ce este nou în unghiul 4?

să Sep 14, 2025

Pagina 1 din 2: Pașii 1-10. Pașii 1-10. ..

Categorii