Navngivningskonvention
Denne side forklarer, hvordan vi kan navngive Webflow interaktioner for at holde orden i vores projekt.
Element [Handling + Tilstand]
Element er den sektion/div/knap/etc., som vi anvender interaktionen på.
Handling beskriver interaktionen. Tilføj tilstand, hvis det er værdifuldt for konteksten.
For eksempel,
- Element = Sort Button Arrow
- Handling = Rotate
- Tilstand = Open
Fuldt interaktionsnavn:
Sort Button Arrow [Rotate Open]
Maksimal kontekst
Sætningerne med element og handling skal give så meget kontekst som muligt til formålet med denne interaktion i projektet.
Når vi opretter vores interaktionsnavn, bør vi besvare spørgsmålet: "Hvad er denne interaktion?"
En ny udvikler, der kommer ind i buildet, bør vide, hvad denne interaktion gør i projektet. Brug stærke nøgleord til at beskrive interaktionen.
Minimalt brug af ord
Vi ønsker altid at holde beskrivelserne minimale. Kort er godt. Vi ønsker at give mest mulig information med færrest mulige ord.
Ideelt set skal vores interaktionsnavne aldrig overskride vores Designer's interaktions UI-panel.
Hvis vores navne konstant overskrider UI-panelet, er vi sandsynligvis for beskrivende i vores interaktionsnavngivning.
Vi bruger store bogstaver til det første tegn i hvert ord for at forbedre scanningen af interaktionsnavnet.
Square brackets
Adskil nøgleordene Handling og Tilstand fra nøgleordene Element ved at bruge firkantede parenteser omkring Handling og Tilstand.
Dette adskiller visuelt begge dele af interaktionsnavnet.
Eksempler
Eksempler med generel navngivning
Med generelle navne som 'knap' eller 'billede' antyder vi, at interaktionerne bruges som universelle interaktioner.
Button Arrow [Move In]
Standardknappens pil bevæger sig ind. "in" er tilstanden for bevægelseshandlingen.
Button Arrow [Move Out]
Standardknappens pil bevæger sig ud. "out" er tilstanden for bevægelseshandlingen.
Image [Show Scroll In]
Billedet vises, når brugeren scroller ind i sektionen.
Image [Hide Scroll Out]
Billedet skjules, når brugeren scroller ud af sektionen.
Nav Menu [Open]
Den primære navigationsmenu åbnes med interaktion.
Nav Menu [Close]
Den primære navigationsmenu lukkes med interaktion.
Eksempler med specifik navngivning
Med specifik navngivning kan vi tydeliggøre, hvad unikke interaktioner gør for specifikke elementer. Gennem navngivning antyder vi, at interaktionerne bruges som specifikke use cases.
Home Hero Lottie [Show]
Vis og spil Lottie-eksplosionen i home hero-sektionen.
Home Hero Lottie [Hide]
Skjuler og nulstiller Lottie-eksplosionen i home hero-sektionen.
Jobs Item Modal [Open]
Åbn ansøgningsmodal, som udløses af et jobelement (Jobs Item).
Jobs Item Modal [Close]
Luk ansøgningsmodal, som udløses af et jobelement (Jobs Item).
Contact Form Input [Height Increase]
Forøg højden på kontaktformularens input.
Contact Form Input [Height Decrease]
Reducer højden på kontaktformularens input.
Nøgeord
Nøgleord for handling
Brug nøgleord, der bedst beskriver den handling, der sker, når interaktionen kører.
Brug så få ord som muligt for at give mest mulig kontekst om interaktionens formål.
Populære nøgleord for handling
- Show
- Hide
- Move
- Rotate
- Scale
Nøgleord for tilstand
Tilføj nøgleord for tilstand for at kommunikere en skiftende tilstand i en interaktionssekvens.
Populære nøgleord for tilstand
- In / Out
- Open / Close
- Increase / Decrease
- Expand / Collapse
Handling og tilstand kan kombineres
Vi behøver ikke strengt at følge [Handling + tilstand]. Vi kan være fleksible med vores nøgleord inde i parenteserne.
Det er muligt, at nøgleordene Handling og Tilstand bruges sammen Element [Handling + Tilstand].
Det er muligt, at de bruges hver for sig Element [Handling] eller Element [Tilstand].
Det er muligt, at et enkelt tilstandsnøgleord er bedre end Handling + Tilstand. For eksempel "Jobs Item Modal [Open]".
Det er muligt, at " Show" og "Hide" ses som en handling eller en tilstand (synlig / skjult). "Jobs Item Modal [Show]".
Brug ikke en masse tid på at tænke over handling + tilstand. Vælg noget, der er klart, og arbejd videre.
Vores mål: Nøgleordene Handling og Tilstand skal placeres inden for parenteserne for at give brugeren den maksimale mængde kontekst til interaktionens formål.
Trigger-nøgleord
Hvis vi har brug for at tilføje flere oplysninger til vores interaktionsnavn, kan vi bruge nøgleord til at hjælpe os med at forstå triggeren.
Eksempler på trigger-nøgleord
- Click
- Hover
- Mouse Move
- Scroll
- While Scrolling
- Load
Vi skal tilføje trigger-nøgleord med omhu.
Tilføj eventuelt trigger-nøgleord
At tilføje trigger-nøgleord i interaktionsnavnet er teknisk unøjagtigt baseret på, hvordan Webflow-interaktioner er konfigureret.
Webflow-interaktioner inkluderer ikke triggere i handlingstrinnene. Derfor kan Webflow-interaktioner køre med forskellige triggere.
Hvis vi inkluderer triggeren i interaktionens navn, kan interaktionen ikke deles af forskellige triggere.
For eksempel oprettes en interaktion for at "åbne" et dropdown nav-element inde i nav-komponenten. En mega menu.
- På desktop kører interaktionen med en "hover"-trigger.
- På mobilen kører interaktionen med en "klik"-trigger.
- Den samme interaktion bruges på begge enheder. Elementets trigger såvel som triggerens type, er forskellig baseret på enhed.
- Dette er et tydeligt eksempel på, at en trigger ikke hører til en interaktion. Triggere er adskilte.
- At bruge navnet "Nav Dropdown [Open Hover In]" er unøjagtigt, da det udløses forskelligt på mobil.
- At bruge navnet "Nav Dropdown [Open]" beskriver interaktionskonfigurationen præcist. Interaktionen åbner dropdown-menuen. Det er, hvad konfigurationen gør.
Brug af trigger-nøglerord
Hvis tilføjelsen af trigger-nøgleordet i høj grad forbedrer interaktionskonteksten, kan det være en god idé at tilføje nøgleordet.
Selv hvis en trigger ikke er inkluderet i interaktionskonfigurationen, er der tilfælde, hvor en trigger kan give vigtig kontekst.
Discount Modal [Delay On Load]
Vi bruger ordet "delay" og "load" i dette navn, hvilket fortæller os vigtig information om handlingen i denne modal. Hvis formålet med denne interaktion er at "forsinke ved indlæsning", skaber disse nøgleord klarhed.
Blank Div [Open Modal With JS Click]
Denne Div Block bruges som en klik-trigger til at starte en Webflow-interaktion med JavaScript. Interaktionen blev skabt specifikt til at lytte efter et klik fra JavaScript. Når JS har klikket, kører Webflow Interaction. Tilføjelsen af trigger-nøgleordet "click" til dette navn hjælper med at kommunikere det.
Responsive nøgleord
Når en interaktion oprettes specifikt til et bestemt breakpoint, responsivt niveau eller enhedstype, kan vi tilføje dette nøgleord i slutningen af interaktionsnavnet.
Nav Sidebar Slide [Show] [Mobile]
Vises kun på mobil
Hero Scroll Trigger Div [In] [Tablet Mobile]
Vises kun på tablet og mobil
Background Textures [Hover In] [Desktop]
Vi behøver kun at specificere desktop, hvis det kun er til desktop og slået fra til tablet og mobil.
Konflikter
Hvis du bruger for meget til på navngivning, skal du ikke tænke for meget over det.
Bare tag en beslutning og kom videre.
Beslutningen om at give et godt navn til et element, en handling, en tilstand eller en trigger er ikke altid klar. Det er helt i orden. Vælg noget og kom videre.
Det anbefales ikke at bruge lang tid på at tænke over en navngivning. Det er ikke tilrådeligt at bryde dit workflow for at tænke over navngivning.
God interaktion.