Pameran Reka Bentuk UI Carian Cantik
Ini jenis yang biasa di Internet di mana - jika kita gagal untuk mendapatkan apa yang kita cari di laman web, kita mencari untuk mencari. Kotak carian sentiasa menjadi bahagian penting laman web. Sekiranya anda menjalankan laman web yang intensif kandungan, ia tidak dapat dielakkan lagi. Mereka biasanya diletakkan dalam bidang berikut: header, menu navigasi atas atau bar sisi (atas lipat). Kadang-kadang kita juga boleh membuang satu lagi dalam footer untuk membuat carian lebih mudah untuk pengguna.
Kami datang jauh sejak Web 1.0; carian di web tidak lagi terhad kepada masukkan kata kunci dan cari carian. Pemaju berusaha untuk mencari pengalaman yang lebih baik untuk pelawat mereka dengan membaikpulih dan menambah lebih banyak fungsi, kata, penapisan carian untuk mendapatkan hasil yang lebih disasarkan, memberikan kata kunci carian atau sejarah carian semasa anda mengetik.
Dalam jawatan hari ini, kami mempamerkan beberapa kotak carian yang indah dengan ciri-ciri yang menjanjikan yang kami tahu. Sama ada anda sedang mencari untuk mengubah suai laman web anda atau hanya mencari inspirasi untuk kotak carian yang lebih baik, siaran ini adalah untuk anda. Senarai penuh selepas melompat!
Senarai MainNow
Bermula dengan awalan "Saya", modul carian ini cuba disengajar dengan bijak dan menyenaraikan keputusan yang sepadan dengan pertanyaan anda semasa anda mengetik.
Tatal Modul Carian
Disarankan oleh pereka Nico Nuzzaci, kotak carian kreatif ini membolehkan anda mencari dengan menaip atau dengan menatal panel abjad.
TextboxList
Modul carian ini mempunyai kombinasi beberapa fungsi: ia membungkus pertanyaan carian anda dalam format tag, dan membolehkan anda memadam tag carian tertentu. Ia juga dilengkapi dengan auto-lengkap. Kelihatan akrab? Ia sama dengan mod penandaan Facebook!
Ingat Susu itu
Sama seperti carian YouTube, kotak carian di sini memberitahu anda seketika jika sesuatu sepadan dengan hasil anda. Satu lagi contoh ciri auto-cadangan yang bijak.
Pekerjaan yang sahih
Saya fikir Pekerjaan Autentik sudah mempunyai carian dengan keputusan segera dan berjalan sebelum Google.
Kontain
Kotak carian Contain membolehkan pengguna melakukan carian umum atau menapis ke bawah hasil carian hanya untuk "kemas kini" atau "pengguna".
Majalah New York
Sama seperti Kontain, carian NY Magazine membolehkan penapisan lebih mendalam.
WorldWideThemes.net
Satu lagi contoh penapisan dalam modul carian untuk membantu pengunjung mendapatkan apa yang mereka mahu dalam masa yang minimum.
Cari, Urus & Penapis
Kotak carian Brian kelihatan seperti modul carian awal dilakukan dengan cara yang indah; anda menyesuaikan bagaimana anda mahu hasil kelihatan seperti sebelum memukul butang carian.
Tumblr
Modul carian halus dan kecil di bar sisi - kemas!
MenuPages
Sekiranya anda sedang mencari modul carian lengkap namun ruang adalah kekangan, pendekatan ini mungkin berguna.
Quotezuki
Cari modul selepas logo, sangat sukar untuk dilepaskan.
C Spire Wireless
Kotak carian lemak besar yang hanya muncul apabila melayang pada tab carian; cara lain yang baik untuk menggunakan ruang.
Spokeo
Pencarian selektif dengan penapisan dilakukan dengan indah.
VoucherCodes
Melihat sifat perniagaannya, memukul kotak carian kotak atas dan kanan di tengah mungkin idea terbaik.
iStockPhoto
Sama seperti laman web lain, iStockPhoto menawarkan sejumlah besar sumber untuk pembacanya, jadi penapisan dalam carian pasti penting.
TasteBook
Kotak carian mudah dicari tetapi hebat.
Grooveshark
Grooveshark membolehkan anda mendengar dan berkongsi muzik dalam talian; halaman pertama mengandungi apa-apa tetapi hanya kotak carian untuk anda mencari muzik yang anda inginkan. Ia benar-benar masuk akal.
Pemain dengan Pekerjaan
Contoh yang baik tentang bagaimana Google Custom Search disesuaikan.
David Torondel
Kotak carian gelap bagus yang menggabungkan dengan baik dengan reka bentuk tapak.
Lebih banyak
- Mencipta Kotak Mencari CSS3 Rocking (Hongkiat)
- Merancang Peti Carian Kudus: Contoh Dan Amalan Terbaik (Majalah Smashing)
- Tutorial CSS3 Cantik Tutorial (Web Designer Wall)
