网站建设响应式搜索表单:Web设计人员的提示和趋势

每个现代网站都应该使用响应式布局。这使得浏览任何设备都变得更加容易，但这使得页面设计变得更加困难。

所钟爱的搜索字段是一个棘手的页面元素的例子。随着网页设计的迅速发展，网页设计师们也有了新的搜索趋势，让他们既方便又时尚。

让我们来看看web上搜索表单趋势的一些例子。这些可以帮助您规划自己的搜索ui，并为您的下一个项目发布提供一些想法。

下拉导航搜索

到目前为止，最常见的搜索功能是下拉表单。这可以通过一个导航条的链接来固定，它可以切换搜索。

由于许多网站使用固定的导航，使得搜索字段随处可见变得更加容易。

但即使有一个静态导航条，你也会发现这个下拉式搜索功能非常实用。在一个响应性的页面上，没有太多的空间可以压缩搜索表单而不损害主要内容。

下拉导航搜索

搜索引擎日志在右上角有一个快速和简单的下拉搜索框。它依靠一个小的放大镜图标，每个人都应该是通用的。



一旦磁场显示出来，它就会自动把放大镜变成一个“X”。这是澄清用户体验的好方法，这样人们就知道他们可以随时关闭这个领域。

更不用说SEJ的设计非常棒，它与所有设备上的布局完美地融合在一起。

Problogger是另一个很好的例子，它在桌面和移动之间做了一些不同的事情。

下拉搜索

当你在一个小屏幕上浏览时，你会看到一个典型的放大镜和下拉框。

但是桌面用户在导航条上有更多的空间，这鼓励了一个功能齐全的工作搜索领域。很酷!

如果你有足够的空间，你可以尝试这样一个完整的形式。

另一个遵循同样方法的网站是瘦领带。

瘦的关系

注意，它们的默认搜索字段比导航中的其他链接要小得多。这样它就不会占用太多空间，即使在较小的设备上也能保持可见。

全屏模式

如果您不喜欢下拉效果，您可以尝试使用模式窗口。

在表面上，这看起来很相似，因为它连接到一个搜索图标。但它不会从导航栏上掉下来，而是会出现在页面的模态窗口中。

你可以看到一个干净的例子，在充分的家庭生活中，搜索模式覆盖整个屏幕。

全屏模式

这吸引了用户的注意力，并将用户的注意力吸引到表单上。它的设计是完全响应和易于使用，因为模态可以用一个龙头关闭。

唯一的缺点是，如果你不想要一个简单的屏幕覆盖，只需要一个搜索框，这就会让你觉得有点“太多”了。

如果你有足够的勇气添加更多内容，你可以尝试在他们的网站上建立一个像Comedy Central这样的搜索模式。

喜剧中心

这也占据了整个页面，但是包括了他们最新的节目和首映式的额外链接。

如果你有新的帖子，热门的分类，或者突发新闻，这将是一个很好的方式来展示页面上额外的链接。

全屏模式运行良好，但你必须注意用户体验。确保所有设备上的模态工作，用户可以轻松地关闭模态。

内联响应输入

动态内联表单提供了隐藏搜索字段和下拉菜单的混合。

使用内联搜索表单，您可以将搜索放置到导航栏中，但可以在导航栏内显示，而不是在导航栏下显示。我们在Designmodo上有这个效果，这是很多博客的热门选择。

例如，用他们的内联搜索字段查看卡通Brew设计。他们的导航有一个放大镜，在清晰的视图中，但是表单直到它被切换时才出现。

内联响应输入

它与导航条内联，所以这不会占用太多空间。响应式设备需要处理不同的搜索，因此在较小的浏览器中，它只出现在拉下滑动导航中。

但是你也可以通过隐藏在导航栏里来解决内联搜索字段。dualshocker有一个奇妙的滑动菜单，可以在所有屏幕上运行。

内联响应输入

该导航将所有的菜单链接和搜索表单在顶部。它很容易访问并内置到导航中，所有设备的UI都是相同的。

如果你喜欢汉堡包的滑动菜单，那么它可以很好地工作。

但是要正确地遵循这个技巧，你必须把汉堡包菜单作为所有屏幕的默认选项。

当然不是一个坏主意，但可能不是你想要的。

设计内联表单的更好方法是遵循我们在Designmodo上使用的卡通Brew风格或风格。

全尺寸的可伸缩的形式

我不经常看到这个搜索设计，但是如果你的布局能适应的话，它肯定能很好地工作。

你可以使用可伸缩的搜索表单。 本文来源：天荣科技，转载请注明出处！如果需要营销型网站建设、微商城、小程序商城、多端小程序 请联系我们！