İsimlendirme Standartları
Bu sayfa, projemizde düzenli kalmak için Webflow Etkileşimlerini nasıl adlandırabileceğimizi açıklar.
Element [Eylem + Durum]
Element etkileşimi uyguladığımız bölüm/div/buton vb. öğesidir.
Eylem etkileşimi tanımlar. Durum, bağlam için değerliyse ekleyin.
Örnek olarak,
- Element = Sort Button Arrow
- Eylem = Rotate
- Durum = Open
Tam etkileşim adı:
Sort Button Arrow [Rotate Open]
Maksimum bağlam
Element ve Eylem ifadeleri, bu etkileşimin projedeki amacına mümkün olduğunca çok bağlam sağlamalıdır.
Etkileşim adını oluştururken, "Bu etkileşim ne yapıyor?" sorusuna cevap vermeliyiz.
Projeye yeni bir geliştirici girdiğinde, bu etkileşimin projedeki işlevi hakkında bilgi sahibi olmalıdır. Etkileşimi tanımlamak için güçlü anahtar kelimeler kullanın.
Minimal kelimeler
Açıklamaları her zaman mümkün olduğunca kısa tutmak istiyoruz. Kısalık iyidir. En az kelimeyle en fazla bilgi vermeyi hedefliyoruz.
İdeal olarak, etkileşim adlarımız Designer'ın Etkileşimler UI panelinin ötesine geçmemelidir.
Eğer adlarımız sürekli olarak UI panelini aşıyorsa, muhtemelen etkileşim isimlendirmesinde çok fazla açıklayıcı oluyoruz.
Etkileşim adının taranabilirliğini artırmak için her kelimenin ilk harfini büyük harfle yazıyoruz.
Köşeli parantezler
Eylem ve Durum kelimelerini Element kelimelerinden ayırmak için Eylem ve Durum kelimelerinin etrafına köşeli parantez kullanın.
Bu, etkileşim adının her iki bölümünü görsel olarak ayırır.
Örnekler
Genel isimlendirme kullanarak yapılan örnekler
'button' veya 'image' gibi genel isimlendirme kullanarak, etkileşimlerin evrensel etkileşimler olarak kullanıldığını ima ediyoruz.
Button Arrow [Move In]
Varsayılan buton oku içeri doğru hareket ettirir. "in", hareket eyleminin durumudur.
Button Arrow [Move Out]
Ana buton efektinin "out" durumu, oku orijinal konumuna geri taşır.
Image [Show Scroll In]
Kullanıcı bölüme scroll ettiğinde görünen görüntü.
Image [Hide Scroll Out]
Kullanıcı bölümden çiktiğinda gizlenen görüntü.
Nav Menu [Open]
Ana menüyü açma etkileşimi.
Nav Menu [Close]
Ana menüyü kapama etkileşimi.
Özel isimlendirme kullanarak yapılan örnekler
Özel isimlendirme ile, belirli öğeler için benzersiz etkileşimlerin ne yaptığını açıklayabiliriz. İsimlendirme aracılığıyla, etkileşimlerin belirli kullanım durumları olarak kullanıldığını ima ederiz.
Home Hero Lottie [Show]
Ana sayfa hero bölümünde Lottie patlamasını gösterip oynatır.
Home Hero Lottie [Hide]
Ana sayfa hero bölümünde Lottie patlama animasyonunu gizler ve sıfırlar.
Jobs Item Modal [Open]
İşler öğesinin tetiklediği başvuru modalını açar.
Jobs Item Modal [Close]
İşler öğesinin tetiklediği başvuru modalını kapatır.
Contact Form Input [Height Increase]
İletişim formunun input yüksekliğini artırır.
Contact Form Input [Height Decrease]
İletişim formunun input yüksekliğini azaltır.
Anahtar kelimeler
Eylem anahtar kelimeleri
Etkileşim çalıştığında meydana gelen eylemi en iyi şekilde tanımlayan anahtar kelimeleri kullanın.
Etkileşimin amacı hakkında en fazla bağlamı vermek için en az sayıda kelime kullanın.
Popüler eylem anahtar kelimeleri
- Show
- Hide
- Move
- Rotate
- Scale
Durum anahtar kelimeleri
Etkileşim sırasında bir geçiş durumunu iletmek için durum anahtar kelimeleri ekleyin.
Popüler durum anahtar kelimeleri:
- In / Out
- Open / Close
- Increase / Decrease
- Expand / Collapse
Eylem ve Durum bir arada kullanılabilir
Kesinlikle [Eylem + Durum] formatına sıkı sıkıya bağlı kalmamız gerekmez. Köşeli parantez içindeki anahtar kelimelerde esnek olabiliriz.
Eylem ve Durum kelimelerinin birlikte kullanıldığı Element [Eylem + Durum] şeklinde olabilir.
Ayrıca Element [Eylem] veya Element [Durum] şeklinde de kullanılabilir.
Bazen sadece Durum kelimesi, Eylem + Durum'dan daha iyi olabilir. Örneğin, "Jobs Item Modal [Open]".
"Show" ve "Hide" ifadelerinin hem bir Eylem hem de bir Durum (Görünür / Gizli) olarak algılanabileceği bir durum söz konusu olabilir. Örneğin, "Jobs Item Modal [Show]".
Eylem + Durum hakkında çok fazla düşünmek için çok zaman harcamayın. Açıklayıcı olan bir şey seçin ve çalışmaya devam edin.
Amacımız: Eylem ve Durum anahtar kelimeleri, kullanıcıya etkileşimin amacı hakkında en fazla bilgiyi vermek için köşeli parantez içinde düzenlenmelidir.
Tetikleyici anahtar kelimeler
Etkileşim adımıza daha fazla bilgi eklememiz gerekiyorsa, bize tetikleyiciyi anlamamıza yardımcı olacak anahtar kelimeler kullanabiliriz.
Tetikleyici anahtar kelime örnekleri
- Click
- Hover
- Mouse Move
- Scroll
- While Scrolling
- Load
Tetikleyici anahtar kelimeleri dikkatlice eklemeliyiz.
İsteğe bağlı olarak tetikleyici anahtar kelimeler ekleyin
Webflow Etkileşimleri, eylem adımlarında tetikleyicileri içermediği için etkileşim adının içine tetikleyici anahtar kelimeler eklemek teknik olarak doğru olmaz.
Webflow etkileşimleri farklı tetikleyicilerle çalışabilir. Dolayısıyla, etkileşim adının içine tetikleyiciyi eklersek, etkileşim farklı tetikleyicilerle paylaşılamaz.
Örneğin, bir etkileşim oluşturulmuş ve bu etkileşim nav bileşeni içindeki bir açılır menüyü açmak için kullanılıyorsa, etkileşim adında "aç" gibi bir tetikleyici anahtar kelimesi kullanmak uygun olmayacaktır.
- Masaüstünde etkileşim "hover" tetikleyiciyle çalışır.
- Mobilde etkileşim "tıkla" tetikleyiciyle çalışır.
- Aynı etkileşim her iki cihazda da kullanılır. Hem öğe tetikleyicisi hem de tetikleyici türü cihaza göre farklıdır.
- Bu, bir tetikleyicinin etkileşime ait olmadığının net bir örneğidir. Tetikleyiciler ayrıdır.
- "Nav Dropdown [Open Hover In]" şeklinde bir ad kullanmak yanlış olur çünkü mobil cihazda farklı şekilde tetiklenir.
- "Nav Dropdown [Open]" şeklinde bir ad kullanmak, etkileşim yapılandırmasını doğru bir şekilde tanımlar. Etkileşim dropdownu açar. Bu, yapılandırmanın yaptığı şeyi açıklar.
Tetikleyici kelimelerin kullanılması
Eğer tetikleyici kelime etkileşim bağlamını önemli ölçüde geliştiriyorsa, bu durumda tetikleyici kelime eklemek isteyebiliriz.
Bir tetikleyici etkileşim yapılandırmasına dahil edilmese bile, tetikleyici önemli bir bağlam sağlayabilir.
Discount Modal [Delay On Load]
Bu isimde "delay" ve "load" kelimelerini kullanıyoruz, bu da bu modalın eylemi hakkında önemli bilgiler veriyor. Eğer bu etkileşimin amacı "yüklemeyi geciktirmek" ise, bu kelimeler netlik yaratır.
Blank Div [Open Modal With JS Click]
Bu Div Bloğu, JavaScript ile bir Webflow Etkileşimini başlatmak için bir tıklama tetikleyicisi olarak kullanılıyor. Etkileşim özellikle JavaScript'ten gelen bir tıklama olayını dinlemek için oluşturulmuştur. JS tıklamasından sonra Webflow Etkileşimi çalışır. Bu isme "click" tetikleyici kelimesini eklemek, bunun iletişimde bir tıklama tetikleyicisi olduğunu aktarmaya yardımcı olur.
Responsive kelimeler
Bir etkileşim belirli bir breakpoint, responsive seviyesi veya cihaz türü için özel olarak oluşturulduğunda, bu kelimeyi etkileşim adının sonuna ekleyebiliriz.
Nav Sidebar Slide [Show] [Mobile]
Nav kenar çubuğunu yalnızca mobilde gösterir.
Hero Scroll Trigger Div [In] [Tablet Mobile]
Hero scroll tetikleme alanını tablet ve mobil cihazlarda gösterir.
Background Textures [Hover In] [Desktop]
Arkaplan dokularını yalnızca masaüstünde fare üzerine gelindiğinde gösterir.
Ikilemler
Eğer isimlendirme konusunda bir ikilem yaşıyorsanız, çok fazla düşünmeyin.
Bir karar verin ve ilerleyin.
Bir öğeye, eyleme, duruma veya tetikleyiciye iyi bir isim verme kararı her zaman net olmayabilir. Bu normaldir. Bir şey seçin ve devam edin.
İsimlendirmeye fazla düşünmek için önemli bir zaman harcamak önerilmez. İsimlendirmeyi fazla düşünerek iş akışınızı bozmak önerilmez.
Keyifli etkileşimler