Trưng bày các mẫu thiết kế UI hộp tìm kiếm đẹp
Nó khá phổ biến trên Internet - nếu chúng ta không có được thứ chúng ta đang tìm kiếm trên một trang web, chúng ta sẽ tìm đến. Hộp tìm kiếm luôn là một phần thiết yếu của trang web. Nếu bạn điều hành một trang web chuyên sâu về nội dung, nó thậm chí còn không thể tránh khỏi. Chúng thường được đặt trong các khu vực sau: tiêu đề, menu điều hướng trên cùng hoặc thanh bên (nếp gấp trên). Đôi khi, chúng tôi cũng có thể sử dụng một chân khác để giúp việc tìm kiếm thuận tiện hơn cho người dùng.
Chúng tôi đã đi một chặng đường dài kể từ Web 1.0; tìm kiếm trên web không còn giới hạn ở nhập từ khóa và nhấn tìm kiếm. Các nhà phát triển cố gắng làm cho việc tìm kiếm trải nghiệm tốt hơn cho khách truy cập của họ bằng cách cải tiến và thêm nhiều chức năng hơn, nói, lọc tìm kiếm để có được kết quả được nhắm mục tiêu hơn, cung cấp từ khóa tìm kiếm hoặc lịch sử tìm kiếm khi bạn nhập.
Trong bài viết hôm nay, chúng tôi giới thiệu một số hộp tìm kiếm đẹp với các tính năng đầy hứa hẹn mà chúng tôi đã biết. Cho dù bạn đang tìm cách tân trang trang web của mình hay chỉ đơn giản là tìm kiếm nguồn cảm hứng cho một hộp tìm kiếm tốt hơn, bài đăng này là dành cho bạn. Danh sách đầy đủ sau khi nhảy!
Danh sách phát
Bắt đầu với tiền tố của "Tôi là", mô-đun tìm kiếm này cố gắng khớp một cách thông minh và liệt kê các kết quả khớp với truy vấn của bạn khi bạn nhập.
Mô-đun tìm kiếm cuộn
Được đề xuất bởi nhà thiết kế Nico Nuzzaci, hộp tìm kiếm sáng tạo này cho phép bạn tìm kiếm bằng cách nhập hoặc bằng cách cuộn bảng chữ cái.
Danh sách hộp văn bản
Mô-đun tìm kiếm này có sự kết hợp của một số chức năng: nó bao bọc các truy vấn tìm kiếm của bạn ở định dạng thẻ và cho phép bạn xóa một thẻ tìm kiếm cụ thể. Nó cũng đi kèm với tự động hoàn thành. Trông quen quen? Nó tương tự như mô-đun gắn thẻ Facebook!
Nhớ sữa
Tương tự như tìm kiếm YouTube, hộp tìm kiếm ở đây cho bạn biết ngay lập tức nếu có gì đó phù hợp với kết quả của bạn. Một ví dụ thông minh khác về tính năng tự động đề xuất.
Việc làm đích thực
Tôi nghĩ rằng Công việc xác thực đã có tìm kiếm của họ với kết quả ngay lập tức và chạy trước Google.
Kontain
Hộp tìm kiếm của Kontain cho phép người dùng thực hiện tìm kiếm chung hoặc lọc kết quả tìm kiếm xuống chỉ "cập nhật" hoặc "người dùng".
Tạp chí New York
Tương tự như Kontain, tìm kiếm của Tạp chí NY cho phép lọc sâu hơn.
Chủ đề
Một ví dụ khác về lọc trong mô-đun tìm kiếm để giúp khách truy cập có được những gì họ muốn trong thời gian tối thiểu.
Tìm kiếm, Sắp xếp & Lọc
Hộp tìm kiếm của Brian trông giống như một mô-đun tìm kiếm trước được thực hiện theo một cách đẹp; bạn tùy chỉnh cách bạn muốn kết quả trông như thế nào trước khi nhấn nút tìm kiếm.
Tumblr
Mô-đun tìm kiếm nhỏ và tinh tế trên thanh bên - gọn gàng!
MenuPages
Nếu bạn đang tìm kiếm một mô-đun tìm kiếm hoàn chỉnh và không gian là một hạn chế, phương pháp này có thể có ích.
Trích dẫn
Tìm kiếm mô-đun ngay sau logo, thật khó để bỏ lỡ.
C Spire không dây
Một hộp tìm kiếm lớn chất béo chỉ xuất hiện khi di chuột qua tab tìm kiếm; một cách tốt khác để tận dụng không gian.
Spokeo
Tìm kiếm chọn lọc với bộ lọc được thực hiện đẹp mắt.
Phiếu quà tặng
Nhìn vào bản chất kinh doanh của nó, đập hộp tìm kiếm trên và ngay ở trung tâm có lẽ là ý tưởng tốt nhất.
iStockPhoto
Tương tự như các trang web khác, iStockPhoto cung cấp lượng tài nguyên khổng lồ cho độc giả, vì vậy việc lọc trong tìm kiếm là điều cần thiết.
Hương vị
Tìm kiếm đơn giản nhưng hộp tìm kiếm tuyệt vời.
Grooveshark
Grooveshark cho phép bạn nghe và chia sẻ nhạc trực tuyến; trang đầu tiên không có gì ngoài một hộp tìm kiếm để bạn tìm kiếm bản nhạc bạn muốn. Nó hoàn toàn có ý nghĩa.
Game thủ có việc làm
Ví dụ hay về cách Google Custom Search được tùy chỉnh.
David Torondel
Hộp tìm kiếm tối đẹp kết hợp tốt với thiết kế trang web.
Hơn
- Tạo Hộp Tìm kiếm CSS3 Rocking (Hồng Kông)
- Thiết kế Hộp Tìm kiếm Thánh: Ví dụ và Thực tiễn Tốt nhất (Tạp chí đập vỡ)
- Hướng dẫn biểu mẫu tìm kiếm CSS3 đẹp (Tường thiết kế web)
