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