শিখুন ফ্লোটিং লেবেলগুলি কী, কীভাবে সেগুলি ফর্ম ডিজাইনে ব্যবহার করা হয় এবং কেন তারা UI/UX ডিজাইনে ক্রমবর্ধমান জনপ্রিয় সম্পদ হয়ে উঠছে৷
ফ্লোটিং লেবেল কি?
এটি একটি ভাসমান লেবেল:
শুধুমাত্র উপরের চিত্রটি দেখে, আপনার মধ্যে কেউ কেউ হয়ত তাৎক্ষণিকভাবে বুঝতে পারবেন কেন ফ্লোটিং লেবেলগুলি একটি গৌরবময় UI সম্পদ, কিন্তু আপনি যদি "ফ্লোটিং লেবেল" ধারণায় নতুন হন, তাহলে সেগুলি এত শক্তিশালী কেন:
- তারা বেশি জায়গা না নিয়ে অনেক ব্যবহারিক তথ্য প্রকাশ করে।
- স্লিক ট্রানজিশন ("অ্যানিমেশন") প্রভাব ফর্মটিকে আরও আকর্ষক করে তোলে
- এগুলি আপনার ব্র্যান্ডকে প্রথাগত, স্ট্যাটিক ফর্মের চেয়ে আরও আধুনিক দেখায়, যার প্রধান প্রভাব হল একটি জঘন্য নীল ইনপুট ক্ষেত্রের রূপরেখা৷
উপরের চিত্রটি দ্বিতীয়বার দেখুন। এটি শুধুমাত্র একটি স্থানধারক পাঠ্য সহ একটি ইনপুট ক্ষেত্র নয় যা প্রবেশ করার পরে একটি লেবেল হয়ে যায়। এখানে কি হচ্ছে:
- প্রথমে, ব্যবহারকারী ফিল্ডের উদ্দেশ্য বর্ণনা করে একটি স্থানধারক পাঠ্য দেখতে পান।
- ইনপুট ক্ষেত্রের ভিতরে ব্যবহারকারী ক্লিক করার সাথে সাথে, স্থানধারক পাঠ্যটি শীর্ষে চলে যায় এবং একটি সাধারণ ইনপুট লেবেলের ভূমিকা নেয় — এবং দৃশ্যমান থাকে।
- একই সময়ে, একটি নতুন স্থানধারক পাঠ্য পুরানো স্থানধারকের স্থান নেয়, কিন্তু এখন এটি একটি ইঙ্গিত (যা একটি স্থানধারক পাঠ্যের সবচেয়ে গুরুত্বপূর্ণ ভূমিকা) ব্যবহারকারীকে টাইপ করা শুরু করার আগে তাদের আরও গাইড করতে।
- তারা টাইপ করা শুরু করার সাথে সাথে প্লেসহোল্ডার ইঙ্গিত টেক্সটটি চলে যায়, যেমনটি করা উচিত, কিন্তু অন্যান্য অনেক ইনপুট ক্ষেত্রের বিপরীতে, মূল স্থানধারক পাঠ্য, যা এখন একটি ইনপুট লেবেল, ব্যবহারকারীর কাছে এখনও দৃশ্যমান, যদি তারা বিভ্রান্ত হয় এবং ক্ষেত্রের উদ্দেশ্য ভুলে যান (এটি আপনার ধারণার চেয়ে প্রায়শই ঘটে)।
আপনি যদি মিনিমালিস্ট ডিজাইনের অনুরাগী হন তবে ফ্লোটিং লেবেলগুলি একটি নিখুঁত ফিট।
বিখ্যাত উক্তিটি যেমন:
পরিপূর্ণতা তখন নয় যখন যোগ করার কিছু অবশিষ্ট থাকে না, কিন্তু যখন নিয়ে যাওয়ার কিছু অবশিষ্ট থাকে না।
এবং এটি সংক্ষেপে ভাসমান লেবেল।
সম্পদ
- কোডপেনে ফ্লোটিং লেবেল কোডের উদাহরণ।
- আপনি যদি মেটেরিয়াল UI ফ্রেমওয়ার্ক ব্যবহার করেন, তাহলে আপনার ওয়েবসাইটে ফ্লোটিং লেবেল প্রয়োগ করা একটি হাওয়া।
সতর্ক থাকুন যে কিভাবে এর উপর নির্ভর করে আপনি প্রযুক্তিগতভাবে (HTML, CSS, JavaScript) ফ্লোটিং লেবেল প্রয়োগ করেন, আপনি কিছু ব্রাউজার অসঙ্গতি সমস্যায় পড়তে পারেন। caniuse উপর চেক আপ করতে ভুলবেন না.
