Éléments communs utilisés dans la conception des boutons d'interface
Les boutons et les éléments de navigation sont probablement les objets d’interface les plus couramment utilisés dans les environnements de bureau et mobiles. Ils tirent une interface ensemble, permettant aux utilisateurs de passer de A à B en un seul clic.
Plus important encore, un bouton doit bien paraître. Il doit crier "Click me !," sinon ce ne sera tout simplement pas aussi efficace que nécessaire. Les boutons sont généralement utilisés pour "" Rechercher "," Soumettre "," Envoyer "," Acheter "et" Télécharger ".
Dans cet article, nous examinerons sept éléments de boutons courants dans la conception d'interfaces modernes: les textures, les motifs, les images 3D, les traits parfaits en pixels, les arrière-plans en retrait, les rayons lumineux et les hautes lumières.
Vous trouverez 35 exemples fantastiques de ces techniques ainsi qu'une poignée de mini-didacticiels pour Photoshop.
1. Textures
Utiliser la texture est un excellent moyen d'ajouter de la profondeur aux boutons et de les différencier un peu du reste de l'interface (et de les rendre plus cliquables). Voici quelques exemples de textures dans les boutons.
ShelfLuv utilise la texture pour ajouter de la dimension à son interface, en particulier dans les zones de bouton et de champ de texte.
La texture est utilisée partout dans cette interface, mais elle est plus lourde dans la zone des boutons "Upload", ce qui en fait un point focal.
La texture ici est bien mélangée avec le bouton biseauté, ce qui la rend réelle.
La texture n'est pas réellement utilisée sur ce bouton d'interface utilisateur, mais apparaît en arrière-plan, ce qui permet au bouton de se démarquer.
Créer un bouton texturé
Créez un arrière-plan simple à l'aide de l'outil Forme et en ajoutant du bruit (Filtre → Bruit → Ajouter du bruit).
Resélectionnez l'outil Forme et dessinez un rectangle, en vous assurant que le haut de celui-ci est masqué sur le bord du canevas.
Changez la couleur de la forme en bleu. J'ai utilisé # 00A3D9.
Dupliquez le calque Shape et redimensionnez-le dans la même position. Changez la couleur en un bleu légèrement plus foncé.
Dupliquez le calque une fois de plus. Placez le calque sous les deux derniers calques Shape et changez la couleur en gris clair.
Photographier ou télécharger une texture de papier (j'en ai utilisé une de Lost & Taken ). Allez dans Fichier → Place et localisez le fichier pour le placer dans le document. Redimensionnez-le et placez-le sur vos formes bleues.
Supprimez toute texture en excès à l'aide de l'outil Rectangle de sélection et modifiez le mode de fusion de la texture. Expérimentez avec différents modes car différentes textures produisent des résultats différents. Vous pouvez également vouloir réduire un peu les niveaux d'opacité.
Ouvrez la fenêtre Style de calque correspondant à votre forme bleue foncée et appliquez le style Ombre portée suivant pour ajouter une ombre blanche subtile.
Appliquez maintenant un trait à votre forme en utilisant les paramètres ci-dessous.
Enfin, ajoutez une ombre intérieure à la forme pour lui donner plus de dimension.
Ajoutez du texte au bouton et vous avez terminé!
2. Patterns
Les patterns sont un autre excellent moyen d'ajouter un peu d'intérêt et de profondeur aux boutons d'interface. Vous trouverez ci-dessous quelques exemples de motifs dans les boutons, tous subtils mais efficaces.
Une réflexion en diagonale est utilisée sur le côté gauche du bouton pour séparer l'icône du type.
Une ligne diagonale est utilisée dans ce bouton, ajustant l’aspect vintage tout en ajoutant une dimension à la conception.
Ceci est mon utilisation préférée d'un motif dans ces exemples. Bien qu'il ne soit pas utilisé dans les boutons eux-mêmes, le motif dans l'en-tête gris ajoute une dimension à l'ensemble du dessin et aide finalement les boutons orange à se démarquer.
Création d'un bouton de ruban à motifs
Après avoir créé un arrière-plan texturé à l'aide de la technique du mini-didacticiel précédent, dessinez un rectangle à l'aide de l'outil Forme et remplissez-le d'un bleu-vert. J'ai utilisé la couleur # 008B8D.
Dessinez une autre forme avec la même hauteur et la même couleur.
À l'aide de l'outil Lasso, créez un triangle, comme illustré ci-dessous. Placez-le sur le bord de la nouvelle forme et appuyez sur la touche "Supprimer" pour supprimer la zone dont nous n'avons pas besoin.
Dupliquez la forme et allez dans Édition → Transformer → Retourner horizontalement pour lui faire faire face dans la direction opposée.
Placez les deux formes sous la plus grande forme, comme indiqué ci-dessous.
Cliquez avec le bouton droit sur l'une de vos formes et ouvrez la fenêtre Options de fusion / Style de calque. Appliquez une superposition de dégradé similaire à celle ci-dessous. Vous pouvez également ajouter une ombre portée subtile. Une fois terminé, cliquez avec le bouton droit sur le calque et sélectionnez "Copier le style du calque". Sélectionnez votre autre forme de bannière. Cliquez avec le bouton droit de la souris et sélectionnez "Coller le style de calque". Ouvrez la fenêtre Style de calque et modifiez l'angle de votre incrustation de dégradé de 180 ° à 0 °.
À l'aide de l'outil Lasso, créez une sélection similaire à celle vue ci-dessous pour faire correspondre les deux coins de nos formes. Remplissez le avec une couleur encore plus sombre.
Dupliquez le calque, retournez-le horizontalement et positionnez-le de l'autre côté.
Créez un motif de ligne. Vous pouvez également utiliser celui que j'ai créé ci-dessous.
Collez le motif sur toute votre bannière. Tout en maintenant la touche Commande + Maj enfoncée, cliquez sur les vignettes de toutes les couches de votre bannière. Cela les sélectionnera tous. Cliquez avec le bouton droit de la souris et sélectionnez "Sélectionner l'inverse". Votre calque de motif de trait étant sélectionné, appuyez sur la touche "Supprimer" pour supprimer les zones du motif dont vous n'avez pas besoin.
Changez le mode de fusion du calque du motif pour "Multiplier" pour masquer le blanc du calque. Maintenant, laissez tomber l'opacité entre 25 et 75%. Expérimentez pour le meilleur résultat.
À l'aide de l'outil Forme, créez des lignes similaires à celles ci-dessous.
Supprimez les zones qui se trouvent sur l'arrière-plan de l'image.
Expérimentez avec le mode de mélange de chacune de vos lignes. Voici le résultat:
3. 3-D
Les boutons tridimensionnels sont parfaits car ils rendent les boutons beaucoup plus réalistes. Il est presque impossible de ne pas cliquer! Le seul inconvénient est que l'effet est plutôt ludique et ne convient donc pas à tous les sites Web (tels que les entreprises). Vous trouverez ci-dessous une sélection de jolis boutons 3D.
Les ombres et les lignes de 1 pixel mettent en évidence certaines zones et font apparaître le bouton 3D. Cela et certains bons effets CSS feraient un bouton super-interactif.
Notre deuxième élément (motifs) est également utilisé dans cette conception pour ajouter de la dimension à un bouton déjà très 3D.
Ce bouton adopte une approche légèrement différente, en s’appuyant uniquement sur des dégradés pour son aspect 3D.
Cet ensemble montre différentes hauteurs pour indiquer si le bouton est dans son état normal, en vol stationnaire ou actif. Les lignes et la texture donnent aux boutons une apparence plus réaliste.
Comme pour quelques autres exemples de cette section, une combinaison de dégradés et de traits fait apparaître ces boutons en 3D.
Ce bouton ressemble à 3-D en raison de sa conception "prête à l'emploi", qui est entourée de l'interface utilisateur.
Création d'un bouton 3D
Commencez par dessiner une forme avec l'outil Rectangle, avec un rayon de 7 pixels. Ouvrez la fenêtre Style de calque et appliquez une incrustation de dégradé allant du rouge foncé au rouge clair. Utilisez un rouge encore plus clair à la toute fin de la barre de dégradé pour mettre en évidence le haut de ce qui sera notre bouton 3D.
Appliquez maintenant un trait au bouton. Changez le type de remplissage en "Dégradé" pour pouvoir modifier la couleur du haut et du bas du trait. Passer d'un rouge clair à un rouge foncé (l'inverse de la superposition de dégradé).
Cela devrait ressembler à quelque chose comme ceci:
Dupliquez le calque Shape. Poussez le calque d'origine d'environ 10 pixels.
Appliquez une ombre portée au calque d'origine en utilisant les paramètres affichés dans la capture d'écran ci-dessous.
En outre, assombrissez la superposition en dégradé en rendant chaque couleur de la barre de dégradé un peu plus sombre.
Vous devriez avoir quelque chose qui ressemble à ceci:
Sélectionnez l'outil Texte et tapez quelque chose sur le bouton. Ouvrez la fenêtre Style de calque et appliquez une incrustation de dégradé similaire à celle ci-dessous:
Appliquez une ombre intérieure en utilisant ces paramètres:
Appliquez une ombre portée en utilisant ces paramètres:
Et on a fini! Vous devriez vous retrouver avec quelque chose comme ceci:
4. Coups de Pixel-Perfect
L'art de perfectionner les pixels est devenu partie intégrante de tous les aspects de la conception de l'interface utilisateur, pas seulement des boutons. Les lignes d'un pixel (ou traits) donnent aux boutons une profondeur et un aspect légèrement 3D. Ils font aussi apparaître les boutons en retrait. Voici quelques exemples brillants de cela.
Vous pouvez clairement voir qu'une ligne blanche (superposée) de 1 pixel est utilisée en surbrillance en haut du bouton rouge, avec une ligne plus sombre en bas. Cela le fait apparaître légèrement 3D et ajoute beaucoup de détails à la page.
La typographie de ce bouton a une ombre interne, ce qui fait apparaître le bouton comme s’il se trouve au-dessus de l’interface.
Ces boutons uniquement en CSS3 (absolument pas de Photoshop) ont des traits de 1 pixel qui les font ressortir de l’arrière-plan et apparaissent en retrait lorsque vous cliquez dessus.
Un autre exemple d'un trait léger de 1 pixel en haut du bouton sert de point culminant.
Ce bouton vert montre une approche légèrement différente, avec une lueur intérieure agissant comme un point culminant en haut du bouton. Le coup à l'extérieur crée une ombre très fine.
Encore un autre bouton combinant les techniques susmentionnées.
Ce bouton de base a un trait fin et une ombre portée délicate pour se démarquer du design simple.
Ce bouton a une lueur intérieure subtile pour le faire ressortir de l'arrière-plan. Son état actif a une opacité réduite, ce qui fait l'affaire.
Oubliez le bouton: tout ce design est parfait, avec sa typographie moderne et ses lignes, ce qui en fait une belle interface utilisateur.
Créer un bouton Pixel-Perfect
Sélectionnez l'outil Rectangle Shape (situé dans la barre d'outils en haut de Photoshop lorsque l'outil Shape est sélectionné) et attribuez-lui un rayon de 5 pixels. Dessinez un rectangle noir similaire à celui ci-dessous.
Ouvrez la fenêtre Style de calque et appliquez une incrustation de dégradé à la forme. J'ai utilisé un vert foncé à un vert légèrement plus clair.
Donnez à la forme un trait dégradé, passant d'un vert à un vert toujours plus sombre.
Donnez maintenant à la forme un style Inner Shadow blanc, en utilisant les paramètres ci-dessous.
Et maintenant, une ombre portée, avec une taille de 0 pixel et une opacité de seulement 5%.
Trouvez une icône sur Internet (ou créez la vôtre) et placez-la dans votre document en allant dans Fichier → Place, en la positionnant correctement. Appliquez une incrustation de dégradé.
Donnez à l'ombre intérieure de votre icône une distance de 1 pixel et l'ombre portée blanche une distance de 1 pixel. Cela fait que l'icône semble avoir été gravée dans le bouton.
Ajoutez du texte au bouton et appliquez un effet d'ombre portée de faible opacité à l'aide de la fenêtre Style de calque. Voici le résultat:
5. Arrière-plans en retrait
Un arrière-plan en retrait donne l'impression qu'un bouton y est enfoncé, ce qui confère au bouton une profondeur et un intérêt visuel. Voici quelques bons exemples de cela.
Cet arrière-plan de bouton a une ombre intérieure subtile pour le faire apparaître en retrait.
Les dégradés inversés dans cet arrière-plan font apparaître les boutons en retrait.
Une combinaison de traits et d'ombres portées donne plus de profondeur à ces boutons.
Cet arrière-plan de bouton comporte plusieurs styles, notamment un dégradé, une ombre interne et une ombre portée.
Cet arrière-plan de bouton indenté est beaucoup plus petit que ce que nous avons vu mais suit toujours les mêmes techniques.
Encore une fois, une ombre portée et une ombre interne sont utilisées pour créer un retrait.
6. brille
Les éclairages sont une technique assez difficile à concevoir dans les interfaces, et ne sont généralement visibles que dans les interfaces sombres (bien que nous voyions un exemple ci-dessous). Ces exemples montrent comment différentes sources de lumière peuvent être utilisées.
Une lueur est utilisée à l’intérieur de ce bouton, ce qui lui confère une mise en évidence complète.
Les brillances sont habilement utilisées pour faire ressortir la typographie de ce bouton du fond sombre. Et les lueurs rendent les barres de chargement réalistes.
Les lueurs sont couramment utilisées dans les interfaces sombres pour l'iPhone. Nous voyons ici une lueur autour de la typographie lorsque le bouton est dans son état actif.
La lueur légère et assez subtile donne à ce bouton le coup de pouce dont il a besoin pour devenir beau.
Création d'un bouton lumineux
En utilisant à nouveau l’outil Rectangle Shape, dessinez un rectangle, cette fois avec un rayon de 3 pixels. Appliquez une superposition de dégradé similaire à celle ci-dessous. Donnez à vos couleurs centrales une position de "49" et "50".
Appliquez l'ombre intérieure suivante.
Appliquez l'ombre portée suivante.
Appliquez la lueur extérieure suivante.
Ajoutez une typographie au bouton. Vous devriez vous retrouver avec un résultat agréable, propre et incroyablement facile à produire comme ceci:
7. Faits saillants
Les faits saillants donnent aux boutons profondeur, intérêt visuel et cliquabilité. Les exemples ci-dessous le prouvent.
Une simple forme blanche à faible opacité est utilisée dans la partie supérieure de ce bouton pour lui donner un peu de profondeur et l'aider à s'adapter à l'interface rouge et gris.
Comme avec beaucoup d'autres boutons dans cet article, un trait de 1 pixel met en évidence celui-ci.
Les dégradés légers à foncés ou clairs servent de reflets et d’ombre pour ces boutons.
Ce message a été écrit exclusivement pour WDD par Callum Chapman l'homme derrière Magasin Picmix et Blog de la Circlebox .
Quels modèles de boutons utilisez-vous le plus et pourquoi? Avez-vous trouvé un taux de clics supérieur pour certaines conceptions? S'il vous plaît partager ci-dessous ...