Bouton

Le bouton est un des fondamentaux de votre interface utilisateur. Il permet à l'utilisateur de savoir qu'une action est possible et d'exécuter cette action. C'est un intermédiaire indispensable entre votre utilisateur et votre application.

Apparence d'un bouton

Quand l'utilisateur clique sur un bouton, ce bouton exécute l'action qui lui est associée. Il est important de préciser à l'utilisateur l'objet de ce bouton en utilisant un label, une image (icône) ou les deux.

Pour créer un bouton, vous pouvez insérer une image ou bien créer votre bouton depuis PandaSuite Studio à l'aide d'une forme vectorielle, d'un texte et éventuellement d'une icône.

Le design d'un bouton répond à de nombreuses conventions et dépend de son usage (mobile, iOS, Android etc.). Pour trouver le bon design, n'hésitez pas à vous inspirer d'UI kits ou d'aller faire un tour sur Dribbble.

💡 Voici un article très intéressant qui présente les bonnes pratiques de cet élément UI : 7 Basic Rules for Button Design (UX Planet)

Etats d'un bouton

Le bouton a un état par défaut. Vous pouvez changer l'état de ce bouton en fonction d'une action de l'utilisateur. C'est un bon moyen d'informer l'utilisateur que quelque chose se produit en conséquence de ses actions.

Vous pouvez créer plusieurs états pour un même bouton en variant le design : Normal, En cours, Désactivé etc..

Pour créer plusieurs états d'un bouton, insérez le composant Multi-état et créez votre bouton par défaut à l'intérieur. Ajoutez ensuite autant d'états que vous le souhaitez en variant le design en fonction de la symbolique.

Créer une action

Communément l'utilisateur tape ou clique sur le bouton pour déclencher l'action.

Sélectionnez le bouton et choisissez le déclencheur Tape / Clique et l'action : Aller à un écran, Ouvrir une pop-up, Ouvrir une URL... Si vous avez utilisé le composant Multi-état, ajoutez une autre action pour changer l'état du bouton.