Interactions এর নামকরণের নিয়ম

নামকরণের রীতি

এই পৃষ্ঠা ব্যাখ্যা করে, কিভাবে আমরা আমাদের প্রজেক্টে সংগঠিত থাকার জন্য, Webflow Interactions এর নামকরণের দিকে অগ্রসর হতে পারি।

Element [Action + State]

Element হলো section/div/button ইত্যাদি যেগুলোতে আমরা interaction বা মিথস্ক্রিয়া করি।

Action, interaction কে বর্ণনা করে। প্রসঙ্গের জন্য মূল্যবান হলে State যোগ করুন।

উদাহরণ স্বরূপ,

• Element = Sort Button Arrow
• Action = Rotate
• State = Open

সম্পূর্ণ মিথস্ক্রিয়া নাম:

Sort Button Arrow [Rotate Open]

সর্বাধিক প্রসঙ্গ

‍Element এবং Action বাক্যাংশগুলিকে, প্রজেক্টে এই মিথস্ক্রিয়াটির উদ্দেশ্য সম্পর্কে যতটা প্রসঙ্গ দেওয়া উচিত।

আমাদের মিথস্ক্রিয়ার নাম তৈরি করার সময়, আমাদের এই প্রশ্নের উত্তর দেওয়া উচিত, "এই মিথস্ক্রিয়া কি?"

Build এ প্রবেশ করা একজন নতুন Developer -কে এই মিথস্ক্রিয়াটি প্রকল্পে কী করছে, সে সম্পর্কে জানতে হবে। মিথস্ক্রিয়াটি বর্ণনা করতে শক্তিশালী কীওয়ার্ড ব্যবহার করুন।

ন্যূনতম শব্দ

আমরা সর্বদা বিবরণ ন্যূনতম রাখতে চাই। সংক্ষিপ্ত ভাল। আমরা সর্বনিম্ন শব্দে সর্বাধিক তথ্য দিতে চাই।

আদর্শভাবে, আমাদের মিথস্ক্রিয়ার নামগুলি কখনই Designer's Interactions UI panel এর আগে overflow হয় না।

যদি আমাদের নামগুলি ক্রমাগত UI panel এ উপচে পড়ে, তবে আমরা সম্ভবত আমাদের interaction নামকরণে খুব বর্ণনামূলক হয়ে যাচ্ছি।

Interaction নামের স্ক্যান-ক্ষমতা উন্নত করতে, আমরা প্রতিটি শব্দের প্রথম অক্ষর, বড় অক্ষর ব্যবহার করি।

Square brackets

Action এবং State এর চারপাশে square brackets ব্যবহার করে, Element কীওয়ার্ড থেকে Action এবং State কীওয়ার্ড আলাদা করুন।

এটি দৃশ্যত interaction নামের উভয় অংশকে পৃথক করে।

উদাহরণ

সাধারণ নামকরণ ব্যবহার করে উদাহরণ

'button' বা 'image'-এর মতো সাধারণ নামকরণের সাথে, আমরা বোঝাই যে, মিথস্ক্রিয়াগুলি সর্বজনীন মিথস্ক্রিয়া হিসাবে ব্যবহৃত হয়।

Button Arrow [Move In]
ডিফল্ট button arrow টি ভিতরে চলে যায় ৷ "in" হল move Action এর অবস্থা ৷

Button Arrow [Move Out]
প্রাথমিক button এর effect "out" state, arrow টিকে আসল অবস্থানে নিয়ে যায়।

Image [Show Scroll In]
ব্যবহারকারী যখন section এ scrolls করে তখন Image প্রদর্শিত হয়।

Image [Hide Scroll Out]
ব্যবহারকারী যখন section থেকে scrolls করে তখন Image লুকিয়ে রাখে।

Nav Menu [Open]
প্রাথমিক nav মেনু কে খোলার জন্য interaction ।

Nav Menu [Close]
প্রাথমিক nav মেনু কে বন্ধ করার জন্য interaction ।

নির্দিষ্ট নামকরণ ব্যবহার করে উদাহরণ

নির্দিষ্ট নামকরণের মাধ্যমে, আমরা স্পষ্ট করতে পারি যে নির্দিষ্ট উপাদানগুলির জন্য অনন্য মিথস্ক্রিয়াগুলি কী করছে। নামকরণের মাধ্যমে, আমরা বোঝাই যে মিথস্ক্রিয়াগুলি নির্দিষ্ট ব্যবহারের ক্ষেত্রে ব্যবহৃত হয়।

Home Hero Lottie [Show]
Home hero section এ Lottie explosion দেখান এবং খেলুন।

Home Hero Lottie [Hide]
Home hero section এ Lottie explosion animation লুকিয়ে রাখে এবং রিসেট করে।

Jobs Item Modal [Open]
একটি jobs item দ্বারা trigger করা হয়, যা apply modal খোলে।

Jobs Item Modal [Close]
একটি jobs item দ্বারা trigger করা হয়, যা apply modal বন্ধ করে।

Contact Form Input [Height Increase]
contact form input এর height বৃদ্ধি করে।

Contact Form Input [Height Decrease]
contact form input এর height হ্রাস করে।

Keywords

Action keywords

মিথস্ক্রিয়া চালানোর সময় ঘটে যাওয়া ক্রিয়াটিকে সর্বোত্তমভাবে বর্ণনা করে এমন কীওয়ার্ডগুলি ব্যবহার করুন৷

মিথস্ক্রিয়াটির উদ্দেশ্য সম্পর্কে সর্বাধিক প্রসঙ্গ দিতে সর্বনিম্ন শব্দ ব্যবহার করুন।

Popular action keywords

• Show
• Hide
• Move
• Rotate
• Scale

State keywords

একটি ইন্টারঅ্যাকশন সিকোয়েন্সের toggling state এর সাথে যোগাযোগ করতে state keywords যোগ করুন।

Popular state keywords

• In / Out
• Open / Close
• Increase / Decrease
• Expand / Collapse

Action এবং State মিশে যেতে পারে

আমাদের কঠোরভাবে [Action + state] অনুসরণ করার দরকার নেই। আমরা বন্ধনীর ভিতরে আমাদের কীওয়ার্ড দিয়ে নমনীয় হতে পারি।

এটা সম্ভব যে Action এবং State কীওয়ার্ড একসাথে Element [Action + State] হিসেবে ব্যবহার করা হয়।

এটা সম্ভব যে, তাদের পৃথকভাবে Element [Action] বা Element [State] হিসেবে ব্যবহার করা হয়।

এটা সম্ভব যে, একা একটি State কীওয়ার্ড Action + State এর চেয়ে ভাল। উদাহরণস্বরূপ,  "Jobs Item Modal [Open]" ।

এটা সম্ভব যে "Show" এবং "Hide" একটি Action বা একটি State (Visible / Hidden) হিসাবে দেখা হয়। "Jobs Item Modal [Show]"

Action + State সম্পর্কে চিন্তা করে অনেক সময় ব্যয় করবেন না। পরিষ্কার কিছু বাছুন এবং কাজ চালিয়ে যান।

আমাদের লক্ষ্য: Action এবং State কীওয়ার্ডগুলিকে বন্ধনীর মধ্যে সাজানো উচিত, যাতে ব্যবহারকারীকে interaction'র উদ্দেশ্যে সর্বাধিক পরিমাণ প্রসঙ্গ দিতে পারে।

Trigger keywords

আমাদের Interaction নামের সাথে আরও তথ্য যোগ করার প্রয়োজন হলে, trigger  বুঝতে সাহায্য করার জন্য আমরা কীওয়ার্ড ব্যবহার করতে পারি।

Trigger keyword এর উদাহরণ

• Click
• Hover
• Mouse Move
• Scroll
• While Scrolling
• Load

আমাদের অবশ্যই সাবধানে trigger কীওয়ার্ড যোগ করতে হবে।

Optionally add trigger keywords

Webflow Interactions কীভাবে কনফিগার করা হয় তার উপর ভিত্তি করে interaction নামে trigger কীওয়ার্ড যোগ করা প্রযুক্তিগতভাবে ভুল।

Webflow Interactions, action ধাপে trigger অন্তর্ভুক্ত করে না। তাই, Webflow interactions বিভিন্ন trigger এর সাথে চলতে পারে।

যদি আমরা interaction এর নামে trigger অন্তর্ভুক্ত করি, তাহলে interaction টি বিভিন্ন trigger দ্বারা ভাগ করা যাবে না।

উদাহরণ স্বরূপ, nav component এর ভিতরে একটি dropdown nav item "open" করার জন্য একটি interaction তৈরি করা হয়। একটি মেগা মেনু।

• ডেস্কটপে, interaction টি একটি "hover" trigger দিয়ে চলে।
• মোবাইলে, interaction টি একটি "click" trigger দিয়ে চলে।
• উভয় ডিভাইসের জন্য একই interaction ব্যবহার করা হয়। element trigger, সেইসাথে trigger এর প্রকারভেদ, ডিভাইসের উপর ভিত্তি করে ভিন্ন হয়ে থাকে।
• এটি trigger এর একটি স্পষ্ট উদাহরণ যা interaction এর অন্তর্গত নয়। trigger গুলো পৃথক।
• "Nav Dropdown [Open Hover In]" নামটি ব্যবহার করা ভুল, কারণ এটি মোবাইলে ভিন্নভাবে trigger হয় ৷
• Using the name "Nav Dropdown [Open]" accurately describes the interaction configuration. The interaction opens the dropdown. This is what the configuration does.
• "Nav Dropdown [Open]" নামটির ব্যবহার, interaction কনফিগারেশন সঠিকভাবে বর্ণনা করে। Interaction টি dropdown খোলে। এটিই হলো কনফিগারেশনটি যা করে।

Trigger keywords ব্যবহার করা

যদি trigger কীওয়ার্ড যোগ করলে, interaction এর প্রসঙ্গটি ব্যাপকভাবে উন্নত হয়, তাহলে আমরা কীওয়ার্ড যোগ করতে চাই।

এমনকি যদি একটি trigger , interaction কনফিগারেশনে অন্তর্ভুক্ত না হয়, এমন কিছু উদাহরণ রয়েছে যেখানে একটি trigger গুরুত্বপূর্ণ প্রসঙ্গ দিতে পারে।

Discount Modal [Delay On Load]

আমরা এই নামে "delay" এবং "load" শব্দটি ব্যবহার করি, যা আমাদের এই মডেলটির action সম্পর্কে গুরুত্বপূর্ণ তথ্য জানায়। এই মিথস্ক্রিয়াটির উদ্দেশ্য যদি "delay on load" হয়, এই কীওয়ার্ডগুলি স্পষ্টতা তৈরি করে।

Blank Div [Open Modal With JS Click]

এই Div ব্লকটি JavaScript -এর সাথে একটি Webflow Interaction শুরু করতে "click" trigger হিসেবে ব্যবহার করা হয়। মিথস্ক্রিয়াটি JavaScript থেকে একটি click শোনার জন্য বিশেষভাবে তৈরি করা হয়েছিল। JS click করার পরে, Webflow Interaction টি চলে। এই নামের সাথে "click" trigger কীওয়ার্ড যোগ করলে, তা যোগাযোগ করতে সাহায্য করে।

Responsive keywords

যখন একটি নির্দিষ্ট ব্রেকপয়েন্ট, responsive লেভেল বা ডিভাইসের প্রকারের জন্য বিশেষভাবে একটি মিথস্ক্রিয়া তৈরি করা হয়, তখন আমরা interaction এর নামের শেষে সেই কীওয়ার্ডটি যোগ করতে পারি।

Nav Sidebar Slide [Show] [Mobile]
শুধুমাত্র মোবাইলে nav sidebar দেখায়।

Hero Scroll Trigger Div [In] [Tablet Mobile]
nav sidebar দেখায়।

Background Textures [Hover In] [Desktop]
আমাদের শুধুমাত্র ডেস্কটপে নির্দিষ্ট করতে হবে, যদি এটি শুধুমাত্র ডেস্কটপের জন্য হয় এবং ট্যাবলেট এবং মোবাইলের জন্য বন্ধ থাকে।

‍

Conflicts

আপনি যদি নামকরণের সাথে conflict এ থাকেন তবে এটা নিয়ে অতিরিক্ত চিন্তা করবেন না।

শুধু একটি সিদ্ধান্ত নিন এবং এগিয়ে যান।

একটি element, action, state, বা trigger কে ভাল নাম দেওয়ার সিদ্ধান্ত সবসময় পরিষ্কার নয়। ঠিক আছে। কিছু বেছে নিন এবং এগিয়ে যান.

একটি নামকরণ সম্পর্কে চিন্তা করার জন্য কোন উল্লেখযোগ্য সময় নেওয়ার পরামর্শ দেওয়া হয় না। নামকরণের বিষয়ে অতিরিক্ত চিন্তা করার জন্য আপনার কর্মপ্রবাহ ভাঙারও পরামর্শ দেওয়া হয় না।

Happy interacting !

‍