ui设计作品展示_美丽的搜索框UI设计展示

这在Internet上很常见–如果我们无法在网站上找到想要的东西，我们会寻求搜索。 搜索框一直是网站的重要组成部分。 如果您经营一个内容密集型网站 ，那将是不可避免的。 它们通常位于以下区域：页眉， 顶部导航菜单或侧栏（上折叠）。 有时，我们可能还会在页脚中添加另一个内容，以使搜索对用户更加方便。

自Web 1.0以来，我们已经走了很长一段路。 在网络上搜索不再局限于输入关键字并点击搜索 。 开发人员努力通过改进和添加更多功能来努力为访问者提供更好的搜索体验 ，例如，搜索过滤以获取更具针对性的结果，在您键入时提供搜索关键字或搜索历史。

在今天的帖子中，我们展示了一些美丽的搜索框，这些搜索框具有我们已经知道的有希望的功能。 无论您是想改造自己的网站，还是只是寻求灵感来寻找更好的搜索框，此帖子都适合您。 跳完后的完整清单！

现在播放清单

从前缀“我是”开始，此搜索模块尝试在键入时智能匹配并列出与查询匹配的结果。

滚动搜索模块

由设计师Nico Nuzzaci建议，此创意搜索框可让您通过键入或滚动字母面板进行搜索。

文字框清单

此搜索模块具有以下几个功能的组合：它以标签格式包装搜索查询，并允许您删除特定的搜索标签。 它还具有自动完成功能。 看起来很熟悉？ 它类似于Facebook标记模块！

与YouTube搜索类似，此处的搜索框会立即告诉您是否有符合您搜索结果的内容。 自动建议功能的另一个智能示例。

我认为Authentic Jobs早在Google之前就已经可以搜索并获得即时结果。

Kontain的搜索框允许用户进行常规搜索或将搜索结果过滤为仅“更新”或“用户”。

与Kontain相似，《 NY Magazine》的搜索允许进行更深层的过滤。

在搜索模块中进行过滤以帮助访问者在最短时间内获得所需信息的另一个示例。

Brian的搜索框看起来像一个高级搜索模块，采用了精美的方式。 您可以在点击搜索按钮之前自定义所需的结果。

侧边栏上的细小搜索模块–整洁！

如果您正在寻找一个完整的搜索模块，但是空间有限，那么这种方法可能会派上用场。

Quotezuki

徽标后面的搜索模块，真的很难错过。

一个大的胖搜索框，仅在将搜索标签悬停时才会显示； 另一种利用空间的好方法。

带有过滤功能的选择性搜索效果出色。

考虑到其业务性质，最好将搜索框向上折叠并居中放置。

与其他网站类似，iStockPhoto为读者提供了大量资源，因此在搜索中进行筛选绝对必不可少。

简单但出色的搜索框。

Grooveshark允许您在线收听和共享音乐； 第一页只包含一个搜索框，供您搜索所需的音乐。 完全有道理。

关于如何自定义Google自定义搜索的一个很好的例子。

漂亮的深色搜索框，与网站设计完美融合。

更多

• 创建一个摇摆CSS3搜索框 （Hongkiat）
• 设计神圣搜索框：示例和最佳实践 （Smashing Magazine）
• 漂亮CSS3搜索表单教程 （网页设计师墙）

翻译自: https://www.hongkiat.com/blog/beautiful-website-search-box-ui-design/