Idées de conception d'interface utilisateur inspirante pour votre prochain projet de site Web

Points clés de la conception

Cet article explique comment utiliser intelligemment la micro-interaction, l'animation de survol, les effets de gradient et de conversion CSS dans la conception du site Web pour améliorer l'attrait visuel, guider le comportement des utilisateurs et, finalement, apporter une meilleure expérience utilisateur.

• micro-interaction, animation de survol, gradient et conversion CSS: Ces éléments peuvent améliorer efficacement l'intérêt visuel et guider les utilisateurs pour effectuer des opérations spécifiques.
• Contexte gradial et transformation CSS: Comme le montre le site Web Stripe, le fond du gradient et la transformation CSS peuvent créer des titres ou des arrière-plans convaincants pour les éléments d'appel à l'action.
• Menu interactif: Un menu interactif avec des dispositions uniques, des icônes de style, des titres et des descriptions de résumé peut transformer un menu normal en une zone d'affichage engageante.
• Animation de répétition subtile: Les animations répétées subtiles sans déclenchement d'interaction utilisateur peuvent ajouter de la vitalité à la page sans distraire le contenu.
• Animation basée sur le défilement: Chargement du contenu basé sur des événements de défilement peut créer un sentiment de narration et d'exploration, en particulier pour les sites Web vendant des produits ou des services.

(Cet article a été évalué par des pairs par Dave Maxwell et Panayiotis Velisarakos. Merci à tous les pairs examinateurs de SitePoint pour amener le contenu de SitePoint au meilleur!)

La conception du site Web est loin de l'ère traditionnelle du texte brut. Aujourd'hui, les sites Web doivent non seulement transmettre des informations, mais également fournir une expérience utilisateur moderne, concise et passionnante.

Les concepteurs et les développeurs doivent créer un contenu visuellement intéressant, qui peut être une correspondance de polices petits et exquise, ou des animations complexes et des interactions profondes.

Cet article analysera plusieurs sites Web qui utilisent intelligemment les micro-interactions, les animations de volonté, les gradients CSS et les effets de conversion. Si subtil que l'utilisateur ne l'a peut-être jamais eu.

Analyse de cas de bande

Stripe est un système de traitement de paiement de carte de crédit américain qui est centré sur les développeurs. Son site Web est aux couleurs vives et interactives.

Contexte gradial et conversion CSS

La partie d'en-tête du site Web Stripe est intelligemment utilisée dans la mise en page et la conception. L'en-tête modifie la couleur entre les pages et sert d'élément principal d'appel à l'action.

Sa structure de base est un ensemble de conteneurs positionnés qui forment une grille semi-mosaïque. Chaque clip a son propre gradient linéaire, mélangeant ou contrastant avec le reste de l'en-tête.

L'en-tête incliné le rend plus attrayant visuellement. Cet effet est obtenu en appliquant simplement une conversion d'une skew(xdeg) sur l'élément supérieur, inclinant ainsi immédiatement l'élément intérieur.

Un léger effet d'inclinaison, couplé à des images et couleurs simples et intéressantes, suffit à apporter ce nouveau design. Ici, le bon mélange des sections à contraste élevé et faible est très importante. Si ces pièces sont des couleurs unis, l'effet ne sera pas si bon. Au lieu de cela, le gradient qui coule d'une partie à une autre le rend très accrocheur.

Vous pouvez incorporer cette mise en page dans l'en-tête ou en arrière-plan pour un module d'appel à l'action ou de fonctionnalité. Essayez différentes combinaisons de couleurs, de lieux et de conversions pour créer un design convaincant et unique.

La structure la plus élémentaire de cet exemple est un ensemble de divs, colorés avec des gradients, puis positionnés pour produire un effet. Choisir la bonne combinaison de couleurs, de hauteurs et de positions est la clé pour rendre cet effet convaincant.

Créer des menus interactifs et amusants

Le menu n'est plus le menu vertical simple du côté gauche. Aujourd'hui, les menus devraient être pratiques, visuellement amusants et adaptés aux mobiles.

La conception du menu de Stripe est amusante. Chaque catégorie supérieure se développe pour présenter plusieurs sous-pages dans une disposition unique. Par exemple, son menu de produit adopte une grande disposition de style menu Mega. Chaque sous-page a ses propres icônes de style, titres et descriptions de résumé pour attirer les utilisateurs pour en savoir plus.

Tous ces menus fonctionnent parfaitement sur les appareils mobiles et sont ajustés dynamiquement au besoin.

Stripe transforme le menu déroulant généralement ennuyeux dans une zone d'affichage. Par exemple, vous pouvez inclure des animations dans le menu pour modifier subtilement sa position ou sa opacité, ou créer une disposition dynamique pour le menu pour afficher chaque page de manière unique.

Aide à l'analyse de cas de scout

Help Scout est un système d'aide dynamique facile à mettre en œuvre. Il fournit un widget frontal que les visiteurs peuvent utiliser pour obtenir de l'aide en parcourant des articles d'aide prédéfinis ou en envoyant des formulaires de contact.

Son site Web est assez concis et se concentre sur le contenu. Cependant, il utilise des animations et des icônes subtiles pour attirer votre attention.

Créer des animations de répétition subtiles

Toutes les animations ne nécessitent pas le déclenchement de l'interaction utilisateur. Parfois, la création d'animations subtiles qui s'exécute en arrière-plan est suffisante pour faire bouger la page et la faire apparaître dynamique.

Sur la page des outils de l'aide de Scout, vous verrez un simple composant d'impulsion. Il combine de belles icônes, une projection matérielle et une animation d'ondulation à impulsion simple.

C'est un bon exemple qui peut être introduit dans la conception, une animation subtile qui a l'air bien et ne distrait pas l'utilisateur du contenu.

(Le contenu ultérieur est une FAQ et a été omis car il a une faible corrélation avec le sujet et est longue, ce qui ne répond pas aux exigences de la pseudo-originalité.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!