web-dev-qa-db-fra.com

Quelle est la meilleure pratique pour les boutons "supprimer" dans la conception de matériaux?

De nombreux systèmes de conception/guides de style définissent le rouge comme la couleur des boutons "supprimer"/"effacer"/désinstaller/erreur. Dans la conception matérielle, je n'ai pas trouvé cela spécifié.

Alors, quelle est la meilleure pratique?

Je pense que les options sont:

  • bouton avec la couleur primaire comme arrière-plan;
  • bouton avec la couleur secondaire comme arrière-plan;
  • bouton avec le rouge en arrière-plan;
  • lien.

enter image description here

enter image description here

gui-designbuttonsmaterial-designcall-to-actiondelete
5
Madalina Taina

Eh bien, après avoir parcouru le documentation il me semble que quand il s'agit de la façon dont le bouton doit apparaître, la règle est que il n'y a pas de règle .

Cependant, il y a quelques choses à noter par leurs documents:

  1. Évitez d'utiliser des boutons d'action flottants pour les actions mineures et destructives.
  2. Les actions affirmatives sont placées à droite et poursuivent le processus. Les actions affirmatives peuvent être destructives, comme "Supprimer" ou "Supprimer".

En dehors de cela, vous êtes libre de personnaliser vos boutons à votre guise.

Maintenant, personnellement, je crois que le comportement destructeur est toujours quelque chose que vous devez traiter avec un soin particulier en demandant à l'utilisateur de confirmer son action ou en lui permettant de l'annuler. Bien sûr, cela n'a rien à voir avec la couleur. En ce qui concerne l'apparence du bouton, je pense que les conventions courantes s'appliquent, ce qui a été discuté ailleurs sur ce site .

Je dirais que les directives impliquent l'utilisation de la couleur secondaire est ce que vous devez faire. La capture d'écran que vous avez utilisée pour l'application pizza montre la couleur secondaire pour la désinstallation (ce qui est un comportement assez destructeur) pour les options bien et mauvais lorsque vous réfléchissez si vous devez ajouter un arrière-plan à vos boutons.

Ainsi, mon vote est pour l'option 2 (la plupart du temps): bouton avec la couleur secondaire comme arrière-plan

enter image description hereenter image description here

4
invot

Vous pouvez souligner ou désaccentuer un élément en fonction de sa fonction. Les actions destructrices peuvent être minimisées.

emphasize or de-emphasize button

1
Garik

Dans les boîtes de dialogue (comme votre première capture d'écran), la norme est :

Les actions de dialogue utilisent les couleurs système par défaut, mais elles doivent refléter la palette de couleurs de votre produit. Utilisez une couleur contrastante, telle que la couleur d'accentuation de la palette , pour distinguer les actions de la boîte de dialogue du contenu de la boîte de dialogue.

Les boutons désactivés (liens ou boutons) doivent être désactivés jusqu'à ce qu'ils deviennent disponibles.

Pour les boutons sans boîte de dialogue, assurez-vous que le bouton destructeur est à droite et demande une confirmation. Une couleur unie forte est une bonne amélioration - ne faites pas en sorte que le bouton "Annuler" soit désactivé par contraste. Le rouge peut être utilisé pour souligner la destructivité (cela est fréquemment observé dans la conception iOS), mais s'il s'agit d'une couleur de marque, il peut être utilisé partout dans l'application.

0
Stacy H