सुंदर खोज बॉक्स UI डिजाइन का प्रदर्शन

यह इंटरनेट पर आम है, जहां - अगर हम किसी वेबसाइट पर जो खोज रहे हैं, वह पाने में असफल रहते हैं, तो हम खोज का सहारा लेते हैं। खोज बॉक्स हमेशा एक वेबसाइट का एक अनिवार्य हिस्सा रहा है। यदि आप एक सामग्री-गहन वेबसाइट चलाते हैं, तो यह और भी अपरिहार्य है। उन्हें आमतौर पर निम्नलिखित क्षेत्रों में रखा जाता है: शीर्ष लेख, शीर्ष नेविगेशन मेनू या साइडबार (ऊपरी-तह)। कभी-कभी हम उपयोगकर्ताओं के लिए खोज को और अधिक सुविधाजनक बनाने के लिए एक और एक पाद में फेंक सकते हैं.

वेब 1.0 के बाद से हमने एक लंबा सफर तय किया; वेब पर खोज अब तक सीमित नहीं है कीवर्ड दर्ज करें और खोज हिट करें. डेवलपर्स अपने आगंतुकों के लिए एक बेहतर अनुभव खोजने का प्रयास करते हैं, और अधिक लक्षित परिणाम प्राप्त करने के लिए खोज फ़िल्टरिंग, कहते हैं, अधिक लक्षित परिणाम प्राप्त करने के लिए खोज फ़िल्टरिंग, आपके द्वारा टाइप किए गए खोज कीवर्ड या खोज इतिहास प्रदान करना।.

आज की पोस्ट में, हम कुछ सुंदर खोज बॉक्स दिखाते हैं जिनमें आशाजनक विशेषताएं हैं जो हम जानते हैं। चाहे आप अपनी वेबसाइट को सुधारना चाहते हों या बस एक बेहतर खोज बॉक्स के लिए प्रेरणा चाहते हों, यह पोस्ट आपके लिए है कूदने के बाद पूरी सूची!

PlaylistNow

"मैं हूं" के उपसर्ग के साथ शुरू करते हुए, यह खोज मॉड्यूल बुद्धिमानी से मिलान करने और आपके क्वेरी टाइप करने वाले परिणामों को सूचीबद्ध करने का प्रयास करता है.

स्क्रॉल मॉड्यूल खोजें

डिज़ाइनर Nico Nuzzaci द्वारा सुझाए गए, यह रचनात्मक खोज बॉक्स आपको टाइप करके या वर्णमाला पैनल को स्क्रॉल करके खोजने की अनुमति देता है.

TextboxList

इस खोज मॉड्यूल में कुछ कार्यों का एक संयोजन है: यह टैग प्रारूप में आपके खोज प्रश्नों को लपेटता है, और आपको एक विशिष्ट खोज टैग को हटाने की अनुमति देता है। यह ऑटो-पूर्ण के साथ भी आता है। जाना पहचाना लगता है? यह फेसबुक टैगिंग मॉड्यूल के समान है!

दूध याद रखें

YouTube खोज के समान, यहां खोज बॉक्स आपको तुरंत बताता है कि क्या कुछ आपके परिणाम से मेल खाता है। फिर भी ऑटो-सुझाव सुविधा का एक और बुद्धिमान उदाहरण.

प्रामाणिक नौकरियां

मुझे लगता है कि प्रामाणिक नौकरियों ने पहले ही अपनी खोज Google के सामने तत्काल परिणाम और चलाने के साथ की थी.

Kontain

Kontain का खोज बॉक्स उपयोगकर्ताओं को सामान्य खोज करने या केवल "अपडेट" या "उपयोगकर्ता" के लिए खोज परिणामों को फ़िल्टर करने की अनुमति देता है.

न्यूयॉर्क पत्रिका

Kontain के समान, NY Magazine की खोज गहरे फ़िल्टरिंग की अनुमति देती है.

ThemeForest

फिर भी खोज मॉड्यूल में फ़िल्टर करने का एक और उदाहरण आगंतुकों को वह प्राप्त करने में मदद करना है जो वे कम से कम समय के भीतर चाहते हैं.

खोज, सॉर्ट और फ़िल्टर करें

ब्रायन का खोज बॉक्स एक सुंदर तरीके से किया गया अग्रिम खोज मॉड्यूल जैसा दिखता है; आप अनुकूलित करते हैं कि खोज बटन को हिट करने से पहले आप कैसे परिणाम देखना चाहते हैं.

Tumblr

साइडबार पर सूक्ष्म और छोटे खोज मॉड्यूल - स्वच्छ!

MenuPages

यदि आप एक पूर्ण खोज मॉड्यूल की तलाश कर रहे हैं और अभी तक अंतरिक्ष एक बाधा है, तो यह दृष्टिकोण काम आ सकता है.

Quotezuki

लोगो के ठीक बाद सर्च मॉड्यूल, मिस करना वास्तव में कठिन है.

सी स्पायर वायरलेस

एक बड़ा वसा खोज बॉक्स जो केवल खोज टैब को मँडरा करने पर प्रकट होता है; अंतरिक्ष का उपयोग करने का एक और अच्छा तरीका है.

Spokeo

खूबसूरती से किया छानने के साथ चयनात्मक खोज.

VoucherCodes

इसकी व्यावसायिक प्रकृति को देखते हुए, खोज बॉक्स को ऊपरी तह और केंद्र में दाईं ओर खिसकना शायद सबसे अच्छा विचार है.

iStockPhoto

अन्य साइटों के समान, iStockPhoto अपने पाठकों के लिए बड़े पैमाने पर संसाधन प्रदान करता है, इसलिए खोज में फ़िल्टर करना निश्चित रूप से आवश्यक है.

TasteBook

सरल दिखने वाला अभी तक कमाल का खोज बॉक्स.

Grooveshark

ग्रूव्सहार्क आपको ऑनलाइन संगीत सुनने और साझा करने की अनुमति देता है; पहले पृष्ठ में आपके द्वारा इच्छित संगीत को खोजने के लिए केवल एक खोज बॉक्स के अलावा कुछ नहीं है। यह पूरी तरह से समझ में आता है.

जॉब्स के साथ गेमर

Google कस्टम खोज को कैसे अनुकूलित किया जाता है, इसका अच्छा उदाहरण है.

डेविड टोरोंडेल

अच्छा डार्क सर्च बॉक्स जो साइट डिज़ाइन के साथ अच्छी तरह से मिश्रण करता है.

अधिक

• एक रॉकिंग CSS3 खोज बॉक्स बनाना (Hongkiat)
• डिजाइनिंग द होली सर्च बॉक्स: उदाहरण और सर्वश्रेष्ठ अभ्यास (मुंहतोड़ पत्रिका)
• सुंदर CSS3 खोज फ़ॉर्म ट्यूटोरियल (वेब डिजाइनर दीवार)