फ्लोटिंग लेबल्स क्या हैं, फॉर्म डिजाइन में उनका उपयोग कैसे किया जाता है, और वे UI/UX डिजाइन में तेजी से लोकप्रिय संपत्ति क्यों बन रहे हैं, इसके बारे में जानें।
फ्लोटिंग लेबल क्या है?
यह एक फ्लोटिंग लेबल है:
बस ऊपर दिए हुए चित्रण को देखकर, आप में से कुछ तुरंत समझ सकते हैं कि फ्लोटिंग लेबल्स एक शानदार UI संपत्ति क्यों हैं, लेकिन यदि आप "फ्लोटिंग लेबल्स" अवधारणा के लिए नए हैं, तो यहाँ बताया गया है कि वे इतने शक्तिशाली क्यों हैं:
- वे बहुत सारी व्यावहारिक जानकारी देते हैं बिना अधिक जगह लिए।
- स्लीक ट्रांजिशन ("एनिमेशन") प्रभाव फॉर्म को अधिक आकर्षक बनाता है
- वे आपके ब्रांड को पारंपरिक, स्टेटिक फॉर्म्स की तुलना में अधिक आधुनिक दिखाते हैं, जिनका मुख्य प्रभाव एक भद्दा नीला इनपुट फ़ील्ड आउटलाइन है।
ऊपर दिए गए चित्रण पर एक और नज़र डालें। यह सिर्फ एक इनपुट फ़ील्ड नहीं है जिसमें प्लेसहोल्डर टेक्स्ट होता है जो एंटर करने पर लेबल बन जाता है। यहाँ क्या हो रहा है:
- सबसे पहले, यूजर फील्ड के उद्देश्य का वर्णन करने वाला एक प्लेसहोल्डर टेक्स्ट देखता है।
- जैसे ही यूजर इनपुट फ़ील्ड के अंदर क्लिक करता है, प्लेसहोल्डर टेक्स्ट शीर्ष पर चला जाता है और एक सामान्य इनपुट लेबल की भूमिका निभाता है — और दृश्यमान रहता है।
- उसी समय, एक नया प्लेसहोल्डर टेक्स्ट पुराने प्लेसहोल्डर की जगह लेता है, लेकिन अब यह एक हिंट है (जो प्लेसहोल्डर टेक्स्ट की सबसे महत्वपूर्ण भूमिका है) यूजर को टाइप करने से पहले और मार्गदर्शन करने के लिए।
- जैसे ही वे टाइप करना शुरू करते हैं प्लेसहोल्डर हिंट टेक्स्ट चला जाता है, जैसा कि होना चाहिए, लेकिन कई अन्य इनपुट फ़ील्ड्स के विपरीत, मूल प्लेसहोल्डर टेक्स्ट, जो अब एक इनपुट लेबल है, यूजर को अभी भी दृश्यमान है, यदि वे विचलित हो जाते हैं और फील्ड का उद्देश्य भूल जाते हैं (यह आपके विचार से अधिक बार होता है)।
यदि आप मिनिमलिस्ट डिजाइन के प्रशंसक हैं, तो फ्लोटिंग लेबल्स एक आदर्श फिट हैं।
जैसा कि प्रसिद्ध कहावत है:
पूर्णता तब नहीं है जब जोड़ने के लिए कुछ न बचा हो, बल्कि तब है जब हटाने के लिए कुछ न बचा हो।
और यह बहुत अधिक फ्लोटिंग लेबल्स को संक्षेप में प्रस्तुत करता है।
संसाधन
- CodePen पर फ्लोटिंग लेबल्स कोड उदाहरण।
- यदि आप मटेरियल UI फ्रेमवर्क का उपयोग कर रहे हैं, तो फ्लोटिंग लेबल्स को अपनी वेबसाइट पर लागू करना बहुत आसान है।
ध्यान रखें कि आप फ्लोटिंग लेबल्स को कैसे तकनीकी रूप से लागू करते हैं (HTML, CSS, JavaScript), इस पर निर्भर करते हुए, आप कुछ ब्राउज़र असंगति मुद्दों में भाग सकते हैं। caniuse पर जांच करना सुनिश्चित करें।
