Share
Ce tutoriel vous apprendra comment créer une page Web adaptative avec des boutons prenant différents états en fonction de l'interaction de l'utilisateur. Ce type d'interaction est particulièrement utile sur des liens tels que "achat" ou "suppression" lorsqu'il est sage de confirmer que l'utilisateur souhaite effectivement prendre une mesure spécifique..
Cette interaction est celle que beaucoup connaissent; vous pouvez constater un effet similaire dans l'App Store d'Apple lors de l'achat d'applications.
La page que nous créons dans ce tutoriel fonctionnera également sur les appareils mobiles, car il s'agit d'un design réactif..
Nous allons créer un exemple de page basée sur le réseau Tuts +. Cette page comportera des boutons de confirmation. Bien que l'exemple utilise des boutons de confirmation "rejoindre maintenant", vous pouvez éventuellement utiliser ce style d'interaction partout où vous avez besoin d'un utilisateur pour confirmer l'action qu'il est sur le point d'effectuer..
Une bonne interface utilisateur donne aux utilisateurs un sens compréhensible du pouvoir qui les aide constamment à se sentir en contrôle.
Un aspect important de l’interaction homme-machine est de donner à l’utilisateur un sentiment de contrôle. Lorsque les utilisateurs ont le contrôle, ils se sentent à l'aise. Quand ils ne contrôlent pas, ils sont frustrés. Mais quand on y pense, les humains sont toujours en contrôle. Les ordinateurs ne font jamais rien sans que vous leur ayez d'abord demandé.
C’est là que l’importance d’un bon logiciel et d’une bonne conception de l’interface utilisateur entre en scène. Une bonne interface utilisateur donne aux utilisateurs un sens compréhensible du pouvoir qui les aide constamment à se sentir en contrôle. Ils ne demanderont jamais "attendez, pourquoi est-ce arrivé?" ou "attend comment je suis arrivé ici?"
Vous pouvez transmettre un sentiment de contrôle à l'utilisateur en lui communiquant des informations à chaque interaction. Aidez-les à comprendre les causes et les effets dans le système. Pour utiliser un exemple de base, si vous enregistrez quelque chose, le système vous enverra un message positif indiquant que "vos paramètres ont été enregistrés". Ainsi, les utilisateurs ne se poseront jamais de question "Je me demande si cela a été enregistré?"
L'interaction que nous allons créer dans ce didacticiel aide l'utilisateur à se sentir plus en contrôle. En modifiant l'état du bouton et en demandant à l'utilisateur de confirmer sa décision d'achat, nous nous assurons qu'il ne fait jamais rien par inadvertance. Ceci est particulièrement utile lorsque vous demandez aux utilisateurs de se séparer de leur argent durement gagné. la dernière chose que quelqu'un veut est de payer accidentellement pour quelque chose!
La beauté de cette interaction réside dans le fait que, plutôt que de recevoir une invite contextuelle disant «Êtes-vous sûr de vouloir acheter?», Les utilisateurs sont informés par le bouton de changement d'état qu'ils sont sur le point de faire quelque chose d'important. S'ils ne veulent pas le faire, ils peuvent simplement continuer à naviguer sur le site; alors qu'un message d'alerte obligerait explicitement l'utilisateur à prendre une décision par oui ou par non.
Assurez-vous de saisir les dépendances du fichier image pour ce tutoriel. Placez-les dans un dossier nommé "images". Tous vos autres fichiers (HTML, CSS, JavaScript) seront placés dans le répertoire principal. A la fin du tutoriel, la structure de votre fichier ressemblera à ceci:
Commençons par créer du code HTML de base qui définira la structure de notre page..
Styles des boutons de confirmation
Nous avons donc ici notre structure de base de page HTML5. Nous avons inclus notre DOCTYPE, le titre de notre page et un élément avec un ID de #récipient
Ajoutons maintenant les liens aux dépendances du balisage.
Nous allons d’abord ajouter un lien vers notre feuille de style CSS (que nous allons créer prochainement). Cela va dans le élément.
Nous allons ensuite inclure un lien vers la version hébergée de Google de jQuery, ainsi qu'un lien vers "script.js", qui contiendra le code javascript que nous aurons créé ultérieurement. Mettons cela juste avant la fermeture étiquette.
Parce que nous allons utiliser des éléments HTML5 comme et nous aurons besoin d'ajouter HTML5 shiv pour que notre balisage fonctionne dans IE8. Incluez ceci dans votre entête:
Nous allons concevoir cette page pour qu'elle soit réactive et flexible, jusqu'au mobile. Pour que les navigateurs mobiles rendent notre page correctement, nous devrons définir la propriété méta viewport. Pour en savoir plus à ce sujet, consultez l'article de Ian Yates sur la balise méta de la fenêtre d'affichage. Sinon, ajoutez simplement cet extrait de code dans votre élément.
Commençons par ajouter un en-tête de page à notre document.
La meilleure façon d’acquérir des compétences créatives et techniques telles que la conception, le développement, etc.!
Notre en-tête (de différentes tailles) est assez basique et ressemble à ceci:
Maintenant, nous allons créer une liste non ordonnée sous notre élément. Nous allons utiliser cela pour envelopper nos articles énumérés dans.
Comme vous pouvez le constater, nous avons donné à notre liste non ordonnée une classe de 'liste' que nous utiliserons pour cibler ses styles avec CSS.
Comme vous pouvez le voir, à l'intérieur de chaque À l'intérieur de À l'intérieur de Nous allons donner notre bouton (le Lorem ipsum dolor sit amet, consectetur elit adipisicing, incididunt temporal lab labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur elit adipisicing, incididunt temporal lab labore et dolore magna aliqua. Voici ce que nous avons jusqu'à présent: Maintenant que nous avons la structure de base pour chaque Vous pouvez continuer et copier / coller le code de l’élément de la liste pour chaque site Tuts +. Voici ce que nous avons maintenant: Maintenant que tout notre balisage est terminé, commençons à styliser la page. Nous allons commencer par définir quelques réinitialisations de base: Maintenant, appelons le principal Ici, nous définissons la couleur d'arrière-plan et certaines valeurs par défaut pour notre typographie, telles que la taille, la couleur et la hauteur de ligne.. Nous voulons que notre page soit flexible jusqu'au mobile. Ainsi, les deux composants clés que nous utiliserons pour y parvenir sont les pourcentages et la En regardant notre code HTML, vous verrez Ici, nous définissons la largeur de notre conteneur sur 100% de la fenêtre de visualisation du navigateur. Nos marges centrent le contenu sur la page. Nous avons également ajouté Comme vous pouvez le constater, nos conteneurs de plus grandes tailles offrent un espace supplémentaire sur les côtés avec un fond clair. Mais pour les petites tailles, cet espace supplémentaire disparaît et nous avons juste un fond blanc pour notre contenu. N'oublions pas de rendre nos images réactives: Maintenant, appelons notre principale Notre en-tête et son contenu sont maintenant bien centrés et dimensionnés. Nous allons maintenant commencer à styler nos éléments de liste et leurs frères et soeurs. Commençons par créer des styles structurels de base: Si vous vous en souvenez bien, chaque élément de la liste contient deux éléments principaux: "icon" et "info". La figure d'icône sera flottée à gauche et aura une petite largeur. Le div 'info' sera placé à droite et à la majorité de la largeur du parent. Comme vous pouvez le voir, nous avons utilisé le Après nos ajouts CSS structurels, nous avons maintenant quelque chose qui ressemble à ceci: Comme vous pouvez le constater, cela doit être un peu nettoyé. Premièrement, parce que nous lançons nos éléments "info" et "icône", nous devons ajouter un élément clair à chacun des éléments de la liste. Nous allons également ajouter un peu de style à chaque élément de la liste. Enfin, nous allons styliser les informations à l'intérieur de chaque élément de la liste: Maintenant, nous avons quelque chose qui commence à paraître assez solide. Appliquons maintenant quelques styles à nos boutons. Nous allons les rendre visuellement importants: Qu'avons-nous fait ici? Tout va très bien. Ce que nous voulons faire maintenant, c’est d’ajouter des styles pour une classe qui seront appliqués au (x) bouton (s) quand ils seront cliqués. Pour ce tutoriel, nous allons ajouter le texte "rejoindre maintenant" au texte du bouton existant lorsque le bouton est cliqué. Essentiellement, l'utilisateur doit prendre la décision de "rejoindre" deux fois. Pour ce faire, nous allons utiliser certains styles CSS, y compris la pseudo-classe CSS3. Créons une classe appelée "cliquée" à laquelle nous pouvons ajouter nos styles de bouton "cliqué" (à des fins de développement, vous pouvez ajouter manuellement une classe de "cliqué" à Comme vous pouvez le constater, nous avons attaché la classe "ayant cliqué" à la classe "bouton". De cette façon, les styles que nous déclarons pour "cliqué" n'apparaîtront que sur les éléments ayant également une classe de bouton. En ce qui concerne le style, nous avons simplement changé sa couleur et ses bordures. Vous avez peut-être aussi remarqué que nous avons ajouté une ombre-boîte au bouton lorsque vous cliquez dessus. Cela va ajouter un style de bouton en retrait qui aide à confirmer à l'utilisateur que le bouton a été cliqué. Lorsque l'utilisateur clique sur le bouton du prix, nous souhaitons que le bouton développe et ajoute le texte "rejoindre maintenant". Pour ce faire, nous allons utiliser la pseudo classe CSS3 Maintenant, nous avons quelque chose comme ceci: Comme vous pouvez le constater, notre bouton "rejoindre maintenant" commence à être un peu à l'étroit. Si notre texte d’en-tête est vraiment long, notre bouton s’affichera dans notre en-tête. Nous allons donc tirer parti de la puissance des requêtes multimédias pour faire passer notre bouton d'action au niveau supérieur lorsque la taille de l'écran est réduite.. Créons une requête multimédia pour déplacer notre bouton: Maintenant, notre bouton va tomber sous l'en-tête pour des tailles d'écran plus petites! Entrons maintenant dans notre fichier "script.js" et écrivons du code javascript qui modifiera le style de nos boutons quand ils seront cliqués. Tout d'abord, configurons notre script pour jQuery Notre script est en fait assez simple. Tout ce que nous devons faire est de basculer la classe de "cliqué" chaque fois qu'un bouton est cliqué. Donc, configurons une fonction: Maintenant, ce que nous voulons faire, c'est vérifier et voir si le bouton sur lequel vous avez cliqué a déjà une classe de "cliqué" (peut-être a-t-il été cliqué plus tôt). S'il n'a pas la classe 'clicked', nous l'ajouterons et empêcherons la Si le bouton sur lequel vous avez cliqué a déjà une classe de "cliqué", le Si un utilisateur clique sur le bouton de prix, son état de bouton sera modifié. Que se passe-t-il s’ils veulent fermer le bouton et qu’ils cliquent en dehors du bouton lui-même? Nous allons enregistrer ce clic et supprimer la classe de "cliqué". Ceci est une simple ligne de jQuery: Nous souhaitons ajouter un peu plus d’interactivité en rendant la transition entre l’état normal des boutons «cliqué» et normal. Nous allons simplement utiliser une transition CSS3 et l'appliquer à la classe de boutons 'rejoindre': Vous avez maintenant un bouton de confirmation de confirmation. Cela aidera les utilisateurs à confirmer leur choix de prendre une décision importante avec votre page Web / application. N'hésitez pas à jouer avec ce concept, à l'améliorer et à en apprendre davantage!, nous avons deux éléments principaux; une élément. L'icône
L'info
élément) élément) élément) élément) une classe de "rejoindre" pour le style CSS plus tard.
Activetuts+
15,99 $ Code final pour chaque
élément
Activetuts+
15,99 $ 
Étape 6: duplication et modification de chaque
Élément élément, tout ce que nous avons à faire est de le dupliquer pour chaque entrée Tuts +. Nous devons modifier les éléments suivants pour chaque élément de la liste:
texte lien
Étape 7: CSS de base
/ * réinitialisation rapide * / body, h1, h2, p, ul, li marge: 0; rembourrage: 0; ul list-style-type: none;
corps élément. body background: #eee; police: 16px / 1.4em Helvetica, Arial, sans serif; couleur: # 333;
Étape 7: Aller réactif (liquide)
largeur maximale règle. est le conteneur principal pour le contenu de notre page. Nous allons utiliser des valeurs en pourcentage pour la largeur et ajouter un style de base pour les séparer visuellement du fond de la page.. #container width: 100%; marge: 0 auto 40 px; largeur maximale: 600px; background: #fff; border-radius: 0 0 3px 3px; bordure: 1px solide # d0d0d0; bordure supérieure: 0; box-shadow: 0 1px 0px #fff;
largeur maximale: 600px parce que nous ne voulons pas que nos éléments de liste soient plus grands que cela.
img max-width: 100%;
Étape 8: Styles d'en-tête
élément et contenu à l'intérieur. en-tête text-align: center; rembourrage: 30px 20px; en-tête h1 margin-bottom: 20px; en-tête p color: # 413c38; taille de police: 1.2em; hauteur de ligne: 1.4em;
Étape 9: Styles d'éléments de liste structurels
.icône, .info box-sizing: border-box; .icon float: left; largeur: 15%; text-align: right; rembourrage à gauche: 3%; .info width: 85%; float: gauche; rembourrage: 0 5%;
taille de la boîte: boîte-frontière; statuer sur ces deux divs. Cela nous permet d’avoir une largeur totale de 100% et de pouvoir ajouter du rembourrage sans dépasser une largeur totale de 100% (pour en savoir plus sur cette propriété, lisez Encourager les éléments de formulaire réactifs à bien jouer).
Étape 10: Lister les styles d'élément
.list li padding: 20px 0; border-top: 1px solid #eee; débordement: auto; clarifier les deux; .list li: survoler background: # f7f7f7;
.info h2 margin-bottom: 10px; taille de police: 1.75em; hauteur de ligne: 1em; affichage: inline-block; .info p font-size: 14px; couleur: # 777;
Étape 11: Styles de boutons
une text-decoration: none; couleur: #fff; .join background: # 57a9eb; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (en haut, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, rgba (87,169,235,1)), couleur-stop (100%, rgba (53,156,234,1 ))); / * Chrome, Safari4 + * / arrière-plan: -webkit-linear-gradient (en haut, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linear-gradient (en haut, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (haut, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / arrière-plan: gradient linéaire (haut, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 57a9eb", endColorstr = "# 359cea", GradientType = 0); / * IE6-9 * / border: 1px solid # 326fa9; border-top-color: # 3e80b1; border-bottom-color: # 1e549d; couleur: #fff; poids de police: gras; text-transform: majuscule; text-shadow: 0 -1px 0 # 1e3c5e; taille de police: 11px; border-radius: 5px; box-shadow: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 inset; espace blanc: maintenant; -webkit-transition: toutes les facilités .25s; -moz-transition: tous les 0,25 facilité; transition: tous les 0,25 facilité; Flotter à droite; affichage: inline-block; remplissage: 1px 1em 0; / * faire apparaître le centre de 1px en surbrillance * / line-height: 2.25em;
Étape 11: Styles de boutons alternatifs
::aprèsStyles de classe cliqués
15,99 $). .join.clicked background: # 24a501; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, rgba (30,183,0,1)), couleur-stop (100%, rgba (36,165 , 1,1))); / * Chrome, Safari4 + * / arrière-plan: -webkit-linear-gradient (haut, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linear-gradient (en haut, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (haut, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * IE10 + * / arrière-plan: gradient linéaire (haut, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 1eb700", endColorstr = "# 24a501", GradientType = 0); / * IE6-9 * / border: 1px solid # 1e8701; border-bottom-color: # 176701; border-top-color: # 24a501; box-shadow: 0 1px 0 #bbb, 0 1px 0 # acc63d inset; rembourrage: 1px 2em 0; curseur: pointeur; .join.clicked: active box-shadow: 0 0 8px # 777 inset;
::après styles de classe::après insérer le texte que nous voulons. .join.clicked :: before content: 'Join Now';
Étape 12: Requêtes avec les médias
Écran @média et (largeur maximale: 450 pixels) .info h2 display: block; .join float: none; marge inférieure: 20 px;
Étape 13: Interaction des boutons avec jQuery
$ (document) .ready (function () // code ici);
Étape 14: Basculement des classes
$ ('. join'). on ('click', function () // code here); href attribut du lien d'être suivi. // s'il n'a pas de classe de cliqué, // ajoutez-en une et empêchez le lien d'être suivi si (! ($ (this) .hasClass ('clicked')))) // Supprimez toutes les classes 'cliquées' s'il y a des $ ('. clicked'). removeClass ('clicked'); // Ajoute la classe 'clicked' au bouton sur lequel on a cliqué $ (this) .addClass ('clicked'); // empêche le lien d'être suivi return false; href la valeur sera suivie par le navigateur. Cela fonctionne bien car si un utilisateur rencontre cette page et que javascript est désactivé, il ne pourra tout simplement pas confirmer sa décision de "rejoindre maintenant". Au lieu de cela, le lien sera simplement suivi sans aucun retour de confirmation.
Étape 15: Suppression de la classe sur laquelle vous avez cliqué
// si le clic survient en dehors du bouton .buy, supprimez sa classe $ ('body'). on ('click', function () $ ('. clicked'). removeClass ('clicked'););
Étape 16: Ajout d'une transition
-webkit-transition: tout le monde est facilité; -moz-transition: tous les 0,25 facilité; -ms-transition: toutes les facilités .25s; -o-transition: tout le monde est facilité. transition: tous les 0,25 facilité;
C'est tout!
Accentsconagua
