ตัวอย่างการออกแบบ UI ของช่องค้นหาที่สวยงาม

เป็นเรื่องธรรมดาบนอินเทอร์เน็ตที่ - หากเราไม่ได้สิ่งที่เรากำลังมองหาบนเว็บไซต์เราก็หันไปค้นหา ช่องค้นหาเป็นส่วนสำคัญของเว็บไซต์เสมอ หากคุณใช้งานเว็บไซต์ที่เน้นเนื้อหาเป็นสิ่งที่หลีกเลี่ยงไม่ได้ โดยปกติจะวางไว้ในพื้นที่ต่อไปนี้: ส่วนหัว, เมนูการนำทางด้านบนหรือแถบด้านข้าง (ครึ่งบน) บางครั้งเราอาจใช้ส่วนท้ายอื่นเพื่อทำให้การค้นหาสะดวกยิ่งขึ้นสำหรับผู้ใช้.

เรามาไกลตั้งแต่ Web 1.0; การค้นหาบนเว็บไม่ จำกัด อีกต่อไป ป้อนคำหลักและกดค้นหา. นักพัฒนามุ่งมั่นที่จะทำให้การค้นหาประสบการณ์ที่ดีขึ้นสำหรับผู้เยี่ยมชมของพวกเขาโดยการปรับปรุงและเพิ่มฟังก์ชั่นเพิ่มเติมกล่าวว่าการกรองการค้นหาเพื่อให้ได้ผลลัพธ์ที่ตรงเป้าหมายมากขึ้นให้คำค้นหาหรือประวัติการค้นหาในขณะที่คุณพิมพ์.

ในโพสต์ของวันนี้เราจะแสดงช่องค้นหาที่สวยงามพร้อมคุณสมบัติที่น่าสนใจซึ่งเราได้รู้จัก ไม่ว่าคุณจะต้องการปรับปรุงเว็บไซต์ของคุณหรือเพียงแค่หาแรงบันดาลใจสำหรับช่องค้นหาที่ดีกว่าโพสต์นี้เหมาะสำหรับคุณ รายการทั้งหมดหลังจากกระโดด!

PlaylistNow

เริ่มต้นด้วยคำนำหน้า "ฉันคือ" โมดูลการค้นหานี้พยายามที่จะจับคู่อย่างชาญฉลาดและแสดงรายการผลลัพธ์ที่ตรงกับคำค้นหาของคุณขณะที่คุณพิมพ์.

เลื่อนโมดูลการค้นหา

แนะนำโดยนักออกแบบ Nico Nuzzaci ช่องค้นหาโฆษณานี้ช่วยให้คุณค้นหาโดยพิมพ์หรือเลื่อนแผงตัวอักษร.

TextboxList

โมดูลการค้นหานี้มีการรวมกันของฟังก์ชั่นบางอย่าง: มันห่อคำค้นหาของคุณในรูปแบบแท็กและช่วยให้คุณสามารถลบแท็กการค้นหาที่เฉพาะเจาะจง นอกจากนี้ยังมาพร้อมกับระบบเติมข้อความอัตโนมัติ ดูคุ้น ๆ เหรอ? มันคล้ายกับโมดูลการแท็ก Facebook!

จำนม

เช่นเดียวกับการค้นหาของ YouTube ช่องค้นหาที่นี่จะบอกคุณทันทีว่ามีบางอย่างที่ตรงกับผลลัพธ์ของคุณ อีกตัวอย่างอัจฉริยะของคุณสมบัติการแนะนำอัตโนมัติ.

งานที่แท้จริง

ฉันคิดว่างานที่แท้จริงมีการค้นหาด้วยผลลัพธ์ทันใจและทำงานก่อน Google แล้ว.

Kontain

ช่องค้นหาของ Kontain อนุญาตให้ผู้ใช้ทำการค้นหาทั่วไปหรือกรองผลการค้นหาลงใน "การอัพเดต" หรือ "ผู้ใช้" เท่านั้น.

นิตยสารนิวยอร์ก

เช่นเดียวกับ Kontain การค้นหาของนิตยสาร NY อนุญาตให้กรองได้ลึกกว่า.

ThemeForest

อีกตัวอย่างหนึ่งของการกรองในโมดูลการค้นหาเพื่อช่วยให้ผู้เยี่ยมชมได้รับสิ่งที่พวกเขาต้องการภายในเวลาอันสั้น.

ค้นหาเรียงลำดับและกรอง

ช่องค้นหาของ Brian ดูเหมือนโมดูลค้นหาขั้นสูงที่ทำขึ้นมาอย่างสวยงาม คุณกำหนดลักษณะที่ต้องการให้ผลลัพธ์ดูเหมือนก่อนกดปุ่มค้นหา.

Tumblr

โมดูลการค้นหาที่ละเอียดและเล็กบนแถบด้านข้าง - เรียบร้อย!

MenuPages

หากคุณกำลังมองหาโมดูลการค้นหาที่สมบูรณ์และยังมีข้อ จำกัด พื้นที่วิธีการนี้อาจมีประโยชน์.

Quotezuki

โมดูลค้นหาหลังจากโลโก้มันเป็นเรื่องยากที่จะพลาด.

C Spire Wireless

ช่องค้นหาไขมันขนาดใหญ่ที่ปรากฏเมื่อวางเมาส์เหนือแท็บการค้นหาเท่านั้น อีกวิธีที่ดีในการใช้ประโยชน์จากพื้นที่.

Spokeo

การค้นหาแบบเลือกด้วยการกรองเสร็จสิ้นอย่างสวยงาม.

VoucherCodes

เมื่อดูที่ลักษณะธุรกิจการตีที่พับครึ่งบนของช่องค้นหาและด้านขวาตรงกลางน่าจะเป็นแนวคิดที่ดีที่สุด.

iStockPhoto

คล้ายกับเว็บไซต์อื่น ๆ iStockPhoto นำเสนอทรัพยากรจำนวนมากสำหรับผู้อ่านดังนั้นการกรองในการค้นหาจึงเป็นสิ่งจำเป็นอย่างยิ่ง.

TasteBook

ช่องค้นหาที่เรียบง่าย แต่ดูดี.

Grooveshark

Grooveshark ช่วยให้คุณฟังและแบ่งปันเพลงออนไลน์ หน้าแรกไม่มีอะไรเลยนอกจากแค่ช่องค้นหาเพื่อให้คุณค้นหาเพลงที่คุณต้องการ มันสมเหตุสมผลอย่างสิ้นเชิง.

นักเล่นเกมที่มีงาน

ตัวอย่างที่ดีของการปรับแต่ง Google Custom Search.

David Torondel

ช่องค้นหาสีเข้มที่เข้ากันได้ดีกับการออกแบบไซต์.

มากกว่า

• สร้างกล่องค้นหา CSS3 ที่โยกได้ (Hongkiat)
• การออกแบบกล่องค้นหาศักดิ์สิทธิ์: ตัวอย่างและวิธีปฏิบัติที่ดีที่สุด (นิตยสารยอดเยี่ยม)
• การสอนรูปแบบการค้นหา CSS3 ที่สวยงาม (กำแพงนักออกแบบเว็บไซต์)