web-dev-qa-db-fra.com

Quelles règles Google utilise-t-il pour créer un bouton gris, bleu ou rouge sur leurs sites?

Cela a été un sujet difficile à atteindre, et je n'ai pas encore pu tirer ma propre conclusion sur le raisonnement de Google pour rendre un bouton donné bleu, rouge ou gris, compte tenu de leur dernière conception. Prenez la page Drive, par exemple:

enter image description here

En général, sur ces types de pages, ils rendront le bouton à gauche rouge et les autres gris, mais je l'ai vu plus sporadique sur leurs autres sites.

J'aime l'apparence simple et je voulais adopter quelque chose de similaire pour mon site, mais j'ai du mal à concevoir les règles d'interface utilisateur que les développeurs doivent suivre pour choisir quel bouton est quelle couleur. Peut-être que les actions définitives à grande échelle sont des boutons rouges, les actions de routine sont grises et les nouvelles fonctionnalités sont bleues? Je ne sais pas, mais j'ai pensé voir si quelqu'un avait des idées, ou peut-être même une source pour ces informations.

Merci.

42
MegaMatt

La capture d'écran suivante est tirée du discours de Jon Wiley à Xweek 2011 ( vidéo originale ). Il explique les décisions de conception prises par google au cours des derniers mois.

Meanings of color in google buttons

Regardez vers la fin (après la minute 27) de la vidéo pour la voir par vous-même:

  • le rouge est pour "créer quelque chose"
  • le vert est pour "partager quelque chose"
  • le bleu signifie "faire quelque chose" (par exemple, soumettre un formulaire)

Gardez à l'esprit que cela peut être légèrement obsolète. Par exemple, dans la dernière version de google + pour Android, google a commencé à utiliser les couleurs d'une manière différente. Dans tous les cas, la vidéo vaut le détour, car de nombreux exemples sont faits et le processus qui a conduit Google à cette conception est clairement décrit.

43
Daniele

Je classerais les boutons gris comme des utilitaires. Actions qui ne créent/modifient/détruisent pas d'objets. Par exemple: les boutons gris de votre capture d'écran tournent autour de la modification de l'interface utilisateur ou du comportement de l'application.

  • Trier
  • Change de vue
  • Règlements
1
BabblingComet