Prototipo Un pulsante di azione flottante in Pixate

Sep 14, 2025
Come si fa

Pixate consente di prototipare rapidamente i mockup mobili interattivi che possono essere visualizzati in anteprima sui dispositivi Android e IOS. In questo tutorial, lo useremo per costruire un pulsante di azione flottante (FAB) incluse le sub-opzioni. Esploreremo diverse tecniche e impostazioni in Pixate, come transizioni e condizioni.

I fab sono utilizzati per promuovere l'azione e attirare l'attenzione di un utente. Generalmente le principali funzioni di un'applicazione sono accessibili attraverso un favoloso. Il nostro favoloso sarà in uno stile di design materiale, che si presta a interfacce belle e sentendosi naturali. L'implementazione di materiale elementi di design è semplice se usi Le linee guida di Google. per riferimento.

Prima di immergersi, è importante capire che Pixate utilizza solo le immagini, quindi vorrai avere le risorse per il tuo progetto individuale pronto ed esportato nella necessaria densità dello schermo. Le immagini utilizzate in questo tutorial sono estratte direttamente dal Strato dell'autoadesivo del design del materiale . Ciò garantisce l'illuminazione, le ombre, le dimensioni e la sensazione generale degli elementi allineati con le linee guida. È possibile modificare il dispositivo che stai prototipando per selezionando l'opzione appropriata dal menu FLYOUT al centro della barra dei menu su tela.

Avrai anche bisogno dell'app Mobile Pixate per Android o IOS. Non importa quale dispositivo si visualizza in anteprima, poiché l'app ridimensiona automaticamente il prototipo per adattarlo allo schermo del dispositivo.

Trova tutti i file di cui hai bisogno per questo tutorial Qui .

01. Inizia

Apri Pixate, e dalla schermata di benvenuto, fai clic su "Crea un nuovo prototipo". Seleziona la tua posizione di salvataggio desiderata quando richiesto e nominare il tuo file.

Dopo aver fatto clic su Salva, ti verrà chiesto di scegliere il dispositivo per cui sei prototipazione. Questo non ha bisogno di essere il dispositivo che stai visualizzando in anteprima - per questo esempio, stiamo scegliendo il Nexus 5. Ora dovresti guardare una tela vuota.

02. Importa le tue immagini

Import all the necessary assets for your prototype

Importa tutte le risorse necessarie per il tuo prototipo

Per iniziare, vogliamo importare le immagini per questo tutorial. Troverai tutte le risorse che ho usato Qui (Questi sono tutti per un prototipo 3x). Nell'angolo in alto a sinistra dello schermo, fare clic sulla scheda centrale e quindi fare clic sul pulsante '+'. Passare alla cartella in cui sono le tue risorse, seleziona tutte e fare clic su Apri.

03. Aggiungi e posizione

Ora vogliamo aggiungere e posizionare le immagini FAB e ICON. In Pixate, quando trascini le risorse sulla tela, saranno creati come livello e il nome del livello sarà il nome del file dell'immagine che hai caricato. Questo è il modo in cui mi riferirò agli strati in questo tutorial.

Trascina 'Fab_normal' in tela e posizionare lo strato in cui vuoi che il favoloso sedersi. Trascina anche il bene 'icon_add' e centralo sul favoloso. Quando importi 'icon_add' e prova a scattarlo al favoloso, si scatena più in basso rispetto al punto centrale. Per correggere questo, premi la freccia su sulla tastiera tre volte. Questo lo spingerà al Visual Center.

04. Aggiungi le tue istanze Fab

Add four instances of the FAB to your blank canvas

Aggiungi quattro istanze del favoloso alla tua tela vuota

Ora aggiungi quattro casi di "Fab_option" alla tela. Trascina il primo in modo che il bordo inferiore scatta in cima a 'fab_normal' ed è allineato verticalmente al centro.

Allineare i restanti tre strati 'Fab_option', quindi sono allineati al centro verticalmente e seduti uno sopra l'altro. È così che apparirà il menu Fab quando è espanso.

05. Aggiungi le icone delle opzioni

Aggiungi tutte le icone di opzione ('icon_school', 'icon_flight', 'icon_cake' e 'icon_basket') alla tela e allineare ciascuno di essi con un'istanza del pulsante "Fab_option". Di nuovo, poiché l'ombra è inclusa nel file immagine, il centro del cerchio non è il centro del livello. Avrai bisogno di scontimare ciascuna delle icone circa tre punti in modo che appaiano centrato.

06. Aggiungi il favorito pressato

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

Posiziona l'icona 'Fab_pressi' in cima alla versione non frequente

Infine, aggiungi 'Fab_presso' alla tela e metterlo in cima a 'Fab_Normal'. Nudge 'Fab_presso' così i bordi della partita del cerchio 'fab_normal'. Questo è circa tre punti giù dall'allineamento del centro-scatto.

07. Strati nidificanti

I livelli nidificanti l'uno dall'altro crea una relazione genitore / figlio. Ciò consente di applicare animazioni a un gruppo di livelli e farli animare come un'unica unità. Si ottiene trascinando e rilasciando un livello su un altro nell'elenco del livello (nell'angolo in alto a sinistra dello schermo).

08. Strati dell'icona dell'opzione nido

Nest the option icon layers into their respective button layers

Nidificare gli strati dell'icona delle opzioni nei rispettivi livelli del pulsante

Nidificare gli strati dell'icona delle opzioni nei rispettivi livelli dei pulsanti. Ad esempio, nido 'icon_school' nel suo corrispondente 'Fab_option' trascinando lo strato 'icon_school' che elenca sul elenco dei livelli dell'opzione.

09. Risciacquare e ripristino

Ripeti questo per tutte le opzioni del menu, assicurandosi di annidare le icone sotto l'opzione pulsante corretto. Sentiti libero di comprimere tutti i livelli di opzione per semplificare la visualizzazione elenco di livello.

10. Regolare le proprietà

Riordina "Fab_presso" in modo che si sieda sotto 'icon_add' ma sopra 'fab_normal'. Ora seleziona 'icon_add' e fai clic su "+" nella parte superiore dell'elenco del livello. Nel pannello Proprietà Layer (nell'angolo in alto a destra dello schermo) Modificare i valori di larghezza e altezza per abbinare 'Fab_presso' (80 x 92). Ciò garantirà che l'area interattiva comprenda l'intero Fab.

11. Aggiungi un'interazione del rubinetto

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

Impostare il campione di colore nel pannello Proprietà su Trasparente e aggiungi un'interazione del rubinetto

Mentre nel pannello Proprietà, impostare il campione di colore in trasparente e posizionare il livello in modo che sia allineato al centro con 'Fab_presso'. Quindi trascinare un'interazione Toccare sul livello nell'elenco. Tenere premuto cmd. e seleziona tutti i livelli 'fab_option' così come 'fab_presso', quindi impostare l'opacità a 0. . Non cambiare l'opacità degli strati dell'icona! Dal momento che stai adeguando gli strati genitori, l'opacità degli strati dell'icona è ereditata da loro.

12. Ruota l'icona

Facciamo ruotare la nostra icona Fab sul rubinetto. In Pixate, le animazioni possono fare riferimento allo stato di un altro livello. Ciò consente di impostare un'animazione per giocare una volta soddisfatta una condizione. Vogliamo ruotare 'icon_add' in modo da poter basare le condizioni di altre animazioni su di esso. Trascina un'animazione di rotazione su 'icon_add' e imposta le seguenti opzioni. Basato su: Tocca layer. e Rubinetto , SE: icon_addpng.rotazione == 0. , Ruota a: -225. , Curva di allentamento: perizia e cubo , Durata: 0.3. .

13. Condizione inverso.

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

Aggiungi una condizione inverso per ruotare l'icona nella posizione originale

Clicca sul link '+ Condition' nella parte inferiore dell'animazione e imposta il seguente: altro se: icon_addpng.rotazione! = 0 , Ruota a: 0. , Curva di allentamento: perizia e cubo , Durata: 0.3. .

14. Aggiungi una dissolvenza

Adjust the settings so the FAB fades in on tap

Regola le impostazioni in modo che il Fab sfade in attacco

Vogliamo che le opzioni favolose svaniscano sul rubinetto. Quindi possiamo vedere cosa stiamo facendo, aggiungeremo prima la dissolvenza sui pulsanti delle opzioni. Trascina un'animazione di dissolvenza in un pulsante di opzione e impostare quanto segue.

Basato su: Tocca layer. e Rubinetto , SE: icon_addpng.rotazione == 0. , Svanire a: 100. , Durata: 0. . Quindi '+ condizione' e altro se: icon_addpng.rotazione! = 0 , Svanire a: 0. , Curva di allentamento: perizia e cubo . Fai questo per ogni pulsante di opzione.

15. scala le cose giù

Nelle linee guida di progettazione materiali, le opzioni scalano quando il Fab è tappato. Poiché le nostre opzioni iniziano a fondo scala, vogliamo ridimensionarli quando il prototipo carichi.

Trascina un'animazione di scala su un pulsante di opzione e impostare le seguenti opzioni. Basato su: *SCHERMO* e Caricato , Scala x e scala y: 0. e Durata: 0. Selezionare l'ancoraggio centrale nella griglia dell'ancora. Fai questo per ogni pulsante di opzione.

16. Opzioni di animazione

These settings will apply our animation to the FAB

Queste impostazioni applicheranno la nostra animazione al favoloso

Ora impostiamo le opzioni per espandere quando il Fab è sfruttato. Trascina un'animazione di scala sul pulsante più in alto e impostare le opzioni come mostrato nello screenshot sopra.

17. Ritardare le scale

Quando si aggiunge questa animazione al resto dei pulsanti di opzione, sottrarre 0,02 dalla proprietà di ritardo IF IF. La seconda opzione dall'alto dovrebbe avere un ritardo di 0,04. , il terzo avrà un ritardo di 0,02. , e l'ultimo 0.0. . Ora le opzioni ridurranno una dopo l'altra.

18. Altre opzioni di animazione

Add these settings to emulate the FAB being pressed

Aggiungi queste impostazioni per emulare il beb tasto premuto

Infine, abbiamo bisogno di emulare il bebing pressato. Nel design materiali, l'ombra del favolosa viene spostata verso il basso e sfocata per dare l'effetto del pulsante che si muove verso l'utente quando sfruttato. Questo è un po 'complicato per inizialmente capire, poiché ci richiede di sfregare due livelli separati.

Trascina un'animazione di dissolvenza su 'Fab_Normal' e 'Fab_presso' e applica le impostazioni mostrate nello screenshot.

19. Pronto all'uso

Ora puoi usare questo file per uno qualsiasi dei tuoi prototipi. Facendo clic sul pulsante in alto a destra della tela, è possibile selezionare un file pixate per fondersi in quello che è attualmente aperto. Questo ti consente di aggiungere componenti come questo fab a prototipi su cui stai già lavorando.

20. Personalizza!

Importa le tue icone e modifica i colori mentre vedi in forma. Con i passaggi qui è possibile aggiungere ulteriori opzioni sfascanti e persino collegare rubinetti e animazioni successive ai pulsanti delle opzioni.

Tieni d'occhio per più componenti di design del materiale pixato da Google e Design Away!

Questo articolo è originariamente apparso in Magazine netta Edizione 281; Compralo qui .

Come si fa - Articoli più popolari

14 Punte per flusso di lavoro Zbrush

Come si fa Sep 14, 2025

Tutti gli artisti hanno il proprio flusso di lavoro unico durante la creazione di arte 3D a Zbrush. Questo flusso di lavoro può ..

Creare un pennello in maglia di spostamento vettoriale

Come si fa Sep 14, 2025

Non perdere Vertex 2018. , il nostro evento di debutto per la comunità CG. Confezionato ..

Crea migliori animazioni del personaggio in Maya

Come si fa Sep 14, 2025

Ant Ward sarà uno dei nostri artisti che rispondono alle tue domande specifiche a Vertice ..

Come apportare enormi esplosioni con V-Ray

Come si fa Sep 14, 2025

La creazione e il compositivo delle esplosioni 3D è di solito un compito per due diversi artisti o dipartimenti di studio, ma qu..

Crea effetti pittori in Photoshop cc

Come si fa Sep 14, 2025

Adobe ha rilasciato due nuovi tutorial video per aiutarti a portare il tuo Photoshop Nuvola creativa abilità al l..

Groom Una creatura irresistibilmente pelosa

Come si fa Sep 14, 2025

Pagina 1 di 3: Pagina 1 Pagina 1 Pagina ..

Mock up AR Graphics con After Effects

Come si fa Sep 14, 2025

After Effects ha alcuni potenti strumenti che possiamo usare per imitare la realtà aumentata. Potresti trovare questo necessario se, ad esempio, volevi creare un video di pitch per mostrare ..

Crea uno sfondo basso poli in c4d

Come si fa Sep 14, 2025

Pagina 1 di 2: Crea uno sfondo basso poli in c4d: passi 01-06 Crea uno sf..

Categorie