Prototype d'un bouton d'action flottant en pixate

Sep 11, 2025
Comment

Le pixate vous permet de prototyser rapidement des maquettes mobiles interactives pouvant être prévisualisées sur les périphériques Android et iOS. Dans ce tutoriel, nous allons l'utiliser pour créer un bouton d'action flottant (FAB), y compris des sous-options. Nous explorerons différentes techniques et paramètres en pixate, tels que des transitions et des conditions.

Les fabs sont utilisés pour promouvoir l'action et attirer l'attention d'un utilisateur. Généralement, les fonctions principales d'une application sont accessibles via un FAB. Notre fabrique va être dans un style de design matériel, qui se prête à des interfaces magnifiques et naturelles. La mise en œuvre des éléments de conception des matériaux est simple si vous utilisez Les directives de Google pour référence.

[dix]

Avant de plonger, il est important de comprendre que le pixate utilise uniquement des images, vous souhaiterez donc avoir les actifs de votre projet individuel prêt et exporté vers la densité d'écran nécessaire. Les images utilisées dans ce tutoriel sont tirées directement de la Feuille d'autocollant de conception de matériaux . Cela garantit que l'éclairage, les ombres, la taille et la sensation générale des éléments s'alignent sur les directives. Vous pouvez modifier le périphérique que vous prototypage en sélectionnant l'option appropriée dans le menu Flyout au centre de la barre de menus sur toile.

Vous aurez également besoin de l'application Pixate Mobile pour Android ou iOS. Peu importe le périphérique que vous prévisuez, car l'application permettra automatiquement le prototype pour adapter l'écran de votre appareil.

Trouvez tous les fichiers dont vous aurez besoin pour ce tutoriel ici .

01. Commencez

Ouvrez le pixate et à partir de l'écran de bienvenue, cliquez sur "Créer un nouveau prototype". Sélectionnez votre emplacement d'enregistrement souhaité lorsque vous êtes invité et nommez votre fichier.

Une fois que vous avez cliqué sur Enregistrer, vous serez invité à choisir le périphérique que vous prototypage. Cela n'a pas besoin d'être l'appareil que vous avez prévisualisé - pour cet exemple, nous choisissons le Nexus 5. Vous devriez maintenant regarder une toile vierge.

02. Importez vos images

Import all the necessary assets for your prototype

Importer tous les actifs nécessaires à votre prototype

Pour commencer, nous voulons importer les images de ce tutoriel. Vous trouverez tous les actifs que j'ai utilisés ici (Celles-ci sont toutes pour un prototype 3x). Dans le coin supérieur gauche de l'écran, cliquez sur l'onglet Milieu, puis sur le bouton '+'. Naviguez jusqu'au dossier où vos actifs sont, sélectionnez tous et cliquez sur Ouvrir.

03. Ajouter et position

Maintenant, nous voulons ajouter et positionner les images Fab et icon. En pixate, lorsque vous faites glisser des actifs vers la toile, ils seront créés en tant que couche et que le nom de la couche sera le nom de fichier de l'image que vous avez téléchargée. C'est ainsi que je vais faire référence aux couches tout au long de ce tutoriel.

Faites glisser 'fab_ormal' sur la toile et positionnez le calque où vous voulez que le Fab soit assis. Faites également glisser l'actif «icon_add» et centrez-le sur le fab. Lorsque vous importez 'icon_add' et essayez de le casser sur le fabrique, il s'abposera plus bas que le point central. Pour corriger cela, appuyez sur la flèche vers le haut sur votre clavier trois fois. Cela le poussera au centre visuel.

04. Ajoutez vos instances fabuleuses

Add four instances of the FAB to your blank canvas

Ajouter quatre instances du Fab à votre toile vierge

Ajoutez maintenant quatre instances de 'fab_option' à la toile. Faites glisser le premier afin que la bordure inférieure s'enclenche au sommet de «fab_ormal» et est alignée verticalement.

Alignez les trois couches «FAB_OPTION» restantes afin qu'ils soient alignés verticalement et assis sur l'autre. C'est ainsi que le menu FAB apparaîtra lorsqu'il est étendu.

05. Ajouter les icônes d'option

Ajoutez toutes les icônes d'option ('icon_school', 'icon_flight', 'icon_cake' et "icon_basket") à la toile et alignez chacune d'elles avec une instance du bouton "FAB_OPTION". Encore une fois, parce que l'ombre est incluse dans le fichier image, le centre du cercle n'est pas le centre de la couche. Vous aurez besoin de heurter chacune des icônes environ trois points afin qu'ils apparaissent centrés.

06. Ajouter le Fab pressé

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

Placez l'icône 'Fab_primé' en haut de la version non expressée

Enfin, ajoutez «Fab_imprimé» à la toile et placez-le sur «fab_normal». NUGLE 'FAB_PRESSED' afin que les bords du cercle correspondent 'fab_ormal'. Il s'agit d'environ trois points de l'alignement cassé central.

07. Couches de nidification

Les couches de nidification à l'intérieur créent une relation parent / enfant. Cela vous permet d'appliquer des animations à un groupe de couches et de les faire animer comme une unité. Il est réalisé en faisant glisser une couche sur une autre dans la liste de calques (dans le coin supérieur gauche de l'écran).

08. Couleurs d'icône Option Nest Option

Nest the option icon layers into their respective button layers

Nidez les couches d'icônes d'option dans leurs couches de boutons respectives

Nidez les couches d'icônes d'option dans leurs couches de bouton respectives. Par exemple, nid 'icon_school' dans son "fab_option" correspondant en faisant glisser la liste "icon_school" de la liste dans la liste des calques de l'option.

09. Rincer et réparer

Répétez cette opération pour toutes les options de menu, en vous assurant d'imbriquer les icônes sous l'option de bouton appropriée. N'hésitez pas à réduire toutes les couches d'options pour simplifier la vue de la liste de calques.

10. Ajuster les propriétés

Réorganiser "Fab_Pressed", donc il est assis sous 'icon_add' mais au-dessus 'fab_ormal'. Maintenant, sélectionnez 'icon_add' et cliquez sur "+" en haut de la liste de calques. Dans le panneau Propriétés de la couche (dans le coin supérieur droit de l'écran), changez les valeurs de largeur et de hauteur pour correspondre 'fab_primé' (80 x 92). Cela garantira que la zone interactive englobe tout le monde.

11. Ajouter une interaction TAP

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

Définissez l'échantillon de couleurs dans le panneau Propriétés sur Transparent et ajoutez une interaction TAP

Bien que dans le panneau Propriétés, définissez l'échantillon de couleur sur transparent et placez le calque afin qu'il soit central-aligné avec 'fab_primé'. Faites glisser une interaction sur le calque dans la liste. Enfoncer cmd et sélectionnez toutes les couches 'fab_option' ainsi que 'fab_primé', puis définissez l'opacité à 0 . Ne changez pas l'opacité des couches d'icônes! Puisque vous ajustez les couches parents, l'opacité des couches d'icônes est héritée d'eux.

12. Faites pivoter l'icône

Faisons notre icône fab rotation sur le robinet. En pixate, les animations peuvent faire référence à l'état d'une autre couche. Cela vous permet de définir une animation pour jouer une fois qu'une condition est remplie. Nous voulons faire pivoter 'icon_add' afin que nous puissions baser les conditions d'autres animations à ce sujet. Faites glisser une animation de rotation sur "icon_add" et définissez les options suivantes. Basé sur: Calque et Robinet , SI: icon_addpng.rotation == 0 , Tournez à: -225 , Courbe d'assouplissement: mettre en place et cubique , Durée: 0.3 .

13. Condition inversée

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

Ajoutez une condition inverse pour faire pivoter l'icône à sa position d'origine

Cliquez sur le lien "+ condition" en bas de l'animation et définissez ce qui suit: sinon si: icon_addpng.rotation! = 0 , Tournez à: 0 , Courbe d'assouplissement: mettre en place et cubique , Durée: 0.3 .

14. Ajouter un fondu

Adjust the settings so the FAB fades in on tap

Ajustez les paramètres afin que le faff s'efface sur le robinet

Nous voulons que les options fabuleuses s'effondrent à Tap. Nous pouvons donc voir ce que nous faisons, nous allons ajouter le fondu sur les boutons d'option d'abord. Faites glisser une animation FADE sur un bouton d'option et définissez ce qui suit.

Basé sur: Calque et Robinet , SI: icon_addpng.rotation == 0 , Fondu au: 100 , Durée: 0 . Puis '+ condition' et sinon si: icon_addpng.rotation! = 0 , Fondu au: 0 , Courbe d'assouplissement: mettre en place et cubique . Faites cela pour chaque bouton d'option.

15. Échelle les choses

Dans les lignes directrices de conception des matériaux, options augmente lorsque le FAB est exploité. Étant donné que nos options commencent à la pleine échelle, nous souhaitons les augmenter lorsque le prototype charge.

Faites glisser une animation d'échelle sur un bouton d'option et définissez les options suivantes. Basé sur: *ÉCRAN* et Chargé , Échelle x et échelle y: 0 et durée: 0. Sélectionnez l'ancre moyenne moyenne dans la grille d'ancrage. Faites cela pour chaque bouton d'option.

16. Options d'animation

These settings will apply our animation to the FAB

Ces paramètres appliqueront notre animation à la fabrique

Maintenant, réglons les options pour développer lorsque le FAB est exploité. Faites glisser une animation d'échelle sur le bouton le plus haut et définissez les options comme indiqué dans la capture d'écran ci-dessus.

17. Retarder les échelles

Lorsque vous ajoutez cette animation au reste des boutons d'option, soustrayez 0,02 de la propriété de retard de si. La deuxième option du sommet devrait avoir un retard de 0.04 , le troisième aura un retard de 0.02 , et le dernier 0.0 . Maintenant, les options vont à l'échelle une après l'autre.

18. Plus d'options d'animation

Add these settings to emulate the FAB being pressed

Ajoutez ces paramètres pour imiter le FAB étant pressé

Enfin, nous devons imiter le Fab pressé. Dans la conception du matériau, l'ombre du fab est décalée et floue pour donner l'effet du bouton se déplacer vers l'utilisateur lors de la prise en charge. Ceci est un peu délicat pour déterminer initialement, car cela nous oblige à franchir deux couches distinctes.

Faites glisser une animation de FADE sur 'fab_ormal' et "fab_primé" et appliquez les paramètres indiqués dans la capture d'écran.

19. Prêt à utiliser

Vous pouvez maintenant utiliser ce fichier pour l'un de vos prototypes. En cliquant sur le bouton en haut à droite de la toile, vous pouvez sélectionner un fichier pixate à fusionner dans celui qui est actuellement ouvert. Cela vous permet d'ajouter des composants comme ce Fab aux prototypes que vous travaillez déjà.

20. Personnaliser!

Importer vos propres icônes et modifier les couleurs comme vous le voyez. Avec les étapes, vous pouvez ajouter des options fabuleuses supplémentaires et même connecter des robinets et des animations ultérieures aux boutons d'option.

Gardez un œil sur des composants de conception de matériaux de pixate de Google et de la conception!

Cet article est apparu à l'origine dans magazine net numéro 281; Achetez-le ici .

Comment - Most Popular Articles

Votre stockage Apple iCloud est-il complet? Voici comment libérer de l'espace

Comment Sep 11, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Apple) [DIX] Le service icloud d'apple est..

Illustration de la carte: Guide étape par étape

Comment Sep 11, 2025

Illustration de la carte Une UE UNE RÉELLE RÉSURGENCE AU COURS DES DERNIÈRES Années. UNE alternative Passionnante à une carte Google Schéche, des Cartes Illustrées Événées d'êtres ..

Obtenez votre tête autour de réagir avec ces cinq facteurs

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] L'apprentissage réagit, la bibliothèque JavaScript pour la création d'inte..

4 Conseils d'optimisation des images essentielles

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Quelques développeurs chanceux et cet auteur a eu l'occasion de tech Modifie..

Tout ce que vous devez savoir sur le nouveau nœud.js 8

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] La dernière version majeure de Node.js apporte de nombreuses améliorations ..

Comment utiliser des outils numériques pour créer une apparence dessinée à la main

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] L'édition et l'illustration permettent de ressentir numériquement, en parti..

Construire une interface utilisateur basée sur une carte avec fondation

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] À base de carte mises en page de site web ont..

Comment créer un Geofilter Snapchat dans Photoshop

Comment Sep 11, 2025

Les clients recherchent constamment de nouvelles façons de s'engager avec des publics. Geofilters Snapchat - Superpositions communicatives spéciales - sont un excellent moyen d'obtenir une ..

Catégories