Convention de nomination
Cette page explique comment nous pouvons aborder la nomination des interactions Webflow pour rester organisé dans notre projet.
Lorsque vous nommez vos interactions, nous vous recommandons de les nommer en anglais pour garder une cohérence dans le projet et par rapport au Designer. De plus, les mots sont souvent plus courts / synthétiques en anglais.
Élément [Action + État]
L'élément est la section/div/bouton/etc. à laquelle nous appliquons l'interaction.
L'action décrit l'interaction. Ajoutez l'état si cela est utile pour le contexte.
Par exemple :
- Élément = Sort Button Arrow (Flèche Bouton Tri)
- Action = Rotate (Rotation)
- État = Open (Ouverture)
Nom complet de l'interaction :
Sort Button Arrow [Rotate Open]
Un maximum de contexte
Les termes Élément et Action doivent donner le maximum de contexte à l'objectif de cette interaction dans le projet.
Lorsque nous créons le nom de nos interactions, nous devons répondre à la question "Quelle est cette interaction ?".
Un nouveau développeur qui entre dans le build doit savoir ce que cette interaction fait dans le projet. Utilisez des mots-clés pertinents pour décrire l'interaction.
Un minimum de mots
Nous voulons toujours que les descriptions soient minimales. La concision est de mise. Nous voulons donner le plus d'informations possible avec le moins de mots possible.
Idéalement, les noms de nos interactions ne devraient jamais excéder la zone UI des interactions du Designer.
Si les noms débordent constamment du panneau d'interface utilisateur, c'est que nous sommes probablement trop descriptifs dans la dénomination de nos interactions.
Nous utilisons des majuscules pour le premier caractère de chaque mot afin d'améliorer la lisibilité du nom de l'interaction.
Les Crochets
Séparez les mots-clés Action et État des mots-clés Élément en utilisant des crochets entre Action et État.
Cela permet de séparer visuellement les deux parties du nom de l'interaction.
Exemples
Exemples utilisant une nomination générale
Avec des noms généraux comme " button " (“bouton”) ou " image ", nous laissons entendre que les interactions sont utilisées comme des interactions universelles.
Button Arrow [Move In]
La flèche du bouton par défaut se déplace vers l'intérieur. "in" est l'état de l'action de déplacement.
Button Arrow [Move Out]
L'effet de bouton primaire "out" déplace la flèche vers la position initiale.
Image [Show Scroll In]
L'image apparaît lorsque l'utilisateur fait défiler la section.
Image [Hide Scroll Out]
L'image se masque lorsque l'utilisateur fait défiler la section.
Nav Menu [Open]
L'interaction d'ouverture du menu de navigation principal.
Nav Menu [Close]
L'interaction de fermeture du menu de navigation principal.
Exemples utilisant une nomination spécifique
Avec une nomination spécifique, nous pouvons clarifier ce que des interactions uniques font pour des éléments spécifiques. Grâce à la dénomination, nous laissons entendre que les interactions sont utilisées comme des cas d'utilisation spécifiques.
Home Hero Lottie [Show]
Montrer et jouer l’animation Lottie “explosion” sur la section Home hero.
Home Hero Lottie [Hide]
Masque et réinitialise l'animation Lottie “explosion” sur la section Home hero.
Jobs Item Modal [Open]
Ouvrir une fenêtre contextuelle de candidature pour postuler à job, qui est déclenchée par un item "job".
Jobs Item Modal [Close]
Fermer une fenêtre contextuelle de candidature pour postuler à job, qui est déclenchée par un item "job".
Contact Form Input [Height Increase]
Augmente la hauteur (height) de l'input du formulaire de contact.
Contact Form Input [Height Decrease]
Diminue la hauteur (height) de l'input du formulaire de contact.
Mots-clés
Mots-clés d'action
Utilisez les mots-clés qui décrivent le mieux l'action qui se produit lors de l'exécution de l'interaction.
Utilisez le moins de mots possible pour donner le plus de contexte possible sur l'objectif de l'interaction.
Mots-clés d'action populaires
- Show (Afficher)
- Hide (Cacher)
- Move (Déplacer)
- Rotate (Pivoter)
- Scale (Mettre à l’échelle)
Mots-clés pour l'État
Ajoutez des mots-clés d'état pour indiquer un changement d'état pendant une interaction.
Mots-clés populaires pour l'État
- In / Out (Intérieur / Extérieur)
- Open / Close (Ouverture / Fermeture)
- Increase / Decrease (Augmenter / Diminuer)
- Expand / Collapse (Développer / Réduire)
Action et État peuvent se mélanger
Il n'est pas nécessaire de suivre strictement [Action + état]. Nous pouvons être flexibles avec nos mots-clés à l'intérieur des crochets.
Il est possible que les mots-clés Action et État soient utilisés ensemble Élément [Action + État].
Il est possible qu'ils soient utilisés individuellement Élément [Action] ou Élément [État].
Il est possible qu'un mot-clé État seul soit préférable à Action + État. Par exemple, "Jobs Item Modal [Open]".
Il est possible que "Show" et "Hide" soient considérés comme une Action ou un État (Visible / Caché). Par exemple, “Jobs Item Modal [Show]".
Ne perdez pas trop de temps à réfléchir à Action + État. Choisissez quelque chose qui est clair et continuez à travailler.
Notre objectif : les mots-clés Action et État doivent être disposés à l'intérieur des crochets pour donner à l'utilisateur le maximum de contexte sur l'objectif de l'interaction.
Mots-clés de déclenchement
Si nous devons ajouter plus d'informations au nom de notre interaction, nous pouvons utiliser des mots-clés pour nous aider à comprendre le déclencheur.
Exemples de mots-clés pour les déclencheurs
- Click (Au Clic)
- Hover (Au Survol)
- Mouse Move (Au Déplacement de la Souris)
- Scroll (Au Défilement)
- While Scrolling (Pendant le Défilement)
- Load (Au Chargement)
Nous devons ajouter les mots-clés déclencheurs avec précaution.
Ajout facultatif de mots-clés de déclenchement
L'ajout de mots-clés de déclenchement dans le nom de l'interaction est techniquement inexact selon la façon dont les interactions Webflow sont configurées.
Les interactions Webflow n'incluent pas de déclencheurs dans les étapes de l'action. Par conséquent, les interactions Webflow peuvent s'exécuter avec différents déclencheurs.
Si nous incluons le déclencheur dans le nom de l'interaction, alors l'interaction ne peut pas être utilisée par différents déclencheurs.
Par exemple, une interaction est créée pour ouvrir (“open”) un élément dropdown nav dans le composant nav. Un méga-menu.
- Sur un ordinateur, l'interaction s'exécute avec un déclencheur "hover".
- Sur le mobile, l'interaction s'exécute avec un déclencheur "clic".
- La même interaction est utilisée pour les deux appareils. Le déclencheur de l'élément, ainsi que le type de déclencheur, sont différents en fonction de l’appareil.
- C'est un exemple clair de déclencheur n'appartenant pas à une interaction. Les déclencheurs sont distincts.
- L'utilisation du nom "Nav Dropdown [Open Hover In]" est inexacte car le déclenchement est différent sur mobile.
- L'utilisation du nom "Nav Dropdown [Open]" décrit précisément la configuration de l'interaction. L'interaction ouvre la liste déroulante. C'est ce que fait la configuration.
Utilisation de mots-clés de déclenchement
Si l'ajout du mot-clé de déclenchement renforce considérablement le contexte de l'interaction, nous pouvons vouloir ajouter ce mot-clé.
Même si un déclencheur n'est pas inclus dans la configuration de l'interaction, il existe des cas où un déclencheur peut donner un contexte important.
Discount Modal [Delay On Load]
Nous utilisons les mots "delay" et "load" dans ce nom, ce qui nous donne des informations importantes sur l'action de cette fenêtre contextuelle. Si l'objectif de cette interaction est de retarder le chargement (“delay on load”), alors ces mots-clés apportent de la clarté.
Blank Div [Open Modal With JS Click]
Ce Div Block est utilisé comme déclencheur de clic pour initier une interaction Webflow avec JavaScript. L'interaction a été créée spécifiquement pour écouter un clic de JavaScript. Après le clic JavaScript, l'interaction Webflow s'exécute. L'ajout du mot-clé "click" comme déclencheur à ce nom permet de mieux le faire comprendre.
Mots-clés pour le Responsive
Lorsqu'une interaction est créée spécifiquement pour un certain point de rupture (breakpoint), un certain niveau de responsive ou un certain type d’appareil, nous pouvons ajouter ce mot-clé à la fin du nom de l'interaction.
Nav Sidebar Slide [Show] [Mobile]
Afficher la barre latérale de navigation sur les mobiles uniquement.
Hero Scroll Trigger Div [In] [Tablet Mobile]
Une animation au Scroll uniquement pour les tablettes et mobiles.
Background Textures [Hover In] [Desktop]
Nous devons seulement spécifier Desktop si l'interaction est uniquement utilisée sur ordinateur et désactivée pour les tablettes et mobiles.
Conflits / Prise de tête
Si vous rencontrez des difficultés avec la dénomination, ne réfléchissez pas trop.
Prenez simplement une décision et allez de l'avant.
La décision de donner un bon nom à un élément, une action, un état ou un déclencheur n'est pas toujours claire. Ce n'est pas grave. Prenez une décision et passez à autre chose.
Il n'est pas conseillé de prendre beaucoup de temps pour réfléchir à un nom. Il n'est pas conseillé d'interrompre votre flux de travail / votre productivité pour réfléchir trop longuement à l'attribution d'un nom.
Bonne interactions !