Showcase Desain UI Kotak Pencarian Cantik
Ini agak umum di Internet di mana - jika kita gagal mendapatkan apa yang kita cari di situs web, kita terpaksa mencari. Kotak pencarian selalu menjadi bagian penting dari sebuah situs web. Jika Anda menjalankan situs web konten-intensif, itu bahkan lebih tak terhindarkan. Mereka biasanya ditempatkan di area berikut: header, menu navigasi atas atau sidebar (lipatan atas). Terkadang kami juga melempar footer yang lain untuk membuat pencarian lebih nyaman bagi pengguna.
Kami datang jauh sejak Web 1.0; mencari di web tidak lagi terbatas pada masukkan kata kunci dan tekan pencarian. Pengembang berusaha membuat pencarian menjadi pengalaman yang lebih baik bagi pengunjung mereka dengan mengubah dan menambahkan lebih banyak fungsi, kata, penyaringan pencarian untuk mendapatkan hasil yang lebih bertarget, memberikan kata kunci pencarian atau histori pencarian saat Anda mengetik..
Dalam posting hari ini, kami menampilkan beberapa kotak pencarian yang indah dengan fitur yang menjanjikan yang kami ketahui. Apakah Anda ingin mengubah situs web Anda atau hanya mencari inspirasi untuk kotak pencarian yang lebih baik, posting ini adalah untuk Anda. Daftar lengkap setelah lompat!
Daftar Putar Sekarang
Dimulai dengan awalan "Saya", modul pencarian ini berupaya mencocokkan dan mencantumkan hasil yang cocok dengan kueri Anda saat Anda mengetik.
Gulir Modul Pencarian
Disarankan oleh desainer Nico Nuzzaci, kotak pencarian kreatif ini memungkinkan Anda untuk mencari dengan mengetik atau dengan menggulir panel alfabet.
TextboxList
Modul pencarian ini memiliki kombinasi beberapa fungsi: ini membungkus permintaan pencarian Anda dalam format tag, dan memungkinkan Anda untuk menghapus tag pencarian tertentu. Itu juga dilengkapi dengan pelengkapan otomatis. Terlihat tidak asing? Ini mirip dengan modul penandaan Facebook!
Ingat Susu
Mirip dengan pencarian YouTube, kotak pencarian di sini memberitahu Anda langsung jika ada sesuatu yang cocok dengan hasil Anda. Satu lagi contoh cerdas dari fitur saran otomatis.
Pekerjaan Asli
Saya pikir Pekerjaan Asli sudah memiliki pencarian mereka dengan hasil instan dan berjalan sebelum Google.
Kontain
Kotak pencarian Kontain memungkinkan pengguna untuk melakukan pencarian umum atau memfilter hasil pencarian hanya "pembaruan" atau "pengguna".
Majalah New York
Mirip dengan Kontain, pencarian NY Magazine memungkinkan pemfilteran lebih dalam.
ThemeForest
Contoh lain dari pemfilteran dalam modul pencarian untuk membantu pengunjung mendapatkan apa yang mereka inginkan dalam waktu minimal.
Cari, Sortir & Filter
Kotak pencarian Brian terlihat seperti modul pencarian lanjutan yang dilakukan dengan cara yang indah; Anda dapat menyesuaikan bagaimana hasil yang Anda inginkan sebelum menekan tombol pencarian.
Tumblr
Modul pencarian halus dan kecil di sidebar - rapi!
MenuPages
Jika Anda mencari modul pencarian yang lengkap namun ruang menjadi kendala, pendekatan ini mungkin berguna.
Quotezuki
Cari modul tepat setelah logo, sangat sulit untuk dilewatkan.
C Spire Wireless
Kotak pencarian besar dan gemuk yang hanya muncul saat mengarahkan tab pencarian; Cara lain yang baik untuk memanfaatkan ruang.
Spokeo
Pencarian selektif dengan penyaringan dilakukan dengan indah.
Kode Voucher
Melihat sifat bisnisnya, memukul kotak pencarian bagian atas dan kanan di tengah mungkin adalah ide terbaik.
iStockPhoto
Mirip dengan situs lain, iStockPhoto menawarkan sejumlah besar sumber daya untuk para pembacanya, jadi penyaringan dalam pencarian sangat penting.
TasteBook
Kotak pencarian yang terlihat sederhana namun mengagumkan.
Grooveshark
Grooveshark memungkinkan Anda untuk mendengarkan dan berbagi musik secara online; halaman pertama hanya terdiri dari kotak pencarian untuk mencari musik yang Anda inginkan. Sangat masuk akal.
Gamer dengan Pekerjaan
Contoh yang bagus tentang bagaimana Google Custom Search dikustomisasi.
David Torondel
Kotak pencarian gelap bagus yang menyatu dengan baik dengan desain situs.
Lebih
- Membuat Kotak Pencarian CSS3 Rocking (Hongkiat)
- Merancang Kotak Pencarian Suci: Contoh Dan Praktik Terbaik (Majalah Smashing)
- Tutorial Form Pencarian Cantik CSS3 (Dinding Desainer Web)
