معرض لتصاميم جميلة مربع البحث واجهة المستخدم
إنه أمر شائع على شبكة الإنترنت حيث - إذا فشلنا في الحصول على ما نبحث عنه على موقع ويب ، فإننا نلجأ إلى البحث. كان مربع البحث دائمًا جزءًا أساسيًا من موقع الويب. إذا كنت تدير موقع ويب كثيف المحتوى ، فهذا أمر لا مفر منه. عادةً ما يتم وضعها في المناطق التالية: الرأس أو قائمة التنقل العلوي أو الشريط الجانبي (الطي العلوي). في بعض الأحيان ، قد نقوم أيضًا برمي واحدة في التذييل لجعل البحث أكثر ملاءمة للمستخدمين.
لقد قطعنا شوطًا طويلًا منذ الويب 1.0 ؛ لم يعد البحث على الويب مقصورًا على أدخل الكلمة الرئيسية وضرب البحث. يسعى المطورون إلى جعل البحث تجربة أفضل لزوارهم من خلال تجديد وإضافة المزيد من الوظائف ، على سبيل المثال ، تصفية البحث للحصول على المزيد من النتائج المستهدفة أو توفير كلمات رئيسية للبحث أو تاريخ البحث أثناء الكتابة.
في منشور اليوم ، نعرض بعض مربعات البحث الجميلة بميزات واعدة عرفناها. سواء كنت تبحث عن تجديد موقع الويب الخاص بك أو مجرد البحث عن مصدر إلهام لصندوق بحث أفضل ، فإن هذا المنشور يناسبك. قائمة كاملة بعد القفز!
PlaylistNow
بدءًا من بادئة "أنا" ، تحاول وحدة البحث هذه مطابقة بذكاء مع النتائج المطابقة لطلب البحث وتسجيلها.
التمرير وحدة البحث
يسمح لك مربع البحث الإبداعي هذا ، الذي اقترحه المصمم Nico Nuzzaci ، بالبحث عن طريق الكتابة أو بالتمرير لوحة أبجدية.
TextboxList
تحتوي وحدة البحث هذه على مجموعة من الوظائف القليلة: تقوم بتغليف استعلامات البحث بتنسيق العلامات ، وتسمح لك بحذف علامة بحث محددة. كما يأتي مع الإكمال التلقائي. يبدو مألوفا؟ انها تشبه وحدة وضع العلامات على Facebook!
تذكر الحليب
على غرار بحث YouTube ، يخبرك مربع البحث هنا على الفور ما إذا كان هناك شيء يتوافق مع نتيجتك. مثال آخر ذكي على ميزة الإيحاء التلقائي.
وظائف أصيلة
أعتقد أن Authentic Jobs قد قام بالفعل بالبحث مع نتائج فورية قيد التشغيل قبل Google.
Kontain
يسمح مربع بحث Kontain للمستخدمين بإجراء بحث عام أو تصفية نتائج البحث إلى "تحديثات" أو "مستخدم" فقط.
مجلة نيويورك
على غرار Kontain ، يسمح بحث مجلة نيويورك بالتصفية الأعمق.
ThemeForest
مثال آخر على التصفية في وحدة البحث لمساعدة الزائرين على الحصول على ما يريدون في أقل وقت ممكن.
البحث ، فرز وتصفية
يبدو مربع بحث برايان وكأنه وحدة بحث متقدمة تتم بطريقة جميلة ؛ يمكنك تخصيص كيف تريد ظهور النتائج قبل الضغط على زر البحث.
نعرفكم
وحدة البحث خفية وصغيرة على الشريط الجانبي - أنيق!
MenuPages
إذا كنت تبحث عن وحدة بحث كاملة ومع ذلك تعتبر المساحة قيدًا ، فقد يكون هذا النهج مفيدًا.
Quotezuki
وحدة البحث مباشرة بعد الشعار ، من الصعب حقًا تفويتها.
C سباير اللاسلكية
مربع بحث كبير الحجم يظهر فقط عند تحريك علامة تبويب البحث ؛ طريقة جيدة أخرى للاستفادة من الفضاء.
سبوكيو
البحث الانتقائي مع تصفية القيام به بشكل جميل.
VoucherCodes
عند النظر إلى طبيعتها التجارية ، فإن صقل مربع البحث العلوى واليمين في الوسط هو أفضل فكرة.
آي ستوك فوتو
على غرار المواقع الأخرى ، تقدم iStockPhoto قدرًا هائلاً من الموارد لقرائها ، لذا فإن التصفية في البحث ضرورية بالتأكيد.
TasteBook
بسيطة تبحث بعد مربع البحث رهيبة.
Grooveshark
يتيح لك تطبيق Grooveshark الاستماع ومشاركة الموسيقى عبر الإنترنت ؛ تتكون الصفحة الأولى من لا شيء سوى مربع بحث لك للبحث عن الموسيقى التي تريدها. الأمر منطقي تماما.
ألعاب مع وظائف
مثال رائع على كيفية تخصيص Google Custom Search.
ديفيد توروندل
مربع بحث داكن جميل يمتزج جيدًا مع تصميم الموقع.
أكثر من
- إنشاء مربع بحث هزاز CSS3 (Hongkiat)
- تصميم مربع البحث المقدس: أمثلة وأفضل الممارسات (تحطيم مجلة)
- جميل CSS3 بحث نموذج تعليمي (جدار مصمم الويب)
