每个现代网站都应使用 响应式布局。这使得在任何设备上浏览都更加容易，但是页面的设计更加棘手。 最受欢迎的搜索字段是一个棘手的页面元素的示例。随着做网站响应式布局的兴起，网页设计师对搜索表单有了新的趋势，使其既易于访问又时尚。 让我们看一下网络上搜索表单趋势的一些示例。这些应该可以帮助您规划自己的搜索用户界面，并为您的下一个项目启动提供一些思路。
下拉导航搜索
到目前为止，最常见的搜索功能是下拉列表。可以通过导航栏内的链接来固定搜索，该链接可以打开或关闭搜索。 由于许多网站都使用 固定导航， 因此更容易保持搜索字段在任何地方都可见。 但是即使使用静态导航栏，您也会发现此下拉搜索功能非常实用。响应页面上的其他地方没有太多空间可以挤压搜索表单而不会损害主要内容。
通过右上角的快速便捷的下拉搜索字段来实现此目的。它依靠一个小的放大镜图标， 每个人都应该通用。 显示该字段后，它将自动将放大镜更改为“ X”。这是澄清用户体验的好方法，因此人们知道他们可以随时关闭该字段。 更不用说SEJ设计很棒，并且与所有设备上的布局完美融合。 Problogger 是另一个不错的示例，它在台式机和移动设备之间的功能有所不同。
全屏模式
如果您不喜欢下拉效果，可以尝试使用模式窗口。 从表面上看，这看起来很相似，因为它已连接到搜索图标。但是，表单不会从导航栏下拉出来，而是出现在页面的 模态窗口中。 您可以在Full Home Living上看到一个干净的示例， 其中搜索模式会覆盖整个屏幕。
内联响应输入
动态内联表单提供隐藏搜索字段以及下拉菜单的混合。 使用内联搜索表单，您可以将搜索开关置于导航中，但以内联方式 而不是在导航下方显示 。我们在Designmodo上具有这种效果，它是许多博客的流行选择。 例如，检查 带有其内联搜索字段的 Cartoon Brew设计。他们的导航中有一个清晰可见的放大镜，但是直到切换后该表单才出现。
全尺寸可拉伸形式
我不经常看到这种搜索设计，但是如果您的布局可以适应的话，它肯定可以很好地工作。 使用可拉伸的搜索表单，您可以设计整个表单以使其布局适合100％的宽度。从那里您可以调整视野以缩小到较小的空间，甚至可以缩小到足以在智能手机上正常工作的程度。 使用此技术，搜索字段 始终可见， 并且根据需要缩小尺寸。真实的乔布斯就是这种趋势的一个很好的例子。
如果您访问该网站并调整浏览器的大小，您将看到其他页面元素也如何重新排列。布局应具有灵活性，以使所有内容仍然可见，并将其压缩到设计中。搜索表单是许多做网站的必备内容，如果您需要可见的表单，请尝试使用这种灵活的表单技术。或者，您可以尝试结合使用下拉表单趋势和此可扩展表单UI来创建一个覆盖页面的隐藏字段。
设计搜索表单
响应式网站搜索的最佳解决方案通常基于项目。有些导航菜单只是没有足够的空间用于内联搜索字段，因此需要将其隐藏在屏幕外。 如果您不确定如何前进，请尝试浏览其他网站以获得 设计灵感 并研究其搜索形式。 记下您喜欢的搜索功能以及最适合您的项目的记录。通过反复试验来测试您的一些收藏夹，以查看哪些响应式搜索UI提供最佳体验。
