Protótipo Um botão de ação flutuante em pixate

Sep 12, 2025
Como

O pixate permite que você proteja rapidamente os maquetes móveis interativos que podem ser visualizados em dispositivos Android e iOS. Neste tutorial, vamos usá-lo para construir um botão de ação flutuante (Fab), incluindo sub-opções. Exploraremos diferentes técnicas e configurações em pixate, como transições e condições.

Fabs são usados ​​para promover a ação e atrair a atenção do usuário. Geralmente, as principais funções do aplicativo são acessadas por meio de uma fab. Nossa Fab vai estar em um estilo de design de material, que se presta a interfaces bonitas e naturais. Implementando elementos de design de material é simples se você usar Diretrizes do Google. para referência.

Antes de mergulhar, é importante entender que a pixate usa apenas imagens, então você desejará ter os ativos para o seu projeto individual pronto e exportado para a densidade de tela necessária. As imagens usadas neste tutorial são puxadas diretamente do Folha de etiqueta de design de material . Isso garante a iluminação, sombras, tamanho e sensação geral dos elementos se alinham com as diretrizes. Você pode alterar o dispositivo que você está prototipando selecionando a opção apropriada no menu Flyout no centro da barra de menus da tela.

Você também precisará do aplicativo móvel Pixate para Android ou iOS. Não importa qual dispositivo você está visualizando, pois o aplicativo irá dimensionar automaticamente o protótipo para atender a tela do seu dispositivo.

Encontre todos os arquivos que você precisa para este tutorial aqui .

01. Comece

Abra o pixate, e da tela de boas-vindas, clique em 'Criar um novo protótipo'. Selecione seu local de salvar desejado quando solicitado e nomeie seu arquivo.

Depois de clicar em Salvar, você será solicitado a escolher o dispositivo que você está prototipando. Isso não precisa ser o dispositivo que você está visualizando - para este exemplo, estamos escolhendo o Nexus 5. Você deve agora estar olhando para uma tela em branco.

02. Importe suas imagens

Import all the necessary assets for your prototype

Importar todos os ativos necessários para o seu protótipo

Para começar, queremos importar as imagens para este tutorial. Você encontrará todos os ativos que usei aqui (Estes são todos para um protótipo 3X). No canto superior esquerdo da tela, clique na guia do meio e clique no botão '+'. Navegue até a pasta onde seus ativos são, selecione todos eles e clique em Abrir.

03. Adicionar e Posição

Agora queremos adicionar e posicionar as imagens Fab e ícone. Em pixate, quando você arrasta ativos para a tela, eles serão criados como uma camada e o nome da camada será o nome do arquivo da imagem que você carregou. É assim que vou me referir às camadas ao longo deste tutorial.

Arraste 'fab_normal' para a tela e posicione a camada onde você deseja que a fab se sente. Também arraste o ativo 'Icon_Add' e centralize-o no Fab. Quando você importa 'icon_add' e tente encaixá-lo para o FAB, ele será encaixado menor que o ponto central. Para corrigir isso, aperte a seta para cima no teclado três vezes. Isso vai cutucar para o centro visual.

04. Adicione suas instâncias Fab

Add four instances of the FAB to your blank canvas

Adicione quatro instâncias do Fab para sua tela em branco

Agora adicione quatro casos de 'fab_option' para a tela. Arraste o primeiro para que a borda inferior se encaixa para o topo do 'fab_normal', e é alinhada verticalmente.

Alinhe as camadas restantes de três 'fab_option' para que eles se alinhem verticalmente e sentados em cima uns dos outros. É assim que o menu Fab aparecerá quando é expandido.

05. Adicione os ícones da opção

Adicione todos os ícones da opção (icon_school ', icon_flight', icon_cake 'e' icon_basket ') para a tela e alinhe cada um deles com uma instância do botão' fab_option '. Mais uma vez, porque a sombra está incluída no arquivo de imagem, o centro do círculo não é o centro da camada. Você precisará aumentar cada um dos ícones de cerca de três pontos para que pareçam centrados.

06. Adicione o Fab pressionado

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

Coloque o ícone 'fab_pressed' no topo da versão não comprimida

Finalmente, adicione 'fab_pressed' à tela e coloque-o em cima de 'fab_normal'. Nuche 'fab_pressed' então as bordas do círculo partem 'fab_normal'. Isso é cerca de três pontos do alinhamento estalado pelo centro.

07. Camadas de aninhamento

Camadas de aninhamento dentro uns dos outros cria um relacionamento pai / filho. Isso permite que você aplique animações a um grupo de camadas e tenha animado como uma unidade. Ele é conseguido arrastando e soltando uma camada para outra na Lista de Camada (no canto superior esquerdo da tela).

08. Camadas de ícone de opção de ninho

Nest the option icon layers into their respective button layers

Ninho as camadas de ícone de opção em suas respectivas camadas de botão

Ninho as camadas de ícone de opção em suas respectivas camadas de botão. Por exemplo, aninho 'icon_school' em seu correspondente 'fab_option' arrastando a listagem da camada 'Icon_School' na listagem da camada da opção.

09. Enxaguar e respeitar

Repita isso para todas as opções de menu, certificando-se de que você esteja aninhando os ícones sob a opção Botão correto. Sinta-se à vontade para recolher todas as camadas de opções para simplificar a exibição da lista de camadas.

10. Ajuste as propriedades

Reordenar 'fab_pressed' por isso fica abaixo "Icon_add", mas acima "fab_normal". Agora selecione 'icon_add' e clique no '+' na parte superior da lista de camadas. No painel Propriedades da Camada (no canto superior direito da tela), altere os valores de largura e altura para corresponder "fab_pressed" (80 x 92). Isso garantirá que a área interativa engloba toda a FAB.

11. Adicione uma interação de toque

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

Defina a amostra de cores no painel Propriedades para transparente e adicione uma interação de toque

Enquanto no painel Propriedades, defina a amostra de cores para transparente e coloque a camada para que seja alinhado no centro com 'fab_pressed'. Em seguida, arraste uma interação para a camada na lista. Calma cmd. e selecione todas as camadas 'fab_option', bem como 'fab_pressed' e, em seguida, definir opacidade para 0. . Não mude a opacidade das camadas de ícone! Desde que você está ajustando as camadas pai, a opacidade das camadas de ícone é herdada deles.

12. Gire o ícone

Vamos fazer nosso ícone Fab girar na torneira. Em pixate, as animações podem se referir ao estado de outra camada. Isso permite que você defina uma animação para jogar uma vez que uma condição seja atendida. Queremos girar 'icon_add' para que possamos basear outras condições de animações. Arraste uma animação de rotação para 'ICON_ADD' e defina as seguintes opções. Baseado em: Toque na camada e Toque , E SE: icon_addpng.rotation == 0. , Gire para: -225. , Facilitando a curva: facilitar e cúbico , Duração: 0.3. .

13. Condição inversa

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

Adicione uma condição reversa para girar o ícone de volta à sua posição original

Clique no link '+ Condition' na parte inferior da animação e defina o seguinte: Else se: icon_addpng.rotation! = 0 , Gire para: 0. , Facilitando a curva: facilitar e cúbico , Duração: 0.3. .

14. Adicione um fade-in

Adjust the settings so the FAB fades in on tap

Ajuste as configurações para que a FAB se desvanece no toque

Queremos que as opções fab se desvanjam na torneira. Para que possamos ver o que estamos fazendo, vamos adicionar o desaparecer nos botões de opção primeiro. Arraste uma animação de fade para um botão de opção e defina o seguinte.

Baseado em: Toque na camada e Toque , E SE: icon_addpng.rotation == 0. , Fade para: 100. , Duração: 0. . Então '+ condição' e mais se: icon_addpng.rotation! = 0 , Fade para: 0. , Facilitando a curva: facilitar e cúbico . Faça isso para cada botão de opção.

15. Escala as coisas para baixo

Nas diretrizes de design de material, as opções escalam quando a FAB é tocada. Como nossas opções começam em escala total, queremos arrancá-las quando o protótipo carrega.

Arraste uma animação de escala em um botão de opção e defina as seguintes opções. Baseado em: *TELA* e Carregado , Escala x e escala y: 0. e duração: 0. Selecione a âncora média-média na grade de âncora. Faça isso para cada botão de opção.

16. Opções de animação.

These settings will apply our animation to the FAB

Essas configurações aplicarão nossa animação ao Fab

Agora vamos definir as opções para expandir quando a FAB é tocada. Arraste uma animação de escala no botão superior e defina as opções conforme mostrado na captura de tela acima.

17. atrasar as escalas

Ao adicionar essa animação ao resto dos botões de opção, subtraia 0,02 da propriedade de atraso da IF. A segunda opção do topo deve ter um atraso de 0.04. , o terceiro terá um atraso de 0.02. , e o último 0.0. . Agora as opções vão escalar um após o outro.

18. Mais opções de animação

Add these settings to emulate the FAB being pressed

Adicione essas configurações para imitar a fab sendo pressionada

Finalmente, precisamos emular o Fab sendo pressionado. Em design material, a sombra do Fab é deslocada e borrada para dar o efeito do botão se movendo em direção ao usuário quando tocado. Isso é um pouco complicado para descobrir inicialmente, já que requer que nos crossfadeis duas camadas separadas.

Arraste uma animação fade para 'fab_normal' e 'fab_pressed' e aplique as configurações mostradas na captura de tela.

19. Pronto para usar

Agora você pode usar este arquivo para qualquer um dos seus protótipos. Ao clicar no botão no canto superior direito da tela, você pode selecionar um arquivo de pixate para se fundir para o que está aberto no momento. Isso permite que você adicione componentes como este Fab para protótipos que você já está trabalhando.

20. Personalize!

Importe seus próprios ícones e altere as cores como você vê em forma. Com as etapas aqui, você pode adicionar opções fab adicionais e até mesmo ligar para torneiras e animações subseqüentes para os botões de opção.

Fique de olho para mais componentes de design de material de pixate do Google e design!

Este artigo originalmente apareceu em Revista Net. edição 281; compre aqui .

Como - Artigos mais populares

Como evitar um Dia da Amazon Prime 2020 Falha

Como Sep 12, 2025

(Crédito da imagem: Amazon) Embora ainda não sabemos a data exata de Amazon Prime Day 2020 No entant..

O Guia Essencial para Foreshortening na arte

Como Sep 12, 2025

(Crédito da imagem: Rob Lunn) Se você está se perguntando o que o escorço na arte é, temos certeza de que você ..

Como preparar um arquivo para impressão

Como Sep 12, 2025

Como um art trabalhista em Wieden + Kennedy. Londres, I. Design para impressão regularmente. Exist..

Como construir layouts complexos usando CSS

Como Sep 12, 2025

O layout para a web sempre foi limitado, realmente nunca houve algo realmente dedicado a tornar o conteúdo fácil de exibir em u..

Baixar arquivos para 3D World 232

Como Sep 12, 2025

Para baixar os arquivos acompanhantes para o mundo 3D do mundo 232, basta clicar no link abaixo de cada artigo e um arquivo zip b..

Como gerenciar classes CSS com JavaScript

Como Sep 12, 2025

Ao desenvolver projetos da Web simples que envolvem a interação do usuário, a melhor forma de gerenciar as mudanças de estado..

Idade Uma fotografia no Photoshop CC

Como Sep 12, 2025

Envelhecer uma fotografia no Photoshop é uma técnica clássica que pode transformar até mesmo uma imagem de cores HO-HUM, em a..

Criar uma cena ocupada da cidade no Illustrator

Como Sep 12, 2025

A melhor cidade é uma cidade movimentada, mas aquela atmosfera ocupada não é uma coisa fácil de capturar com sucesso. No enta..

Categorias