Cách tạo thanh tìm kiếm lớn trong HTML

Thanh tìm kiếm kết nối mọi người với các trang web, ứng dụng dành cho thiết bị di động và thế giới. Đó là cửa sổ hội thoại giữa người dùng và ứng dụng hoặc trang web. Khi đối mặt với nội dung web phức tạp, người dùng thể hiện nhu cầu của họ bằng cách tìm kiếm từ khóa, mong muốn có được thông tin chính xác và trải nghiệm người dùng nhanh chóng và mượt mà

Thanh tìm kiếm được thiết kế tốt có thể cải thiện tỷ lệ chuyển đổi và nâng cao trải nghiệm người dùng. Mặc dù tầm quan trọng của nó, thanh tìm kiếm là một yếu tố đơn giản trên trang web hoặc ứng dụng và có thể rất dễ bị bỏ qua.  

Trước khi chuyển sang các ví dụ thiết kế thanh tìm kiếm tuyệt vời và cách bạn có thể tạo nguyên mẫu và kiểm tra thiết kế của mình bằng công cụ tạo mẫu Mockplus.  

Thiết kế thanh tìm kiếm HTML/CSS với liên kết mã

1. Biểu mẫu tìm kiếm với nút tìm kiếm hoạt hình

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm web/di động

tính năng thiết kế

• Nút tìm kiếm động
• Thiết kế hộp tìm kiếm HTML/CSS

Đây là một biểu mẫu tìm kiếm được tạo bằng HTML/CSS. Thông qua mã CSS, nút kính lúp có hiệu ứng động có thể chuyển đổi thành mũi tên phải khi di chuột. Để các bạn hiểu rõ hơn và học hỏi, designer Himalaya Singh đã đưa ra code để các bạn tham khảo

Bạn cũng có thể lấy cảm hứng từ 8 trang web hoạt hình tốt nhất với CSS & HTML Animation

2. Thanh tìm kiếm động

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm web/di động

tính năng thiết kế

• thiết kế HTML/CSS
• Hoạt hình nút tìm kiếm

Thiết kế hộp tìm kiếm truyền thống thường bị giới hạn ở hộp tìm kiếm, lời nhắc và nút xóa. Nhưng trên thực tế, một hộp tìm kiếm đơn giản có thể được thiết kế thông minh với niềm vui. Chẳng hạn như nút xóa, nó không chỉ xóa nội dung tìm kiếm mà còn đóng hộp tìm kiếm nhanh chóng

3. Biểu mẫu tìm kiếm có thể mở rộng với CSS3

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm web/di động

tính năng thiết kế. Hộp tìm kiếm có thể mở rộng với các từ đầu vào

Đây là một ví dụ về thiết kế thanh tìm kiếm thích ứng. Như bạn có thể thấy trong bản demo, hộp tìm kiếm sẽ mở rộng khung dựa trên số lượng ký tự đã nhập. Việc sử dụng CSS3 cho phép nó duy trì kiểu dáng ngay cả sau khi mở rộng

Ngoài ra, nếu bạn vẫn tò mò về thiết kế thích ứng, 5 ví dụ về thiết kế web thích ứng tuyệt vời khác có thể giúp bạn.  

4. Thanh tìm kiếm đơn giản

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm web/di động

tính năng thiết kế. viền màu + dấu nhắc mặc định + nút tìm kiếm

Sau khi nhìn thấy quá nhiều thiết kế ưa thích, một thiết kế hộp tìm kiếm đơn giản được làm mới về mặt trực quan. Nền xanh trang nhã và nút tìm kiếm màu trắng với dòng nhắc mặc định cho phép người dùng thực hiện chức năng tìm kiếm một cách dễ dàng và trực tiếp

5. Hoạt hình nút tìm kiếm

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm web/di động

tính năng thiết kế. hoạt hình nút tìm kiếm

Trong thiết kế thanh tìm kiếm này, nhà thiết kế biến biểu tượng kính lúp thành nút chuyển tiếp cùng với hành động tìm kiếm. Dấu nhắc văn bản sử dụng con trỏ xung làm tín hiệu đầu vào

Nếu cần, cũng đừng quên xem qua 13 Thiết kế nút mới nhất và đẹp nhất để lấy cảm hứng

6. Tìm kiếm đầu vào với hiệu ứng Morphing

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm trên web

tính năng thiết kế. hiệu ứng biến hình đầu vào tìm kiếm

Khi được chọn, biểu tượng tìm kiếm sẽ biến thành hộp tìm kiếm. Việc chuyển đổi giữa kính lúp và hộp tìm kiếm chủ yếu được thực hiện bằng HTML/CSS/JS

7. Hoạt hình trường tìm kiếm CSS

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm web/di động

tính năng thiết kế. Hoạt hình trường tìm kiếm CSS nổi

Khi di chuột qua nút kính lúp, hộp tìm kiếm sẽ tự động mở rộng. Đây là một cách hay để loại bỏ bước lựa chọn vì bạn có thể bắt đầu nhập văn bản chỉ bằng một cú nhấp chuột

8. Tìm kiếm tiêu đề

Mã HTML/CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm trên web

tính năng thiết kế

• Tìm kiếm thả xuống

• Hộp tìm kiếm chuyển đổi thanh điều hướng

Ví dụ này hiển thị hai kiểu hộp tìm kiếm hàng đầu thường được sử dụng trên các trang web

Đầu tiên, nhấp vào nút tìm kiếm để bật hộp tìm kiếm thả xuống. Ưu điểm là không ảnh hưởng đến bố cục của thanh điều hướng

Thứ hai, nhấp vào nút tìm kiếm, thanh điều hướng chuyển sang hộp tìm kiếm và thanh điều hướng biến mất. Đây là loại không gian thiết kế và bố trí trên trang web

9. Biểu tượng cho CSS Hoạt hình Trường Tìm kiếm

Mã CSS cho thiết kế này

Có thể áp dụng với. tìm kiếm trên web

tính năng thiết kế

• Hoạt hình CSS

• Nút biểu tượng kích hoạt tìm kiếm

Đây là hộp tìm kiếm được thiết kế bằng CSS. Điểm độc đáo của nó là bạn có thể đặt nút tìm kiếm ở bất cứ đâu và nút này sẽ mở rộng sang hộp tìm kiếm bằng cách nhấp vào. Khi bạn hoàn thành tìm kiếm hoặc nhấp lại, hộp tìm kiếm sẽ tự động được khôi phục thành nút kính lúp

Thiết kế thanh tìm kiếm Bootstrap với liên kết mã

10. Tìm kiếm bảng Bootstrap

Mã HTML/CSS cho thiết kế này

11. Tìm kiếm bảng Bootstrap Accordion

Mã HTML/CSS cho thiết kế này

Ví dụ về thiết kế thanh tìm kiếm sáng tạo trên Dribbble để truyền cảm hứng cho bạn

12. Diya- Phần anh hùng web mua sắm

tính năng thiết kế

• Kích thước hộp tìm kiếm thuận lợi

• Tìm kiếm hợp chất

• Nút gợi ý tìm kiếm

Kinh nghiệm cho thấy rằng việc nhập 27 ký tự vào hộp tìm kiếm là phù hợp. Điều đó về cơ bản đáp ứng 90% điều kiện truy vấn

Thiết kế tìm kiếm của Diya hoàn toàn phù hợp với nguyên tắc thiết kế thanh tìm kiếm này. Do thiết kế ô nhập liệu quá ngắn chỉ buộc người dùng tìm kiếm nội dung trang web với ký tự hạn chế. Do đó, nó không cho phép hiển thị kết quả tìm kiếm dưới dạng hình ảnh đầy đủ. Điều đó không có lợi cho người dùng đọc kết quả tìm kiếm và không thân thiện với người dùng

13. Gợi ý tìm kiếm

tính năng thiết kế

• Phân loại kết quả tìm kiếm

• Liên kết từ khóa

Gợi ý tìm kiếm là thanh tìm kiếm được tạo cho phim. Nhập từ khóa trong ứng dụng hiển thị kết quả tìm kiếm trong thời gian thực. Do không gian màn hình hạn chế của điện thoại di động, kết quả tìm kiếm được trình bày theo danh mục. Nó giúp cải thiện chuyển đổi. Đối với các ứng dụng dành cho thiết bị di động, Gợi ý tìm kiếm là một tài liệu tham khảo tốt để lấy cảm hứng thiết kế thanh tìm kiếm

14. Trang Video

tính năng thiết kế

• Nút tìm kiếm để tiết kiệm dung lượng

• Hộp nhập kích hoạt tìm kiếm

Tương tự như thiết kế thanh tìm kiếm phổ biến của ứng dụng dành cho thiết bị di động, thiết kế hộp tìm kiếm của trang Video được đặt ở trên cùng bên phải của màn hình. Nhằm tiết kiệm diện tích màn hình và cân bằng thiết kế thanh điều hướng được thay thế bằng nút phóng to đơn giản. Bạn có thể kích hoạt hộp nhập bằng cách chọn kính lúp. Khi thao tác tìm kiếm hoàn tất, hộp tìm kiếm sẽ trở về trạng thái ban đầu, không ảnh hưởng đến thanh điều hướng hay giao diện

15. Thanh tìm kiếm vật liệu

tính năng thiết kế

• Tìm kiếm hiệu ứng chuyển tiếp

• Tìm kiếm bằng giọng nói

Thanh tìm kiếm vật liệu là một ví dụ về thiết kế thanh tìm kiếm vật liệu. Khi không được sử dụng, thanh điều hướng trong suốt sẽ hiển thị văn bản lời nhắc tĩnh. Khi nút tìm kiếm được chọn, hoạt ảnh chuyển tiếp động được hiển thị, đồng thời, chức năng tìm kiếm được kích hoạt. Cũng lưu ý nút micrô ở cạnh phải, cho biết nó hỗ trợ tìm kiếm bằng giọng nói

16. Tìm kiếm biểu tượng tương tác

Có thể áp dụng với. trang web, tìm kiếm di động

tính năng thiết kế. tương tác biểu tượng tìm kiếm

Search Icon Interaction khá thú vị. Khi ô tìm kiếm được chọn, nút tìm kiếm sẽ tự động chuyển thành con trỏ nhập nhấp nháy, nhắc người dùng thực hiện thao tác tìm kiếm. thêm sở thích trực quan vào tìm kiếm

17. Thanh địa chỉ Chrome dành cho máy tính để bàn

Có thể áp dụng với. tìm kiếm trên web

tính năng thiết kế. thanh tìm kiếm trên màn hình nền + thanh địa chỉ (Omnibox)

Bản cập nhật thiết kế Chrome mới nhất sử dụng Omnibox (thanh tìm kiếm trên màn hình + thanh địa chỉ) trong thiết kế thanh tìm kiếm. Tức là, giờ đây bạn có thể nhận câu trả lời trực tiếp trên thanh địa chỉ mà không cần mở tab mới. Ngoài ra, nếu bạn tìm kiếm một trang web trong thanh địa chỉ, Chrome sẽ cho bạn biết trang web đó đã được mở hay chưa và cho phép người dùng chuyển trực tiếp đến trang bằng cách sử dụng "chuyển sang tab"

18. Bản trình diễn hoạt hình trường tìm kiếm

Có thể áp dụng với. tìm kiếm trên web

tính năng thiết kế

• Vùng tìm kiếm mở rộng theo số ký tự

• Tương tác biểu tượng tìm kiếm

Khái niệm hoạt ảnh tìm kiếm này tập trung vào hoạt ảnh tương tác của hộp tìm kiếm và nút tìm kiếm cũng như đối sánh từ khóa chính xác. So với chức năng tìm kiếm "nhàm chán" truyền thống, ví dụ này hy vọng sẽ cung cấp một số nguồn cảm hứng thiết kế thanh tìm kiếm mới cho các nhà thiết kế và nhà phát triển

19. Thanh tìm kiếm Microinteractions

Có thể áp dụng với. tìm kiếm web/tìm kiếm ứng dụng di động

tính năng thiết kế. tương tác vi mô liên tục của xoay và nảy

Đây là một khái niệm thiết kế hộp tìm kiếm tương tác vi mô rất thú vị. Nút tìm kiếm thay đổi thành hộp tìm kiếm sau khi nảy liên tục. Toàn bộ hộp tìm kiếm tham gia vào hiệu ứng động này. Loại thiết kế thanh tìm kiếm đang hoạt động này phù hợp nhất với các ứng dụng hoặc trò chơi dành cho trẻ em, không dành cho các ứng dụng nghiêm túc, bảo thủ hơn

20. Tìm kiếm Kỳ

Có thể áp dụng với. tìm kiếm trên web

tính năng thiết kế. trạng thái tìm kiếm khác nhau

Nhà thiết kế nên bị ám ảnh bởi các chi tiết thiết kế. Trong thiết kế thanh tìm kiếm này, một số trạng thái tìm kiếm khác nhau được hiển thị chi tiết, cụ thể là mặc định, di chuột, tiêu điểm, đề xuất, tìm kiếm, v.v. Mỗi trạng thái tương ứng với một chi tiết thiết kế khác nhau

20 thiết kế thanh tìm kiếm hoặc thiết kế hộp tìm kiếm tuyệt vời ở trên, mỗi thiết kế tập trung vào các khía cạnh khác nhau. Một số trong số họ tập trung vào phong cách của hộp tìm kiếm và thiết kế tương tác, trong khi những người khác tập trung vào các chức năng, trong khi những người khác tập trung vào các kỹ thuật thiết kế và phát triển

Mẹo cơ bản về cách thiết kế thanh tìm kiếm giao diện

Mockplus đã tóm tắt cách thiết kế hộp tìm kiếmhoặc thanh tìm kiếm sáng tạo. Dưới đây là một số thủ thuật hữu ích cho việc thiết kế giao diện thanh tìm kiếm. Lượng tương tác hoặc hoạt ảnh bạn muốn thêm sẽ tùy thuộc vào tình huống của bạn

1. Xác định phong cách của thanh tìm kiếm

• Tô màu. Thông thường, màu tô của thanh tìm kiếm sẽ là màu tương phản với màu nền của trang để dễ dàng nhìn thấy.

• Khung dây. chủ yếu được sử dụng cho các trang nền đơn giản và sạch sẽ

• Phép chiếu. Thường được sử dụng cho các phong cách đơn giản và nhẹ và chức năng tìm kiếm cao hơn

• Minh bạch. Thường được sử dụng trong các cảnh có màu nền phức tạp. Mục đích là để hài hòa hơn về mặt hình ảnh mà không làm hỏng thiết kế giao diện tổng thể của trang nền

• Không biên giới. Đối với các trang lớn và trắng với phong cách rõ ràng

2. Loại bán kính hộp tìm kiếm

• Góc phải

• Hình chữ nhật có bán kính. Thông dụng nhất là 4~8px

• Viên nang. Cho phong cách thương hiệu sôi nổi, trẻ trung và dễ mến

• Người ngoài hành tinh

Phần kết luận

Hy vọng rằng các ví dụ và phân tích về thiết kế thanh tìm kiếm ở trên đã giúp minh họa tầm quan trọng của một thiết kế thanh tìm kiếm xuất sắc trong việc cải thiện trải nghiệm người dùng của một ứng dụng hoặc trang web. Các tình huống khác nhau cần cung cấp các chức năng tìm kiếm khác nhau để nâng cao trải nghiệm tìm kiếm. Chúng tôi hy vọng điều này đã giúp bạn tìm thấy một số cảm hứng thiết kế thanh tìm kiếm cho công việc của riêng bạn

Bạn có thể tạo một thanh tìm kiếm trong HTML không?

Làm cách nào để tạo một công cụ tìm kiếm như Google trong HTML?